/* ============================================================
   Chi tiết giao diện mẫu — /kho-giao-dien-mau/{slug}
   Namespace td-*. Nạp SAU app.css nên override được các rule .theme-* cũ.

   ⚠️ VÙNG CẤM — KHÔNG ĐƯỢC ĐỔI, animation "tự cuộn ảnh dài" bám vào đây:
   JS đo  distance = chiều-cao-ảnh − chiều-cao-viewport  bằng getBoundingClientRect(),
   rồi bơm vào --theme-scroll-distance / --theme-scroll-duration cho keyframe
   `theme-image-scroll`. Đổi bất kỳ thứ nào dưới đây là lệch quãng đường cuộn:

     .theme-detail-grid   grid-template-columns / gap   (quyết định bề rộng cột trái)
     .container           max-width
     .theme-preview__stage        aspect-ratio: 1 · padding: 24px · border-width: 1px
     .theme-preview__image-viewport   width/height 100%
     .theme-lightbox__viewport    max-height: calc(100vh - 140px)
     .theme-lightbox__figure img  max-height
     @keyframes theme-image-scroll  +  .is-scroll-preview / .is-scroll-animated

   Baseline đã đo (1440px): stage viewport 662×662 → distance 1324px / 28.06s;
   lightbox → distance 2600px / 51.27s. Sau khi sửa PHẢI khớp đúng các số này.

   Vì vậy file này CHỈ đổi: màu/viền/bóng, khoảng cách DỌC, và các khối TĨNH
   (tóm tắt, tab pill, lưới ảnh, carousel liên quan, FAQ, CTA).

   Ghi chú 100vh: .theme-lightbox__viewport dùng 100vh chứ không 100dvh. Đổi sang dvh
   sẽ làm chiều cao viewport khác đi trên mobile → đổi quãng đường cuộn. An toàn hiệu
   ứng được ưu tiên hơn, nên GIỮ NGUYÊN 100vh.
   ============================================================ */

.td-page {
    background:
        linear-gradient(180deg,
            rgba(var(--site-primary-rgb, 220, 38, 38), .05) 0,
            rgba(var(--site-primary-rgb, 220, 38, 38), .02) 620px,
            rgba(var(--site-primary-rgb, 220, 38, 38), 0) 1000px),
        #ffffff;
    color: #0f172b;
}

/* Breadcrumb dùng chung (components/breadcrumb) — chỉ đổi diện mạo trên ĐÚNG trang này.
   `:has(+ .td-page)` khoanh vùng theo phần tử kế sau, không đụng pages/show. */
