/* Tách từ index.php (CSS nội tuyến cũ) để trình duyệt cache được; HTML trang chủ không cache. */
:root {
    --brand-green: #145435;
    --brand-green-hover: #0d3b25;
    --text-heading: #3a3a3a;
    --text-body: #222222;
    --text-muted: #666666;
    --highlight-orange: #f27a24;
    --border-card: #dcdcdc;
    --border-light: #e5e7eb;
    --footer-palette-bg: #dedede;
}

:root[data-bs-theme="dark"] {
    --brand-green: var(--green, #4fa47a);
    --brand-green-hover: var(--green-hover, #5cb387);
    --text-heading: var(--ink, #eceee6);
    --text-body: var(--ink-2, #a9aba1);
    --text-muted: var(--ink-muted, #8a8c82);
    --highlight-orange: #f2934a;
    --border-card: var(--line-2, #383a30);
    --border-light: var(--line, #2c2e26);
    --footer-palette-bg: var(--surface-3, #24261e);
}

/* Bảng "Dự án" mở ra là lớp phủ toàn màn hình; để băng-rôn phiên cũ và thẻ tiến trình nổi
   đè lên nữa thì góc phải thành mớ hỗn độn (user gửi ảnh 26/09/2026). Cất cả hai trong lúc
   bảng mở — chỉ ẩn bằng CSS, phiên vẫn còn nguyên, đóng bảng là hiện lại. */
body.aoc-dock-off .session-resume-banner { display: none !important; }

.session-resume-banner {
    position: fixed; right: 20px; bottom: 20px; z-index: 2000;
    width: min(360px, calc(100vw - 40px));
    background: var(--bs-body-bg, #fff); color: var(--text-body);
    border: 1px solid var(--border-light); border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,0.28);
    padding: 16px 16px 14px; overflow: hidden;
    animation: srb-in .28s ease-out;
}
.session-resume-banner.is-leaving { animation: srb-out .2s ease-in forwards; }
@keyframes srb-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes srb-out { to { opacity: 0; transform: translateY(8px); } }
.srb-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.srb-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand-green) 14%, transparent); color: var(--brand-green); }
.srb-text { display: flex; flex-direction: column; gap: 2px; }
.srb-text strong { font-size: .92rem; color: var(--text-heading); }
.srb-text span { font-size: .82rem; color: var(--text-muted); }
.srb-actions { display: flex; justify-content: flex-end; gap: 8px; }
.srb-btn { border-radius: 50px; padding: 6px 16px; font-size: .82rem; }
.srb-btn-resume { background: var(--brand-green); color: #fff; border: none; }
.srb-btn-resume:hover { background: var(--brand-green-hover); color: #fff; }
.srb-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--border-light); }
.srb-bar-fill { display: block; height: 100%; width: 100%; background: var(--brand-green); transition: width linear; }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #eef1f4;
    color: var(--text-body);
    min-height: 100vh;
}
[data-bs-theme="dark"] body { background-color: var(--bg, #14150f); }

.aoc-page-body {
    min-height: 100vh;
    background-size: cover !important;
    background-attachment: fixed;
    padding-top: var(--header-h, 56px);
}
[data-bs-theme="dark"] .aoc-page-body {
    background: var(--bg, #14150f) !important;
}
[data-bs-theme="dark"] #heroView .wave-background { opacity: 0.06; }
[data-bs-theme="dark"] .skeleton-card-view > div[style*="background:#e2e5e8"] {
    background: var(--surface-3, #24261e) !important;
}

[data-bs-theme="dark"] .km-picker .km-filter-block { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); }
[data-bs-theme="dark"] .km-picker .km-mode-panel:not(:empty) { border-bottom-color: var(--line-2, #383a30); }
[data-bs-theme="dark"] .km-picker .km-filter-label { color: var(--ink-muted, #8a8c82); }
[data-bs-theme="dark"] .km-picker .km-brightness-tabs { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); }
[data-bs-theme="dark"] .km-picker .km-brightness-tab { color: var(--ink-2, #a9aba1); border-right-color: var(--line, #2c2e26); }
[data-bs-theme="dark"] .km-picker .km-quick-nav-label { color: var(--ink-2, #a9aba1); }
[data-bs-theme="dark"] .km-picker .km-grid .km-cell { border-color: var(--line-2, #383a30); }
[data-bs-theme="dark"] .km-picker .km-grid .km-cell-info:hover { background: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .km-picker .km-grid .km-cell.is-dark .km-cell-info:hover { background: rgba(0,0,0,.35); }

#heroView { position: relative; z-index: 1; }

.view-section { position: relative; z-index: 2; display: none; }
.view-section.active-view { display: block; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.header.bg-brand { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
[data-bs-theme="dark"] .header.bg-brand {
    background: rgba(27,28,22,0.85); border-bottom-color: var(--line, #2c2e26);
}

.step-layout-body { padding: 35px 50px 50px 50px; max-width: 1180px; margin: 0 auto; }
.step-badge-circle {
    width: 44px; height: 44px; background: var(--brand-green); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 800; flex-shrink: 0;
}
.step-card-box {
    position: relative; background: rgba(255,255,255,0.95); border: 1px solid var(--border-card);
    border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03); margin-bottom: 30px;
}
[data-bs-theme="dark"] .step-card-box {
    background: rgba(27,28,22,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.upload-showcase-box {
    width: 200px; height: 160px; border-radius: 12px; position: relative; overflow: hidden;
    cursor: pointer; flex-shrink: 0; background: #ebebeb;
}
[data-bs-theme="dark"] .upload-showcase-box { background: var(--surface-3, #24261e); }
.upload-showcase-preview {
    display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;
}
.upload-showcase-sample {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
}
.upload-showcase-overlay {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px;
    background: linear-gradient(180deg, rgba(20,84,53,0.35) 0%, rgba(10,40,26,0.65) 100%);
    border: 2px dashed rgba(255,255,255,0.7); border-radius: 12px; margin: 1px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.upload-showcase-box:hover .upload-showcase-overlay { background: linear-gradient(180deg, rgba(20,84,53,0.5) 0%, rgba(10,40,26,0.78) 100%); border-color: #fff; }
.upload-showcase-icon { font-size: 1.5rem; color: #fff; }
.upload-showcase-cta {
    background: var(--brand-green); color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 7px 16px; border-radius: 50px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.upload-showcase-cta:hover { background: var(--brand-green-hover); }
.upload-showcase-hint { font-size: 0.65rem; color: rgba(255,255,255,0.9); }
.upload-showcase-box.has-preview .upload-showcase-preview { display: block; }
.upload-showcase-box.has-preview .upload-showcase-sample { display: none; }
.upload-showcase-box.has-preview .upload-showcase-overlay {
    background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.upload-showcase-box.has-preview:hover .upload-showcase-overlay { opacity: 1; pointer-events: auto; }
.upload-showcase-box.drag-active .upload-showcase-overlay { border-color: #fff; background: rgba(20,84,53,0.75); }

/* "Đòi ảnh" (Thử combo / Lấy màu khi chưa có ảnh vào): viền đỏ + nền đỏ + rung. Overlay HIỆN LUÔN kể cả khi
   khung đang có ảnh cũ — lúc này việc cần làm là đưa ảnh vào, không phải ngắm ảnh cũ. */
.upload-showcase-box.is-demand { box-shadow: 0 0 0 3px #d93025, 0 0 0 7px rgba(217,48,37,0.18); }
.upload-showcase-box.is-demand .upload-showcase-overlay,
.upload-showcase-box.is-demand.has-preview .upload-showcase-overlay {
    opacity: 1; pointer-events: auto; border-color: #fff;
    background: linear-gradient(180deg, rgba(217,48,37,0.55) 0%, rgba(140,20,14,0.82) 100%);
}
.upload-showcase-box.is-demand .upload-showcase-cta { background: #fff; color: #b3261e; }
.upload-showcase-box.is-shaking { animation: aocUploadShake 0.6s cubic-bezier(.36,.07,.19,.97) 2; }
@keyframes aocUploadShake {
    10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) { .upload-showcase-box.is-shaking { animation: none; } }
.upload-demand-banner {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px;
    border: 1px solid #f1b5b0; border-left: 4px solid #d93025; border-radius: 10px;
    background: #fdecea; color: #8c1d18; font-size: 0.9rem; font-weight: 600;
}
.upload-demand-banner[hidden] { display: none; }
.upload-demand-banner i { font-size: 1.1rem; color: #d93025; flex: 0 0 auto; }
.upload-demand-banner span { flex: 1 1 auto; }
.upload-demand-close { border: 0; background: transparent; color: #8c1d18; font-size: 1.3rem; line-height: 1; padding: 0 4px; cursor: pointer; }
[data-bs-theme="dark"] .upload-demand-banner { background: rgba(217,48,37,0.14); border-color: rgba(217,48,37,0.45); color: #f6c1bc; }
[data-bs-theme="dark"] .upload-demand-close { color: #f6c1bc; }

/* Thư viện ảnh của khách — dải ảnh vuông cuộn ngang ngay dưới khung tải ảnh. */
.photo-lib { margin: 14px 0 6px; }
.photo-lib[hidden] { display: none; }
.photo-lib-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.photo-lib-title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text-heading); }
.photo-lib-title i { color: var(--brand-green); margin-right: 4px; }
.photo-lib-count { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.photo-lib-note { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }
.photo-lib-grid { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.photo-lib-item { position: relative; flex: 0 0 96px; scroll-snap-align: start; }
.photo-lib-use {
    display: block; width: 96px; height: 96px; padding: 0; border: 1px solid var(--line, #e3e8e4); border-radius: 10px;
    overflow: hidden; background: #f1f4f2; cursor: pointer; position: relative;
}
.photo-lib-use img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.photo-lib-use-label {
    position: absolute; inset: auto 0 0 0; padding: 4px 0; font-size: 0.66rem; font-weight: 700; color: #fff; text-align: center;
    background: rgba(20,84,53,0.85); opacity: 0; transition: opacity 0.15s ease;
}
.photo-lib-use:hover img, .photo-lib-use:focus-visible img { transform: scale(1.05); }
.photo-lib-use:hover .photo-lib-use-label, .photo-lib-use:focus-visible .photo-lib-use-label { opacity: 1; }
@media (hover: none) { .photo-lib-use-label { opacity: 1; } }
.photo-lib-del {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line, #e3e8e4);
    background: #fff; color: #5c6b61; font-size: 0.95rem; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.photo-lib-del:hover { color: #c0392b; border-color: #c0392b; }
[data-bs-theme="dark"] .photo-lib-del { background: #24261e; color: #c9d1cb; }
/* Đang đòi ảnh thì thư viện cũng là "chỗ đưa ảnh vào" — viền nhẹ để khách thấy chọn ở đây cũng được. */
.upload-demand-banner:not([hidden]) ~ .photo-lib .photo-lib-use { border-color: #d93025; }
@media (max-width: 575px) { .photo-lib-note { margin-left: 0; flex-basis: 100%; } }

.cards-row-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.architecture-card {
    position: relative; background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border-card); box-shadow: 0 4px 14px rgba(0,0,0,0.06); cursor: pointer;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.architecture-card:hover {
    transform: translateY(-5px); border-color: var(--brand-green);
    box-shadow: 0 14px 28px -10px rgba(20,84,53,0.28);
}
.architecture-card:active { transform: translateY(-2px) scale(.99); transition-duration: .1s; }
.architecture-card:focus-visible {
    outline: none; border-color: var(--brand-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 30%, transparent), 0 14px 28px -10px rgba(20,84,53,0.28);
}
.architecture-card.is-picked { border-color: var(--brand-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 25%, transparent); }
.architecture-card.is-picked::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; color: #fff; background: var(--brand-green); border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    animation: archPickPop .3s cubic-bezier(.22,1,.36,1);
}
@keyframes archPickPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
[data-bs-theme="dark"] .architecture-card {
    background: var(--surface, #1b1c16); border-color: var(--line, #2c2e26);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
[data-bs-theme="dark"] .architecture-card:hover { box-shadow: 0 14px 28px -10px rgba(0,0,0,0.5); }

.history-item-clickable { cursor: pointer; transition: box-shadow .15s ease; }
.history-item-clickable:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); }

.gs-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.gs-carousel-wrap { position: relative; }
.gs-carousel {
    display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
    padding: 4px 2px 12px; scroll-behavior: smooth; scrollbar-width: thin;
}
.gs-nav-btn {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 4;
    width: 40px; height: 40px; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.3);
    background: #fff;
}
.gs-nav-btn:hover { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.gs-nav-prev { left: -14px; }
.gs-nav-next { right: -14px; }
.style-preview-nav {
    top: 50%; transform: translateY(-50%); z-index: 3;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.style-preview-nav-prev { left: 14px; }
.style-preview-nav-next { right: 14px; }
.gs-card { flex: 0 0 auto; width: clamp(220px, 24vw, 280px); border-radius: 14px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gs-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.25); }
.gs-img-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2, #eee); overflow: hidden; }
.gs-card .card-sub { font-size: 0.65rem; letter-spacing: 0.05em; }
.gs-card .card-title { font-weight: 800; }
#step2CardsGrid .gs-card { width: 100%; }
#step2CardsGrid .gs-img-wrap { aspect-ratio: 16 / 9; }
#step2CardsGrid .card-body { padding: 0.75rem 1rem; }
#step2CardsGrid .card-title { font-size: 0.95rem; margin-bottom: 0.35rem; }
#step2CardsGrid .card-sub { margin-bottom: 0.25rem; }
#step2CardsGrid .color-triplet { height: 26px; margin-bottom: 0; }

@media (max-width: 767.98px) {
    .gs-card { width: 74vw; max-width: 280px; }
    .gs-nav-btn { width: 34px; height: 34px; }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite linear;
    border-radius: 6px;
}
[data-bs-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(90deg, #24261e 25%, #2c2e26 50%, #24261e 75%);
    background-size: 200% 100%;
}
@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line.title-line { height: 26px; width: 65%; margin-bottom: 14px; }
.skeleton-line.sub-line { height: 16px; width: 40%; margin-bottom: 12px; }
.skeleton-line.full-line { width: 100%; }
.skeleton-line.short-line { width: 85%; }

.scan-preview-box {
    position: relative; width: 170px; height: 135px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    border: 3px solid var(--gate-accent, var(--border-card)); transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.scan-preview-box.has-result { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gate-accent) 20%, transparent); }
.scan-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.scan-laser-beam {
    position: absolute; left: 0; right: 0; height: 3px; background: #2a9d8f;
    box-shadow: 0 0 10px #2a9d8f, 0 0 20px #2a9d8f; animation: laserScan 1.8s ease-in-out infinite; z-index: 5;
}
@keyframes laserScan {
    0% { top: 0%; opacity: 0.8; }
    50% { top: 98%; opacity: 1; }
    100% { top: 0%; opacity: 0.8; }
}
.spinning-ring {
    width: 65px; height: 65px; border: 3px solid rgba(255,255,255,0.4);
    border-top: 3px solid #fff; border-radius: 50%; animation: spin 1.2s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.percent-circle-box {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 74px; height: 74px; border-radius: 50%;
    background: conic-gradient(var(--highlight-orange) 0% 60%, rgba(255,255,255,0.45) 60% 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.percent-circle-box::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: rgba(30,30,30,0.85); }
.percent-num { position: relative; z-index: 2; color: #fff; font-size: 1rem; font-weight: 800; }

.btn-next-substep {
    background: var(--brand-green); color: #fff; border: none; border-radius: 50px; padding: 8px 26px;
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-next-substep:hover { background: var(--brand-green-hover); }

.hero-highlight-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 30px; }
.hero-highlight-card {
    position: relative; border-radius: 16px; overflow: hidden; padding: 18px 22px;
    min-height: 150px; display: flex; flex-direction: column; justify-content: space-between;
    color: #fff;
}
.hero-highlight-card.is-photo {
    background: #1a1a1a url('https://img.magnific.com/free-photo/armchair-green-living-room-with-copy-space_43614-910.jpg') no-repeat center center;
    background-size: cover;
}
.hero-highlight-card.is-photo::before {
    content: ''; position: absolute; inset: 0;
}
.hero-highlight-card.is-solid { background: #323332c2; }
.hero-highlight-card > * { position: relative; z-index: 1; }
.hero-highlight-eyebrow { font-size: 0.78rem; font-weight: 600; opacity: 0.9; margin-bottom: 6px; }
.hero-highlight-figure { font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.hero-highlight-figure sup { font-size: 1.15rem; font-weight: 700; }
.hero-highlight-desc { font-size: 0.85rem; opacity: 0.92; max-width: 320px; }
.hero-highlight-divider { border-top: 1px solid rgba(255,255,255,0.3); margin: 10px 0 8px; }
.hero-highlight-quote { font-size: 0.85rem; font-style: italic; line-height: 1.4; margin-bottom: 8px; }
.hero-highlight-author { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 700; }
.hero-highlight-author img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.6);
}
.hero-highlight-author span.role { font-weight: 400; opacity: 0.85; margin-left: 4px; }
.hero-highlight-watch {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #111; border: none; border-radius: 50px;
    padding: 7px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.hero-highlight-watch:hover { background: #f1f1f1; }
.hero-highlight-watch i { font-size: 0.7rem; }
[data-bs-theme="dark"] .hero-highlight-watch { background: var(--surface-2, #1f211a); color: var(--ink, #eceee6); }
[data-bs-theme="dark"] .hero-highlight-watch:hover { background: var(--surface-3, #24261e); }

@media (max-width: 767.98px) {
    .hero-highlight-row { grid-template-columns: 1fr; }
    .hero-highlight-card { min-height: 130px; }
}

#stickyActionBar {
    justify-content: space-between;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
#stickyActionBar.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
#stickyActionBar .selection-bar-actions { border-left: 0; padding-left: 0; }
#stickyActionBar .hdr-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--border-light); border-radius: 50%;
    background: #fff; color: #555; font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#stickyActionBar .hdr-btn:hover { background: var(--footer-palette-bg); border-color: var(--brand-green); color: var(--brand-green); }
#stickyBarStepActions:empty { display: none; }
[data-bs-theme="dark"] #stickyActionBar .hdr-btn { background: var(--surface-2, #1f211a); color: var(--ink-2, #a9aba1); }

#comboHeadNav .hdr-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--border-light); border-radius: 50%;
    background: #fff; color: #555; font-size: 0.85rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#comboHeadNav .hdr-btn:hover { background: var(--footer-palette-bg); border-color: var(--brand-green); color: var(--brand-green); }
#comboHeadNav .hdr-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
[data-bs-theme="dark"] #comboHeadNav .hdr-btn { background: var(--surface-2, #1f211a); color: var(--ink-2, #a9aba1); }

.gate-card-box { --gate-accent: var(--border-card); }
.gate-card-box { align-items: flex-start; }
.gate-card-box .scan-preview-box { width: 220px; height: 220px; }
.gate-head-row {
    display: flex; align-items: center; gap: 12px; margin: -2px -2px 14px;
    padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--gate-accent) 10%, transparent);
}
.gate-icon-badge {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: var(--gate-accent);
    color: #fff;
}
.gate-title-text { font-size: 1.35rem; font-weight: 800; color: var(--text-heading); line-height: 1.3; margin: 0; }
.gate-style-chip {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid color-mix(in srgb, var(--gate-accent) 30%, transparent);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
    background: #fafafa;
}
[data-bs-theme="dark"] .gate-style-chip { background: var(--surface-2, #1f211a); }
.gate-style-label { font-size: 0.7rem; color: #999; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.gate-style-value { font-size: 0.95rem; font-weight: 700; color: #222; margin-left: auto; }
[data-bs-theme="dark"] .gate-style-label { color: var(--ink-3, #63655c); }
[data-bs-theme="dark"] .gate-style-value { color: var(--ink, #eceee6); }
.gate-style-value b { color: var(--gate-accent); }
.gate-status-row { margin-bottom: 10px; }
.gate-msg-text { font-size: 0.92rem; color: var(--text-heading); font-weight: 600; line-height: 1.55; margin: 0; }
.gate-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 50px;
    color: var(--gate-accent); background: color-mix(in srgb, var(--gate-accent) 14%, transparent);
}
.gate-chip i { color: var(--gate-accent); }

@media (min-width: 992px) {
    .header .hdr-sys-toggle { display: none !important; }
    .header .hdr-sys-dropdown-menu {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-2, 8px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
        inset: auto !important;
    }
    .header .hdr-sys-dropdown-menu #hdrSysGroup {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-2, 8px) !important;
        width: auto !important;
    }
}

.header .lang-switch {
    display: inline-flex; align-items: center; padding: 3px; gap: 2px;
}
.header .lang-btn {
    min-width: 32px; height: 26px; padding: 0 9px; border: none;
    border-radius: 999px; background: transparent; font-weight: 700;
    font-size: 11.5px; letter-spacing: .3px; cursor: pointer;
}
.header .lang-switch .lang-btn.active { background: var(--brand-green); color: #fff !important; }

@media (max-width: 991px) {
    .step-layout-body { padding: 30px 20px; }
}

@media (max-width: 575.98px) {
    .step-layout-body { padding: 16px 14px 32px; }

    .header .header-right { gap: 0; }

    .step-card-box {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 16px;
        gap: 14px;
        border-radius: 12px;
        position: relative;
    }
    #uploadBox { width: 100% !important; height: 260px !important; margin: 0; }
    .scan-preview-box { width: 100% !important; height: 200px !important; margin: 0px 0 0; }
    .step-card-box > div[style*="flex:1"] { width: 100%; margin-top: 16px; }
    #skeletonTextPlaceholder { width: 100%; }
    .upload-showcase-icon { font-size: 3rem; }
    .upload-showcase-cta { font-size: 0.68rem; padding: 6px 14px; }
    .upload-showcase-hint { font-size: 0.6rem; }

    .step-card-box h2 { font-size: 1rem !important; margin-bottom: 0px !important; line-height: 1; }
    .step-card-box p { font-size: 0.82rem !important; margin-bottom: 8px !important; }
    .step-card-box > div:last-child > div[style*="color:#a32222"] { font-size: 0.8rem !important; }

    .gate-card-box {
        flex-direction: column; align-items: stretch;
        padding: 16px; gap: 14px;
        border-radius: 14px;
    }
    .gate-card-box .scan-preview-box {
        width: 100% !important; height: 200px !important; margin: 0;
    }
    .gate-card-box .scan-preview-box img { filter: none; }
    .gate-card-box > div[style*="flex:1"] {
        width: 100%; padding: 0; background: none;
    }

    .gate-head-row { gap: 10px; margin: -2px -2px 12px; padding: 10px 12px; }
    .gate-icon-badge {
        width: 32px; height: 32px; font-size: 0.85rem;
    }
    .gate-title-text { font-size: 1.1rem !important; line-height: 1.3 !important; }
    .gate-style-chip { padding: 8px 12px; margin-bottom: 10px; }
    .gate-style-label { font-size: 0.62rem; }
    .gate-style-value { font-size: 0.85rem; }
    .gate-status-row { margin-bottom: 10px; }
    .gate-msg-text { font-size: 0.82rem; font-weight: 500; }

    h3[style*="font-size:1.5rem"], #secTitleStep2 {
        font-size: 1.15rem !important;
        margin-bottom: 14px !important;
    }

    #step2CardsGrid.cards-row-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    #step2CardsGrid > div > div[style*="height:190px"] { height: 120px !important; }

    .btn-next-substep { font-size: 0.8rem; padding: 8px 16px; }

    #stickyActionBar { padding: 8px 12px; gap: 10px; flex-wrap: nowrap; max-width: 100vw; }
    #stickyBarLeft, #stickyBarRight {
        width: auto; border: 0; padding: 0; gap: 6px; flex-shrink: 0;
        justify-content: flex-start; border-top: none; padding-top: 0;
    }
    #stickyBarStepActions {
        overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    /* Vùng nút cuộn ngang (overflow-x:auto) cắt luôn hào quang của nút "Đăng" → chừa đệm để quầng sáng toả trọn,
       bù bằng margin âm để bố cục thanh hành động không đổi. */
    #stickyBarStepActions { padding: 12px 14px; margin: -12px -14px; }
    #stickyBarStepActions:has(.dropdown-menu.show) { overflow: visible; }
    #stickyBarStepActions::-webkit-scrollbar { display: none; }
    #stickyBarStepActions .bar-action-item,
    #stickyBarStepActions .btn-zalo-support { flex-shrink: 0; }

    .step-header-row { flex-wrap: wrap; }
    .step-header-row #btnGoStep3 { width: 100%; }
    .step-header-row > div:has(#btnGoStep3, #btnRetryUpload) { flex-wrap: wrap; width: 100%; }
    .step-header-row #btnRetryUpload { flex: 1 1 auto; }
}

@media (max-width: 380px) {
    #step2CardsGrid.cards-row-grid { grid-template-columns: 1fr; }
}

.step-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-heading-main { font-size: 1.6rem; font-weight: 800; color: var(--text-heading); line-height: 1.2; }
.step-subtext-note { font-size: 0.85rem; color: #444; max-width: 820px; line-height: 1.4; margin-top: 2px; }
[data-bs-theme="dark"] .step-subtext-note { color: var(--ink-2, #a9aba1); }

.aoc-step-header { margin-bottom: 14px; }
.aoc-step-header .step-header-row { margin-bottom: 0; }
.aoc-step-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.aoc-step-header-actions:empty { display: none; }

.aoc-step-progress {
    display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px;
}
.aoc-step-progress-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex: 0 0 auto; opacity: 0.55; transition: opacity 0.2s;
}
.aoc-step-progress-item.is-active, .aoc-step-progress-item.is-done { opacity: 1; }
.aoc-step-progress-dot {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700; color: #999;
    background: #eceee9; border: 2px solid transparent;
}
.aoc-step-progress-item.is-active .aoc-step-progress-dot {
    background: var(--brand-green); color: #fff;
}
.aoc-step-progress-item.is-done .aoc-step-progress-dot {
    background: var(--brand-green); color: #fff; font-size: 0.6rem;
}
[data-bs-theme="dark"] .aoc-step-progress-dot { background: var(--surface-3, #24261e); color: var(--ink-2, #a9aba1); }
.aoc-step-progress-label {
    font-size: 0.64rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}
.aoc-step-progress-item.is-active .aoc-step-progress-label { color: var(--text-heading); font-weight: 700; }
.aoc-step-progress-sep {
    flex: 1 1 auto; height: 2px; background: #eceee9; margin-top: 9px; min-width: 12px;
}
[data-bs-theme="dark"] .aoc-step-progress-sep { background: var(--surface-3, #24261e); }

@media (max-width: 575.98px) {
    .aoc-step-progress { display: none; }
}

.substep-progress-bar {
    display: flex; align-items: center; justify-content: space-between; background: #f8faf9;
    border: 1px solid #e0e8e3; border-radius: 12px; padding: 12px 20px; margin-bottom: 25px;
}
[data-bs-theme="dark"] .substep-progress-bar { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); }
.substep-item { display: flex; align-items: center; gap: 10px; cursor: pointer; opacity: 0.5; transition: all 0.2s; background: none; border: none; }
.substep-item.active { opacity: 1; font-weight: 700; }
.substep-item.completed { opacity: 0.9; }
.substep-circle-num {
    width: 28px; height: 28px; border-radius: 50%; background: #ccc;
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800;
}
.substep-item.active .substep-circle-num { background: var(--brand-green); }
.substep-item.completed .substep-circle-num { background: #2a9d8f; }
.substep-line-sep { flex: 1; height: 2px; background: #e2e8f0; margin: 0 15px; }
[data-bs-theme="dark"] .substep-circle-num { background: var(--line-2, #383a30); }
[data-bs-theme="dark"] .substep-line-sep { background: var(--line, #2c2e26); }

.substep-content-pane { display: none; }
.substep-content-pane.active-pane { display: block; animation: fadeIn 0.3s ease; }
.substep-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; }
[data-bs-theme="dark"] .substep-toolbar { border-top-color: var(--line, #2c2e26); }
.btn-prev-substep {
    background: #fff; border: 1px solid #ccc; border-radius: 50px; padding: 8px 22px;
    font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--text-heading, #3a3a3a); text-decoration: none;
}
.btn-prev-substep:hover { border-color: var(--brand-green); color: var(--brand-green); }
[data-bs-theme="dark"] .btn-prev-substep { background: var(--surface-2, #1f211a); border-color: var(--line-2, #383a30); color: var(--ink, #eceee6); }

.mode-toggle-group { border: 1.5px solid var(--brand-green); border-radius: 50px; padding: 3px; display: inline-flex; gap: 4px; margin-bottom: 20px; }
.mode-toggle-btn { border: none; background: transparent; padding: 7px 22px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; color: var(--brand-green); cursor: pointer; }
.mode-toggle-btn.active { background: var(--brand-green); color: #ffffff; }

.ref-palette-box { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 24px; }
[data-bs-theme="dark"] .ref-palette-box { background: var(--surface, #1b1c16); border-color: var(--line, #2c2e26); }
.ref-drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 180px; border: 2px dashed #c9c9c9; border-radius: 12px; padding: 24px;
    color: #777; cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease;
}
.ref-drop-zone:hover, .ref-drop-zone.drag-over { border-color: var(--brand-green); background: #f5f8f6; color: var(--brand-green); }
[data-bs-theme="dark"] .ref-drop-zone { border-color: var(--line-2, #383a30); color: var(--ink-2, #a9aba1); }
[data-bs-theme="dark"] .ref-drop-zone:hover, [data-bs-theme="dark"] .ref-drop-zone.drag-over { background: var(--surface-2, #1f211a); }
.ref-drop-text { font-size: 0.88rem; max-width: 280px; }
.ref-preview-body { display: grid; grid-template-columns: 4fr 8fr; gap: 20px; align-items: start; }
.ref-preview-frame { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #eee; margin: 0 auto; }
[data-bs-theme="dark"] .ref-preview-frame { background: var(--surface-3, #24261e); }
.ref-preview-frame img { width: 100%; height: 100%; object-fit: cover; }
.ref-preview-remove {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; cursor: pointer;
}
.ref-preview-remove:hover { background: rgba(0,0,0,0.75); }
.ref-preview-colors { min-width: 0; }
.ref-preview-meta-title { font-weight: 700; font-size: 0.9rem; color: #222; }
.ref-preview-meta-count { font-size: 0.78rem; color: #777; margin-top: 2px; margin-bottom: 12px; }
[data-bs-theme="dark"] .ref-preview-meta-title { color: var(--ink, #eceee6); }
[data-bs-theme="dark"] .ref-preview-meta-count { color: var(--ink-2, #a9aba1); }
.ref-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; }
.ref-swatch { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); }
[data-bs-theme="dark"] .ref-swatch { border-color: rgba(255,255,255,0.12); }
.ref-swatch-msg { grid-column: 1 / -1; }
.ref-preview-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; }
[data-bs-theme="dark"] .ref-preview-footer { border-top-color: var(--line, #2c2e26); }
.ref-preview-footer .btn-next-substep { width: 100%; justify-content: center; }

@media (max-width: 575.98px) {
    .ref-preview-body { grid-template-columns: 1fr; }
}

.preference-palette-row { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-bottom: 20px; }
.pref-col-title { font-size: 1.3rem; font-weight: 800; color: #111; margin-bottom: 12px; }
[data-bs-theme="dark"] .pref-col-title { color: var(--ink, #eceee6); }
.color-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 8px; }
.color-slot-box {
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; justify-content: center;
    position: relative; border: 2px solid transparent; padding: 0;
}
.color-slot-box:hover { transform: scale(1.08); border-color: var(--brand-green); }
.color-slot-box.has-color { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.color-slot-box.selected-slot { border-color: var(--brand-green); box-shadow: 0 0 8px rgba(20, 84, 53, 0.4); }
.color-slot-box.selected-slot::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-size: 0.65rem;
}

.brightness-seg-tabs { display: flex; border: 1px solid #d4d4d4; border-radius: 8px; overflow: hidden; background: #fff; max-width: 600px; margin: 15px 0; }
.brightness-seg-tab { flex: 1; text-align: center; padding: 6px 10px; font-size: 0.9rem; font-weight: 700; color: #555; cursor: pointer; border-right: 1px solid #e0e0e0; background: none; border-top: none; border-bottom: none; border-left: none; }
.brightness-seg-tab:last-child { border-right: none; }
.brightness-seg-tab.active { background: var(--brand-green); color: #fff; }
[data-bs-theme="dark"] .brightness-seg-tabs { border-color: var(--line-2, #383a30); background: var(--surface, #1b1c16); }
[data-bs-theme="dark"] .brightness-seg-tab { color: var(--ink-2, #a9aba1); border-right-color: var(--line, #2c2e26); }

.color-combos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.combo-card {
    background: #ffffff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; justify-content: space-between;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.combo-card.selected-combo { border-color: var(--brand-green); box-shadow: 0 0 12px rgba(20, 84, 53, 0.25); }
.combo-card.is-dimmed { opacity: 0.45; }
.combo-card.is-dimmed:hover { opacity: 1; }
.combo-card.is-entering { animation: comboCardIn 0.42s cubic-bezier(0.22,1,0.36,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes comboCardIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .combo-card.is-entering { animation: none; } }
.combo-card-name { font-size: 0.78rem; font-weight: 800; color: #222; margin-bottom: 2px; }
.combo-card-sub { font-size: 0.68rem; color: #777; margin-bottom: 12px; }
.color-triplet { display: flex; height: 38px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.color-triplet div { flex: 1; height: 100%; }
.btn-select-combo { width: 100%; background: var(--brand-green); color: #fff; border: none; border-radius: 6px; padding: 6px 0; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
[data-bs-theme="dark"] .combo-card { background: var(--surface, #1b1c16); border-color: var(--line, #2c2e26); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
[data-bs-theme="dark"] .combo-card-name { color: var(--ink, #eceee6); }
[data-bs-theme="dark"] .combo-card-sub { color: var(--ink-2, #a9aba1); }

.paint-locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 15px 0 25px 0; }
.location-box {
    background: #fcfcfc; border: 1px solid #e5e5e5; border-radius: 12px; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer;
}
.location-box:hover { background: #f5f8f6; border-color: var(--brand-green); }
.location-svg-icon { font-size: 2.4rem; color: var(--brand-green); margin-bottom: 8px; }
.location-box.disabled-box { cursor: default; }
.location-box.disabled-box .location-svg-icon { color: #a5a5a5; }
.assigned-color-circle { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #d0d0d0; display: inline-block; }
.location-box-label { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.location-box.disabled-box .location-box-label { color: #888; }
.location-box-add {
    background: #fafafa; border: 1.5px dashed #d5d5d5; border-radius: 12px; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
}
.location-box-add:hover { background: #f5f8f6; border-color: var(--brand-green); }
.location-add-icon { font-size: 1.4rem; color: #a5a5a5; margin-bottom: 8px; }
.location-box-add:hover .location-add-icon { color: var(--brand-green); }
.location-box-add .location-box-label { margin-bottom: 0; color: #888; }
[data-bs-theme="dark"] .location-box { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); }
[data-bs-theme="dark"] .location-box:hover { background: var(--surface-3, #24261e); }
[data-bs-theme="dark"] .assigned-color-circle { border-color: var(--line-2, #383a30); }
[data-bs-theme="dark"] .location-box-add { background: var(--surface-2, #1f211a); border-color: var(--line-2, #383a30); }
[data-bs-theme="dark"] .location-box-add:hover { background: var(--surface-3, #24261e); }

.btn-submit-paint-final {
    background: var(--brand-green); color: #fff; border: none; border-radius: 50px;
    padding: 14px 48px; font-size: 1rem; font-weight: 800; cursor: pointer; display: block;
    margin: 0 auto; box-shadow: 0 4px 14px rgba(20,84,53,0.3);
}
.btn-submit-paint-final:hover { background: var(--brand-green-hover); transform: translateY(-2px); }

@media (max-width: 991px) {
    .color-combos-grid { grid-template-columns: repeat(2, 1fr); }
    .paint-locations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .step-heading-main { font-size: 1.2rem; }
    .step-subtext-note { font-size: 0.78rem; }

    .substep-progress-bar { padding: 10px 10px; margin-bottom: 16px; }
    .substep-item span { display: none; }
    .substep-line-sep { margin: 0 6px; }

    .preference-palette-row { grid-template-columns: 1fr; gap: 18px; }
    .pref-col-title { font-size: 1.05rem; }

    .mode-toggle-btn { padding: 6px 14px; font-size: 0.78rem; }

    .brightness-seg-tab { padding: 10px 8px; font-size: 0.8rem; }

    .color-combos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .combo-card { padding: 9px; }

    .paint-locations-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .location-box { padding: 14px 10px; }
    .location-svg-icon { font-size: 1.9rem; margin-bottom: 6px; }

    .btn-submit-paint-final { width: 100%; padding: 13px 20px; }
    .btn-prev-substep, .btn-next-substep { padding: 8px 16px; font-size: 0.8rem; }
}

.result-view-wrapper {
    display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto;
    background: #ffffff; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--border-card); overflow: hidden; position: relative;
}
[data-bs-theme="dark"] .result-view-wrapper { background: var(--surface, #1b1c16); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

.result-top-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.toolbar-group-pill {
    background: #ffffff; border: 1px solid #e0e0e0; border-radius: 50px; padding: 6px 14px;
    display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: #444;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.toolbar-group-pill .tool-icon { cursor: pointer; color: #666; transition: color 0.2s; }
.toolbar-group-pill .tool-icon:hover, .toolbar-group-pill .tool-icon.active { color: var(--brand-green); }
[data-bs-theme="dark"] .toolbar-group-pill { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); color: var(--ink-2, #a9aba1); }
[data-bs-theme="dark"] .toolbar-group-pill .tool-icon { color: var(--ink-2, #a9aba1); }

/* Công tắc ngày/đêm — checkbox ẩn (#modeToggle) + track/thumb dựng
   bằng CSS thuần (không dùng :has(), tương thích rộng hơn). Icon
   sun/moon nằm 2 đầu track, thumb trắng trượt theo trạng thái
   checked. JS chỉ cần set modeToggle.checked = true/false và đọc
   'change' — không còn 2 nút rời #resultDayBtn/#resultNightBtn.
   Màu SÁNG khi ban ngày (chưa checked), đổi hẳn sang TỐI khi ban
   đêm (checked) — đúng theo file mẫu bang-mau-toi-thuong/css/
   index.css (.swdc-switch__control nền #ebe7e0 lúc chưa checked,
   #1b2c4b lúc checked), bản trước của mình để nhầm nền LUÔN tối
   bất kể mode, không đúng mẫu. */
.canvas-daynight-box { display: inline-flex; }
.swdc-switch { position: relative; display: inline-flex; cursor: pointer; }
.swdc-switch__input {
    position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.swdc-switch__control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 76px;
    height: 34px;
    padding: 0 6px;
    border-radius: 50px;
    background: #ebe7e0;
    /* border: 1px solid rgba(0,0,0,.08); */
    transition: background .2s ease, border-color .2s ease;
}
.swdc-switch__input:checked ~ .swdc-switch__control {
    background: #1b2c4b; border-color: rgba(27,44,75,.4);
}
.swdc-switch__control::before {
    content: ''; position: absolute; z-index: 2; top: 4px; left: 4px;
    width: 26px; height: 26px; border-radius: 50%; background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.swdc-switch__input:checked ~ .swdc-switch__control::before { transform: translateX(42px); }
/* Vách ngăn mảnh ở giữa track, giữa icon sun/moon — đứng yên (không
   trượt theo thumb), z-index thấp hơn thumb (::before) để không bị
   đè lên trên khi thumb trượt qua. */
.swdc-switch__control::after {
    content: ''; position: absolute; z-index: 1; top: 6px; bottom: 6px; left: 50%;
    width: 1px; background: rgba(0,0,0,.12); transform: translateX(-50%);
}
.swdc-switch__input:checked ~ .swdc-switch__control::after { background: rgba(255,255,255,.18); }
.swdc-switch__icon {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; color: #7a756e; transition: color .25s ease;
}
.swdc-switch__icon svg { width: 15px; height: 15px; fill: currentColor; }
.swdc-switch__input:checked ~ .swdc-switch__control .swdc-switch__icon--left { color: rgba(255,255,255,.6); }
.swdc-switch__input:checked ~ .swdc-switch__control .swdc-switch__icon--right { color: #f7f3ed; }
.swdc-switch__input:focus-visible ~ .swdc-switch__control { outline: 2px solid var(--brand-green); outline-offset: 2px; }

.mood-ctl.toolbar-group-pill { gap: 4px; padding: 4px 8px; }
.mood-season-btn {
    display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    padding: 0; border: 0; border-radius: 6px; background: transparent; line-height: 1;
}
.mood-season-ico { font-size: 14px; filter: grayscale(0.6) opacity(0.75); transition: filter 0.15s ease; }
.mood-season-btn:hover .mood-season-ico { filter: grayscale(0.2) opacity(0.9); }
.mood-season-btn.active { background: color-mix(in srgb, var(--brand-green) 14%, transparent); }
.mood-season-btn.active .mood-season-ico { filter: none; }
.mood-reset { border: 0 !important; background: transparent !important; color: #888; }
.mood-reset:hover { color: var(--brand-green); }
[data-bs-theme="dark"] .mood-reset { color: var(--ink-2, #a9aba1); }
/* Soi màu (color checker) — trỏ vào ảnh xem HEX + màu Kelly-Moore gần nhất, bấm để ghim pin.
   Logic: js/components/eyedropper.js. CSS này lấy từ css/bootstrap-theme.css (trang cũ color.php)
   vì index.php không nạp file đó; màu dùng biến Bootstrap để tự đổi theo sáng/tối. */
.eyedropper-ctl.toolbar-group-pill { padding: 4px 8px; }
.eyedropper-btn {
    display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    padding: 0; border: 0; border-radius: 6px; background: transparent; line-height: 1;
}
.eyedropper-btn:hover { background: color-mix(in srgb, var(--brand-green) 10%, transparent); }
.eyedropper-btn.active { background: var(--brand-green); }
.eyedropper-btn.active svg { filter: brightness(1.15); }
.eyedropper-btn:disabled, .eyedropper-btn.disabled { opacity: .4; cursor: not-allowed; }
.cmp-stage.is-eyedropper { cursor: crosshair; }
.eyedropper-tip {
    position: fixed; z-index: 2000; display: none; align-items: center; gap: 8px;
    background: rgba(20,24,22,.92); color: #fff; padding: 6px 10px; border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.3); pointer-events: none; font-size: 12px; line-height: 1.3; max-width: 220px;
}
.eyedropper-tip.is-visible { display: flex; }
.ed-tip-sw { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.ed-tip-text { display: flex; flex-direction: column; min-width: 0; }
.ed-tip-text b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ed-tip-text span { font-size: 11px; color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.color-pin {
    position: absolute; width: 18px; height: 18px; margin: -13px 0 0 -9px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45);
    padding: 0; cursor: pointer; pointer-events: auto;
}
.color-pin:hover, .color-pin:focus-visible { transform: rotate(-45deg) scale(1.15); }
.pin-popover, .pin-zone-popup {
    position: fixed; z-index: 2100; display: none; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #14211c);
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.12)); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 10px;
}
.pin-popover.is-visible, .pin-zone-popup.is-visible { display: block; }
.pin-popover { width: 220px; gap: 8px; }
.pin-popover.is-visible { display: flex; align-items: flex-start; flex-wrap: wrap; }
.pin-popover-sw { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pin-popover-body { flex: 1; min-width: 0; }
.pin-popover-body b { font-variant-numeric: tabular-nums; display: block; }
.pin-popover-actions { width: 100%; display: flex; gap: 6px; margin-top: 4px; }
.pin-popover-actions .btn { flex: 1; }
.pin-zone-popup { width: 240px; }
.pin-zone-popup-head { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pin-zone-popup-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-zone-popup-cancel { width: 100%; margin-top: 8px; }
.aoc-mini-toast {
    position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 2200; background: rgba(20,24,22,.94); color: #fff;
    padding: 9px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.3); pointer-events: none;
    opacity: 0; transition: opacity .2s ease; max-width: calc(100vw - 32px);
}
.aoc-mini-toast.is-visible { opacity: 1; }
.mood-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, background 0.25s ease; }
.mood-tint-wash { mix-blend-mode: color; }
.mood-tint-glow { mix-blend-mode: screen; }

.btn-download-result {
    background: var(--brand-green); color: #ffffff; border: none; border-radius: 8px; padding: 9px 18px;
    font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer;
    transition: background 0.2s;
}
.btn-download-result:hover { background: var(--brand-green-hover); }
.btn-download-result:disabled { opacity: 0.7; cursor: default; }

.result-status-banner {
    display: flex; align-items: center; gap: 8px; margin: 0; box-sizing: border-box; width: 100%;
    background: #fdf3dc; color: #8f6516; border: 1px solid #ebd39c;
    border-radius: 10px; padding: 12px 16px; font-size: 0.85rem; font-weight: 600;
}
.result-status-banner-close {
    margin-left: auto; background: none; border: none; color: inherit; opacity: 0.7;
    cursor: pointer; padding: 4px; line-height: 1; flex-shrink: 0;
}
.result-status-banner-close:hover { opacity: 1; }

/* Chiều cao ảnh trừ đúng phần đầu trang + hàng công cụ + thanh nổi dưới đáy: lúc vừa vào bước 4, thanh hành
   động nằm DƯỚI ảnh chứ không đè lên (bản cũ cao cứng 600px nên thanh nổi che mất đáy ảnh). */
.viewer-area { position: relative; width: 100%; height: clamp(360px, calc(100dvh - 470px), 680px); }
.cmp-stage {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    border-radius: 16px; background: #101513; border: 1px solid rgba(18,24,21,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); touch-action: none; user-select: none;
}
.cmp-stage.is-zoomed { cursor: grab; }
.cmp-stage.is-zoomed:active { cursor: grabbing; }
.cmp-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.cmp-img, .cmp-before .cmp-img, .cmp-after .cmp-img, .cmp-after .cmp-day, .cmp-after .cmp-night {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important;
    object-fit: contain !important; object-position: center !important; display: block;
    transform-origin: center center; will-change: transform; backface-visibility: hidden; pointer-events: none;
}
.cmp-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); will-change: clip-path; }
.cmp-after .cmp-img { position: absolute; inset: 0; }
.cmp-img.is-hidden { display: none; }

@media (max-width: 991px) { .viewer-area { height: 420px; } }
@media (max-width: 575.98px) { .viewer-area { height: 340px; } }

/* Thanh combo màu đã dùng để phối — hiện dưới ảnh kết quả, đọc từ
   historyColorsFromStore() (walls/trims/accent), mỗi màu 1 swatch
   tròn + tên/mã KM, bấm vào mở lại km-picker để đổi màu vùng đó
   (giống nút "Đổi màu {zone}" ở bước 3 — tái dùng jumpToHex qua
   bindLocationBox nếu cần sau này). */
/* ── BƯỚC 4 (đợt 01/10/2026): thẻ kết quả · 3 thẻ màu · thanh hành động ──
   MỘT hệ lề duy nhất (--res-pad) cho mọi con của thẻ kết quả: băng cảnh báo, hàng công cụ và khung ảnh
   luôn thẳng mép nhau. Bản cũ để băng cảnh báo margin 0 24px còn khung ảnh tràn hết thẻ → lệch 24px mỗi bên. */
.res-card {
    --res-pad: 14px;
    display: flex; flex-direction: column; gap: 10px;
    padding: var(--res-pad); box-sizing: border-box; overflow: visible;
}
.res-card > * { min-width: 0; }
.res-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; position: relative; }
.res-toolbar-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.res-toolbar-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #6b766f); }
.res-version { font-size: .78rem; font-weight: 600; color: var(--brand-green); white-space: nowrap; }
/* Tuỳ chọn hiển thị: GÓC TRÊN PHẢI, mọi khối cao 38px bo 10px. */
.res-options { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-left: auto; }
.res-options .toolbar-group-pill {
    height: 38px; border-radius: 10px; padding: 0 6px; gap: 2px;
    border: 1px solid var(--line, #e6e9e6); background: var(--surface-2, #f7f8f6); box-shadow: none;
}
.res-options .toolbar-group-pill .btn { padding: 0 6px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.res-options .toolbar-group-pill .btn:hover { background: rgba(0,0,0,.05); }
[data-bs-theme="dark"] .res-options .toolbar-group-pill .btn:hover { background: rgba(255,255,255,.07); }
.res-options-mobile { display: none; position: relative; }
.res-more-btn {
    height: 38px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line, #e6e9e6); background: var(--surface, #fff); color: var(--text-heading, #16201a);
    font-size: .82rem; font-weight: 600; cursor: pointer;
}
.res-more-btn[aria-expanded="true"] { border-color: var(--brand-green); color: var(--brand-green); }
.res-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    width: max-content; min-width: 210px; max-width: calc(100vw - 32px); max-height: min(70vh, 460px); overflow-y: auto;
    padding: 6px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e9e6);
    box-shadow: 0 14px 36px rgba(16,24,20,.18);
}
.res-menu[hidden] { display: none; }
.res-menu-label { padding: 8px 10px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2, #8a8f86); }
.res-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--text-heading, #16201a); font-size: .88rem; text-align: left; cursor: pointer;
}
.res-menu-item:hover, .res-menu-item:focus-visible { background: var(--surface-2, #f2f5f2); outline: none; }
[data-bs-theme="dark"] .res-menu, [data-bs-theme="dark"] .res-more-btn { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); color: var(--ink-1, #e8ebe6); }
[data-bs-theme="dark"] .res-menu-item { color: var(--ink-1, #e8ebe6); }

/* ── Banner "Ưu đãi hôm nay" v2 (ảnh mẫu user 02/10/2026). Nền là ẢNH THẬT (bệ đá + lon One Coat + tường xanh) đã
   xoá hết chữ; chữ, ô màu, nút dựng bằng HTML vì ô màu đổi theo từng kết quả. Mọi kích thước tính theo cqw = bề ngang
   banner, nên ở bề rộng nào bố cục cũng đúng tỉ lệ ảnh mẫu. Hiệu ứng vào chạy MỘT lần khi banner lọt khung nhìn
   (.is-in); hiệu ứng lặp chỉ chạy khi đang thấy (.is-live) và có số lần giới hạn — bài học "web lag" 01/10/2026. ── */
.res-colors.aoc-promo[hidden] { display: none; }
.aoc-promo {
    --pr-cream: #f4ede1; --pr-gold: #c9a86a; --pr-green: #2f6a43;
    position: relative; container-type: inline-size; isolation: isolate; overflow: hidden; margin: 14px 0 0;
    aspect-ratio: 1873 / 840; border-radius: 18px; color: var(--pr-cream); background: #1c3a2a;
    font-family: Montserrat, system-ui, sans-serif;
}
.aoc-promo__bg { position: absolute; inset: 0; z-index: -3; display: block; overflow: hidden; }
.aoc-promo__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.035); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
/* Tối nhẹ quanh mép phải để khối chữ nổi trên tường xanh, không đụng tới cảnh bên trái. */
.aoc-promo::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(60% 75% at 66% 48%, rgba(0, 0, 0, 0) 40%, rgba(4, 16, 9, .32) 100%); }
/* Vệt nắng quét chéo qua cả cảnh. */
.aoc-promo__ray { position: absolute; inset: -10% -30%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(255, 236, 200, .20) 47%, rgba(255, 246, 225, .32) 50%, rgba(255, 236, 200, .20) 53%, transparent 62%);
    transform: translateX(-60%); }
/* Quầng cam sau chữ "0đ" có sẵn trong ảnh (toạ độ đo trên ảnh mẫu). */
.aoc-promo__glow { position: absolute; left: 33.6%; top: 68%; width: 15cqw; aspect-ratio: 1; z-index: -1; pointer-events: none;
    transform: translate(-50%, -50%) scale(.6); opacity: 0; mix-blend-mode: screen; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 150, 70, .55) 0%, rgba(255, 120, 40, .18) 42%, rgba(255, 120, 40, 0) 70%); }
.aoc-promo__spark { position: absolute; z-index: 1; width: 1.5cqw; aspect-ratio: 1; pointer-events: none; opacity: 0; transform: scale(0);
    background: radial-gradient(circle, #fff 0 14%, transparent 15%), conic-gradient(from 45deg, transparent 0 20%, #fff8e6 21% 29%, transparent 30% 45%, #fff8e6 46% 54%, transparent 55% 70%, #fff8e6 71% 79%, transparent 80% 95%, #fff8e6 96%);
    -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%); }
.aoc-promo__spark.s1 { left: 37.4%; top: 61%; }
.aoc-promo__spark.s2 { left: 29.6%; top: 66%; width: 1.1cqw; }
.aoc-promo__spark.s3 { left: 36.2%; top: 75.5%; width: .9cqw; }

.aoc-promo__gifts-wrap { position: absolute; left: 0; width: 39.4%; top: 79.6%; text-align: center; text-shadow: 0 1px 8px rgba(40, 28, 10, .55); }
.aoc-promo__gifts { margin: 0; font-size: .98cqw; font-weight: 400; letter-spacing: .03em; color: #fffaf1; }
.aoc-promo__gift { margin: .7cqw 0 0; font-size: 1.12cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }

.aoc-promo__content { position: absolute; left: 41.3%; top: 9.6%; right: 5%; }
.aoc-promo__hot { position: relative; display: inline-flex; align-items: center; height: 2.2cqw; padding: 0 1.6cqw; overflow: hidden;
    border: 1px solid var(--pr-gold); border-radius: 999px; font-size: .95cqw; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
.aoc-promo__hot::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, rgba(233, 205, 150, .55) 50%, transparent 70%); }
.aoc-promo__title { margin: 1.35cqw 0 0; font-size: 4.7cqw; font-weight: 700; line-height: 1.02; letter-spacing: .012em; text-transform: uppercase;
    color: var(--pr-cream); white-space: nowrap;
    background: linear-gradient(100deg, var(--pr-cream) 0 42%, #fffdf6 47%, #ead7b1 50%, #fffdf6 53%, var(--pr-cream) 58% 100%);
    background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 .18cqw .35cqw rgba(0, 0, 0, .35)); }
.aoc-promo__ask { margin: 1.15cqw 0 0; font-size: 1.38cqw; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.aoc-promo__rule { display: block; width: 2.95cqw; height: 2px; margin-top: 1.65cqw; background: var(--pr-gold); transform-origin: left center; }
.aoc-promo__label { margin-top: 2cqw; font-size: 1.27cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.aoc-promo .rc-grid { display: grid; grid-template-columns: repeat(3, 14cqw); gap: .78cqw; margin-top: 1.15cqw; perspective: 900px; }
.aoc-promo .rc-grid.d-none { display: none; }
/* Ô màu như ảnh mẫu: mảng màu trên (mã · tên), dải kem dưới (tên vùng · vòng (i)). Bấm = mở chi tiết màu. */
.aoc-tile { position: relative; display: flex; flex-direction: column; height: 9.6cqw; min-width: 0; overflow: hidden; cursor: pointer;
    border-radius: .38cqw; background: #f7f2ea; text-align: left; transform-origin: 50% 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 .5cqw 1.2cqw rgba(0, 0, 0, .28);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease; }
.aoc-tile__sw { position: relative; flex: 1 1 auto; display: block; padding: 1.05cqw 1.15cqw; overflow: hidden; background: var(--sw); color: var(--sw-ink); }
/* Ánh lướt qua mảng màu khi rê chuột. */
.aoc-tile__sw::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transition: transform .6s ease; }
.aoc-tile:hover .aoc-tile__sw::after, .aoc-tile:focus-visible .aoc-tile__sw::after { transform: translateX(110%); }
.aoc-tile:hover, .aoc-tile:focus-visible { transform: translateY(-.35cqw); outline: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 1.1cqw 2cqw rgba(0, 0, 0, .38); }
.aoc-tile__code { display: block; font-size: .8cqw; font-weight: 500; letter-spacing: .08em; opacity: .85; }
.aoc-tile .rc-name { display: block; margin-top: .25cqw; font-size: 1.16cqw; font-weight: 500; line-height: 1.2; letter-spacing: .03em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aoc-tile__foot { flex: 0 0 2.45cqw; display: flex; align-items: center; justify-content: space-between; gap: .5cqw; padding: 0 1.1cqw; color: #2b2a26; }
.aoc-tile__zone { min-width: 0; font-size: .72cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aoc-tile__info { flex: 0 0 auto; width: .95cqw; height: .95cqw; display: grid; place-items: center; opacity: .7; }
.aoc-tile__info svg { width: 100%; height: 100%; }
.aoc-promo__choose { margin: 2cqw 0 0; font-size: 1.5cqw; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.aoc-promo__cta { display: flex; gap: 1.95cqw; margin-top: 1.95cqw; }
.aoc-promo__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9cqw; height: 3.26cqw; overflow: hidden;
    border-radius: 999px; font-size: 1.07cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.aoc-promo__btn.is-ghost { width: 18cqw; border: 1.5px solid rgba(244, 237, 225, .82); background: rgba(6, 20, 12, .12); color: var(--pr-cream); }
.aoc-promo__btn.is-ghost:hover { background: var(--pr-cream); color: #1d3a2a; transform: translateY(-2px); }
.aoc-promo__btn.is-main { width: 16cqw; border: 1px solid rgba(255, 255, 255, .28); background: var(--pr-green); color: #fff;
    box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .16); }
.aoc-promo__btn.is-main:hover { background: #367a4d; color: #fff; transform: translateY(-2px); box-shadow: 0 .9cqw 2.2cqw rgba(0, 0, 0, .38), 0 0 0 .35cqw rgba(47, 106, 67, .28); }
.aoc-promo__btn.is-main svg { width: 1.45cqw; height: 1.45cqw; transition: transform .25s ease; }
.aoc-promo__btn.is-main:hover svg { transform: translateX(.4cqw); }
/* Ánh quét trên nút chính: chạy bằng transform (không vẽ lại nền), vài lần sau khi banner hiện + mỗi lần rê chuột. */
.aoc-promo__btn.is-main::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; transform: translateX(-130%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); pointer-events: none; }
.aoc-promo__btn.is-main:hover::after { animation: prShine .8s ease; }

/* ---- Hiệu ứng vào: JS gắn .js-anim rồi .is-in khi lọt khung nhìn; JS hỏng thì nội dung vẫn hiện bình thường ---- */
/* Trạng thái chờ chỉ áp khi CHƯA .is-in, hoạt ảnh dùng fill "backwards": hết hoạt ảnh là phần tử về giá trị thật của nó,
   không phụ thuộc giá trị "đóng băng" cuối hoạt ảnh (Chrome headless chụp ra chữ trong suốt với kiểu opacity:0 + fill both). */
.aoc-promo.js-anim:not(.is-in) .pr-r { opacity: 0; }
.aoc-promo.js-anim .aoc-promo__rule { transform: scaleX(0); }
.aoc-promo.js-anim .aoc-promo__bg img { transform: scale(1.14); filter: brightness(.75) saturate(.85); }
.aoc-promo.is-in .aoc-promo__bg img { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.035); filter: none;
    transition: transform 1.8s cubic-bezier(.16, .8, .2, 1), filter 1.4s ease; }
.aoc-promo.is-in.is-moving .aoc-promo__bg img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.aoc-promo.is-in .pr-r { animation: prUp .9s cubic-bezier(.16, .8, .2, 1) backwards; animation-delay: var(--d, 0s); }
.aoc-promo.is-in .aoc-promo__title { animation: prUp .9s cubic-bezier(.16, .8, .2, 1) backwards, prSheen 2.2s ease-in-out both;
    animation-delay: var(--d, 0s), calc(var(--d, 0s) + .6s); }
.aoc-promo.is-in .aoc-promo__rule { transform: scaleX(1); transition: transform .9s cubic-bezier(.16, .8, .2, 1) .75s; }
.aoc-promo.is-in .aoc-tile { animation: prFlip .8s cubic-bezier(.2, .9, .25, 1.15) both; }
.aoc-promo.is-in .aoc-tile:nth-child(1) { animation-delay: .85s; }
.aoc-promo.is-in .aoc-tile:nth-child(2) { animation-delay: .97s; }
.aoc-promo.is-in .aoc-tile:nth-child(3) { animation-delay: 1.09s; }
.aoc-promo.is-in .aoc-promo__ray { animation: prRay 2.4s cubic-bezier(.4, 0, .2, 1) .35s both; }
.aoc-promo.is-in .aoc-promo__glow { animation: prGlow 1.4s ease-out 1.1s both; }
.aoc-promo.is-in .aoc-promo__spark { animation: prSpark 1.1s ease-out both; }
.aoc-promo.is-in .aoc-promo__spark.s1 { animation-delay: 1.3s; }
.aoc-promo.is-in .aoc-promo__spark.s2 { animation-delay: 1.55s; }
.aoc-promo.is-in .aoc-promo__spark.s3 { animation-delay: 1.8s; }
.aoc-promo.is-in .aoc-promo__hot::after { animation: prShine 1.2s ease .5s both; }
.aoc-promo.is-in .aoc-promo__btn.is-main::after { animation: prShine 1s ease 1.6s both; }
/* Lặp CÓ GIỚI HẠN và chỉ khi đang thấy banner: quầng "0đ" thở, sao lấp lánh, ánh quét nút chính, vệt nắng. */
.aoc-promo.is-in.is-live .aoc-promo__glow { animation: prGlow 1.4s ease-out 1.1s both, prBreath 3.2s ease-in-out 2.5s 6 alternate; }
.aoc-promo.is-in.is-live .aoc-promo__spark { animation: prSpark 1.1s ease-out both, prTwinkle 2.6s ease-in-out 3s 5; }
.aoc-promo.is-in.is-live .aoc-promo__spark.s1 { animation-delay: 1.3s, 3s; }
.aoc-promo.is-in.is-live .aoc-promo__spark.s2 { animation-delay: 1.55s, 3.9s; }
.aoc-promo.is-in.is-live .aoc-promo__spark.s3 { animation-delay: 1.8s, 4.7s; }
.aoc-promo.is-in.is-live .aoc-promo__btn.is-main::after { animation: prShine 1s ease 1.6s both, prShine 1s ease 5s 4; }
.aoc-promo.is-in.is-live .aoc-promo__btn.is-main:hover::after { animation: prShine .8s ease; }
.aoc-promo.is-in.is-live .aoc-promo__ray { animation: prRay 2.4s cubic-bezier(.4, 0, .2, 1) .35s both, prRay 3s cubic-bezier(.4, 0, .2, 1) 9s 3; }
@keyframes prUp { from { opacity: 0; transform: translateY(1.4cqw); } to { opacity: 1; transform: none; } }
@keyframes prSheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes prFlip { from { opacity: 0; transform: rotateX(-75deg) translateY(-.6cqw); } to { opacity: 1; transform: none; } }
@keyframes prRay { 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@keyframes prGlow { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes prBreath { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: .55; transform: translate(-50%, -50%) scale(.86); } }
@keyframes prSpark { 0% { opacity: 0; transform: scale(0) rotate(0); } 45% { opacity: 1; transform: scale(1.25) rotate(60deg); } 100% { opacity: 0; transform: scale(.2) rotate(110deg); } }
@keyframes prTwinkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes prShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
    .aoc-promo *, .aoc-promo *::before, .aoc-promo *::after { animation: none !important; transition: none !important; }
    .aoc-promo.js-anim .pr-r { opacity: 1; }
    .aoc-promo.js-anim .aoc-promo__rule, .aoc-promo.js-anim .aoc-promo__bg img { transform: none; filter: none; }
}
/* Điện thoại: ảnh sản phẩm (bản cắt) ở trên, khối chữ trên nền xanh ở dưới; cỡ chữ theo px vì cqw ở đây quá nhỏ. */
@media (max-width: 767.98px) {
    .aoc-promo { aspect-ratio: auto; background: linear-gradient(180deg, #1f3f2e 0%, #14291d 100%); }
    .aoc-promo__bg { position: relative; height: 300px; }
    .aoc-promo__bg img { object-position: 30% 60%; }
    .aoc-promo::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 190px, rgba(20, 41, 29, .9) 300px, #14291d 330px); }
    .aoc-promo__ray, .aoc-promo__glow, .aoc-promo__spark { display: none; }
    .aoc-promo__gifts-wrap { top: 246px; width: 100%; padding: 0 12px; }
    .aoc-promo__gifts { font-size: .74rem; }
    .aoc-promo__gift { margin-top: 4px; font-size: .82rem; }
    .aoc-promo__content { position: static; padding: 16px 16px 22px; text-align: center; }
    .aoc-promo__hot { height: 28px; padding: 0 16px; font-size: .68rem; }
    .aoc-promo__title { margin-top: 12px; font-size: clamp(1.7rem, 9vw, 2.6rem); }
    .aoc-promo__ask { margin-top: 8px; font-size: .78rem; letter-spacing: .1em; }
    .aoc-promo__rule { width: 40px; margin: 14px auto 0; transform-origin: center; }
    .aoc-promo__label { margin-top: 14px; font-size: .85rem; }
    .aoc-promo .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
    .aoc-tile { height: 118px; border-radius: 6px; }
    .aoc-tile__sw { padding: 8px 9px; }
    .aoc-tile__code { font-size: .64rem; }
    .aoc-tile .rc-name { margin-top: 2px; font-size: .8rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .aoc-tile__foot { flex-basis: 34px; padding: 0 8px; }
    .aoc-tile__zone { font-size: .5rem; letter-spacing: .08em; white-space: normal; line-height: 1.25; }
    .aoc-tile__info { width: 13px; height: 13px; }
    .aoc-promo__choose { margin-top: 16px; font-size: .86rem; letter-spacing: .1em; }
    .aoc-promo__cta { justify-content: center; gap: 10px; margin-top: 12px; }
    .aoc-promo__btn { flex: 1 1 0; height: 46px; font-size: .78rem; letter-spacing: .1em; gap: 8px; }
    .aoc-promo__btn.is-ghost, .aoc-promo__btn.is-main { width: auto; }
    .aoc-promo__btn.is-main svg { width: 18px; height: 18px; }
    .aoc-promo.is-in .pr-r { animation-name: prUpM; }
    .aoc-promo.is-in .aoc-promo__title { animation-name: prUpM, prSheen; }
    @keyframes prUpM { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* Trình duyệt chưa hiểu đơn vị cqw (Safari ≤ 15, Chrome ≤ 104 — còn khá nhiều iPhone cũ ở VN): mọi cỡ chữ/ô màu
   tính theo cqw bị bỏ qua và banner vỡ bố cục → dùng luôn bố cục xếp dọc của điện thoại (cỡ theo px), ở mọi bề rộng. */
@supports not (container-type: inline-size) {
    .aoc-promo { aspect-ratio: auto; background: linear-gradient(180deg, #1f3f2e 0%, #14291d 100%); }
    .aoc-promo__bg { position: relative; height: 300px; }
    .aoc-promo__bg img { object-position: 30% 60%; }
    .aoc-promo::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 190px, rgba(20, 41, 29, .9) 300px, #14291d 330px); }
    .aoc-promo__ray, .aoc-promo__glow, .aoc-promo__spark { display: none; }
    .aoc-promo__gifts-wrap { top: 246px; width: 100%; padding: 0 12px; }
    .aoc-promo__gifts { font-size: .74rem; }
    .aoc-promo__gift { margin-top: 4px; font-size: .82rem; }
    .aoc-promo__content { position: static; padding: 16px 16px 22px; text-align: center; }
    .aoc-promo__hot { height: 28px; padding: 0 16px; font-size: .68rem; }
    .aoc-promo__title { margin-top: 12px; font-size: clamp(1.7rem, 9vw, 2.6rem); }
    .aoc-promo__ask { margin-top: 8px; font-size: .78rem; letter-spacing: .1em; }
    .aoc-promo__rule { width: 40px; margin: 14px auto 0; transform-origin: center; }
    .aoc-promo__label { margin-top: 14px; font-size: .85rem; }
    .aoc-promo .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
    .aoc-tile { height: 118px; border-radius: 6px; }
    .aoc-tile__sw { padding: 8px 9px; }
    .aoc-tile__code { font-size: .64rem; }
    .aoc-tile .rc-name { margin-top: 2px; font-size: .8rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .aoc-tile__foot { flex-basis: 34px; padding: 0 8px; }
    .aoc-tile__zone { font-size: .5rem; letter-spacing: .08em; white-space: normal; line-height: 1.25; }
    .aoc-tile__info { width: 13px; height: 13px; }
    .aoc-promo__choose { margin-top: 16px; font-size: .86rem; letter-spacing: .1em; }
    .aoc-promo__cta { justify-content: center; gap: 10px; margin-top: 12px; }
    .aoc-promo__btn { flex: 1 1 0; height: 46px; font-size: .78rem; letter-spacing: .1em; gap: 8px; }
    .aoc-promo__btn.is-ghost, .aoc-promo__btn.is-main { width: auto; }
    .aoc-promo__btn.is-main svg { width: 18px; height: 18px; }
    .aoc-promo.is-in .pr-r { animation-name: prUpM; }
    .aoc-promo.is-in .aoc-promo__title { animation-name: prUpM, prSheen; }
    .aoc-promo__content { max-width: 640px; margin: 0 auto; }
}

/* ── Thanh hành động bước 4 (nằm trong thanh nổi #stickyActionBar) ── */
.res-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.res-act {
    height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line, #e2e6e3); background: var(--surface, #fff); color: var(--text-heading, #16201a);
    font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.res-act:hover { border-color: var(--brand-green); color: var(--brand-green); }
.res-act:disabled { opacity: .6; cursor: progress; }
.res-act i { font-size: .9em; }
.res-act.is-primary { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.res-act.is-primary:hover { background: var(--brand-green-hover); color: #fff; }
.res-act.is-icon { width: 40px; padding: 0; justify-content: center; }
.res-act.is-icon .res-more-label { display: none; }
.res-act.is-done { border-color: var(--brand-green); color: var(--brand-green); }
.res-act.is-attention { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 22%, transparent); }
.res-more .res-more-main { display: none; }   /* ba việc chính đã có nút riêng trên máy tính */
/* Thanh nổi NEO dưới thẻ kết quả (JS chuyển nó vào ngay sau #resultCard ở bước 4). */
#stickyActionBar.is-docked, #stickyActionBar.is-docked.is-visible {
    position: sticky; left: auto; right: auto; bottom: 12px; transform: none; animation: none;
    margin: 12px auto 0; z-index: 30; max-width: 100%; box-sizing: border-box;
}
@media (max-width: 575.98px) { #stickyActionBar.is-docked { width: 100%; } }
.res-more .dropdown-menu { min-width: 230px; }
[data-bs-theme="dark"] .res-act { background: var(--surface-2, #1f211a); border-color: var(--line, #2c2e26); color: var(--ink-1, #e8ebe6); }

@media (max-width: 991.98px) {
    .res-card { --res-pad: 10px; }
}
/* Điện thoại: ảnh kết quả là ưu tiên. Tuỳ chọn hiển thị → nút ⋯ góc trên phải; ba hành động → MỘT nút
   "⋯ Tuỳ chọn" trên thanh nổi; thẻ màu chuyển một cột nằm ngang (ô màu trái, chữ phải) cho gọn chiều cao. */
@media (max-width: 575.98px) {
    .res-options { display: none; }
    .res-options-mobile { display: block; }
    .res-actions > #resultRerunBtn, .res-actions > #resultBtnShareCommunity, .res-actions > #resultDownloadBtn { display: none; }
    .res-more .res-more-main { display: list-item; }
    .res-act.is-icon { width: auto; padding: 0 14px; }
    .res-act.is-icon .res-more-label { display: inline; }
}

/* ── Khoá thao tác trong lúc dựng ảnh đêm (~10 s): mọi nút mờ + không bấm được, chỉ còn banner tiến trình ── */
body.is-night-rendering { cursor: progress; }
body.is-night-rendering #resultMiniCard,
body.is-night-rendering .res-toolbar,
body.is-night-rendering #dayNightBox,
body.is-night-rendering #stickyActionBar,
body.is-night-rendering .aoc-step-progress,
body.is-night-rendering #viewerArea,
body.is-night-rendering .header { pointer-events: none; opacity: .55; transition: opacity .2s; }

/* ── Hộp xác nhận dựng ảnh đêm ── */
.aoc-night-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22,32,26,.45); backdrop-filter: blur(2px); }
.aoc-night-modal[hidden] { display: none; }
.aoc-night-modal-box { width: min(440px, 100%); background: var(--surface, #fff); color: var(--text-heading, #16201a); border-radius: 18px; padding: 24px 22px 18px; text-align: center; box-shadow: 0 18px 48px rgba(0,0,0,.25); }

/* Nút "Dự án" + chấm đếm. Chấm là thứ gọi khách quay lại sau khi họ bỏ đi làm việc khác,
   nên nó phải đọc được cả khi nút đã thu gọn còn mỗi icon (màn hình hẹp giấu .hdr-btn-label). */
.aoc-projects-btn { position: relative; }
.aoc-projects-badge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--brand-green, #315d40); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}
.aoc-projects-badge[hidden] { display: none; }

/* ── Hiệu năng (01/10/2026, user: "web lag"). Đo bằng Chrome: trang ĐỨNG YÊN vẫn tốn ~21 % CPU (điện thoại giả lập)
   vì các animation vô hạn + lớp mờ của những thứ ĐANG ẨN vẫn chạy mỗi khung hình. Ẩn thì phải dừng. ── */
.ai-pop-backdrop:not(.show) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ai-pop-backdrop:not(.show) .ai-pop-spinner,
.ai-pop-backdrop:not(.show) .ai-pop-stage-ico { animation-play-state: paused !important; }
.share-callout:not(.is-visible) .share-callout-arrow svg { animation: none; }
.share-callout:not(.is-visible) .share-callout-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Lượt phối màu trên header (01/10/2026): khách thấy NGAY còn mấy lượt trước khi bấm, thay vì bấm lượt 4
   rồi mới ăn lỗi. Một viên thuốc nhỏ + hộp giải thích khi bấm vào. ── */
.aoc-quota { position: relative; }
.aoc-quota[hidden] { display: none; }
.aoc-quota-pill { gap: 6px; font-variant-numeric: tabular-nums; }
/* Dưới 1200 px components.css ép MỌI .hdr-btn thành ô tròn 34 px chỉ-icon → icon + "3/3 lượt" bị nhồi vào ô tròn,
   chữ tràn đè (user báo 02/10/2026, ảnh điện thoại). Viên lượt là thông tin, phải đọc được: rộng theo nội dung;
   ≤575 px bỏ chữ "lượt", còn "3/3". */
@media (max-width: 74.99rem) {
    .header .hdr-btn.aoc-quota-pill { width: auto; min-width: 0; padding: 0 10px; gap: 4px; }
}
@media (max-width: 575.98px) {
    .header .hdr-btn.aoc-quota-pill { padding: 0 8px; gap: 3px; font-size: 12px; }
    .header .hdr-btn.aoc-quota-pill svg { width: 14px; height: 14px; }
    .aoc-quota-unit { display: none; }
}
@media (max-width: 360px) {
    .header .hdr-btn.aoc-quota-pill { width: auto; min-width: 0; padding: 0 7px; }
}
.aoc-quota-pill.is-empty { color: #b3261e; }
.aoc-quota-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1070; width: min(300px, calc(100vw - 32px));
    background: var(--surface, #fff); color: var(--text-heading, #16201a); border: 1px solid var(--border, #e6e9e6);
    border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 36px rgba(16,24,20,.16); font-size: .9rem; line-height: 1.5; text-align: left; }
.aoc-quota-pop[hidden] { display: none; }
.aoc-quota-pop h4 { font-size: .98rem; font-weight: 800; margin: 0 0 4px; }
.aoc-quota-pop p { margin: 0 0 8px; color: var(--ink-2, #5a6a60); }
.aoc-quota-pop .aoc-quota-next { font-weight: 700; color: var(--text-heading, #16201a); }
.aoc-quota-pop .aoc-quota-login { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px;
    padding: 9px 12px; border-radius: 10px; background: var(--brand-green, #315d40); color: #fff; font-weight: 700; text-decoration: none; }
.aoc-quota-pop .aoc-quota-login:hover { filter: brightness(1.08); color: #fff; }
[data-bs-theme="dark"] .aoc-quota-pop { background: var(--surface-2, #1f211a); border-color: #2c322d; }
/* Vừa tạo dự án: nút nảy một nhịp để mắt khách bắt được chỗ cần bấm về sau. */
@keyframes aocProjectsPop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.aoc-projects-btn.is-pop { animation: aocProjectsPop .45s ease; }
@media (prefers-reduced-motion: reduce) { .aoc-projects-btn.is-pop { animation: none; } }
[data-bs-theme="dark"] .aoc-night-modal-box { background: var(--surface-2, #1f211a); }
.aoc-night-modal-ico { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-green) 12%, transparent); color: var(--brand-green); font-size: 22px; }
/* Hộp báo LỖI dùng chung khung với hộp Đêm, chỉ đổi màu biểu tượng — đỡ thêm một bộ CSS nữa. */
.aoc-night-modal-ico.is-error { background: #fdecea; color: #b3261e; }
[data-bs-theme="dark"] .aoc-night-modal-ico.is-error { background: #3a1d1a; color: #f2b8b5; }
.aoc-night-modal-box h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.aoc-night-modal-box p { margin: 0 0 16px; color: var(--ink-2, #5a6a60); font-size: .95rem; line-height: 1.5; }
.aoc-night-modal-actions { display: flex; gap: 8px; justify-content: center; }
.aoc-night-modal-actions .btn-download-result { flex: 1 1 0; justify-content: center; }

body.is-cmp-full { overflow: hidden; }
body.is-cmp-full .header, body.is-cmp-full .stepper { display: none !important; }
body.is-cmp-full #view-4 .step-layout-body {
    position: fixed !important; inset: 0 !important; z-index: 3000; margin: 0 !important;
    padding: 0 !important; max-width: none !important; background: #0b0f0d !important;
}
body.is-cmp-full #view-4 .result-view-wrapper,
body.is-cmp-full .viewer-area {
    position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important;
    height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
body.is-cmp-full .cmp-stage { position: fixed !important; inset: 0 !important; height: 100dvh !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
body.is-cmp-full .result-status-banner, body.is-cmp-full #stickyActionBar { display: none !important; }
body.is-cmp-full .cmp-tools { z-index: 3010; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
body.is-cmp-full .result-top-toolbar {
    display: flex !important; position: fixed !important; top: max(12px, env(safe-area-inset-top)); left: 50%;
    transform: translateX(-50%); width: auto !important; max-width: calc(100vw - 20px); margin: 0 !important;
    padding: 6px 8px !important; gap: 5px !important; flex-wrap: nowrap !important;
    border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 999px !important;
    background: rgba(14,20,17,0.74) !important; backdrop-filter: blur(14px) saturate(1.3) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.45) !important; z-index: 3010; overflow-x: auto; scrollbar-width: none;
}
body.is-cmp-full .result-top-toolbar::-webkit-scrollbar { display: none; }
body.is-cmp-full .btn-download-result { display: none !important; }

#stickyBarStepActions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.bar-action-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
    color: #444444; font-size: 0.68rem; font-weight: 600; cursor: pointer; padding: 4px 10px; line-height: 1.2; transition: color 0.2s;
}
.bar-action-item i { font-size: 1rem; color: #555; }
.bar-action-item:hover, .bar-action-item:hover i { color: var(--brand-green); }
[data-bs-theme="dark"] .bar-action-item { color: var(--ink-2, #a9aba1); }
[data-bs-theme="dark"] .bar-action-item i { color: var(--ink-2, #a9aba1); }

/* Nút "Đăng" (kiểu mạng xã hội) — nút nổi bật nhất thanh hành động: nền xanh thương hiệu + hào quang nhẹ
   nhịp thở (2.8s) LUÔN TỎA cho tới khi khách đăng xong, để kéo mắt mà không chói. Tôn trọng prefers-reduced-motion. */
.bar-action-share {
    flex-direction: row; gap: 8px; padding: 9px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 800;
    background: linear-gradient(135deg, #1f8a56 0%, var(--brand-green) 100%); color: #fff; position: relative;
    box-shadow: 0 0 12px 2px rgba(46,170,105,.35), 0 4px 14px rgba(20,84,53,.30);
    animation: aocShareGlow 2.8s ease-in-out infinite; transition: transform .15s ease, filter .15s ease;
}
.bar-action-share i, .bar-action-share:hover i { color: #fff; font-size: 0.95rem; }
.bar-action-share:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.bar-action-share:active { transform: translateY(0); }
.bar-action-share:disabled { animation: none; filter: saturate(.6); cursor: progress; }
.bar-action-share.is-done {
    background: linear-gradient(135deg, #2f9e6a 0%, #1f7a4d 100%); animation: none;
    box-shadow: 0 0 0 3px rgba(46,170,105,.18), 0 4px 14px rgba(20,84,53,.25);
}
[data-bs-theme="dark"] .bar-action-share, [data-bs-theme="dark"] .bar-action-share i { color: #fff; }
@keyframes aocShareGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,170,105,0), 0 0 12px 2px rgba(46,170,105,.30), 0 4px 14px rgba(20,84,53,.28); }
    50%      { box-shadow: 0 0 0 5px rgba(46,170,105,.10), 0 0 26px 7px rgba(46,170,105,.42), 0 4px 14px rgba(20,84,53,.28); }
}

/* Thẻ mời khoe nhà — hiện khi kết quả phối màu vừa xong. Phong cách "coachmark" hiện đại: thẻ kính mờ tối giản,
   một mũi tên thanh mảnh nhún nhẹ chỉ xuống nút "Đăng", vòng sóng lan toả quanh nút. Vị trí tính bằng JS theo nút
   thật (position:fixed) nên bám đúng cả khi thanh hành động đổi kích thước. */
.share-callout {
    position: fixed; z-index: 1900; width: min(340px, calc(100vw - 24px)); left: 12px; bottom: 120px;
    opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
    transition: opacity .3s cubic-bezier(.22,.9,.3,1), transform .3s cubic-bezier(.22,.9,.3,1), visibility .3s;
    --arrow-x: 50%;
}
.share-callout.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.share-callout-card {
    position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 16px 40px 16px 16px; border-radius: 16px;
    background: rgba(255,255,255,.88); color: #14211c;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 0 0 1px rgba(16,24,20,.07), 0 2px 4px rgba(16,24,20,.04), 0 18px 44px -10px rgba(16,24,20,.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .share-callout-card { background: #fff; } }
[data-bs-theme="dark"] .share-callout-card {
    background: rgba(30,32,25,.86); color: #eceee6;
    box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 18px 44px -10px rgba(0,0,0,.6);
}
.share-callout-badge {
    flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #2aa86f 0%, var(--brand-green) 100%); color: #fff; font-size: .95rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -4px rgba(20,84,53,.5);
}
.share-callout-body { min-width: 0; }
.share-callout-eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #1f8a56; margin-bottom: 3px; }
[data-bs-theme="dark"] .share-callout-eyebrow { color: #5fd39a; }
.share-callout-title { font-weight: 700; font-size: .93rem; line-height: 1.32; letter-spacing: -.005em; }
.share-callout-text { margin-top: 5px; font-size: .8rem; line-height: 1.5; color: #5b6660; }
[data-bs-theme="dark"] .share-callout-text { color: #a9aba1; }
.share-callout-close {
    position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border: 0; border-radius: 8px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #7d8783; font-size: .8rem; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.share-callout-close:hover, .share-callout-close:focus-visible { background: rgba(16,24,20,.07); color: #14211c; outline: none; }
[data-bs-theme="dark"] .share-callout-close:hover { background: rgba(255,255,255,.1); color: #fff; }
/* Mũi tên: nằm dưới thẻ, thẳng tâm nút "Đăng"; nhún nhẹ lên-xuống theo hướng chỉ. */
/* Dãy 3 mũi tên xếp chồng (chevron) chỉ xuống nút: nét bo tròn vừa phải, gradient mint → xanh thương hiệu đậm dần
   về phía nút, viền trắng mỏng cho nổi trên mọi nền, sáng lần lượt như "làn sóng" chạy xuống → cảm giác tịnh tiến. */
.share-callout-arrow {
    position: absolute; top: 100%; left: var(--arrow-x); margin: 2px 0 0 -28px; width: 56px; height: 64px;
    pointer-events: none; filter: drop-shadow(0 5px 9px rgba(20,84,53,.30));
}
.share-callout-arrow svg { position: absolute; left: 0; width: 56px; height: 28px; overflow: visible; animation: aocChevronWave 1.7s cubic-bezier(.45,0,.35,1) infinite; }
.share-callout-arrow svg:nth-child(1) { top: 0;    animation-delay: 0s; }
.share-callout-arrow svg:nth-child(2) { top: 17px; animation-delay: .2s; }
.share-callout-arrow svg:nth-child(3) { top: 34px; animation-delay: .4s; }
@keyframes aocChevronWave {
    0%   { opacity: .16; transform: translateY(-5px); }
    32%  { opacity: 1;   transform: translateY(0); }
    62%  { opacity: 1;   transform: translateY(3px); }
    100% { opacity: .16; transform: translateY(8px); }
}
/* Vòng sóng lan toả quanh nút "Đăng" trong lúc thẻ đang mở — nhấn thêm điểm nhìn mà không chói. */
.bar-action-share.is-attention::after {
    content: ''; position: absolute; inset: -1px; border-radius: 999px; pointer-events: none;
    border: 2px solid rgba(46,170,105,.55); animation: aocShareRing 2s ease-out infinite;
}
@keyframes aocShareRing { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.32, 1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bar-action-share { animation: none; box-shadow: 0 0 18px 4px rgba(46,170,105,.38), 0 4px 14px rgba(20,84,53,.28); }
    .bar-action-share.is-attention::after { animation: none; opacity: .5; }
    .share-callout, .share-callout.is-visible { transition: none; }
    .share-callout-arrow svg { animation: none; }
    .share-callout-arrow svg:nth-child(1) { opacity: .4; } .share-callout-arrow svg:nth-child(2) { opacity: .7; } .share-callout-arrow svg:nth-child(3) { opacity: 1; }
}
.btn-zalo-support {
    background: var(--brand-green); color: #ffffff; border: none; border-radius: 50px; padding: 8px 18px;
    font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(20,84,53,0.25); transition: all 0.2s;
}
.btn-zalo-support:hover { background: var(--brand-green-hover); transform: translateY(-2px); }

#progressMount { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.ai-pop-backdrop {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(16, 21, 19, 0); opacity: 0; transition: opacity .25s var(--ease), background-color .25s var(--ease);
    pointer-events: none;
}
.ai-pop-backdrop.show { background: rgba(16, 21, 19, .42); opacity: 1; pointer-events: auto; }
.ai-pop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: min(280px, calc(100vw - 48px)); padding: 34px 24px 26px;
    border: 1px solid var(--line); border-radius: var(--radius-xl, 16px);
    background: var(--surface); box-shadow: var(--shadow-pop);
    opacity: 0; transform: scale(.92); transition: opacity .22s var(--ease), transform .22s var(--ease), border-color .2s var(--ease);
}
.ai-pop-backdrop.show .ai-pop { opacity: 1; transform: scale(1); }
.ai-pop.is-error { border-color: color-mix(in srgb, var(--red, #dc3545) 45%, var(--line)); animation: aiPopShake .4s var(--ease); }
@keyframes aiPopShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ai-pop-ring-wrap { position: relative; width: 84px; height: 84px; }
.ai-pop-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ai-pop-ring-track { fill: none; stroke: var(--line-soft); stroke-width: 6; }
.ai-pop-ring-fill { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); }
.ai-pop-ring-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--green); }
.ai-pop.bump .ai-pop-msg { animation: aiPopBump .35s var(--ease); }
@keyframes aiPopBump { 0% { opacity: .35; transform: translateX(-3px); } 100% { opacity: 1; transform: translateX(0); } }
.ai-pop-spinner {
    display: block; width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--green) 22%, transparent); border-top-color: var(--green);
    animation: aiPopSpin .8s linear infinite;
}
@keyframes aiPopSpin { to { transform: rotate(360deg); } }
.ai-pop-ring-ico.done { animation: aiPopPop .4s var(--ease); }
.ai-pop-ring-ico.done .ai-pop-check-path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: aiPopCheckDraw .35s .05s var(--ease) forwards; }
@keyframes aiPopPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes aiPopCheckDraw { to { stroke-dashoffset: 0; } }
.ai-pop-ring-ico.error { color: var(--red, #dc3545); font-weight: 800; font-size: 22px; animation: aiPopPop .3s var(--ease); }
.ai-pop.is-error .ai-pop-ring-track, .ai-pop.is-error .ai-pop-ring-fill { stroke: var(--red, #dc3545); }
.ai-pop-msg { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: center; }
.ai-pop-dots { display: inline-block; min-width: 12px; color: var(--ink-muted, var(--ink-2)); letter-spacing: 1px; }
.ai-pop-elapsed { display: block; margin-top: 4px; font-size: .72rem; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ai-pop-cancel {
    position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-muted, var(--ink-2)); transition: background .15s var(--ease), color .15s var(--ease);
}
.ai-pop-cancel:hover { background: var(--line); color: var(--ink); }

.nc-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 560px);
    display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius, 10px);
    box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,0.12));
    z-index: 1050; animation: ncPanelIn 0.18s var(--ease); color: var(--ink);
}
@keyframes ncPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nc-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.75rem 0.9rem 0.6rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.nc-panel-head strong { font-size: 0.88rem; color: var(--ink); }
.nc-mark-all { background: none; border: 0; padding: 0; font-size: 0.74rem; font-weight: 600; color: var(--green-deep); cursor: pointer; }
.nc-mark-all:hover { text-decoration: underline; }
.nc-list { overflow-y: auto; flex: 1 1 auto; }
.nc-item {
    display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background 0.15s var(--ease);
}
.nc-item:last-child { border-bottom: 0; }
.nc-item:hover, .nc-item:focus-visible { background: var(--surface-2); outline: none; }
.nc-item.is-unread { background: color-mix(in srgb, var(--green) 5%, transparent); }
.nc-item-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--ink-2);
}
.nc-item-info .nc-item-icon { color: #3b82f6; background: rgba(59,130,246,0.12); }
.nc-item-progress .nc-item-icon { color: var(--green); background: var(--green-soft); }
.nc-item-success .nc-item-icon { color: var(--green-deep); background: var(--green-soft); }
.nc-item-warning .nc-item-icon { color: #b45309; background: #fdf8ec; }
.nc-item-error .nc-item-icon { color: var(--bs-danger, #dc3545); background: #fdf0ef; }
.nc-item-icon.nc-spin svg { animation: ncSpin 1s linear infinite; }
@keyframes ncSpin { to { transform: rotate(360deg); } }
.nc-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-item-top { display: flex; align-items: center; gap: 0.4rem; }
.nc-item-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.nc-item-msg { font-size: 0.76rem; color: var(--ink-2); line-height: 1.35; }
.nc-progress-track { display: block; height: 4px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 2px; }
.nc-progress-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width 0.4s var(--ease); }
.nc-item-pct { font-size: 0.68rem; font-weight: 700; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.nc-item-time { font-size: 0.68rem; color: var(--ink-muted, var(--ink-2)); }
.nc-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 2.5rem 1rem; color: var(--ink-muted, var(--ink-2)); text-align: center; }
.nc-empty svg { opacity: 0.4; }
.nc-empty strong { font-size: 0.84rem; color: var(--ink-2); }
.nc-empty span { font-size: 0.74rem; }

.hp-item { border-radius: var(--radius) !important; border-color: var(--line) !important; box-shadow: var(--shadow-card); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); position: relative; }
.hp-item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }

/* ── Thẻ DỰ ÁN (26/09/2026) ────────────────────────────────────────────────────────────────
   Phải nằm NỘI TUYẾN ở đây: index.php KHÔNG nạp css/bootstrap-theme.css (chỗ đó chỉ còn
   color.php/landing.php dùng). Đặt nhầm vào file kia là thẻ rơi về kiểu .hp-item chung và vỡ
   bố cục — đã dính đúng một lần.
   Bố cục: THÂN = ảnh trái · tên + giờ · badge góc phải trên; CHÂN = 3 ô màu + các nút. */
/* Đợt 01/10/2026: thẻ SẠCH — không còn hàng nút dưới chân. Thao tác nằm trong menu ⋯ GÓC TRÊN PHẢI (.hp-more,
   menu nổi .hp-menu dùng chung), badge trạng thái GÓC DƯỚI PHẢI định vị tuyệt đối theo thẻ (không đẩy bố cục).
   padding-bottom của thân chừa đúng chỗ cho badge để badge không đè lên lưới màu / nhãn phong cách. */
.hp-project { padding: 0 !important; overflow: hidden; position: relative; }
.hp-project .hp-body { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 30px 12px; position: relative; }
.hp-project .hp-more {
    flex: 0 0 32px; width: 32px; height: 32px; margin: -2px -2px 0 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid transparent; background: none; color: var(--ink-2);
}
.hp-project .hp-more:hover, .hp-project .hp-more[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); color: var(--green-deep); }
/* Badge neo vào THÂN thẻ (khối luôn ở đáy khi bảng chi tiết màu đóng) — mở bảng chi tiết thì badge không đè lên chữ. */
.hp-project .hp-body > .hp-badge { position: absolute; right: 10px; bottom: 9px; z-index: 1; }
.hp-project.is-broken .hp-thumb { opacity: .45; filter: grayscale(1); }
/* Menu ⋯: MỘT phần tử nổi gắn vào <body> (thẻ có overflow:hidden nên menu đặt trong thẻ sẽ bị cắt). z-index trên
   offcanvas Bootstrap (1045) để không lặn xuống dưới bảng Dự án. */
.hp-menu {
    position: fixed; z-index: 1065; min-width: 196px; max-width: calc(100vw - 16px); padding: 6px;
    background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16,24,20,.2);
}
.hp-menu[hidden] { display: none; }
.hp-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--ink-1, #16201a); font-size: .84rem; font-weight: 500; text-align: left; cursor: pointer;
}
.hp-menu-item:hover, .hp-menu-item:focus-visible { background: var(--green-soft); color: var(--green-deep); outline: none; }
.hp-menu-item.is-danger { color: #c0392b; }
.hp-menu-item.is-danger:hover, .hp-menu-item.is-danger:focus-visible { background: color-mix(in srgb, #d64545 12%, var(--surface)); color: #c0392b; }
.hp-project .hp-thumb {
    width: 64px; height: 64px; flex: 0 0 64px;
    border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
}
.hp-project .hp-meta { display: flex; flex-direction: column; gap: 2px; }
.hp-project .hp-title { font-size: 0.82rem; line-height: 1.3; }
.hp-project .hp-sub { font-size: 0.7rem; color: var(--ink-muted, var(--ink-2)); }
.hp-project .hp-badge { font-size: 0.64rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.hp-project .hp-tag { align-self: flex-start; margin-top: 3px; font-size: 0.62rem; font-weight: 500; }

/* ── Nhóm theo ẢNH (lineage 30/09/2026): 1 ảnh gốc → N kết quả phối màu ──
   Chỉ hiện khi một ảnh có ≥2 kết quả (image_asset_id trùng). Ảnh 1 kết quả / dữ liệu cũ /
   engine trực tiếp (không có image_asset_id) render như trước, không đụng gì. */
.hp-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 2px; background: var(--surface-2); }
.hp-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.hp-group-thumb { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.hp-group-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hp-group-title { font-size: 0.8rem; font-weight: 700; }
.hp-group-count { font-size: 0.68rem; color: var(--ink-muted, var(--ink-2)); }
.hp-group-items { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.hp-group-items .hp-project { box-shadow: none !important; }

/* Ô tick: mờ lúc thường để danh sách sạch mắt, rõ khi rê vào thẻ hoặc đã chọn. */
.hp-project .hp-pick { flex: 0 0 auto; margin: 2px 0 0; opacity: 0.25; transition: opacity 0.15s var(--ease); }
.hp-project:hover .hp-pick, .hp-project.is-picked .hp-pick { opacity: 1; }
.hp-project .hp-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); }
.hp-project.is-picked { border-color: var(--green) !important; box-shadow: 0 0 0 1px var(--green), var(--shadow-card); }

/* Lưới 3 ô màu VUÔNG dưới dòng thời gian (user chốt 26/09/2026) — bấm để mở bảng chi tiết. */
.hp-project .hp-sqgrid {
    display: inline-grid; grid-template-columns: repeat(3, 22px); gap: 4px;
    margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
}
.hp-project .hp-sq {
    width: 22px; height: 22px; border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
    transition: transform 0.15s var(--ease);
}
.hp-project .hp-sq-empty { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
.hp-project .hp-sqgrid:hover .hp-sq { transform: translateY(-1px); }
.hp-project .hp-sqgrid.is-open .hp-sq { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 0 2px var(--green-ring); }

/* Bảng chi tiết 3 màu: mở ra DƯỚI chân thẻ, không đẩy bố cục thân thẻ. */
.hp-project .hp-colors-detail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    padding: 9px 12px 11px; border-top: 1px dashed var(--line); background: var(--surface-2);
}
.hp-project .hp-colors-detail[hidden] { display: none; }
.hp-project .hp-fc-txt { display: flex; flex-direction: column; min-width: 0; }
.hp-project .hp-fc-txt em {
    font-style: normal; font-size: 0.64rem; color: var(--ink-3); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tooltip cho nút chỉ có icon — dùng data-tip thay title để hiện ngay, không đợi ~1 giây của trình duyệt. */
.hp-project [data-tip] { position: relative; }
.hp-project [data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #16201a; color: #fff; font-size: 0.68rem; font-weight: 600; white-space: nowrap;
    padding: 3px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.14s var(--ease);
    z-index: 5;
    /* line-height PHẢI đặt riêng: .hp-sqgrid (nút lưới màu) có line-height:0 để thu gọn nút icon, và
       ::after KẾ THỪA giá trị đó từ nút cha — khung tooltip co lại còn đúng phần padding (6px), chữ
       tràn ra ngoài khung rồi bị nền chân thẻ nuốt mất phần dưới. Nhìn giống lỗi z-index (đã đi vòng
       qua bao nhiêu cách nâng lớp mà không ăn thua) nhưng thật ra là khung chưa đủ cao để chứa chữ —
       user gửi ảnh 26/09/2026, đo được bằng getComputedStyle: height 6px thay vì ~20px. */
    line-height: 1.4;
}
.hp-project [data-tip]:hover::after, .hp-project [data-tip]:focus-visible::after { opacity: 1; }
/* THỨ TỰ PHỦ của tooltip: phần tử đang được trỏ/focus luôn nổi lên lớp CAO NHẤT trong thẻ. Lỗi cũ (ảnh user gửi:
   tooltip "Dùng lại màu này" bị nhãn "Mediterranean" đè): tooltip nằm trong chân thẻ z-index:1, còn nhãn nằm
   trong thân thẻ z-index:2 — hai ngữ cảnh xếp lớp anh em, nên tooltip của lớp thấp KHÔNG BAO GIỜ vượt được nội
   dung lớp cao dù tự đặt z-index bao nhiêu. Thẻ nay không còn chia lớp, và quy tắc dưới đây buộc phần tử đang
   tương tác thắng mọi thứ khác trong thẻ. */
.hp-project [data-tip]:hover, .hp-project [data-tip]:focus-visible { z-index: 20; }
/* Tooltip của lưới màu đặt PHÍA DƯỚI thay vì phía trên (mặc định): ở giữa thân thẻ, phía trên đụng
   dòng tiêu đề, phía phải bị .hp-project { overflow:hidden } cắt cụt (chỉ còn một chấm đen). */
.hp-project .hp-sqgrid[data-tip]::after {
    bottom: auto; top: calc(100% + 6px);
}
@media (hover: none) { .hp-project [data-tip]::after { display: none; } }

.hp-project .hp-fc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hp-project .hp-fc i {
    width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
/* Tên màu: chữ NHỎ, thường, cắt bớt — không để thừa hưởng <b> đậm to làm ba tên dính thành một dòng. */
.hp-project .hp-fc b {
    font-size: 0.68rem; font-weight: 500; line-height: 1.25; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Thanh thao tác hàng loạt — chỉ hiện khi đã tick ít nhất một dự án. */
.hp-bulk {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 11px; margin-bottom: 8px;
    border: 1px solid var(--green); border-radius: var(--radius);
    background: var(--green-soft); font-size: 0.76rem;
}
.hp-bulk .hp-bulk-all { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-weight: 600; color: var(--green-deep); }
.hp-bulk .hp-bulk-all input { width: 15px; height: 15px; accent-color: var(--green); }
.hp-bulk .hp-bulk-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.hp-bulk .hp-bulk-acts .btn { border-radius: 999px; font-size: 0.73rem; padding: 3px 11px; }
.hp-fav-tabs .btn.active { background: var(--green-soft) !important; border-color: var(--green) !important; color: var(--green-deep) !important; }
.hp-thumb-big { width: 84px !important; height: 60px !important; }
.hp-detail { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease), margin-top 0.28s var(--ease); }
.hp-detail.is-open { max-height: 320px; opacity: 1; margin-top: 6px; }
.hp-toggle {
    display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0;
    font-size: 0.72rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.hp-toggle:hover { color: var(--green-deep); }
.hp-toggle i { font-size: 0.65rem; transition: transform 0.2s var(--ease); }
.hp-toggle.is-open i { transform: rotate(180deg); }
.hp-act-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.hp-act-icon:hover { transform: translateY(-1px); }
.hp-act-reuse:hover { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.hp-act-del:hover { background: color-mix(in srgb, #d64545 12%, var(--surface)); border-color: #d64545; color: #d64545; }
.hp-actions { justify-content: flex-end !important; }
.hp-actions .hp-tag { order: -1; margin-right: auto; }
.ce-swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); touch-action: none; }
.hp-combo-zones { margin-top: 6px; }
.hp-combo-zone { padding: 6px 8px !important; }
.hp-combo-zone:hover { transform: none; box-shadow: var(--shadow-card); }
.hp-thumb { width: 52px; height: 52px; overflow: hidden; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-thumb-combo { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.hp-sw { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.hp-sub { font-size: 0.7rem; }

@media (max-width: 480px) {
    .header .nc-root, .header #hdrNotifGroup { position: static; }
    .header #hdrNotifGroup::before { content: none; }
    .nc-panel {
        position: absolute; top: calc(var(--header-h, 56px) + 6px); left: 8px; right: 8px;
        width: auto; max-width: none; max-height: calc(100dvh - var(--header-h, 56px) - 20px);
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 575.98px) {
    .bar-action-item span { display: none; }
    .bar-action-share .share-cta-label { display: inline; }   /* nút "Đăng" giữ chữ trên điện thoại — nút quan trọng nhất, không thu thành icon trơn */
    .btn-zalo-support span { display: none; }
}

.aoc-footer {
    background: #fff; border-top: 1px solid var(--border-light);
    padding: 40px 0 20px; margin-top: 40px;
}
.aoc-footer .container-fluid { max-width: 1200px; margin: 0 auto; }
[data-bs-theme="dark"] .aoc-footer { background: var(--surface, #1b1c16); border-top-color: var(--line, #2c2e26); }
.aoc-footer-brand { font-size: 1.1rem; font-weight: 800; color: var(--brand-green); margin-bottom: 10px; }
.aoc-footer-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; max-width: 360px; }
.aoc-footer-heading {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-heading); margin-bottom: 12px;
}
.aoc-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aoc-footer-links li { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.aoc-footer-links a { color: var(--text-muted); text-decoration: none; transition: color .15s ease; }
.aoc-footer-links a:hover { color: var(--brand-green); }
.aoc-footer-links i { color: var(--brand-green); width: 14px; text-align: center; }
.aoc-footer-bottom {
    border-top: 1px solid var(--border-light); margin-top: 28px; padding-top: 16px;
    font-size: 0.78rem; color: var(--text-muted); text-align: center;
}
[data-bs-theme="dark"] .aoc-footer-bottom { border-top-color: var(--line, #2c2e26); }
/* Điện thoại: chân trang cũ cao 417 px — phần lớn là khoảng trắng (padding 40, gutter 24,
   heading 12, bottom 28+16). Ở đây khách đã cuộn hết trang, không cần khoảng thở đó. */
@media (max-width: 767.98px) {
    .aoc-footer { padding: 22px 0 12px; margin-top: 24px; }
    .aoc-footer .row { --bs-gutter-y: 14px; }
    .aoc-footer-brand { font-size: 1rem; margin-bottom: 5px; }
    .aoc-footer-desc { font-size: 0.8rem; line-height: 1.45; max-width: none; margin-bottom: 0; }
    .aoc-footer-heading { margin-bottom: 6px; }
    .aoc-footer-links { gap: 4px; }
    .aoc-footer-links li { font-size: 0.82rem; }
    .aoc-footer-bottom { margin-top: 14px; padding-top: 10px; font-size: 0.72rem; }
}

/* ── Bước 4 toàn màn hình (22/10/2026): khung kết quả + thanh hành động vừa đúng một màn hình, banner "Ưu đãi hôm nay" nằm ngay
   dưới nếp gấp và có nút gợi ý kéo xuống. 392 px = header trang + tiêu đề bước + hàng công cụ + lề thẻ + thanh nổi (đo ở 1440×900: ảnh bắt đầu ở y=295, thanh nổi cao 76). ── */
#view-4 .viewer-area { height: max(340px, calc(100dvh - 392px)); }
@media (max-width: 991px) { #view-4 .viewer-area { height: max(320px, calc(100dvh - 330px)); } }
.res-scroll-cue {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    background: rgba(20, 84, 53, .92); color: #fff; font: 700 .72rem/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.res-scroll-cue[hidden] { display: none; }
.res-scroll-cue svg { animation: resCueBounce 1.5s ease-in-out infinite; }
.res-scroll-cue:hover { background: #1b6b44; }
/* Máy tính: thẻ mời đăng cộng đồng ghim giữa đáy khung ảnh → nút gợi ý dạt sang trái, sau nhãn kích thước ảnh. */
@media (min-width: 992px) { .res-scroll-cue { left: 96px; transform: none; } }
.res-scroll-cue { white-space: nowrap; }
@media (max-width: 575.98px) { .res-scroll-cue { font-size: .66rem; padding: 8px 14px; letter-spacing: .08em; } }
@keyframes resCueBounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .res-scroll-cue svg { animation: none; } }
body.is-cmp-full .res-scroll-cue { display: none !important; }