.breadcrumb:has(+ .td-page) {
    background: transparent;
    padding-bottom: 0;
}
.breadcrumb:has(+ .td-page) .breadcrumb__list { font-size: 13px; font-weight: 600; }
.breadcrumb:has(+ .td-page) .breadcrumb__list a { color: #64748b; }
.breadcrumb:has(+ .td-page) .breadcrumb__list a:hover { color: var(--site-primary, #dc2626); }

/* Đệm trên bị CỘNG HAI LẦN: header.css cấp padding-top 120px cho CẢ
   `main > .breadcrumb:first-child` LẪN `.theme-detail-hero` → 240px trắng thừa.
   Breadcrumb đứng trước nên nó giữ phần clearance; hero chỉ cần khoảng thở.
   Đây là thay đổi DỌC, không đụng bề rộng cột → animation không bị ảnh hưởng. */
.td-page .theme-detail-hero { padding-top: 20px !important; padding-bottom: 8px; }

/* ---- Focus ring ---- */
.td-page a:focus-visible,
.td-page button:focus-visible,
.td-page summary:focus-visible {
    outline: 3px solid rgba(var(--site-primary-rgb, 220, 38, 38), .45);
    outline-offset: 2px;
    border-radius: 8px;
}

/* =========================================================================
   1) KHUNG PREVIEW — chỉ đổi VIỀN + BÓNG. border-width GIỮ ĐÚNG 1px.
   ========================================================================= */
.td-page .theme-preview__stage {
    border: 1px solid rgba(255, 255, 255, .74);   /* vẫn 1px — chỉ đổi màu */
    box-shadow: 0 18px 44px rgba(15, 23, 43, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    border-radius: 20px;
}

.td-page .theme-preview__thumbs { margin-top: 14px; }
.td-page .theme-preview__thumb {
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 43, .08);
    transition: transform .2s ease, border-color .2s ease;
}
.td-page .theme-preview__thumb:hover { transform: translateY(-2px); }
.td-page .theme-preview__thumb.is-active { border-color: var(--site-primary, #dc2626); }
.td-page .theme-preview__arrow {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 43, .1);
    background: rgba(255, 255, 255, .7);
    color: #475569;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: color .2s ease, transform .2s ease;
}
.td-page .theme-preview__arrow:hover { color: var(--site-primary, #dc2626); transform: translateY(-1px); }

/* =========================================================================
   2) KHỐI TÓM TẮT — panel kính lớn, dính khi cuộn
   ========================================================================= */
.td-page .theme-summary {
    /* .theme-detail-grid đã có align-items: start nên sticky có chỗ trượt.
       KHÔNG đổi bề rộng cột — chỉ đổi nền/viền và cách neo theo trục dọc. */
    position: sticky;
    top: 100px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .95),
        0 0 0 1px rgba(148, 163, 184, .1),
        0 22px 50px rgba(15, 23, 43, .1);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
}
.td-page .theme-summary__badge {
    background: rgba(var(--site-primary-rgb, 220, 38, 38), .1);
    color: var(--site-primary, #dc2626);
    border-radius: 999px;
    font-weight: 800;
}
.td-page .theme-summary h1 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* Chỉ số thật (ẩn khi CMS chưa nhập) */
.td-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 10px;
    color: #94a3b8; font-size: 13px; font-weight: 700;
}
.td-rating { display: inline-flex; align-items: center; gap: 6px; }
.td-rating b { color: #0f172b; font-variant-numeric: tabular-nums; }
.td-rating small { color: #94a3b8; font-size: 12.5px; font-weight: 600; }
/* Thanh sao tô theo TỈ LỆ điểm thật — không vẽ đủ 5 sao mặc định */
.td-rating__track {
    position: relative; display: block; width: 78px; height: 14px;
    background: rgba(15, 23, 43, .13);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L7 9.4 3.2 11.8l1-4.4L.8 4.5l4.5-.3z'/%3E%3Cpath d='M23 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L23 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M39 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L39 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M55 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L55 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M71 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L71 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L7 9.4 3.2 11.8l1-4.4L.8 4.5l4.5-.3z'/%3E%3Cpath d='M23 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L23 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M39 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L39 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M55 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L55 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3Cpath d='M71 0l1.7 4.2 4.5.3-3.4 2.9 1 4.4L71 9.4l-3.8 2.4 1-4.4-3.4-2.9 4.5-.3z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0;
}
.td-rating__fill { position: absolute; inset: 0 auto 0 0; background: #f59e0b; }
.td-downloads { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.td-downloads svg { width: 15px; height: 15px; }

/* Giá — đỏ commerce (ngoại lệ color-lock, chỉ cho giá & khuyến mãi) */
.td-page .theme-summary__prices { align-items: baseline; gap: 10px; }
.td-page .theme-summary__prices strong {
    color: #e31d22;
    font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.td-page .theme-summary__prices del { color: #94a3b8; font-weight: 600; font-variant-numeric: tabular-nums; }
.td-page .theme-summary__prices span {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ed1c24, #e31d22);
    color: #fff; font-size: 12px; font-weight: 900;
    box-shadow: 0 6px 16px rgba(227, 29, 34, .32);
}

.td-page .theme-summary__features li { color: #475569; }
.td-page .theme-summary__features svg { color: var(--site-primary, #dc2626); }

.td-page .theme-btn { border-radius: 12px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.td-page .theme-btn--primary {
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    border-color: transparent; color: #fff;
    box-shadow: 0 10px 24px rgba(var(--site-primary-rgb, 220, 38, 38), .3);
}
.td-page .theme-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(var(--site-primary-rgb, 220, 38, 38), .4); }
.td-page .theme-btn--outline:hover { transform: translateY(-2px); }
.td-page .theme-summary__support strong { color: #0f172b; }

/* =========================================================================
   3) TAB — chỉ đổi diện mạo pill; cấu trúc & logic JS giữ nguyên
   ========================================================================= */
.td-page .theme-tabs-section { padding-top: 34px; }
.td-page .theme-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 6px;
    border-radius: 999px;
    width: fit-content;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 10px 26px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
.td-page .theme-tabs a {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 16px;
    border-radius: 999px; border: 0;
    color: #475569; font-size: 14px; font-weight: 700; text-decoration: none;
    transition: color .2s ease, background .2s ease;
}
.td-page .theme-tabs a:hover { color: var(--site-primary, #dc2626); background: rgba(var(--site-primary-rgb, 220, 38, 38), .06); }
.td-page .theme-tabs a.is-active { background: var(--site-primary, #dc2626); color: #fff; }

.td-page .theme-content-panel {
    margin-top: 20px;
    padding: 26px 26px 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 16px 40px rgba(15, 23, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
.td-page .theme-content-panel__pane h2 {
    margin: 0 0 14px;
    color: #0f172b; font-size: clamp(19px, 2vw, 24px); font-weight: 900; letter-spacing: -.015em;
}
.td-page .theme-content-panel__content { max-width: 72ch; color: #475569; line-height: 1.8; }

/* =========================================================================
   4) LƯỚI ẢNH + CAROUSEL LIÊN QUAN
   ========================================================================= */
.td-page .theme-section-heading h2 {
    color: #0f172b; font-size: clamp(21px, 2.2vw, 27px); font-weight: 900; letter-spacing: -.018em;
}
.td-page .theme-section-heading a { color: var(--site-primary, #dc2626); font-weight: 800; text-decoration: none; }
.td-page .theme-section-heading a:hover { text-decoration: underline; }

.td-page .theme-gallery-grid button {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 30px rgba(15, 23, 43, .08);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.td-page .theme-gallery-grid button:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15, 23, 43, .13); }

.td-page .theme-related-carousel__nav {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 43, .1);
    background: rgba(255, 255, 255, .7);
    color: #475569;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: color .2s ease, transform .2s ease, opacity .2s ease;
}
.td-page .theme-related-carousel__nav:hover:not(:disabled) { color: var(--site-primary, #dc2626); transform: translateY(-1px); }
.td-page .theme-related-carousel__nav:disabled { opacity: .4; cursor: not-allowed; }

.td-page .product-card {
    border-radius: 18px;
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 12px 30px rgba(15, 23, 43, .07), inset 0 1px 0 rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(16px) saturate(158%);
    backdrop-filter: blur(16px) saturate(158%);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.td-page .product-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15, 23, 43, .12); }
.td-page .product-card__title a { color: #0f172b; text-decoration: none; }
.td-page .product-card__title a:hover { color: var(--site-primary, #dc2626); }
.td-page .product-card__price { color: #e31d22; font-weight: 900; font-variant-numeric: tabular-nums; }
.td-page .product-card__old-price { color: #94a3b8; font-variant-numeric: tabular-nums; }

/* =========================================================================
   5) FAQ (khối tĩnh mới)
   ========================================================================= */
.td-faq {
    padding: 48px 0 8px;
    background:
        linear-gradient(180deg,
            rgba(var(--site-primary-rgb, 220, 38, 38), 0) 0,
            rgba(var(--site-primary-rgb, 220, 38, 38), .04) 100px,
            rgba(var(--site-primary-rgb, 220, 38, 38), .04) calc(100% - 100px),
            rgba(var(--site-primary-rgb, 220, 38, 38), 0) 100%),
        transparent;
}
.td-faq .faq-block { max-width: 820px; margin: 0 auto; }
.td-faq__more {
    max-width: 820px;
    margin: 20px auto 0;
    text-align: center;
    color: #64748b; font-size: 14.5px;
}
.td-faq__more a { color: var(--site-primary, #dc2626); font-weight: 800; text-decoration: none; }
.td-faq__more a:hover { text-decoration: underline; }

/* =========================================================================
   6) CTA cuối
   ========================================================================= */
.td-page .theme-cta-section { padding: 44px 0 76px; }
.td-page .theme-cta {
    border-radius: 24px;
    padding: 32px 34px;
    background:
        radial-gradient(520px 280px at 100% 0, rgba(var(--site-primary-rgb, 220, 38, 38), .16), transparent 66%),
        rgba(255, 255, 255, .66);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 22px 50px rgba(15, 23, 43, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(158%);
    backdrop-filter: blur(20px) saturate(158%);
}
.td-page .theme-cta h2 {
    color: #0f172b; font-size: clamp(21px, 2.2vw, 27px); font-weight: 900;
    letter-spacing: -.018em; text-wrap: balance;
}
.td-page .theme-cta p { color: #64748b; }
.td-page .theme-btn--light {
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    color: #fff; border-color: transparent;
    box-shadow: 0 10px 24px rgba(var(--site-primary-rgb, 220, 38, 38), .3);
}
.td-page .theme-btn--light:hover { transform: translateY(-2px); color: #fff; }

/* =========================================================================
   7) GIẢM CHUYỂN ĐỘNG
   Animation tự cuộn ảnh chạy VÔ HẠN và trước đây bỏ qua prefers-reduced-motion.
   Tắt keyframe (ảnh vẫn hiện đủ, chỉ đứng yên) — người dùng bình thường không
   thấy khác biệt nào, nên baseline không đổi.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .theme-preview__stage-button.is-scroll-preview img.is-scroll-animated,
    .theme-lightbox__figure.is-scroll-preview img.is-scroll-animated {
        animation: none !important;
    }
    .td-page * { transition: none !important; }
}

/* ---- Fallback khi trình duyệt không hỗ trợ backdrop-filter ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .td-page .theme-summary,
    .td-page .theme-tabs,
    .td-page .theme-content-panel,
    .td-page .product-card,
    .td-page .theme-preview__arrow,
    .td-page .theme-related-carousel__nav { background: rgba(255, 255, 255, .93); }
    .td-page .theme-cta { background: rgba(255, 255, 255, .95); }
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
    /* Bỏ dính trên mobile: lưới sập 1 cột nên khối tóm tắt xếp dưới ảnh, dính sẽ vướng. */
    .td-page .theme-summary { position: static; }
}