:root {
    --ink-black: #1a1a1a;
    --ink-dark: #333333;
    --ink-muted: #4a4a4a;
    --white-pure: #ffffff;
    --white-warm: #fafaf8;
    --white-cool: #f5f7f8;
    --gray-strong: #5a5a5a;
    --gray-mid: #808080;
    --gray-soft: #a0a0a0;
    --gray-border: #d4d4d4;
    --gray-ghost: #eaeaea;
    --navbar-height: 82px;
    --silver: #b0b0b0;
    --silver-light: #c0c0c0;
    --silver-lighter: #d0d0d0;
    --silver-dark: #969696;
    --silver-darker: #808080;
    --silver-bg: #f0f0f0;
    --silver-shimmer: linear-gradient(135deg,#d8d8d8 0%,#a8a8a8 50%,#d0d0d0 100%);
    --bs-primary: var(--silver);
    /* Chữ mờ (meta bài viết, nhãn nhỏ, số đếm) - TỐI ĐỦ để đạt WCAG AA 4.5:1 trên MỌI nền dùng nó.
       Đo thật: nền trắng 4.97 · nền shop #fafaf8 4.76 · nền chip #eef6ff 4.56.
       TRƯỚC 2026-09-25 dùng #7a828c/#9aa1aa/#b0b0b0/#a0a0a0/#919191 (2.17-3.89) ⇒ Lighthouse
       `color-contrast` FAIL ở trang bài viết + cửa hàng. */
    --fe-muted-strong: #667085;
    --bs-primary-rgb: 176,176,176;
    --bs-secondary: var(--gray-mid);
    --bs-secondary-rgb: 128,128,128;
    --bs-dark: var(--ink-black);
    --bs-dark-rgb: 26,26,26;
    --bs-light: var(--white-cool);
    --bs-light-rgb: 245,247,248;
    --bs-body-bg: var(--white-pure);
    --bs-body-color: var(--ink-black);
    --bs-border-color: var(--gray-border);
    --bs-link-color: var(--ink-black);
    --bs-link-hover-color: var(--ink-dark);
    --bs-heading-color: var(--ink-black);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-sm: 0.25rem;
    --fe-container: 1140px;
    --fe-gutter: 12px;
    --fe-section-y: 72px;
    --fe-section-y-sm: 48px;
    --fe-space-1: 4px;
    --fe-space-2: 8px;
    --fe-space-3: 12px;
    --fe-space-4: 16px;
    --fe-space-5: 24px;
    --fe-space-6: 32px;
    --fe-space-7: 48px;
    --fe-space-8: 72px;
    --fe-fs-1: 12px;
    --fe-fs-2: 13px;
    --fe-fs-3: 14px;
    --fe-fs-4: 16px;
    --fe-fs-5: 20px;
    --fe-fs-6: 24px;
    --fe-fs-display-1: 1.6rem;
    --fe-fs-display-2: 2rem;
    --fe-fs-display-3: 2.4rem;
    --fe-ico-nav: 18px;
    --fe-ico-feature: 1.4rem;
    --fe-ico-bullet: 1.1rem;
    --fe-ico: 1em;
    --fe-ico-sm: 0.85em;
    --fe-ico-lg: 1.35em;
    --fe-ico-xl: 1.8em;
    --fe-ico-stroke: 1.8;
    --fe-radius-sm: 6px;
    --fe-radius: 8px;
    --fe-radius-lg: 12px;
    --fe-shadow: 0 1px 2px rgba(0,0,0,.05);
    --fe-shadow-lg: 0 8px 24px rgba(0,0,0,.08);
    --fe-shadow-float: 0 18px 48px rgba(26,26,26,.12);
    --fe-shadow-media: 0 24px 60px rgba(0,0,0,.35);
    --fe-shadow-btn: 0 6px 16px rgba(26,26,26,.12);
    --fe-overlay-hero: linear-gradient(to right,rgba(0,0,0,.75) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.25) 100%);
    --fe-overlay-card: linear-gradient(to top,rgb(0 0 0 / 55%) 0%,rgba(0,0,0,.15) 50%,transparent 100%);
    --fe-overlay-card-hover: linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.05) 100%);
    --fe-overlay-dot: rgba(255,255,255,.4);
    --fe-btn-h-sm: 40px;
    --fe-btn-h-md: 48px;
    --fe-btn-h-lg: 56px;
    --fe-btn-px-md: 1.25rem;
    --fe-btn-gap: .5rem;
    --fe-btn-ring: 2px;
    --fe-btn-border: 1px solid var(--gray-border);
    --fe-btn-border-invert: 1px solid rgba(255,255,255,.45);
    --fe-ease: cubic-bezier(.4,0,.2,1);
    --fe-dur: .2s;
    --fe-dur-zoom: .4s;
    --fe-gutter-sm: 10px;
    --fe-z-nav: 1030;
    --fe-z-drawer: 1055;
    --fe-z-modal: 1060;
    --fe-z-toast: 1070;
    --fe-z-loader: 99999
}

body {
    font-family: var(--site-font, "Space Grotesk", "Segoe UI",system-ui,sans-serif);
    color: var(--ink-black);
    background: var(--white-pure);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

.hero-full {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    height: calc(100svh - var(--navbar-height));
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center
}

/* Header TRONG SUỐT (Giao diện › Header): header nằm ĐÈ lên hero ⇒ hero lấy ĐÚNG 1 màn hình
   (không trừ chiều cao header như trường hợp header nằm trong luồng ở trên). */
body.has-header-overlay .hero-full {
    height: 100vh;
    height: 100svh
}

/* Chừa chỗ cho header đang đè lên ⇒ h1/nút/điểm slider không bị che. */
body.has-header-overlay .hero-full-content-wrap {
    padding-top: var(--navbar-height)
}

.hero-full-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.hero-full-bg,.hero-full-bg .lSSlideOuter,.hero-full-bg .lSSlideWrapper,.hero-full-bg .hero-full-carousel,.hero-full-bg .hero-full-item,.hero-full-bg .hero-full-slide {
    height: 100% !important
}

.hero-full-carousel.lSFade {
    padding-bottom: 0 !important
}

.hero-full-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center
}

.hero-full-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

@media (max-width: 767.98px) {
    .hero-full-slide {
        background-image: var(--hero-bg-sm,var(--hero-bg))
    }
}

/* PARALLAX ẢNH BANNER (Giao diện › Trang chủ › "Parallax ảnh banner" - bật/tắt, MẶC ĐỊNH BẬT).
   Ảnh phóng nhẹ `scale(1.08)` để khi trôi không hở mép; TẮT ⇒ ảnh về scale 1 (KHÔNG cắt ảnh).
   Công thức ở `main.js` đẩy ảnh XUỐNG (trôi chậm hơn nội dung - kiểu ancuong.com) nên phần mép
   thừa luôn nằm TRÊN khung nhìn ⇒ không bao giờ thấy khoảng trắng ở đáy hero. */
.hero-full[data-hero-parallax="1"] .hero-full-slide {
    will-change: transform;
    transform: translate3d(0,var(--hero-parallax,0px),0) scale(1.08);
    transform-origin: center center
}

@media (prefers-reduced-motion: reduce) {
    .hero-full[data-hero-parallax="1"] .hero-full-slide {
        transform: none
    }
}

.hero-full-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--fe-overlay-hero)
}

.hero-full-content-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(1.25rem, 7vh, 4rem)
}

.hero-full-content-wrap > .container > .row {
    align-items: flex-end;
    padding-bottom: 0
}

.hero-full-content {
    width: 100%;
    align-self: flex-end
}

.hero-full-content h1 {
    line-height: 1.25
}

@keyframes heroContentIn {
    from {
        opacity: .22;
        transform: translate3d(0,22px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.hero-full-location {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: var(--fe-space-4);
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.18);
    color: var(--white-pure);
    font-size: var(--fe-fs-2);
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    backdrop-filter: blur(6px)
}

.hero-full-location-ico {
    width: 1rem;
    height: 1rem;
    color: var(--white-pure)
}

.hero-full-heading {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
    margin-bottom: var(--fe-space-4);
    letter-spacing: -0.02em;
    max-width: 720px;
}

.hero-full-sub {
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: var(--fe-space-6);
    max-width: 720px
}

.hero-full-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-3)
}

.hero-full-content.is-in .hero-full-heading,.hero-full-content.is-in-right .hero-full-heading,.hero-full-content.is-in-left .hero-full-heading,
.hero-full-content.is-in .hero-full-location,.hero-full-content.is-in-right .hero-full-location,.hero-full-content.is-in-left .hero-full-location,
.hero-full-content.is-in .hero-full-sub,.hero-full-content.is-in-right .hero-full-sub,.hero-full-content.is-in-left .hero-full-sub,
.hero-full-content.is-in .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-right .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-left .hero-full-actions > .hero-full-btn {
    opacity: .22;
    will-change: transform,opacity;
    animation: heroContentIn calc(var(--hero-speed,1200ms) * .58) cubic-bezier(.22,.61,.36,1) both
}

.hero-full-content.is-in .hero-full-location,.hero-full-content.is-in-right .hero-full-location,.hero-full-content.is-in-left .hero-full-location {
    animation-delay: .02s
}

.hero-full-content.is-in .hero-full-heading,.hero-full-content.is-in-right .hero-full-heading,.hero-full-content.is-in-left .hero-full-heading {
    animation-delay: .08s
}

.hero-full-content.is-in .hero-full-sub,.hero-full-content.is-in-right .hero-full-sub,.hero-full-content.is-in-left .hero-full-sub {
    animation-delay: .18s
}

.hero-full-content.is-in .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-right .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-left .hero-full-actions > .hero-full-btn {
    animation-delay: .30s
}

.hero-full-content.is-in .hero-full-actions > .hero-full-btn:nth-child(2),.hero-full-content.is-in-right .hero-full-actions > .hero-full-btn:nth-child(2),.hero-full-content.is-in-left .hero-full-actions > .hero-full-btn:nth-child(2) {
    animation-delay: .40s
}

.hero-full-content.is-in .hero-full-actions > .hero-full-btn:nth-child(3),.hero-full-content.is-in-right .hero-full-actions > .hero-full-btn:nth-child(3),.hero-full-content.is-in-left .hero-full-actions > .hero-full-btn:nth-child(3) {
    animation-delay: .50s
}

.hero-full-btn,.material-btn,.solutions-hotline,.blog-panel-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fe-btn-gap);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    transition: color var(--fe-dur) var(--fe-ease),background-color var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease),transform var(--fe-dur) var(--fe-ease)
}

.hero-full-btn,.material-btn {
    min-height: var(--fe-btn-h-md);
    padding: 0 var(--fe-btn-px-md);
    font-size: var(--fe-fs-4);
    border-radius: 999px
}

.hero-full-btn:hover,.material-btn:hover {
    box-shadow: var(--fe-shadow-btn);
    transform: translateY(-1px)
}

.hero-full-btn:active,.material-btn:active,.hero-full-btn-outline:active,.material-btn-outline:active {
    transform: translateY(0);
    box-shadow: none
}

.hero-full-btn:focus-visible,.material-btn:focus-visible {
    outline: var(--fe-btn-ring) solid var(--white-pure);
    outline-offset: 2px
}

.hero-full-btn-primary,.material-btn-primary {
    background: var(--white-pure);
    color: var(--ink-black);
    border: var(--fe-btn-border)
}

.hero-full-btn-primary:hover,.material-btn-primary:hover {
    background: var(--ink-black);
    color: var(--white-pure);
    border-color: var(--ink-black)
}

.hero-full-btn-outline,.material-btn-outline {
    background: transparent;
    color: var(--white-pure);
    border: var(--fe-btn-border-invert)
}

.hero-full-btn-outline:hover,.material-btn-outline:hover {
    background: var(--white-pure);
    color: var(--ink-black);
    border-color: var(--white-pure)
}

.hero-full .lSPager.lSpg {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    margin: 0;
    padding: 0;
    pointer-events: auto
}

/* Chấm slider hero: vùng bấm ≥ 24x24 (a11y `target-size`/`touch target`) nhưng chấm NHÌN vẫn 10px
   nhờ ::before. ⚠️ KHÔNG mở rộng vùng bấm bằng `inset` âm trên pseudo - axe đo bounding box của
   CHÍNH thẻ <a> nên vẫn báo thiếu. */
.hero-full .lSPager.lSpg>li {
    padding: 0 2px;
    cursor: pointer
}

.hero-full .lSPager.lSpg>li>a {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    display: block
}

.hero-full .lSPager.lSpg>li>a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--fe-overlay-dot);
    transition: background var(--fe-dur) var(--fe-ease),transform var(--fe-dur) var(--fe-ease)
}

/* ⚠️ Thư viện lightSlider có rule MẠNH HƠN cho chấm đang chọn / rê chuột:
   `.lSSlideOuter .lSPager.lSpg>li.active a{background-color:#428bca}` = specificity (0,4,2), CAO HƠN
   rule nền của ta (0,3,2) ⇒ chấm đang chọn bị tô XANH DƯƠNG của thư viện (đo thật 2026-09-25:
   bg = rgb(66,139,202)). Phải khai lại ở CÙNG cấp specificity mới thắng; nền để trong suốt vì
   chấm nhìn thấy do ::before vẽ. */
.hero-full .lSPager.lSpg>li.active>a,
.hero-full .lSPager.lSpg>li:hover>a,
.hero-full .lSPager.lSpg>li>a:focus {
    background: transparent
}

.hero-full .lSPager.lSpg>li.active>a::before,.hero-full .lSPager.lSpg>li:hover>a::before {
    background: #fff
}

.hero-full .lSPager.lSpg>li.active>a::before {
    transform: scale(1.3)
}

@keyframes heroContentInFromRight {
    from {
        opacity: 0;
        transform: translateX(40px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes heroContentInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-40px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.hero-full-content.is-in-right {
    animation: heroContentInFromRight var(--hero-speed,1200ms) ease both
}

.hero-full-content.is-in-left {
    animation: heroContentInFromLeft var(--hero-speed,1200ms) ease both
}

@media (prefers-reduced-motion: reduce) {
    .hero-full-content.is-in,.hero-full-content.is-in-right,.hero-full-content.is-in-left,.hero-full-content.is-in .hero-full-heading,.hero-full-content.is-in-right .hero-full-heading,.hero-full-content.is-in-left .hero-full-heading,.hero-full-content.is-in .hero-full-sub,.hero-full-content.is-in-right .hero-full-sub,.hero-full-content.is-in-left .hero-full-sub,.hero-full-content.is-in .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-right .hero-full-actions > .hero-full-btn,.hero-full-content.is-in-left .hero-full-actions > .hero-full-btn {
        animation: none
    }
}

@media (max-width: 991.98px) {
    .hero-full {
        height: 65vh;
        min-height: 450px
    }

    .hero-full-slide {
        height: 100%;
        min-height: unset
    }

    .hero-full-overlay {
        background: rgba(0,0,0,0.6)
    }

    .hero-full-content {
        max-width: 100%;
        text-align: center
    }

    .hero-full-sub {
        max-width: 100%
    }

    .hero-full-actions {
        justify-content: center
    }

    .hero-full-btn {
        padding: 0.7rem 1.5rem;
        font-size: var(--fe-fs-3)
    }
}

@media (max-width: 767.98px) {
    .hero-full {
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: unset
    }

    .hero-full-slide {
        height: 100%;
        min-height: unset
    }

    .hero-full-heading {
        font-size: var(--fe-fs-display-1)
    }

    .hero-full-actions {
        flex-direction: row;
        gap: var(--fe-space-2);
        justify-content: center
    }

    .hero-full-btn {
        padding: 0.6rem 1.25rem;
        font-size: var(--fe-fs-3);
        width: auto;
        max-width: none
    }
}

.btn,.form-control,.form-select {
    font-family: inherit;
    border-radius: var(--bs-border-radius)
}

.btn {
    border-radius: var(--bs-border-radius) !important
}

h1,.h1 {
    line-height: 1.2
}

h2,.h2 {
    line-height: 1.25;
    font-weight: 500
}

h3,.h3 {
    line-height: 1.3
}

h4,.h4,h5,.h5,h6,.h6 {
    line-height: 1.35
}

.py-6 {
    padding-top: var(--fe-section-y) !important;
    padding-bottom: var(--fe-section-y) !important
}

.pt-6 {
    padding-top: var(--fe-section-y) !important
}

.pb-6 {
    padding-bottom: var(--fe-section-y) !important
}

@media (max-width: 767.98px) {
    .py-6 {
        padding-top: var(--fe-section-y-sm) !important;
        padding-bottom: var(--fe-section-y-sm) !important
    }

    .pt-6 {
        padding-top: var(--fe-section-y-sm) !important
    }

    .pb-6 {
        padding-bottom: var(--fe-section-y-sm) !important
    }
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out,visibility 0s linear .5s;
    z-index: 99999
}

#spinner.show {
    transition: opacity .5s ease-out,visibility 0s linear 0s;
    visibility: visible;
    opacity: 1
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99
}

.btn {
    transition: .5s;
    font-weight: 600;
    letter-spacing: 0.3px
}

.btn-primary {
    background: var(--silver);
    border-color: var(--ink-black);
    color: var(--white-pure);
}

.btn-primary:hover,.btn-primary:focus {
    background: var(--silver-dark);
    border-color: var(--silver-dark);
    color: #ffffff
}

.btn-primary:active {
    background: var(--silver-darker) !important;
    border-color: var(--silver-darker) !important
}

.btn-outline-primary {
    border-color: var(--silver);
    color: var(--silver)
}

.btn-outline-primary:hover {
    background: var(--silver);
    border-color: var(--silver);
    color: #ffffff
}

.btn-shimmer {
    background: var(--silver-shimmer);
    background-size: 200% 100%;
    animation: shimmer 3s ease infinite;
    border: none;
    color: var(--ink-black);
    font-weight: 700
}

.btn-shimmer:hover {
    animation: none;
    background: var(--silver-lighter);
    color: var(--ink-black)
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.btn-square {
    width: 40px;
    height: 40px
}

.btn-sm-square {
    width: 36px;
    height: 36px
}

.btn-lg-square {
    width: 48px;
    height: 48px
}

.btn-square,.btn-sm-square,.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal
}

.sticky-gallery {
    position: sticky;
    top: 100px;
    align-self: flex-start
}

@media (max-width: 991.98px) {
    .sticky-gallery {
        position: static
    }
}

.sticky-top {
    top: 0;
    transition: box-shadow 0.3s ease
}

/* Cuộn quán tính (Phase 1 - Lenis; JS: `assets/js/scroll-effect.js`, bật/tắt ở `Giao diện › Hiệu ứng`).
   `scroll-behavior: auto` để Lenis tự làm mượt: style.css đã có `html{scroll-behavior:smooth}` cho người
   KHÔNG xin giảm chuyển động - để nguyên cả 2 thì cú nhảy anchor bị làm mượt 2 lần (giật/trễ).
   KHÔNG ẩn gì ở đây: JS lỗi/không chạy thì trang vẫn cuộn và hiện đủ nội dung y như trước. */
html.has-smooth-scroll {
    scroll-behavior: auto
}

/* Vùng cuộn RIÊNG (drawer giỏ · overlay tìm kiếm · thumbnail PDP · drawer menu): lăn chuột trong đây
   cuộn hết VÙNG ĐÓ rồi dừng, không kéo tiếp cả trang. Thuộc tính do JS gắn lúc khởi tạo
   (`PREVENT_SEL` trong scroll-effect.js) nên nội dung nạp sau bằng AJAX vẫn đúng. */
html.has-smooth-scroll [data-lenis-prevent] {
    overscroll-behavior: contain
}

#navbar {
    background: var(--header-bg,var(--white-pure));
    border-bottom: var(--header-border-width,1px) solid var(--header-border-color,var(--gray-border));
    display: block;
    padding-left: 0;
    padding-right: 0
}

/* Skin TỐI của header (Giao diện › Header › Kiểu nền = Tối).
   Thuộc tính nằm NGAY TRÊN `#navbar` nên biến ở đây thắng `:root` của khối <style> mà `header_theme_css()`
   phát sau style.css (biến khai trên phần tử gần hơn :root trong cây kế thừa).
   Mọi giá trị lấy từ bảng màu sẵn có ⇒ KHÔNG thêm mã màu mới. */
#navbar[data-header-skin="dark"] {
    --header-bg: var(--ink-black);
    --header-top-bg: var(--ink-black);
    --header-bottom-bg: var(--ink-dark);
    --header-border-color: var(--gray-strong);
    --header-link: var(--silver-light);
    --header-link-hover: var(--white-pure);
    --header-link-active: var(--white-pure);
    --header-icon: var(--white-pure);
    --header-badge-bg: var(--white-pure);
    --header-badge-fg: var(--ink-black);
    --header-dd-bg: var(--ink-dark);
    --header-dd-text: var(--silver-lighter);
    --header-dd-hover-bg: var(--ink-muted);
    --header-dd-hover-text: var(--white-pure);
    --header-cta-bg: var(--white-pure);
    --header-cta-fg: var(--ink-black);
    --header-shadow: 0 2px 8px rgba(0,0,0,0.45)
}

/* Logo gốc là bạc trên nền TRONG SUỐT ⇒ trên nền tối chỉ cần NÂNG SÁNG (giữ sắc độ kim loại, không nhoè). */
#navbar[data-header-skin="dark"] .navbar-brand img,#navbar[data-header-skin="dark"] .navbar-brand .navbar-brand-img {
    filter: brightness(1.85)
}

/* Nút ☰ (menu di động) lấy màu từ Bootstrap `.navbar-light .navbar-toggler` (đen 55%) ⇒ trên nền tối
   gần như vô hình - phải ép theo màu icon của header. */
#navbar[data-header-skin="dark"] .navbar-toggler {
    color: var(--header-icon)
}

/* ── HEADER TRONG SUỐT TRÊN SECTION ĐẦU (Giao diện › Header › "Header trong suốt trên section đầu") ──
   CHỈ chạy khi `<body>` có class `has-header-overlay` - class đó chỉ được thêm khi (a) công tắc BẬT và
   (b) TRANG đang xem thật sự có section hero (`templates/home.php` đặt `$heroOverlay = true`) ⇒ trang
   không có hero KHÔNG BAO GIỜ rơi vào cảnh header trong suốt trên nền trắng.

   Đầu trang: header NẰM ĐÈ lên hero (`position:absolute` ⇒ hero bắt đầu từ y=0) + dải mờ dần phía sau
   để chữ đọc được kể cả khi ảnh hero sáng.
   Cuộn xuống: `main.js` gắn `.navbar-scrolled` (ngưỡng `scrollY > 10`) ⇒ thành header THẬT ở đỉnh màn
   hình (`position:fixed`) + nền đặc + viền + bóng; màu đổi trong `--fe-dur`.

   ⚠️ `absolute` → `fixed` (KHÔNG transform wrapper) nên không phá `sticky/fixed` nào khác; Lenis đang
   bật (`assets/js/scroll-effect.js`) cuộn thật nên `fixed` vẫn đúng. */
body.has-header-overlay #navbar[data-header-overlay="1"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--fe-z-nav);
    background: transparent;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0));
    /* ⚠️ BẮT BUỘC `no-repeat`: gradient được tính theo PADDING box (thấp hơn `border-bottom` 1px) nên
       dải đen ĐẦU của gradient (alpha .45) bị LẶP vào đúng hàng viền 1px ở đáy ⇒ hiện 1 đường đen
       nhỏ dưới header trong suốt (đo pixel: y=82 = rgb(19,17,15) so với hàng kề rgb(37,33,31)).
       ⛔ Đừng xoá; muốn gọn hơn thì `background-clip: padding-box` cũng được. */
    background-repeat: no-repeat;
    border-bottom-color: transparent;
    transition: background-color var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease)
}

/* Còn nằm trên hero ⇒ chữ/icon/logo SÁNG (dùng lại bộ token của skin Tối). */
body.has-header-overlay #navbar[data-header-overlay="1"]:not(.navbar-scrolled) {
    --header-link: var(--silver-lighter);
    --header-link-hover: var(--white-pure);
    --header-link-active: var(--white-pure);
    --header-icon: var(--white-pure);
    --header-badge-bg: var(--white-pure);
    --header-badge-fg: var(--ink-black);
    --header-bg: transparent;
    --header-border-color: transparent;
    --header-shadow: none
}

body.has-header-overlay #navbar[data-header-overlay="1"] .navbar-brand img,body.has-header-overlay #navbar[data-header-overlay="1"] .navbar-brand .navbar-brand-img {
    filter: brightness(1.85);
    transition: filter var(--fe-dur) var(--fe-ease)
}

body.has-header-overlay #navbar[data-header-overlay="1"] .navbar-toggler {
    color: var(--header-icon)
}

/* ĐÃ CUỘN ⇒ header thật ở đỉnh màn hình + quay về bộ màu của skin đang chọn. */
body.has-header-overlay #navbar[data-header-overlay="1"].navbar-scrolled {
    position: fixed;
    background-color: var(--header-bg,var(--white-pure));
    background-image: none;
    border-bottom-color: var(--header-border-color,var(--gray-border))
}

body.has-header-overlay #navbar[data-header-overlay="1"].navbar-scrolled .navbar-brand img,body.has-header-overlay #navbar[data-header-overlay="1"].navbar-scrolled .navbar-brand .navbar-brand-img {
    filter: none
}

#navbar .navbar-brand img,#navbar .navbar-brand .navbar-brand-img {
    width: auto;
    max-height: var(--header-logo-h,50px)
}

#navbar.navbar-scrolled {
    box-shadow: var(--header-shadow,0 2px 8px rgba(0,0,0,0.08))
}

.navbar {
    padding: 0;
    font-family: var(--site-font, "Space Grotesk", "Segoe UI",system-ui,sans-serif)
}

.navbar-brand {
    padding: max(0px,calc((var(--navbar-height,82px) - var(--header-logo-h,50px)) / 2)) 0
}

.navbar .navbar-brand h1,.navbar .navbar-brand .navbar-brand-text {
    color: var(--ink-black);
    font-weight: 700;
    font-family: var(--site-font, "Space Grotesk", "Segoe UI",system-ui,sans-serif)
}

.navbar .navbar-nav .nav-link {
    margin-left: var(--header-nav-gap,30px);
    padding: 0.625rem 0;
    outline: none;
    color: var(--header-link,var(--gray-mid));
    font-size: var(--header-nav-size,1rem);
    font-weight: var(--header-nav-weight,600);
    letter-spacing: var(--header-nav-ls,normal);
    text-transform: var(--header-nav-transform,uppercase);
    position: relative;
    text-decoration: none;
    transition: color 0.25s ease 0.1s
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--header-link-hover,var(--ink-black))
}

.navbar .navbar-nav .nav-link.active {
    color: var(--header-link-active,var(--ink-black))
}

.navbar .dropdown-toggle::after {
    border: none;
    content: none
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1
    }
}

.hero-header {
    margin-top: -100px;
    padding-top: 150px;
    background: linear-gradient(160deg,var(--ink-black) 0%,#2a2a2a 50%,var(--ink-dark) 100%);
    background-size: cover;
    position: relative;
    overflow: hidden
}

.hero-header[style*="--hero-bg"] {
    background-image: var(--hero-bg)
}

@media (max-width: 767.98px) {
    .hero-header[style*="--hero-bg"] {
        background-image: var(--hero-bg-sm,var(--hero-bg))
    }
}

.hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( 90deg,transparent,transparent 2px,rgba(255,255,255,0.015) 2px,rgba(255,255,255,0.015) 4px );
    pointer-events: none
}

.hero-header .display-1,.hero-header h1 {
    color: #ffffff
}

.hero-header h5 {
    color: var(--silver-lighter)
}

.hero-header .text-primary {
    color: var(--silver-lighter) !important
}

.hero-header a.text-primary {
    color: var(--silver-lighter) !important
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0
}

.hero-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--silver-light);
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.hero-header .breadcrumb-item a {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none
}

.hero-header .breadcrumb-item a:hover {
    color: #fff !important;
    text-decoration: underline
}

.hero-header .breadcrumb-item.active {
    color: rgba(255,255,255,0.6)
}

.hero-header .btn-primary {
    background: var(--silver-lighter);
    border-color: var(--silver-lighter);
    color: var(--ink-black);
    font-weight: 600
}

.hero-header .btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--ink-black)
}

.hero-header .btn-outline-primary {
    border-color: var(--silver-lighter);
    color: #ffffff
}

.hero-header .btn-outline-primary:hover {
    background: var(--silver-lighter);
    color: var(--ink-black)
}

.about-img {
    position: relative;
    overflow: hidden
}

.about-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: contain
}

.project-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: var(--fe-radius-lg)
}

.project-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--fe-dur-zoom) var(--fe-ease)
}

.project-item:hover img {
    transform: scale(1.05)
}

.project-overlay {
    position: absolute;
    padding: var(--fe-space-5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: var(--fe-overlay-card);
    z-index: 1;
    transition: background var(--fe-dur) var(--fe-ease)
}

.project-item:hover .project-overlay {
    background: var(--fe-overlay-card-hover)
}

.project-overlay h4 {
    font-size: var(--fe-fs-5);
    font-weight: 600;
    margin-bottom: 0
}

.project-overlay small {
    font-size: var(--fe-fs-3);
    opacity: 0.85
}

.project-overlay:focus-visible {
    outline: var(--fe-btn-ring) solid var(--white-pure);
    outline-offset: 2px
}

.blog-panel-item:focus-visible,.blog-panel-featured:focus-visible,.lslide:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: 2px
}

.projects-text {
    border-radius: var(--fe-radius);
    height: 100%
}

@media (max-width: 767.98px) {
    .projects-grid {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        gap: var(--fe-space-4) !important
    }

    .projects-grid>.col-6 {
        flex: 0 0 calc(50% - var(--fe-space-2)) !important;
        max-width: calc(50% - 7.5px) !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .projects-grid>.col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .project-item-lg .project-overlay {
        padding: var(--fe-space-5) !important
    }

    .project-item-lg .project-overlay h4 {
        font-size: var(--fe-fs-4);
        line-height: 1.5;
        margin-bottom: 0
    }

    .project-overlay {
        padding: 1rem !important
    }

    .project-overlay h4 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--fe-fs-4)
    }
}

.service-item {
    position: relative;
    padding: 1.5rem;
    transition: .5s;
    border-radius: var(--bs-border-radius-lg)
}

.service-item.bg-primary {
    background: var(--ink-black) !important
}

.service-item.bg-primary:hover {
    background: var(--silver-bg) !important
}

.service-item.bg-primary p {
    color: rgba(255,255,255,0.8);
    transition: .5s
}

.service-item.bg-primary:hover p {
    color: var(--ink-muted)
}

.service-item.bg-light {
    background: var(--white-cool) !important
}

.service-item.bg-light:hover {
    background: var(--ink-black) !important
}

.service-item.bg-light p {
    color: var(--ink-muted);
    transition: .5s
}

.service-item.bg-light:hover p {
    color: rgba(255,255,255,0.8)
}

.service-item .service-img h3 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 15px 0
}

.service-item.bg-primary .service-img h3 {
    background: var(--ink-black);
    color: var(--silver-lighter);
    transition: .5s
}

.service-item.bg-primary:hover .service-img h3 {
    background: var(--silver-bg);
    color: var(--ink-black)
}

.service-item.bg-light .service-img h3 {
    background: var(--white-cool);
    color: var(--ink-black);
    transition: .5s
}

.service-item.bg-light:hover .service-img h3 {
    background: var(--ink-black);
    color: var(--silver-lighter)
}

.solutions-section {
    background: var(--white-cool)
}

.solutions-intro {
    max-width: 48rem;
    color: var(--ink-muted);
    font-size: var(--fe-fs-4)
}

.solutions-hotline {
    min-height: var(--fe-btn-h-lg);
    font-size: var(--fe-fs-4);
    line-height: 1.25;
    gap: var(--fe-space-4);
    float: right;
    color: var(--ink-black)
}

.solutions-hotline:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: 2px
}

.solutions-hotline-icon {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--silver-dark);
    color: var(--ink-black)
}

.solutions-hotline-icon i {
    font-size: var(--fe-fs-5)
}

.solutions-hotline small,.solutions-hotline strong {
    display: block
}

.solutions-hotline small {
    color: var(--ink-muted);
    font-size: var(--fe-fs-1);
    letter-spacing: .04em;
    text-transform: uppercase
}

.solutions-hotline strong {
    font-size: var(--fe-fs-5)
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fe-space-5)
}

@media (min-width: 768px) {
    .solutions-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--fe-space-6)
    }
}

.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--fe-radius-lg);
    overflow: hidden;
    box-shadow: var(--fe-shadow-lg);
    transition: transform var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease)
}

.solution-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fe-shadow-float)
}

.solution-card:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: 2px
}

.solution-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--white-cool)
}

.solution-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(135deg,rgba(0,0,0,.06),rgba(0,0,0,.34));
    pointer-events: none
}

.solution-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fe-dur-zoom) var(--fe-ease)
}

.solution-card:hover .solution-image img {
    transform: scale(1.03)
}

.solution-number {
    position: absolute;
    z-index: 1;
    top: var(--fe-space-4);
    left: var(--fe-space-4);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(26,26,26,.55);
    color: var(--white-pure);
    font-size: var(--fe-fs-1);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.6
}

.solution-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--fe-space-5)
}

.solution-title {
    font-size: var(--fe-fs-6);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-black);
    margin-bottom: var(--fe-space-3)
}

.solution-summary {
    color: var(--gray-mid);
    font-size: var(--fe-fs-4);
    line-height: 1.7;
    margin-bottom: var(--fe-space-5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.7em * 3)
}

.solution-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2);
    font-size: var(--fe-fs-3);
    font-weight: 600;
    color: var(--ink-black)
}

.solution-link svg {
    transition: transform var(--fe-dur) var(--fe-ease)
}

.solution-card:hover .solution-link svg {
    transform: translateX(var(--fe-space-1))
}

@media (prefers-reduced-motion: reduce) {
    .solution-card,.solution-image img,.solution-link svg {
        transition: none !important;
        transform: none !important
    }
}

@media (max-width: 991.98px) {
    .solutions-hotline {
        float: none
    }

    .solution-content {
        padding: 2rem
    }
}

@media (max-width: 575.98px) {
    .solution-content {
        padding: 1.5rem
    }
}

.footer {
    background: radial-gradient(120% 130% at 100% 0%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 55%),var(--ink-black);
    color: rgba(255,255,255,.72);
}

.back-to-top {
    position: fixed;
    right: var(--fe-space-5);
    bottom: var(--fe-space-5);
    z-index: var(--fe-z-nav);
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--silver-bg);
    color: var(--ink-black);
    box-shadow: var(--fe-shadow-lg);
    text-align: center;
    line-height: 44px;
    text-decoration: none;
    transition: background-color var(--fe-dur) var(--fe-ease)
}

.back-to-top:hover {
    background: var(--white-pure);
    color: var(--ink-black)
}

.back-to-top .fe-ico {
    width: 20px;
    height: 20px;
    vertical-align: middle
}

@media (max-width: 991.98px) {
    .back-to-top {
        display: none !important
    }
}

.footer-main {
    padding: var(--fe-space-8) 0
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: var(--fe-space-6) var(--fe-space-7)
}

.footer-logo-link {
    display: inline-block;
    margin-bottom: var(--fe-space-4)
}

.footer .footer-site-name {
    color: var(--white-pure);
    margin: 0
}

.footer-about {
    max-width: 38ch;
    margin: 0 0 var(--fe-space-5)
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-2);
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    color: var(--white-pure);
    text-decoration: none;
    transition: background-color var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease),color var(--fe-dur) var(--fe-ease)
}

.footer-social-link:hover {
    background: var(--white-pure);
    border-color: var(--white-pure);
    color: var(--ink-black)
}

.footer .footer-col-title {
    color: var(--white-pure);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 var(--fe-space-4)
}

.footer .footer-col-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--fe-space-2);
    background: var(--silver)
}

.footer-links {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2);
    padding: var(--fe-space-2) 0;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: color var(--fe-dur) var(--fe-ease)
}

.footer-link:hover {
    color: var(--white-pure)
}

.footer .footer-link-ico {
    flex: 0 0 auto;
    width: var(--fe-ico-sm);
    height: var(--fe-ico-sm);
    color: var(--silver);
    transition: transform var(--fe-dur) var(--fe-ease),color var(--fe-dur) var(--fe-ease)
}

.footer-link:hover .footer-link-ico {
    transform: translateX(2px);
    color: var(--white-pure)
}

.footer-contact {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--fe-radius-lg);
    padding: var(--fe-space-5)
}

.footer-contact-list {
    display: grid;
    gap: var(--fe-space-3);
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--fe-space-3)
}

.footer-contact-ico {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--silver)
}

.footer-contact-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--fe-dur) var(--fe-ease)
}

.footer-contact-link:hover {
    color: var(--white-pure);
    text-decoration: underline;
    text-underline-offset: 2px
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12)
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fe-space-3) var(--fe-space-5);
    padding: var(--fe-space-5) 0
}

.footer-copy {
    margin: 0
}

.footer-copy a {
    color: var(--silver-lighter);
    text-decoration: none
}

.footer-copy a:hover {
    color: var(--white-pure);
    text-decoration: underline
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-5)
}

.footer-legal a {
    padding: var(--fe-space-2) 0;
    color: rgba(255,255,255,.72);
    text-decoration: none
}

.footer-legal a:hover {
    color: var(--white-pure)
}

.footer-top {
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2);
    padding: var(--fe-space-2) 0;
    color: var(--white-pure);
    text-decoration: none
}

.footer-top:hover {
    color: var(--silver-lighter)
}

.footer .footer-top-ico {
    width: var(--fe-ico);
    height: var(--fe-ico)
}

.footer-logo-link:focus-visible,.footer-social-link:focus-visible,.footer-link:focus-visible,.footer-contact-link:focus-visible,.footer-copy a:focus-visible,.footer-legal a:focus-visible,.footer-top:focus-visible {
    outline: 2px solid var(--silver-lighter);
    outline-offset: 2px;
    border-radius: var(--fe-radius)
}

.footer-logo {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
    filter: brightness(10)
}

@media (min-width: 1200px) {
    .footer-contact {
        order: 1
    }
}

@media (max-width: 1199.98px) {
    .footer-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 991.98px) {
    .footer-main {
        padding: var(--fe-space-7) 0
    }

    .footer-brand,.footer-contact {
        grid-column: 1 / -1
    }
}

@media (max-width: 575.98px) {
    .footer-bottom-inner {
        justify-content: flex-start
    }

    .footer-legal {
        gap: var(--fe-space-4) var(--fe-space-5)
    }
}

.blog-card-title,.blog-card-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fe-fs-4);
    line-height: 1.4;
    min-height: 2.9em
}

.post-content {
    font-size: var(--fe-fs-4);
    line-height: 1.8;
    color: var(--ink-dark)
}

.post-content h2 {
    font-size: var(--fe-fs-6);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
    color: var(--ink-black)
}

.post-content h3 {
    font-size: var(--fe-fs-5);
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--ink-black)
}

.post-content p {
    margin-bottom: 1rem
}

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 0 0 1.5rem
}

.post-content ul,.post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem
}

.post-content li {
    margin-bottom: 0
}

.post-content blockquote {
    border-left: 3px solid var(--silver);
    padding: 0.5rem 1rem;
    margin: 1.5rem 0;
    color: var(--ink-muted);
    font-style: italic
}

.content {
    font-size: var(--fe-fs-4);
    line-height: 1.8;
    color: var(--ink-dark);
    margin-top: 30px;
}

.content h2 {
    font-size: var(--fe-fs-6);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--ink-black)
}

.content h3 {
    font-size: var(--fe-fs-5);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--ink-black)
}

.content p {
    margin-bottom: 1.25rem;
    text-align: justify
}

.content img {
    width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: var(--fe-radius)
}

.content ul,.content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem
}

.content li {
    margin-bottom: 0.5rem
}

.content blockquote {
    border-left: 3px solid var(--silver);
    padding: 0.5rem 1rem;
    margin: 1.5rem 0;
    color: var(--ink-muted);
    font-style: italic
}

/* ── KHỐI THƯƠNG HIỆU TRANG CHỦ (`#brand`) ──────────────────────────────────────────
   Nâng cấp 2026-09-23 (yêu cầu: "cao cấp, chuyên nghiệp, thương hiệu hơn" - KHÔNG đổi nội dung):
   nền dải bạc rất nhạt tách khối khỏi các section trắng kề bên · tiêu đề lớn hơn + gạch nhấn bạc ·
   thẻ tính năng = thẻ TRẮNG viền mảnh + bóng nhẹ + icon "huy hiệu" bạc · dải số liệu có vách ngăn.
   ⚠️ CHỈ dùng token có sẵn (`--silver-shimmer`, `--fe-shadow*`, `--fe-space-*`, `--fe-fs-*`) ⇒
   0 mã `#hex` mới + 0 `font-size` literal mới (ngân sách `verify.php` bước [13]). */
#brand {
    position: relative;
    background: linear-gradient(180deg,var(--white-pure) 0%,var(--silver-bg) 100%)
}

/* Dải bạc mảnh ở MÉP TRÊN khối: nhịp chuyển từ ảnh hero (tối) sang dải sáng có "chữ ký" bạc.
   ⚠️ `#brand` nằm NGAY TRÊN khối `material` (nền tối) nên KHÔNG được đảo `#brand` sang nền tối -
   sẽ thành 3 dải tối liền nhau (hero → brand → material). Giữ dải SÁNG để nhịp màu xen kẽ. */
#brand::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--silver-shimmer)
}

/* ⚠️ KHÔNG khai `font-size`/`font-weight`/`line-height` ở đây: `docs/12` §I đã ĐÓNG BĂNG cỡ chữ
   heading (chủ dự án chốt) ⇒ tiêu đề giữ ĐÚNG giá trị Bootstrap như trước, chỉ thêm tracking và
   nhịp dưới (`--fe-space-5` = 24px - bằng đúng `mb-4` cũ nên bảng §I không đổi). */
.brand-title {
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-bottom: var(--fe-space-5)
}

.brand-rule {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: var(--silver-shimmer);
    margin-bottom: var(--fe-space-5)
}

.brand-lead {
    color: var(--gray-strong);
    font-size: var(--fe-fs-4);
    line-height: 1.8;
    max-width: 46ch;
    text-wrap: pretty;
    margin-bottom: var(--fe-space-6)
}

.about-feature {
    min-height: 100%;
    background: linear-gradient(180deg,var(--white-pure) 0%,var(--white-warm) 100%);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--fe-radius-lg);
    padding: var(--fe-space-5) var(--fe-space-4);
    box-shadow: var(--fe-shadow);
    transition: transform var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease)
}

.about-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--fe-shadow-lg);
    border-color: var(--silver-light)
}

/* "Huy hiệu" icon: nền dải bạc của logo + icon MÀU TỐI.
   ⚠️ Đã thử icon TRẮNG trước đó: trên dải bạc `#d8d8d8→#a8a8a8` nét trắng 1.8px gần như chìm
   (đo bằng ảnh cận) ⇒ đổi sang `currentColor` tối để đủ tương phản mà vẫn giữ motif bạc.
   ⚠️ Cỡ icon: `.fe-ico--xl` đặt `width: 1.8em` nên phải đặt `font-size` ở HUY HIỆU (không đặt
   trên icon - `.fe-ico--xl` cũng ăn theo ⇒ nhân 2 tầng `em`, icon 40px tràn khỏi huy hiệu 40px).
   `--fe-fs-5` (20px) ⇒ icon 36px trong huy hiệu 56px. */
.about-feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ink-black);
    font-size: var(--fe-fs-5);
    box-shadow: var(--fe-shadow),inset 0 0 0 1px rgba(255,255,255,.55);
    transition: transform var(--fe-dur) var(--fe-ease);
    margin-bottom: var(--fe-space-4)
}

/* Bootstrap đặt `!important` cho `.mb-3` (icon do `fe_icon_from_class()` sinh ra) ⇒ phải cân lại
   TRONG huy hiệu, nếu không icon bị đẩy lệch tâm 16px. */
.about-feature-ico>.fe-ico,.about-feature-ico>i {
    margin-bottom: 0 !important
}

.about-feature:hover .about-feature-ico {
    transform: scale(1.06)
}

.about-feature h3 {
    position: relative;
    font-size: var(--fe-fs-5);
    font-weight: 500;
    margin-bottom: var(--fe-space-2)
}

/* Gạch bạc "chạy ra" dưới tiêu đề thẻ khi rê chuột - thuần CSS, KHÔNG thêm chữ nào.
   `position:absolute` để KHÔNG làm cao thêm thẻ (dùng đúng khoảng `margin-bottom` 8px của h3). */
.about-feature h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--fe-space-2) * -1);
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--silver-shimmer);
    transform: translateX(-50%);
    transition: width var(--fe-dur) var(--fe-ease)
}

.about-feature:hover h3::after {
    width: 40px
}

.about-feature p {
    color: var(--gray-strong);
    line-height: 1.7
}

@media (min-width: 768px) {
    .about-feature {
        padding: var(--fe-space-6) var(--fe-space-5)
    }

    .about-feature-ico {
        width: 56px;
        height: 56px
    }
}

@media (max-width: 767.98px) {
    .about-features {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        gap: var(--fe-space-4) !important
    }

    .about-features>.col-6 {
        flex: 0 0 calc(50% - var(--fe-space-2)) !important;
        max-width: calc(50% - 7.5px) !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .about-feature {
        width: auto;
        padding: var(--fe-space-4) var(--fe-space-3)
    }

    .about-feature-ico {
        width: 40px;
        height: 40px;
        font-size: var(--fe-fs-4);
        margin-bottom: var(--fe-space-3)
    }

    .about-feature h3 {
        font-size: var(--fe-fs-4)
    }

    .about-feature p {
        font-size: var(--fe-fs-2)
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-feature,.about-feature:hover {
        transform: none;
        transition: none
    }

    .about-feature:hover .about-feature-ico {
        transform: none
    }

    .about-feature-ico,.about-feature h3::after {
        transition: none
    }
}

/* ── VIDEO (facade) - dùng chung cho mọi nơi gọi `fe_video()` (docs/11 §4) ────────────────────
   Facade: chỉ ảnh bìa + nút play; BẤM mới nhúng iframe (`main.js`) ⇒ 0 request bên thứ ba lúc tải
   trang. Khung đã `aspect-ratio: 16/9` từ đầu nên khi thay bằng iframe KHÔNG nhảy layout (CLS = 0). */
.fe-video {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    padding: 0;
    border: 1px solid var(--gray-ghost);
    border-radius: var(--fe-radius-lg);
    background: linear-gradient(160deg,var(--ink-dark) 0%,var(--ink-black) 100%);
    box-shadow: var(--fe-shadow-float);
    overflow: hidden;
    cursor: pointer
}

.fe-video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fe-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--silver-shimmer);
    color: var(--ink-black);
    box-shadow: var(--fe-shadow-lg),inset 0 0 0 1px rgba(255,255,255,.55);
    transition: transform var(--fe-dur) var(--fe-ease);
    pointer-events: none
}

.fe-video:hover .fe-video-play,
.fe-video:focus-visible .fe-video-play {
    transform: translate(-50%,-50%) scale(1.08)
}

.fe-video-frame,.fe-video-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.brand-video {
    margin-bottom: 0
}

/* Video trong khối VẬT LIỆU (nền TỐI): khung theo đúng `.material-media` - viền trắng 10% + bóng mềm,
   để video "nằm cùng hệ" với ảnh vật liệu cũ (thay vì viền xám sáng chói trên nền tối). */
.material-video {
    border-color: rgba(255,255,255,.10);
    box-shadow: var(--fe-shadow-float)
}

@media (max-width: 767.98px) {
    .fe-video-play {
        width: 56px;
        height: 56px
    }
}

@media (prefers-reduced-motion: reduce) {
    .fe-video-play,.fe-video:hover .fe-video-play,.fe-video:focus-visible .fe-video-play {
        transform: translate(-50%,-50%);
        transition: none
    }
}

.bg-primary.py-5,.container-fluid.bg-primary {
    background: linear-gradient(160deg,var(--ink-black) 0%,#2a2a2a 100%) !important
}

.badge {
    border-radius: var(--bs-border-radius-sm);
    font-weight: 500
}

.card {
    box-shadow: var(--bs-box-shadow-sm)
}

.bg-primary .text-white,.bg-primary h1,.bg-primary h2,.bg-primary h3,.bg-primary h4,.bg-primary h5 {
    color: #ffffff !important
}

.bg-primary .btn-primary {
    background: var(--silver-lighter);
    border-color: var(--silver-lighter);
    color: var(--ink-black)
}

.spinner-grow.text-primary {
    color: var(--silver) !important
}

.blog-panel {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--fe-radius-lg);
    overflow: hidden;
    box-shadow: var(--fe-shadow-lg)
}

.blog-panel-featured {
    display: block
}

.blog-panel-img {
    overflow: hidden
}

.blog-panel-img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--fe-dur-zoom) var(--fe-ease)
}

.blog-panel-featured:hover .blog-panel-img img {
    transform: scale(1.03)
}

.blog-panel-body {
    padding: var(--fe-space-5)
}

.blog-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-2);
    font-size: var(--fe-fs-1);
    color: var(--gray-strong);
    margin-bottom: var(--fe-space-2)
}

.blog-panel-title {
    font-size: var(--fe-fs-5);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--fe-space-4)
}

.blog-panel-excerpt {
    font-size: var(--fe-fs-3);
    color: var(--gray-strong);
    margin-bottom: var(--fe-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.blog-panel-more {
    font-size: var(--fe-fs-3);
    color: var(--silver-dark)
}

.blog-panel-more:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: 2px
}

.blog-panel-list {
    border-top: 1px solid var(--gray-ghost)
}

.blog-panel-item {
    display: flex;
    align-items: center;
    gap: var(--fe-space-4);
    padding: var(--fe-space-5);
    transition: background-color var(--fe-dur) var(--fe-ease)
}

.blog-panel-item + .blog-panel-item {
    border-top: 1px solid var(--gray-ghost)
}

.blog-panel-item:hover {
    background: var(--white-cool)
}

.blog-panel-thumb {
    flex: 0 0 84px
}

.blog-panel-thumb img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--fe-radius-sm)
}

.blog-panel-item-body {
    min-width: 0
}

.blog-panel-item-title {
    font-size: var(--fe-fs-3);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: var(--fe-space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.blog-panel-item-meta {
    font-size: var(--fe-fs-1);
    color: var(--gray-strong)
}

.blog-panel-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fe-space-2);
    padding: var(--fe-space-5);
    border-top: 1px solid var(--gray-ghost);
    font-size: var(--fe-fs-3);
    font-weight: 600;
    color: var(--ink-black);
    text-decoration: none;
    transition: background-color var(--fe-dur) var(--fe-ease), color var(--fe-dur) var(--fe-ease)
}

.blog-panel-viewall:hover {
    background: var(--white-cool)
}

.blog-panel-viewall:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: -2px
}

.fe-intro {
    max-width: 720px;
    margin-inline: auto;
    text-align: center
}

.seo-text {
    max-width: 860px;
    margin-inline: auto;
    color: var(--gray-strong);
    font-size: var(--fe-fs-3);
    line-height: 1.75
}

.seo-text h2 {
    color: var(--ink-black)
}

.seo-text p:last-child {
    margin-bottom: 0
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fe-space-5)
}

@media (min-width: 768px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 1200px) {
    .process-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.process-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--fe-space-6) var(--fe-space-5);
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--fe-radius-lg);
    box-shadow: var(--fe-shadow-lg)
}

.process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--fe-space-4);
    border-radius: 50%;
    background: var(--ink-black);
    color: var(--white-pure);
    font-size: var(--fe-fs-4);
    font-weight: 700;
    letter-spacing: .02em
}

.process-title {
    font-size: var(--fe-fs-5);
    font-weight: 600;
    margin-bottom: var(--fe-space-2);
    /* Chốt sàn 2 dòng: tiêu đề bước dài/ngắn khác nhau (\"Thiết kế 3D và báo giá\" xuống 2 dòng) ⇒
       nếu không chốt thì mô tả của 4 thẻ lệch nhau dù thẻ đã cao bằng nhau. */
    min-height: calc(1.35em * 2)
}

.process-desc {
    margin: 0;
    color: var(--gray-strong);
    font-size: var(--fe-fs-3);
    line-height: 1.6
}

.faq-list {
    max-width: 860px;
    margin-inline: auto;
    border-top: 1px solid var(--gray-ghost)
}

.faq-item {
    border-bottom: 1px solid var(--gray-ghost)
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fe-space-4);
    padding: var(--fe-space-5) 0;
    color: var(--ink-black);
    font-size: var(--fe-fs-5);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none
}

.faq-q::-webkit-details-marker {
    display: none
}

.faq-ico {
    flex: 0 0 auto;
    transition: transform var(--fe-dur) var(--fe-ease)
}

.faq-item[open] .faq-ico {
    transform: rotate(180deg)
}

.faq-q:focus-visible {
    outline: var(--fe-btn-ring) solid var(--silver-dark);
    outline-offset: -2px
}

.faq-a {
    margin: 0;
    padding: 0 var(--fe-space-7) var(--fe-space-5) 0;
    color: var(--gray-strong);
    font-size: var(--fe-fs-4);
    line-height: 1.7
}

@media (prefers-reduced-motion: reduce) {
    .faq-ico {
        transition: none
    }
}

@media (min-width: 992px) {
    .blog-panel {
        grid-template-columns: 2fr 1fr;
    }

    .blog-panel-img img {
        aspect-ratio: 5 / 3;
    }

    .blog-panel-body {
        padding: var(--fe-space-6)
    }

    .blog-panel-list {
        border-top: 0;
        border-left: 1px solid var(--gray-ghost)
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-panel-img img,.project-item img {
        transition: none !important;
        transform: none !important
    }
}

.project-thumb {
    transition: .3s;
    opacity: .65;
    border: 2px solid var(--gray-ghost) !important
}

.project-thumb:hover {
    opacity: 1;
    border-color: var(--silver) !important
}

.project-thumb.border-primary {
    opacity: 1;
    border-color: var(--silver) !important
}

.contact-section {
    padding: 6rem 0 7rem
}

@media (max-width: 767.98px) {
    .contact-section {
        padding: 3rem 0 4rem
    }
}

.contact-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gray-soft);
    text-transform: uppercase;
    margin-bottom: 0.75rem
}

.contact-heading {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink-black);
    margin-bottom: 0.75rem
}

.contact-sub {
    color: var(--gray-mid);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 auto
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.contact-field {
    position: relative
}

.contact-field input,.contact-field textarea,.contact-field select {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--gray-ghost);
    padding: 0.85rem 0 0.65rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink-black);
    background: transparent;
    outline: none;
    transition: border-color 0.25s;
    border-radius: 0;
    -webkit-appearance: none
}

.contact-field input:focus,.contact-field textarea:focus,.contact-field select:focus {
    border-bottom-color: var(--ink-black)
}

.contact-field input::placeholder,.contact-field textarea::placeholder {
    color: transparent
}

.contact-field label {
    position: absolute;
    left: 0;
    top: 0.85rem;
    font-size: 1rem;
    color: var(--gray-soft);
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: left top
}

.contact-field input:focus + label,.contact-field input:not(:placeholder-shown) + label,.contact-field textarea:focus + label,.contact-field textarea:not(:placeholder-shown) + label,.contact-field select:focus + label,.contact-field select:not([value=""]) + label {
    transform: translateY(-1.35rem) scale(0.75);
    color: var(--ink-black);
    font-weight: 500
}

.contact-required {
    position: absolute;
    right: 0;
    top: 0.85rem;
    font-size: 0.65rem;
    color: #e03a3a;
    pointer-events: none
}

.contact-field input:focus ~ .contact-required,.contact-field input:not(:placeholder-shown) ~ .contact-required {
    transform: translateY(-1.35rem);
    transition: transform 0.2s ease
}

.contact-select select {
    cursor: pointer;
    color: var(--ink-black)
}

.contact-select select option[value=""] {
    color: transparent
}

.contact-field textarea {
    resize: none;
    min-height: 1.8rem;
    overflow: hidden
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 2rem;
    background: var(--ink-black);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s,transform 0.15s;
    margin-top: 0.5rem
}

.contact-submit:hover {
    background: #2a2a2a;
    transform: translateY(-1px)
}

.contact-submit:active {
    transform: translateY(0)
}

.contact-submit svg {
    transition: transform 0.2s
}

.contact-submit:hover svg {
    transform: translateX(3px)
}

.contact-success {
    padding: 4rem 0
}

.contact-success-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ink-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem
}

.contact-success h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem
}

.contact-success p {
    color: var(--gray-mid);
    font-size: 1rem;
    max-width: 340px;
    margin: 0 auto 1rem
}

.order-success {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center
}

.order-success .check-icon {
    display: inline-flex;
    color: #28a745
}

.order-success .check-icon .fe-ico {
    width: 56px;
    height: 56px
}

.project-gallery {
    position: relative;
    margin-bottom: 1.5rem
}

.project-gallery-main {
    position: relative;
    width: 100%;
    height: 55vh;
    max-height: 600px;
    background: var(--ink-black);
    overflow: hidden;
    cursor: pointer;
    touch-action: pan-y
}

.project-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.4s ease
}

.project-gallery-outer,.project-gallery-outer .lSSlideWrapper,.project-gallery-carousel {
    height: 100% !important
}

.project-gallery-carousel.lSFade {
    padding-bottom: 0 !important
}

.project-gallery-main .project-gallery-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.project-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    opacity: 0;
    z-index: 12
}

.project-gallery-main:hover .project-gallery-nav {
    opacity: 1
}

.project-gallery-nav:hover {
    background: rgba(255,255,255,0.9);
    color: var(--ink-black)
}

@media (hover: none) {
    .project-gallery-main .project-gallery-nav {
        opacity: 1
    }
}

.project-gallery-nav:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 2px
}

.project-gallery-nav-prev {
    left: 16px
}

.project-gallery-nav-next {
    right: 16px
}

.project-gallery-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    z-index: 12
}

.project-gallery-info {
    display: block;
    padding: 0 0 1rem
}

.project-gallery-title {
    color: var(--ink-black);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 6px
}

.project-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.project-gallery-thumbs::-webkit-scrollbar {
    display: none
}

.project-gallery-thumb {
    flex: 0 0 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    display: block;
    line-height: 0
}

.project-gallery-thumb:hover {
    opacity: 0.8
}

.project-gallery-thumb.active {
    opacity: 1
}

.project-gallery-thumb:focus-visible {
    outline: 2px solid var(--white-pure);
    outline-offset: 2px
}

.project-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.project-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start
}

.project-lead {
    border-left: 3px solid var(--silver);
    padding: 8px 0 8px 24px;
    margin-bottom: 2.5rem
}

.project-lead p {
    color: var(--gray-mid);
    font-size: 1.15rem;
    line-height: 1.8;
    font-style: italic;
    margin: 0
}

.project-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink-dark)
}

.project-body h2,.project-body h3 {
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem
}

.project-body h2 {
    font-size: 1.5rem
}

.project-body h3 {
    font-size: 1.25rem
}

.project-body p {
    margin-bottom: 1.25rem
}

.project-body img {
    max-width: 100%;
    border-radius: 12px;
    margin: 2rem 0
}

.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.5rem 0
}

.before-after-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3
}

.before-after-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.before-after-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ink-black);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 14px;
    border-radius: 4px
}

.before-after-badge.after {
    background: var(--silver-darker)
}

.project-sidebar {
    position: sticky;
    top: 28px
}

.project-specs-card {
    background: var(--white-warm);
    border-radius: 15px;
    border: 1px solid var(--gray-ghost);
    overflow: hidden;
    margin-bottom: 1.5rem
}

.project-specs-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-black);
    padding: 20px 24px 14px;
    margin: 0
}

.project-specs-list {
    padding: 0;
    margin: 0;
    list-style: none
}

.project-specs-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;
    font-size: 0.9rem
}

.project-specs-list li:nth-child(even) {
    background: rgba(0,0,0,0.02)
}

.spec-label {
    color: var(--gray-mid);
    font-weight: 500
}

.spec-value {
    color: var(--ink-black);
    font-weight: 600;
    text-align: right
}

.project-sidebar-cta {
    background: var(--white-warm);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    border: 1px solid var(--gray-ghost)
}

.project-sidebar-cta h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--ink-black)
}

.project-sidebar-cta p {
    color: var(--gray-mid);
    font-size: 0.82rem;
    margin-bottom: 14px
}

.project-sidebar-cta .bottom-cta-icon {
    background: var(--ink-black);
    color: #fff;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    font-size: 1.1rem
}

.project-sidebar-cta .bottom-cta-form {
    display: flex;
    gap: 15px
}

.project-sidebar-cta .bottom-cta-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-black);
    font-size: 0.85rem;
    outline: none
}

.project-sidebar-cta .bottom-cta-form input::placeholder {
    color: var(--gray-soft)
}

.project-sidebar-cta .bottom-cta-form input:focus {
    border-color: var(--ink-black)
}

.project-sidebar-cta .bottom-cta-form button {
    padding: 10px 16px;
    background: var(--ink-black);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.85rem;
    transition: background 0.2s
}

.project-sidebar-cta .bottom-cta-form button:hover {
    background: var(--ink-dark)
}

@media (max-width: 576px) {
    .project-sidebar-cta .bottom-cta-form {
        flex-direction: column
    }

    .project-sidebar-cta .bottom-cta-form button {
        width: 100%
    }
}

.related-section {
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--gray-ghost)
}

.related-header {
    text-align: center;
    margin-bottom: 2rem
}

.related-badge {
    display: inline-block;
    background: rgba(0,0,0,0.05);
    color: var(--gray-mid);
    font-size: var(--fe-fs-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 10px
}

.related-header h3 {
    font-size: var(--fe-fs-6);
    font-weight: 700;
    margin: 0
}

.related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--fe-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20);
    transition: transform 0.3s,box-shadow 0.3s
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    color: inherit
}

.related-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative
}

.related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s
}

.related-card:hover .related-card-img img {
    transform: scale(1.05)
}

.related-card-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    color: #fff;
    font-size: var(--fe-fs-6)
}

.related-card:hover .related-card-img-overlay {
    opacity: 1
}

.related-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--ink-black);
    color: #fff;
    font-size: var(--fe-fs-1);
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600
}

.related-card-body {
    padding: 14px 16px
}

.related-card-body h6 {
    font-size: var(--fe-fs-3);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bottom-cta {
    background: var(--white-cool);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    margin-top: 3rem
}

.bottom-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px
}

.bottom-cta h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 6px
}

.bottom-cta p {
    color: var(--gray-mid);
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto
}

.bottom-cta-form {
    display: flex;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto
}

.bottom-cta-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s
}

.bottom-cta-form input:focus {
    border-color: var(--ink-black)
}

.bottom-cta-form button {
    padding: 12px 24px;
    background: var(--ink-black);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap
}

.bottom-cta-form button:hover {
    background: var(--ink-dark)
}

.project-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.96);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: lbFadeIn 0.25s ease
}

.project-lightbox.show {
    display: flex
}

@keyframes lbFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.project-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    opacity: 0.7;
    transition: opacity 0.2s
}

.project-lightbox-close:hover {
    opacity: 1
}

.project-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 24px;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    z-index: 10001;
    letter-spacing: 0.5px
}

.project-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s;
    padding: 16px
}

.project-lightbox-nav:hover {
    color: #fff
}

.project-lightbox-prev {
    left: 8px
}

.project-lightbox-next {
    right: 8px
}

.project-lightbox-img {
    max-width: 88%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    z-index: 10000;
    touch-action: pan-y
}

@media (max-width: 991.98px) {
    .project-layout {
        grid-template-columns: 1fr
    }

    .project-sidebar {
        position: static
    }
}

@media (max-width: 767.98px) {
    .project-gallery-main {
        height: 40vh;
        max-height: 350px;
        border-radius: 0
    }

    .project-gallery-nav {
        opacity: 1;
        background: rgba(0,0,0,0.35);
        border-color: rgba(255,255,255,0.25)
    }

    .project-gallery-nav-prev {
        left: 12px
    }

    .project-gallery-nav-next {
        right: 12px
    }

    .project-gallery-counter {
        font-size: 0.7rem;
        bottom: 12px;
        right: 12px
    }

    .project-gallery-title {
        font-size: 1.5rem;
        font-weight: 600
    }

    .project-gallery-thumb {
        flex: 0 0 64px;
        height: 48px
    }

    .project-breadcrumb .breadcrumb {
        display: block;
        flex-wrap: nowrap
    }

    .project-breadcrumb .breadcrumb-item {
        display: inline
    }

    .project-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        float: none;
        padding: 0 6px
    }

    .project-breadcrumb .breadcrumb-item.active {
        display: inline;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        max-width: none
    }

    .project-specs-title {
        padding: 16px 16px 12px
    }

    .project-specs-list li {
        padding: 10px 16px
    }

    .project-sidebar-cta {
        padding: 18px
    }

    .project-lead p {
        font-size: 1rem
    }

    .before-after {
        grid-template-columns: 1fr
    }

    .project-body img {
        border-radius: 8px;
        margin: 1.5rem 0
    }

    .related-section {
        margin-top: 2.5rem;
        padding-top: 2rem
    }

    .related-card-body {
        padding: 12px 14px
    }

    .related-card-body h6 {
        font-size: var(--fe-fs-3)
    }

    .bottom-cta {
        padding: 28px 20px
    }
}

@media (max-width: 576px) {
    .bottom-cta-form {
        flex-direction: column
    }

    .bottom-cta-form button {
        width: 100%
    }
}

.content table,.post-content table,.project-body table,.product-description table {
    --bs-table-bg: var(--white-pure);
    --bs-table-color: var(--ink-dark);
    --bs-table-border-color: var(--gray-ghost);
    --bs-table-striped-bg: rgba(0,0,0,.018);
    --bs-table-hover-bg: var(--white-cool);
    --bs-table-head-bg: var(--white-cool);
    --bs-table-head-color: var(--ink-black);
    width: 100%;
    margin: 28px 0 32px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bs-table-bg);
    color: var(--bs-table-color);
    border: 1px solid var(--bs-table-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--fe-fs-4);
    line-height: 1.6;
    box-shadow: 0 2px 10px rgba(0,0,0,.04)
}

.content table thead th,.content table>tbody>tr:first-child>th,.post-content table thead th,.post-content table>tbody>tr:first-child>th,.project-body table thead th,.project-body table>tbody>tr:first-child>th,.product-description table thead th,.product-description table>tbody>tr:first-child>th {
    background: var(--bs-table-head-bg);
    color: var(--bs-table-head-color);
    font-weight: 700;
    text-align: left;
    padding: 14px 18px;
    vertical-align: middle;
    border-bottom: 2px solid var(--bs-table-border-color)
}

.content table td,.post-content table td,.project-body table td,.product-description table td {
    padding: 13px 18px;
    vertical-align: top;
    border-bottom: 1px solid var(--bs-table-border-color)
}

.content table th + th,.content table td + td,.post-content table th + th,.post-content table td + td,.project-body table th + th,.project-body table td + td,.product-description table th + th,.product-description table td + td {
    border-left: 1px solid var(--bs-table-border-color)
}

.content table tbody tr,.post-content table tbody tr,.project-body table tbody tr,.product-description table tbody tr {
    transition: background-color .2s ease
}

.content table tbody tr:nth-child(even),.post-content table tbody tr:nth-child(even),.project-body table tbody tr:nth-child(even),.product-description table tbody tr:nth-child(even) {
    background: var(--bs-table-striped-bg)
}

.content table tbody tr:hover,.post-content table tbody tr:hover,.project-body table tbody tr:hover,.product-description table tbody tr:hover {
    background: var(--bs-table-hover-bg)
}

.content table tbody tr:last-child td,.post-content table tbody tr:last-child td,.project-body table tbody tr:last-child td,.product-description table tbody tr:last-child td {
    border-bottom: 0
}

.content table strong,.post-content table strong,.project-body table strong,.product-description table strong {
    color: var(--bs-emphasis-color,var(--ink-black));
    font-weight: 650
}

@media (max-width: 767.98px) {
    .content table,.post-content table,.project-body table,.product-description table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: var(--fe-fs-3);
        margin: 24px 0;
        border-radius: var(--radius-md)
    }

    .content table th,.content table td,.post-content table th,.post-content table td,.project-body table th,.project-body table td,.product-description table th,.product-description table td {
        min-width: 130px;
        padding: 11px 14px;
        white-space: normal
    }

    .content table thead th,.post-content table thead th,.project-body table thead th,.product-description table thead th {
        padding: 12px 14px
    }

    .content table:not(:has(tr>:nth-child(3))),.post-content table:not(:has(tr>:nth-child(3))),.project-body table:not(:has(tr>:nth-child(3))),.product-description table:not(:has(tr>:nth-child(3))) {
        display: table;
        overflow: visible
    }

    .content table:not(:has(tr>:nth-child(3))) th,.content table:not(:has(tr>:nth-child(3))) td,.post-content table:not(:has(tr>:nth-child(3))) th,.post-content table:not(:has(tr>:nth-child(3))) td,.project-body table:not(:has(tr>:nth-child(3))) th,.project-body table:not(:has(tr>:nth-child(3))) td,.product-description table:not(:has(tr>:nth-child(3))) th,.product-description table:not(:has(tr>:nth-child(3))) td {
        min-width: 0;
        white-space: normal
    }
}

.post-card {
    transition: transform .3s ease,box-shadow .3s ease
}

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important
}

.post-card-img img {
    transition: transform .4s ease
}

.post-card:hover .post-card-img img {
    transform: scale(1.06)
}

.post-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* Dòng "chuyên mục • ngày" của thẻ bài viết. TRƯỚC 2026-09-25 dùng `.text-primary` (= --bs-primary
   = bạc #b0b0b0) ⇒ 2.17:1 trên nền trắng, Lighthouse `color-contrast` FAIL. */
.post-card-meta {
    color: var(--fe-muted-strong)
}

.post-hero-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0,0,0,.08)
}

.post-hero-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.post-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.22;
    color: var(--ink-black,#1a1a1a);
    letter-spacing: -0.015em
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    font-size: var(--fe-fs-3);
    color: #7a828c;
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    padding: .7rem 0
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    color: var(--fe-muted-strong);
    text-decoration: none
}

.post-meta-item i {
    color: var(--bs-primary,#0d6efd)
}

.post-meta-cat {
    background: #eef6ff;
    color: var(--fe-muted-strong);
    font-weight: 600;
    padding: .18rem .65rem;
    border-radius: 50rem;
    transition: background .2s ease,color .2s ease
}

.post-meta-cat:hover {
    background: var(--ink-dark);
    color: #fff
}

.post-content a {
    color: var(--bs-primary,#0d6efd);
    text-decoration: underline;
    text-underline-offset: 2px
}

.post-content img {
    border-radius: var(--fe-radius-lg);
    box-shadow: 0 4px 18px rgba(0,0,0,.06)
}

.post-content figure {
    margin: 0
}

.post-content figcaption {
    text-align: center;
    font-size: var(--fe-fs-2);
    color: #9aa1aa;
    margin-top: .5rem
}

.post-content blockquote {
    border-left: 4px solid var(--bs-primary,#0d6efd);
    background: #f6f9ff;
    padding: 1rem 1.25rem;
    border-radius: 0 10px 10px 0
}

.related-box {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: var(--fe-radius-lg);
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.05)
}

.related-box-title {
    font-size: var(--fe-fs-4);
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f1f3f5;
    justify-content: center
}

.related-box-title i {
    color: var(--bs-primary,#0d6efd)
}

.related-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: .55rem 0;
    border-bottom: 1px dashed #eef0f2;
    transition: transform .2s ease
}

.related-item:last-of-type {
    border-bottom: none
}

.related-item-thumb {
    flex: 0 0 65px;
    aspect-ratio: 3/3;
    border-radius: var(--fe-radius);
    overflow: hidden;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center
}

.related-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.related-item:hover .related-item-thumb img {
    transform: scale(1.08)
}

.related-item-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #c0c6cf;
    font-size: 1.4rem
}

.related-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.related-item-title {
    font-size: var(--fe-fs-3);
    line-height: 1.4;
    font-weight: 400;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.related-item:hover .related-item-title {
    color: var(--bs-primary,#0d6efd)
}

.related-item-date {
    font-size: var(--fe-fs-1);
    color: var(--fe-muted-strong)
}

.related-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    margin-top: .75rem;
    padding-top: 0;
    font-size: var(--fe-fs-3);
    font-weight: 600;
    color: var(--fe-muted-strong);
    text-decoration: none;
    transition: color .2s ease
}

.related-all-link:hover {
    color: var(--ink-black);
    text-decoration: underline;
    text-underline-offset: 3px
}

.related-empty {
    margin: 0;
    color: var(--fe-muted-strong);
    font-size: var(--fe-fs-3)
}

.filter-btn,.line-btn {
    border-radius: 50px !important;
    padding: 0.45rem 1.15rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: #555;
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease
}

.filter-btn:hover,.filter-btn.active,.line-btn:hover,.line-btn.active {
    background: var(--ink-black);
    color: #fff;
    border-color: var(--ink-black)
}

.project-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    transition: transform 0.35s ease,box-shadow 0.35s ease;
    height: 100%
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12)
}

.project-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f0f0f0
}

.project-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease
}

.project-card:hover .project-card-img-wrap img {
    transform: scale(1.08)
}

.project-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.9rem
}

.project-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.1) 50%,transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2rem;
    opacity: 0;
    transition: opacity 0.35s ease
}

.project-card:hover .project-card-overlay {
    opacity: 1
}

.project-card-view {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px
}

.project-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,0.95);
    color: #333;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(4px)
}

.project-card-body {
    padding: 1.25rem 1.5rem
}

.project-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    transition: color 0.3s
}

.project-card:hover .project-card-title {
    color: var(--bs-primary,#0d6efd)
}

.project-card-desc {
    font-size: 0.85rem;
    color: var(--fe-muted-strong);
    margin: 0;
    line-height: 1.5
}

.navbar-light .navbar-toggler {
    border: none
}

@media (max-width: 767.98px) {
    :root {
        --navbar-height: 72px
    }

    #navbar .navbar-brand img {
        max-height: min(var(--header-logo-h,40px),40px)
    }

    .navbar-brand {
        padding: max(0px,calc((var(--navbar-height,72px) - min(var(--header-logo-h,40px),40px)) / 2)) 0
    }

    .post-title {
        font-size: 1.8rem
    }

    .post-content p {
        margin-bottom: 1rem;
        text-align: justify
    }
}

.sh-card-link {
    overflow: hidden;
    transition: transform .3s ease,box-shadow .3s ease
}

.sh-card-link .card-img-top {
    transition: transform .4s ease
}

.sh-card-link:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,.14) !important
}

.sh-card-link:hover .card-img-top {
    transform: scale(1.04)
}

.sh-link-sage:hover {
    color: #4f5d4c !important;
    text-decoration: underline !important
}

#navbar .navbar-nav .nav-item {
    position: relative
}

#navbar .navbar-nav .nav-item:hover>.dropdown-menu,#navbar .navbar-nav .nav-item:focus-within>.dropdown-menu {
    display: block
}

#navbar .dropdown-menu {
    display: none;
    min-width: 13rem;
    padding: .5rem 0;
    margin: 0;
    border: 0;
    border-radius: .5rem;
    background: var(--header-dd-bg,#fff);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12)
}

#navbar .dropdown-menu .dropdown-item {
    padding: .5rem 1rem;
    font-size: var(--header-dd-size,.9rem);
    color: var(--header-dd-text,#333);
    text-transform: uppercase
}

#navbar .dropdown-menu .dropdown-item:hover,#navbar .dropdown-menu .dropdown-item.active {
    background: var(--header-dd-hover-bg,#f5f5f3);
    color: var(--header-dd-hover-text,#151515)
}

.nav-caret {
    font-size: .6em;
    margin-left: .3rem;
    vertical-align: middle;
    opacity: .6
}

#navbar .dropdown-submenu {
    position: relative
}

#navbar .dropdown-submenu>.dropdown-menu {
    top: -.5rem;
    left: 100%
}

#navbar .dropdown-submenu:hover>.dropdown-menu,#navbar .dropdown-submenu:focus-within>.dropdown-menu {
    display: block
}

@media (max-width: 991.98px) {
    #navbar .navbar-nav .nav-item {
        position: static
    }

    #navbar .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        padding: 0 0 .25rem 1rem
    }

    #navbar .dropdown-menu.show {
        display: block
    }

    #navbar .dropdown-submenu>.dropdown-menu {
        left: 0;
        top: auto
    }

    #navbar .dropdown-menu .dropdown-item {
        color: #666
    }
}

#navbar .nav-item.dropdown.dropstart>.dropdown-menu {
    left: auto;
    right: 0
}

#navbar .dropdown-submenu.dropstart>.dropdown-menu {
    left: auto;
    right: 100%
}

#navbar .dropdown-menu {
    max-height: calc(100vh - 4rem);
    overflow-y: auto
}

.navbar-search-btn {
    background: transparent;
    border: 0;
    padding: 0 .5rem;
    margin-left: 30px;
    color: var(--header-icon,var(--ink-dark));
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color .2s
}

.navbar-search-btn:hover {
    color: var(--gray-mid)
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: transparent;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    padding: 0 16px
}

.search-overlay[hidden] {
    display: none
}

.search-popup {
    pointer-events: auto;
    width: 100%;
    max-width: 620px;
    margin-top: var(--navbar-height,75px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    position: relative;
    animation: searchPop .18s ease
}

@keyframes searchPop {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (max-width: 991.98px) {
    .search-overlay {
        padding: 0
    }

    .search-popup {
        width: 100%;
        max-width: none;
        margin-top: var(--navbar-height,75px);
        border-radius: 0;
        border-left: 0;
        border-right: 0
    }
}

.search-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    color: var(--gray-strong);
    cursor: pointer;
    z-index: 2
}

.search-form {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.2rem
}

.search-form .fa-search {
    color: var(--gray-mid)
}

.search-form input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1.05rem;
    color: var(--ink-dark)
}

.search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: .5rem
}

.search-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .6rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background .15s,border-color .15s
}

.search-item + .search-item {
    margin-top: .3rem
}

.search-item:hover {
    background: var(--white-cool);
    border-color: var(--gray-border)
}

.search-item:hover .search-item-title {
    text-decoration: underline
}

.search-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex: 0 0 auto
}

.search-thumb-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white-cool);
    color: var(--gray-mid);
    font-size: 1.3rem;
    border-radius: var(--radius-md)
}

.search-item-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.search-item-title {
    display: block;
    font-weight: 600;
    color: var(--ink-dark);
    font-size: .95rem;
    line-height: 1.35
}

.search-item-excerpt {
    display: block;
    font-size: .82rem;
    color: var(--gray-strong);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-badge {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: var(--white-cool);
    color: var(--gray-strong);
    white-space: nowrap
}

.search-badge.post {
    background: #eaf4ff;
    color: #1a73e8
}

.search-badge.project {
    background: #fef2e0;
    color: #b26b00
}

.search-badge.page {
    background: #eef8ee;
    color: #2e7d32
}

.search-badge.category {
    background: #f3e8ff;
    color: #6b3fa0
}

.search-empty {
    padding: 1.2rem;
    text-align: center;
    color: var(--gray-strong)
}

.search-viewall {
    display: block;
    text-align: center;
    padding: .8rem;
    border-top: 1px solid #eee;
    font-weight: 600;
    color: var(--ink-dark);
    text-decoration: none
}

.search-viewall:hover {
    background: var(--white-cool)
}

.search-results,.search-viewall {
    display: none
}

#searchOverlay.has-query .search-results,#searchOverlay.has-query .search-viewall {
    display: block
}

.search-page-head h1 {
    font-size: 1.6rem;
    margin-bottom: .25rem
}

.search-count {
    color: var(--gray-mid);
    font-size: .92rem
}

.search-query {
    font-weight: 700
}

.search-results-list {
    max-width: auto
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gray-ghost)
}

.search-result-item:last-child {
    border-bottom: 0
}

.search-result-body {
    min-width: 0;
    flex: 1
}

.search-result-breadcrumb {
    display: block;
    font-size: .8rem;
    color: var(--gray-mid);
    margin-bottom: .15rem
}

.search-result-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 500;
    color: #1a0dab;
    line-height: 1.35;
    margin-bottom: .15rem
}

.search-result-item:hover .search-result-title {
    text-decoration: underline
}

.search-result-url {
    display: block;
    font-size: .8rem;
    color: var(--gray-strong);
    margin-bottom: .35rem;
    word-break: break-all
}

.search-result-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    color: var(--gray-strong);
    line-height: 1.6
}

.search-result-thumb {
    width: 96px;
    aspect-ratio: 1 / 1;
    height: auto;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--radius-md)
}

.search-result-thumb-none {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    background: var(--white-cool);
    color: var(--gray-mid);
    border-radius: var(--radius-md)
}

.search-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--gray-strong)
}

.search-pagination {
    margin-top: 1.5rem
}

mark.search-hit {
    background: #fef3c7;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px
}

@media (max-width: 767.98px) {
    .search-result-item {
        gap: .75rem
    }

    .search-result-thumb,.search-result-thumb-none {
        width: 84px;
        aspect-ratio: 1 / 1;
        height: auto
    }

    .search-result-title {
        font-size: 1.05rem
    }

    .search-result-excerpt {
        font-size: .88rem
    }

    .search-results-list {
        max-width: 100%
    }
}

@media (max-width: 991.98px) {
    .navbar-toggler {
        order: 2;
        margin-left: 0 !important;
        padding-right: 0 !important
    }

    .navbar-search-btn {
        order: 1;
        margin-left: auto;
        margin-right: .25rem;
        padding: 0 .25rem
    }
}

:root {
    --radius-sm: var(--fe-radius);
    --radius-md: var(--fe-radius-lg);
    --radius-lg: var(--fe-radius-lg);
    --bs-border-radius: var(--fe-radius-lg);
    --bs-border-radius-sm: var(--fe-radius);
    --bs-border-radius-lg: var(--fe-radius-lg);
    --bs-border-radius-xl: var(--fe-radius-lg)
}

.project-item,.project-card,.post-card,.related-box,.related-item,.related-card,.solution-card,.solution-content,.project-sidebar-cta,.before-after-item,.contact-success,.search-item,.search-result-item {
    border-radius: var(--radius-md)
}

.search-popup {
    border-radius: 0 0 var(--radius-md) var(--radius-md)
}

.content img,.post-content img,.project-body img {
    border-radius: 0
}

.content blockquote {
    border-radius: var(--radius-md)
}

.post-hero-wrap,.post-hero-img,.related-item-thumb,.related-item-thumb img,.project-gallery-thumb,.project-gallery-thumb img,.search-thumb,.search-result-thumb,.post-card-img,.post-card-img img,.project-card-img-wrap,.project-card-img-wrap img,.project-item img,.related-card-img,.related-card-img img {
    border-radius: 0
}

.btn,.filter-btn,.line-btn,.btn-outline-primary,.btn-dark {
    border-radius: var(--radius-md)
}

.filter-btn,.line-btn {
    border-radius: var(--radius-md) !important
}

.contact-form input,.contact-form select,.contact-form textarea,.contact-field input,.contact-field select,.contact-field textarea,.form-control,.search-form input {
    border-radius: var(--radius-sm)
}

.dropdown-menu,#navbar .dropdown-menu,.navbar-toggler,.search-close {
    border-radius: var(--radius-md)
}

.pagination .page-link,.breadcrumb-item.active {
    border-radius: var(--radius-sm)
}

.post-meta-cat,.project-card-badge {
    border-radius: var(--radius-sm)
}

.post-card,.post-card.rounded {
    border-radius: 0 !important
}

.wow.animated {
    animation-duration: 0.45s !important;
    animation-delay: 0s !important
}

.mobile-menu-head {
    display: none
}

.mobile-menu-backdrop {
    display: none
}

:root {
    --shop-gap: 24px;
    --shop-gap-sm: 12px;
    --shop-surface: var(--white-warm);
    --shop-line: var(--gray-ghost)
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth
    }
}

.btn-buy {
    background: var(--bs-gray);
    color: #fff;
    font-weight: 600;
    padding: .7rem 1.4rem;
    transition: background .2s ease,transform .2s ease,box-shadow .2s ease
}

.btn-buy:hover,.btn-buy:focus {
    background: var(--ink-dark);
    border-color: var(--ink-dark);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.16)
}

.btn-buy:active {
    transform: translateY(1px)
}

.btn-buy:disabled,.btn-buy.disabled {
    background: var(--gray-ghost);
    border-color: var(--gray-ghost);
    color: var(--gray-mid);
    box-shadow: none
}

.btn-outline-ink {
    background: #fff;
    border: 1px solid var(--silver-lighter);
    color: var(--ink-black);
    font-weight: 600;
    padding: .7rem 1.4rem
}

.btn-outline-ink:hover {
    background: var(--ink-black);
    color: #fff
}

.btn-ghost-line {
    background: #fff;
    border: 1px solid var(--gray-border);
    color: var(--ink-dark);
    font-weight: 500;
    padding: .7rem 1.2rem
}

.btn-ghost-line:hover {
    border-color: var(--ink-black);
    color: var(--ink-black)
}

/* Nút "Hiển thị thêm sản phẩm" trong lúc CHỜ tải (JS `shop-grid.js` đặt `aria-busy`): **GIẤU CHỮ của
   nút** và hiện **VÒNG XOAY** ở giữa. Vòng xoay vẽ bằng `::after` + keyframes `spinner-border` CÓ SẴN
   của `bootstrap.min.css` ⇒ không thêm keyframe/màu mới (`currentColor` = màu chữ của nút).
   Chữ chỉ `visibility:hidden` (KHÔNG xoá khỏi DOM) nên nút GIỮ NGUYÊN kích thước ⇒ không nhảy layout. */
.btn-ghost-line[aria-busy="true"] {
    position: relative;
    opacity: .75;
    cursor: progress
}

.btn-ghost-line[aria-busy="true"] > span {
    visibility: hidden
}

.btn-ghost-line[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -.5rem 0 0 -.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .6s linear infinite
}

/* Người bật "giảm chuyển động": vẫn thấy vòng (báo đang tải) nhưng KHÔNG xoay. */
@media (prefers-reduced-motion: reduce) {
    .btn-ghost-line[aria-busy="true"]::after {
        animation: none;
        border-right-color: currentColor;
        opacity: .45
    }
}

.shop-toolbar {
    /*background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--radius-md);
    padding: 16px 18px*/
    width: 100%;
    /* Dòng đếm sản phẩm không còn margin riêng (nằm CÙNG HÀNG với dropdown 2026-09-26) ⇒ khoảng cách
       xuống lưới sản phẩm do toolbar giữ, nếu không lưới dính sát thanh lọc. */
    margin-bottom: 20px
}

.shop-toolbar + .shop-toolbar {
    margin-top: var(--shop-gap-sm)
}

.shop-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

/* Bộ lọc = DROPDOWN nằm CÙNG 1 HÀNG (2026-09-26). Nhãn nhỏ in hoa đứng TRƯỚC ô chọn để biết ô nào là
   Danh mục / Thương hiệu / Sắp xếp kể cả SAU khi đã chọn (mặc định luôn là "Tất cả ..."). */
.shop-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.shop-filter-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fe-muted-strong);
    margin-right: 4px;
    white-space: nowrap
}

.shop-select {
    max-width: 100%;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: .42rem 2rem .42rem .8rem;
    font-size: .85rem;
    color: var(--ink-dark);
    text-overflow: ellipsis;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    cursor: pointer
}

.shop-select:hover {
    border-color: var(--ink-black)
}

/* Ô nhập < 16px bị iOS Safari tự phóng to trang khi focus ⇒ trên màn hẹp cho select đạt 16px */
@media (max-width: 767px) {
    .shop-select {
        font-size: 1rem
    }
}

/* Dòng "N sản phẩm" + chip lọc đang áp dụng + Xóa tất cả (hẹp thì tự wrap).
   Từ 2026-09-26 nó nằm CÙNG HÀNG với dropdown (`.shop-filter-row`) và được ĐẨY SANG PHẢI bằng
   `margin-left:auto` (trước đây `.shop-field--end` đẩy ô Sắp xếp - rule đó đã bỏ). */
.shop-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 0 auto;
    font-size: .9rem;
    color: var(--gray-strong)
}

/* Admin tắt "Hiển thị bộ lọc" ⇒ hàng lọc chỉ còn dòng đếm ⇒ canh TRÁI như một dòng riêng bình thường */
.shop-filter-row--solo .shop-result {
    margin-left: 0
}

/* Hàng lọc hẹp ⇒ dòng đếm wrap xuống dưới: canh TRÁI (canh phải khi đã xuống dòng trông lệch).
   ⚠️ PHẢI khai SAU rule `.shop-result` ở trên - cùng độ ưu tiên nên rule khai sau mới thắng. */
@media (max-width: 767px) {
    .shop-result {
        margin-left: 0
    }
}

.shop-result strong {
    color: var(--ink-black)
}

.shop-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: 50px;
    padding: .2rem .35rem .2rem .75rem;
    font-size: .8rem;
    color: var(--ink-dark)
}

.shop-active-filter a {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-strong);
    text-decoration: none
}

.shop-active-filter a:hover {
    background: var(--gray-ghost);
    color: var(--ink-black)
}

.shop-clear {
    font-size: .82rem;
    color: var(--gray-strong);
    text-decoration: underline
}

.shop-clear:hover {
    color: var(--ink-black)
}

/* ─── DẢI DANH MỤC (ảnh vuông 1:1 + TÊN DƯỚI ẢNH) ở ĐẦU trang cửa hàng/trang danh mục ───────────
   Thay dropdown "Danh mục" (2026-09-26). Tiêu đề + SỐ Ô (2..8) + danh mục nào do admin chọn ở
   *Giao diện › Danh mục* (setting `shop_category_strip`). 8 ô/hàng trên desktop (đúng trần) /
   3 tablet / 2 điện thoại - cùng nhịp với lưới sản phẩm phía dưới nên nhìn như MỘT hệ.
   💡 Đặt ÍT HƠN 8 ô ⇒ dải **canh giữa** nhưng CỠ Ô KHÔNG ĐỔI (flex + `justify-content:center`,
   xem `.shop-cats-list` bên dưới) - yêu cầu 2026-09-28.
   ⚠️ Selector `.fe-section.shop-cats` (0,2,0) để THẮNG `.fe-section--flush` của section - nếu chỉ
   khai `.shop-cats` thì `padding:0` của `--flush` (khai SAU trong file) đè mất khoảng cách. */
.fe-section.shop-cats {
    padding: var(--fe-space-8) 0;
}

.shop-cats-title {
    text-align: center;
    font-size: 26px!important;
    margin-bottom: 3rem!important;
}

/* FLEX (không còn grid 8 cột) để phần dư được CANH GIỮA khi admin đặt ít hơn 8 ô: mỗi `<li>` giữ
   ĐÚNG cỡ của track 1/8 (`flex: 0 0` ⇒ không giãn ra) nên chỉ VỊ TRÍ đổi, KÍCH THƯỚC Ô giữ nguyên.
   Hàng đủ 8 ô: 8 track + 7 khe = đúng 100% ⇒ giống hệt bản grid cũ. */
.shop-cats-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fe-space-4);
    margin: 0;
    padding: 0;
    list-style: none
}

.shop-cats-list > li {
    flex: 0 0 calc((100% - 7 * var(--fe-space-4)) / 8);
    min-width: 0
}

.shop-cat {
    display: grid;
    gap: var(--fe-space-2);
    text-decoration: none;
    color: inherit
}

/* Khung ảnh VUÔNG (1:1) - đúng tỉ lệ ảnh admin nhập; `object-fit: cover` để ảnh không bị bóp méo */
.shop-cat-img {
    display: block;
    position: relative;
    aspect-ratio: 1/1;
    /*border: 1px solid var(--gray-border);
    border-radius: var(--fe-radius-lg);
    background: var(--gray-ghost);*/
    overflow: hidden
}

.shop-cat-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fe-dur) var(--fe-ease)
}

.shop-cat:hover .shop-cat-img img,
.shop-cat:focus-visible .shop-cat-img img {
    transform: scale(1.05)
}

/* Danh mục CHƯA có ảnh: khung xám + icon (KHÔNG để trống ⇒ ô lệch hẳn khỏi hàng) */
.shop-cat-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--fe-muted-strong)
}

.shop-cat-name {
    font-size: var(--fe-fs-3);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--ink-dark)
}

.shop-cat:hover .shop-cat-name {
    color: var(--ink-black)
}

/* Ô ĐANG XEM (trang danh mục `/collections/{slug}`) - viền đậm + tên gạch chân để khách biết mình đang ở đâu */
.shop-cat.is-current .shop-cat-img {
    /*border-color: var(--ink-black)*/
}

.shop-cat.is-current .shop-cat-name {
    color: var(--ink-black);
    text-underline-offset: 4px;
}

@media (max-width: 991px) {
    .shop-cats-list > li {
        flex-basis: calc((100% - 2 * var(--fe-space-4)) / 3)
    }
}

/* MOBILE (≤767.98px = đúng mốc mobile của site): dải GỌN lại theo yêu cầu 2026-09-28 - 4 ô/hàng ·
   tiêu đề 18px · đệm dải 30px. `!important` của tiêu đề là BẮT BUỘC vì bản desktop cũng khai
   `!important` (2 rule cùng specificity ⇒ rule ĐỨNG SAU thắng).
   ⛔ ĐỪNG dựng lại khối `@media (max-width: 575px)` cũ (2 ô/hàng): ≤575 ⊂ ≤767.98 nên nó bị khối
   này đè HOÀN TOÀN - đã xoá 2026-09-28. */
@media (max-width: 767.98px) {
    .fe-section.shop-cats {
        padding: 30px 0
    }

    .shop-cats-title {
        font-size: 18px!important;
        margin-bottom: 1.25rem!important
    }

    .shop-cats-list {
        gap: var(--fe-space-3)
    }

    .shop-cats-list > li {
        flex-basis: calc((100% - 3 * var(--fe-space-3)) / 4)
    }
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--white-cool);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--gray-border);
    box-shadow: 0 11px 23px rgba(0,0,0,.09)
}

.product-card-img-wrap {
    display: block;
    position: relative;
    background: var(--gray-ghost);
    overflow: hidden;
    aspect-ratio: 1/1
}

.product-card-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform .4s ease
}

.product-card:hover .product-card-img-wrap img {
    transform: scale(1.04)
}

.product-card-ph {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 42%,#fdfdfd 0%,#f3f3f3 70%);
    color: #c4c4c4
}

.product-card-ph svg {
    width: 38px;
    height: 38px
}

.product-card-ph span {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #bdbdbd
}

.product-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2
}

.product-card-badge {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .22rem .55rem;
    border-radius: 50px;
    background: var(--ink-black);
    color: #fff
}

.product-card-badge--sale {
    background: #c92a2a
}

.product-card-badge--out {
    background: var(--gray-strong)
}

.product-card-badge--new {
    background: #fff;
    color: var(--ink-black);
    border: 1px solid var(--gray-border)
}

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    padding: 14px 16px 16px
}

.product-card-brand {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-strong)
}

.product-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-black)
}

.product-card-title a {
    color: inherit;
    text-decoration: none
}

.product-card:hover .product-card-title a {
    text-underline-offset: 3px
}

.product-card .product-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px
}

.product-card-price .price-current {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-danger);
}

.product-card-price .price-old {
    font-size: .85rem;
    color: var(--gray-mid);
    text-decoration: line-through
}

.product-card-price .price-contact {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-strong)
}

.product-card-cta {
    margin-top: auto;
    padding-top: 10px
}

.product-card-cta .btn {
    width: 100%;
    font-size: .75rem;
    padding: .6rem 1rem;
}

.product-card--out .product-card-img-wrap img,.product-card--out .product-card-ph {
    opacity: .55;
    filter: grayscale(.4)
}

.pdp-wrap {
    padding-top: 30px;
    padding-bottom: 60px
}

.pdp-crumb {
    font-size: .85rem;
    color: var(--gray-strong);
    margin: 0
}

.pdp-crumb a {
    color: var(--gray-strong);
    text-decoration: none
}

.pdp-crumb a:hover {
    color: var(--ink-black);
    text-decoration: underline
}

.pdp-crumb .sep {
    margin: 0 8px;
    color: var(--gray-soft)
}

.pdp-gallery {
    position: sticky;
    top: calc(var(--navbar-height,82px) + 12px)
}

.pdp-cols {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 24px
}

.pdp-main {
    position: relative;
    background: var(--gray-ghost);
    /*border: 1px solid var(--shop-line);*/
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1/1
}

.pdp-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pdp-main--empty {
    aspect-ratio: 1/1;
    background: radial-gradient(circle at 50% 45%,#fdfdfd 0%,#f2f2f2 75%)
}

.pdp-main .pdp-ph {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    gap: 6px
}

.pdp-main .pdp-ph em {
    font-style: normal;
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
    color: #bdbdbd
}

.pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    margin-top: 12px
}

.pdp-thumb {
    padding: 0;
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    transition: border-color .2s ease,box-shadow .2s ease
}

.pdp-thumb img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover
}

.pdp-thumb:hover {
    border-color: var(--gray-strong)
}

.pdp-thumb.is-active {
    border-color: var(--ink-black);
    box-shadow: 0 0 0 2px rgba(0,0,0,.10)
}

.pdp-gallery-carousel {
    display: block
}

.pdp-gallery-outer,.pdp-gallery-outer .lSSlideWrapper,.pdp-gallery-carousel {
    height: 100% !important
}

.pdp-gallery-carousel.lSFade {
    padding-bottom: 0 !important
}

.pdp-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

@media (min-width: 992px) {
    .pdp-gallery {
        display: grid;
        grid-template-columns: 88px minmax(0,1fr);
        gap: 12px;
        align-items: start
    }

    /* Sản phẩm chỉ có 1 ảnh (hoặc chưa có ảnh) ⇒ KHÔNG render rail thumbnail
       (template chỉ in `.pdp-thumbs` khi > 1 ảnh) ⇒ thu grid về 1 CỘT để ảnh tràn vào đúng
       chỗ rail: 88px + khe 12px = 100px bề rộng được trả lại cho khung ảnh.
       `.pdp-gallery--single` do `templates/product-detail.php` gắn theo SỐ ẢNH. */
    .pdp-gallery--single {
        grid-template-columns: minmax(0,1fr)
    }

    .pdp-gallery--single .pdp-main {
        grid-column: 1;
        /* Nới trần chiều cao cho ca 1 ảnh: khung 1:1 nên bề rộng = chiều cao, mà trần cũ
           `68vh` (612px trên màn 900px) làm khung HỤT so với cột (~747px) ⇒ vẫn thừa một dải trống
           bên phải. 84vh đủ để khung lấp hết cột ở màn hình phổ thông, vẫn chặn ở màn thấp. */
        max-height: min(84vh,820px)
    }

    .pdp-main {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: 1/1;
        height: auto;
        max-height: min(68vh,660px)
    }

    .pdp-thumbs {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 0;
        max-height: min(68vh,660px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin
    }

    .pdp-thumbs::-webkit-scrollbar {
        width: 6px
    }

    .pdp-thumbs::-webkit-scrollbar-thumb {
        background: var(--gray-border);
        border-radius: 3px
    }

    .pdp-gallery-outer.vertical .lSSlideWrapper {
        height: 100% !important
    }
}

.pdp-info {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.pdp-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0
}

.pdp-pricebox {
    padding: 0
}

.pdp-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px
}

.pdp-price {
    font-size: 28px;
    font-weight: 600;
    color: #dc3545;
    line-height: 1.1
}

.pdp-price-old {
    font-size: 1rem;
    color: var(--gray-mid);
    text-decoration: line-through
}

.pdp-save {
    font-size: .78rem;
    font-weight: 600;
    color: #c92a2a;
    background: rgba(201,42,42,.08);
    border-radius: 50px;
    padding: .2rem .6rem
}

.pdp-price-note {
    margin: 8px 0 0;
    font-size: .82rem;
    color: var(--gray-strong)
}

.pdp-actions {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.pdp-actions-row {
    display: flex;
    align-items: stretch;
    gap: 15px
}

.pdp-qty {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 50px;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff
}

.pdp-qty button {
    width: 44px;
    border: 0;
    background: #fff;
    color: var(--ink-dark);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease
}

.pdp-qty button:hover {
    background: var(--gray-ghost)
}

.pdp-qty button:focus-visible {
    outline: 2px solid var(--ink-black);
    outline-offset: -2px
}

.pdp-qty input {
    width: 52px;
    border: 0;
    border-left: 1px solid var(--gray-border);
    border-right: 1px solid var(--gray-border);
    text-align: center;
    font-weight: 600;
    background: #fff;
    -moz-appearance: textfield
}

.pdp-qty input:focus {
    outline: none
}

.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.pdp-actions-row .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem
}

.pdp-actions>.btn-buy {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem
}

.pdp-short {
    font-size: 1rem;
    color: var(--gray-strong);
    line-height: 1.6;
    border-top: 1px solid var(--gray-border);
    padding-top: 18px
}

.pdp-short>:first-child {
    margin-top: 0
}

.pdp-short>:last-child {
    margin-bottom: 0
}

.pdp-short p {
    margin: 0 0 .5rem
}

.pdp-short ul,.pdp-short ol {
    margin: 0 0 .5rem;
    padding-left: 1.15rem
}

.pdp-short li {
    margin-bottom: .25rem
}

.pdp-short strong,.pdp-short b {
    color: var(--ink-dark)
}

.pdp-short a {
    color: var(--ink-black);
    text-decoration: underline
}

.pdp-short img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm)
}

.pdp-tabs {
    margin-top: 48px
}

.pdp-tabs-nav {
    display: none
}

.pdp-tab {
    margin-bottom: 32px
}

.pdp-tab:last-child {
    margin-bottom: 0
}

.pdp-tab-head {
    margin: 0 0 14px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink-black)
}

.pdp-tab-head-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left
}

.pdp-tab-icon {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--gray-strong);
    border-bottom: 2px solid var(--gray-strong);
    transform: rotate(45deg);
    transition: transform .2s ease
}

.pdp-tab.is-open .pdp-tab-icon {
    transform: rotate(-135deg)
}

.pdp-tab-btn {
    position: relative;
    padding: 12px 18px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--gray-strong);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap
}

.pdp-tab-btn:hover {
    color: var(--ink-black)
}

.pdp-tab-btn.is-active {
    color: var(--ink-black);
    border-bottom-color: var(--ink-black)
}

@media (min-width: 768px) {
    .pdp-tabs.is-tab-mode .pdp-tabs-nav {
        display: flex;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid var(--shop-line)
    }

    .pdp-tabs.is-tab-mode .pdp-tabs-nav::-webkit-scrollbar {
        display: none
    }

    .pdp-tabs.is-tab-mode .pdp-tabs-panels {
        padding-top: 26px
    }

    .pdp-tabs.is-tab-mode .pdp-tab {
        display: none;
        margin-bottom: 0
    }

    .pdp-tabs.is-tab-mode .pdp-tab.is-active {
        display: block
    }

    .pdp-tabs.is-tab-mode .pdp-tab-head {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap
    }
}

@media (max-width: 767.98px) {
    .pdp-tabs.is-accordion-mode .pdp-tab {
        margin-bottom: 10px;
        border: 1px solid var(--shop-line);
        border-radius: var(--radius-md);
        background: #fff;
        overflow: hidden
    }

    .pdp-tabs.is-accordion-mode .pdp-tab:last-child {
        margin-bottom: 0
    }

    .pdp-tabs.is-accordion-mode .pdp-tab-head {
        margin: 0;
        font-size: 1rem
    }

    .pdp-tabs.is-accordion-mode .pdp-tab-head-btn {
        padding: 15px 16px;
        cursor: pointer
    }

    .pdp-tabs.is-accordion-mode .pdp-tab-body {
        display: none;
        padding: 2px 16px 16px;
        border-top: 1px solid var(--shop-line)
    }

    .pdp-tabs.is-accordion-mode .pdp-tab.is-open .pdp-tab-body {
        display: block
    }
}

.pdp-section {
    margin-top: 48px;
    scroll-margin-top: calc(var(--navbar-height,82px) + 16px)
}

.pdp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shop-line)
}

.pdp-section-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink-black)
}

.product-description {
    max-width: 880px;
    color: var(--ink-dark);
    line-height: 1.8
}

.product-description p {
    text-align: justify
}

.product-description img {
    max-width: 100%;
    height: auto
}

.product-description h2,.product-description h3 {
    margin-top: 1.6rem
}

.pdp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--shop-line);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow: 0 -10px 24px rgba(0,0,0,.08);
    transform: translateY(105%);
    transition: transform .25s ease
}

.pdp-sticky.is-visible {
    transform: none
}

@media (min-width: 992px) {
    .pdp-sticky {
        display: none
    }
}

.pdp-sticky-inner {
    display: flex;
    align-items: center;
    gap: 12px
}

.pdp-sticky-price {
    display: flex;
    flex-direction: column;
    line-height: 1.15
}

.pdp-sticky-price .now {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink-black)
}

.pdp-sticky-price .was {
    font-size: .78rem;
    color: var(--gray-mid);
    text-decoration: line-through
}

.pdp-sticky .btn {
    flex: 1 1 auto
}

.shop-empty {
    text-align: center;
    padding: 64px 20px;
    background: #fff;
    border: 1px dashed var(--gray-border);
    border-radius: var(--radius-lg)
}

.shop-empty svg {
    width: 52px;
    height: 52px;
    color: var(--gray-soft);
    margin-bottom: 14px
}

.shop-empty h2 {
    font-size: 1.15rem;
    margin-bottom: 6px
}

.shop-empty p {
    color: var(--gray-strong);
    margin-bottom: 18px
}

.shop-pager {
    display: flex;
    justify-content: center;
    margin-top: 36px
}

/* Nút "Hiển thị thêm sản phẩm" (kiểu phân trang = Tải thêm, bật ở *Giao diện › Cửa hàng*).
   JS ẩn `[hidden]` khi đã HẾT sản phẩm - phải khai `[hidden]` ở ĐÂY vì `display:flex` ở trên sẽ
   thắng thuộc tính `hidden` của trình duyệt (bẫy đã gặp ở `.blog-carousel-nav`). */
.shop-more {
    display: flex;
    justify-content: center;
    margin-top: 36px
}

.shop-more[hidden] {
    display: none
}

.shop-more .btn {
    box-shadow: 0 10px 10px -10px #666;
    min-width: 100%;
    text-align: center;
    transition: all 0.3s ease-out;
}

.shop-more .btn:hover {
    border: 1px solid var(--gray-border);
    transform: translateY(4px);
    box-shadow: unset;
}

@media (max-width: 575.98px) {
    .shop-more {
        margin-top: 24px
    }

    .shop-more .btn {
        min-width: 0;
        width: 100%
    }
}

.shop-pager .pagination {
    gap: 6px;
    margin: 0
}

.shop-pager .page-link {
    border: 1px solid var(--gray-border);
    color: var(--ink-dark);
    min-width: 40px;
    text-align: center;
    padding: .45rem .7rem
}

.shop-pager .page-item.active .page-link {
    background: var(--ink-black);
    border-color: var(--ink-black);
    color: #fff
}

.shop-pager .page-item.disabled .page-link {
    color: var(--gray-soft);
    background: var(--white-warm)
}

/* 2 MŨI TÊN Trước/Sau = NÚT TRÒN KHÔNG VIỀN (icon chevron + vòng hover) ⇒ khác hẳn ô SỐ (có viền vuông) */
.shop-pager .page-item--nav .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--ink-black)
}

.shop-pager .page-item--nav:not(.disabled) .page-link:hover {
    background: var(--gray-ghost)
}

.shop-pager .page-item--nav .fe-ico {
    width: 20px;
    height: 20px
}

.shop-pager .page-item--nav.disabled .page-link {
    background: transparent;
    color: var(--gray-soft)
}

/* Dấu "…" là DẤU NGĂN (span, không bấm được) ⇒ bỏ viền/nền cho khỏi giống nút */
.shop-pager .page-item.disabled > span.page-link {
    border-color: transparent;
    background: transparent
}

/* Tách cụm mũi tên ra khỏi dãy số cho rõ 2 nhóm */
.shop-pager .page-item--nav:first-child {
    margin-right: 8px
}

.shop-pager .page-item--nav:last-child {
    margin-left: 8px
}

@media (max-width: 991.98px) {
    .pdp-gallery {
        position: static
    }

    .pdp-section {
        margin-top: 36px
    }
}

@media (max-width: 767.98px) {
    .shop-toolbar {
        padding: 14px
    }

    .shop-filter-label {
        width: 100%;
        margin-bottom: 2px
    }

    .product-card-body {
        padding: 12px 12px 14px
    }

    .product-card-title {
        font-size: .92rem
    }

    .product-card-price .price-current {
        font-size: 1.05rem
    }

    .product-card-cta .btn {
        font-size: .82rem;
        padding: .55rem .6rem
    }

    .pdp-thumbs {
        grid-template-columns: repeat(4,1fr)
    }

    .pdp-pricebox {
        padding: 14px 16px
    }
}

@media (max-width: 575.98px) {
    .pdp-actions-row {
        gap: 8px
    }

    .pdp-qty button {
        width: 38px
    }

    .pdp-qty input {
        width: 44px
    }

    .pdp-actions-row .btn {
        font-size: .88rem;
        padding-left: .6rem;
        padding-right: .6rem
    }
}

.product-feature-list li {
    margin-bottom: .35rem
}

.product-main-img img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--radius-md)
}

.product-main-img .thumb.active,.thumb:hover {
    border-color: var(--bs-primary)
}

@media (max-width: 991.98px) {
    .container {
        padding-left: var(--fe-gutter-sm) !important;
        padding-right: var(--fe-gutter-sm) !important
    }

    #navbarCollapse {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(85vw,320px);
        z-index: 1060;
        background: #fff;
        box-shadow: none;
        transform: translateX(100%);
        transition: transform 220ms ease;
        overflow-y: auto;
        padding: 0
    }

    #navbarCollapse[data-mobile-open="true"] {
        transform: translateX(0);
        box-shadow: -8px 0 30px rgba(0,0,0,.15)
    }

    #navbarCollapse .navbar-nav {
        display: block;
        margin-left: 0 !important
    }

    #navbarCollapse .navbar-nav>.nav-item {
        padding: 0
    }

    #navbarCollapse .nav-link,#navbarCollapse .dropdown-item {
        padding: .7rem 1rem
    }

    #navbarCollapse .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        padding: 0 0 .25rem .9rem
    }

    #navbarCollapse .dropdown-menu.show {
        display: block
    }

    #navbarCollapse .nav-caret {
        margin-left: auto
    }

    #navbarCollapse .dropdown-mobile-sub {
        padding-left: .5rem
    }

    .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: 1rem 1rem .75rem;
        border-bottom: 1px solid #eee;
        margin-bottom: .25rem
    }

    .mobile-menu-title {
        font-weight: 700;
        color: var(--ink-dark);
        font-size: 1.3rem
    }

    .mobile-menu-close {
        background: transparent;
        border: 0;
        font-size: 1.3rem;
        color: var(--gray-strong);
        cursor: pointer;
        padding: 0 .25rem
    }

    .mobile-menu-close:hover {
        color: var(--ink-dark)
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1055;
        display: none;
        border: 0;
        background: rgba(0,0,0,.55)
    }

    .mobile-menu-backdrop[data-mobile-open="true"] {
        display: block
    }
}

@media (max-width: 767.98px) {
    .container {
        max-width: 100% !important;
        padding-left: var(--fe-gutter-sm) !important;
        padding-right: var(--fe-gutter-sm) !important
    }

    .search-overlay {
        padding: 0
    }

    .search-popup {
        position: fixed;
        inset: 0;
        margin-top: 0;
        width: 100%;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        background: #fff;
        z-index: 2001;
        animation: none
    }

    .search-close {
        position: absolute;
        top: 10px;
        right: 14px;
        z-index: 3;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--white-cool);
        color: var(--ink-dark);
        font-size: 1.1rem
    }

    .search-form {
        flex: 0 0 auto;
        padding: max(16px,env(safe-area-inset-top)) 70px 16px 20px;
        border-bottom: 1px solid #eef0f3;
        background: #fff
    }

    .search-form .fa-search {
        font-size: 1.15rem;
        color: var(--gray-strong)
    }

    .search-form input {
        font-size: 1.05rem
    }

    .search-results {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
        padding: .75rem .75rem 1rem;
        -webkit-overflow-scrolling: touch
    }

    .search-item {
        padding: .7rem .5rem
    }

    .search-thumb {
        width: 54px;
        height: 54px
    }

    .search-item-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .search-item-excerpt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .search-badge {
        font-size: .66rem;
        padding: .18rem .45rem
    }

    .search-empty {
        padding: 2.5rem 1rem
    }

    .search-viewall {
        flex: 0 0 auto;
        padding: 1rem;
        padding-bottom: max(1rem,env(safe-area-inset-bottom));
        border-top: 1px solid #eef0f3;
        background: #fff;
        font-size: .95rem
    }
}

.br-trai-1 {
    border-radius: 15px
}

.material-section,#projects {
    background: linear-gradient(160deg,#0b0b0b 0%,#1a1a1a 55%,#2b2b2b 100%);
    color: var(--white-pure);
    position: relative;
    isolation: isolate
}

.material-section::before,#projects::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient( 90deg,transparent,transparent 2px,rgba(255,255,255,0.022) 2px,rgba(255,255,255,0.022) 4px );
    pointer-events: none
}

.material-section>.container,#projects>.container {
    position: relative;
    z-index: 1
}

.material-section {
    color: var(--white-pure);
    padding: 100px 0;
}

.material-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--fe-shadow-float);
    border: 1px solid rgba(255,255,255,.10)
}

.material-media img {
    display: block;
    aspect-ratio: 1000 / 666;
    object-fit: cover
}

.material-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--silver-shimmer);
    color: var(--ink-black);
    font-weight: 700;
    font-size: var(--fe-fs-1);
    letter-spacing: .5px;
    padding: .35rem .8rem;
    border-radius: 999px
}

.material-eyebrow {
    display: inline-block;
    font-size: var(--fe-fs-1);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--silver-lighter);
    margin-bottom: var(--fe-space-3)
}

.material-title {
    color: #fff;
    font-size: var(--fe-fs-display-2);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: var(--fe-space-5)
}

.material-intro {
    color: rgba(255,255,255,.75);
    font-size: var(--fe-fs-4);
    line-height: 1.7;
    max-width: 56ch;
    margin-bottom: var(--fe-space-5)
}

.material-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1.5rem
}

.material-benefits li {
    display: flex;
    align-items: flex-start;
    gap: .6rem
}

.material-benefits li i {
    color: var(--silver-lighter);
    font-size: var(--fe-ico-bullet);
    margin-top: .1rem
}

.material-benefits li strong {
    display: block;
    color: #fff;
    font-size: var(--fe-fs-4);
    font-weight: 600;
    line-height: 1.35
}

.material-benefits li small {
    display: block;
    color: rgba(255,255,255,.6);
    font-size: var(--fe-fs-2);
    line-height: 1.5;
    margin-top: .15rem
}

.material-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-3)
}

@media (max-width: 767.98px) {
    .material-benefits {
        grid-template-columns: 1fr
    }

    .material-actions {
        flex-direction: column
    }

    .material-btn {
        width: 100%;
        justify-content: center
    }

    .material-title {
        font-size: var(--fe-fs-6);
        line-height: 1.5
    }
}

#projects {
    color: var(--white-pure)
}

#projects h2,#projects h3,#projects h4,#projects .display-1 {
    color: var(--white-pure)
}

.section-cta {
    margin-top: var(--fe-space-7);
    text-align: center
}

.brand-stats {
    margin-top: var(--fe-space-8);
    border-top: 1px solid var(--gray-ghost);
    padding-top: var(--fe-space-7)
}

.brand-stat-value {
    display: block;
    font-size: var(--fe-fs-display-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink-black);
    margin-bottom: var(--fe-space-2)
}

.brand-stat-label {
    display: block;
    font-size: var(--fe-fs-1);
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: .08em
}

/* Vách ngăn dọc giữa các số liệu (chỉ ở desktop 4 cột). */
@media (min-width: 768px) {
    .brand-stats>.col-md-3+.col-md-3 {
        border-left: 1px solid var(--gray-ghost)
    }
}

/* Mobile 2 cột ⇒ chỉ kẻ vách trước CỘT PHẢI (phần tử ở vị trí chẵn). */
@media (max-width: 767.98px) {
    .brand-stats>.col-6:nth-child(even) {
        border-left: 1px solid var(--gray-ghost)
    }

    .brand-stat-value {
        font-size: var(--fe-fs-display-2)
    }
}

.pl-landing {
    overflow: hidden
}

/* HERO landing = ẢNH PHỦ KÍN 1 MÀN HÌNH + CHỮ ĐÈ LÊN ẢNH (2026-09-23).
   Cùng kiến trúc hero trang chủ: nền (z1) → lớp phủ (z2) → nội dung (z3).
   Cao = 1 màn hình TRỪ chiều cao header (đầu trang landing KHÔNG trong suốt ⇒ header nằm trong luồng). */
.pl-landing .pl-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    min-height: 520px;
    min-height: calc(100vh - var(--navbar-height));
    min-height: calc(100svh - var(--navbar-height))
}

.pl-landing .pl-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1
}

.pl-landing .pl-hero-bg img,
.pl-landing .pl-hero-bg iframe,
.pl-landing .pl-hero-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0
}

/* Lớp phủ = token SẴN CÓ của hero trang chủ (gradient tối dần sang phải) ⇒ không thêm mã màu mới. */
.pl-landing .pl-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--fe-overlay-hero);
    pointer-events: none
}

.pl-landing .pl-hero-body {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 5rem 0
}

/* Huy hiệu nhỏ giờ nằm ở GÓC TRÊN-TRÁI khung ảnh (trước đây nằm trong cột ảnh) ⇒ phải NỔI trên lớp phủ. */
.pl-landing .pl-hero-badge {
    z-index: 3;
    top: 1.5rem;
    left: 1.5rem
}

/* Nút + huy hiệu trong khối HERO (nền TỐI): `.fe-btn--*` mặc định viết cho nền SÁNG ⇒ phải ĐẢO màu,
   nếu không nút "outline" là chữ ĐEN trên nền ĐEN = vô hình (lỗi thật đã gặp 2026-09-23).
   Cùng cách `.hero-full-btn-*`/`.material-btn-*` đã làm - KHÔNG thêm mã màu mới. */
.pl-landing .pl-hero .fe-btn--primary {
    background: var(--white-pure);
    color: var(--ink-black);
    border: var(--fe-btn-border)
}

.pl-landing .pl-hero .fe-btn--primary:hover {
    background: var(--ink-black);
    color: var(--white-pure);
    border-color: var(--ink-black)
}

.pl-landing .pl-hero .fe-btn--outline {
    background: transparent;
    color: var(--white-pure);
    border: var(--fe-btn-border-invert)
}

.pl-landing .pl-hero .fe-btn--outline:hover {
    background: var(--white-pure);
    color: var(--ink-black);
    border-color: var(--white-pure)
}

.pl-landing .pl-hero .pl-trust {
    color: var(--white-pure)
}

.pl-landing .material-eyebrow {
    letter-spacing: .18em
}

.pl-landing .material-title {
    font-size: clamp(2rem,4vw,3rem)
}

.pl-landing .material-intro {
    max-width: 520px
}

.pl-trust {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem .9rem;
    background: rgba(200,202,204,.12);
    border: 1px solid rgba(200,202,204,.35);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-black)
}

.pl-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.pl-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: .5rem .6rem;
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    background: var(--white-pure);
    font-size: .72rem;
    color: var(--gray-strong);
    white-space: nowrap;
    transition: transform .2s,border-color .2s
}

.pl-swatch:hover {
    transform: translateY(-2px);
    border-color: var(--silver-dark)
}

/* ── Bảng màu có CHẤM MÀU THẬT (khối `colors_handles` khi admin nhập mã màu) ──
   Chấm màu là SVG NỘI TUYẾN với `fill="#…"` (KHÔNG `style` inline) ⇒ không phá CSP `style-src`.
   `.pl-swatches` nay là `<ul>` (I-* vẫn dùng chế độ mã chữ, trang Hệ tủ bếp dùng chế độ chấm màu). */
.pl-swatches {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.pl-swatch-dot {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%
}

.pl-swatch-note {
    margin: var(--fe-space-4) 0 0;
    font-size: var(--fe-fs-3);
    color: var(--gray-mid)
}

/* ── Khối `line_cards` (ba dòng sản phẩm) ── */
.pl-line-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit
}

.pl-line-card {
    overflow: hidden;
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--radius-lg);
    transition: transform var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease)
}

.pl-line-link:hover .pl-line-card,.pl-layout-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fe-shadow-float);
    border-color: var(--silver-light)
}

.pl-line-img {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--white-cool)
}

.pl-line-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fe-dur-zoom) var(--fe-ease)
}

.pl-line-link:hover .pl-line-img img {
    transform: scale(1.04)
}

.pl-line-badge {
    display: inline-block;
    margin-bottom: var(--fe-space-2);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--silver-shimmer);
    color: var(--ink-black);
    font-size: var(--fe-fs-1);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase
}

.pl-line-title {
    margin-bottom: var(--fe-space-2)
}

.pl-line-desc {
    margin: 0 0 var(--fe-space-4);
    color: var(--gray-strong)
}

.pl-line-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: var(--ink-black)
}

.pl-line-more .fe-ico {
    transition: transform var(--fe-dur) var(--fe-ease)
}

.pl-line-link:hover .pl-line-more .fe-ico {
    transform: translateX(3px)
}

/* ── Khối `layouts` (kiểu bố trí + dải chiều cao chuẩn) ── */
.pl-layout-card {
    overflow: hidden;
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--radius-lg);
    transition: transform var(--fe-dur) var(--fe-ease),box-shadow var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease)
}

.pl-layout-fig {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fe-space-5) var(--fe-space-4) 0;
    color: var(--silver-dark)
}

.pl-diagram {
    width: 120px;
    height: 84px;
    max-width: 100%
}

.pl-layout-name {
    margin-bottom: 0
}

.pl-specs {
    margin-top: var(--fe-space-6);
    padding-top: var(--fe-space-6);
    border-top: 1px solid var(--gray-border)
}

.pl-specs-title {
    margin-bottom: var(--fe-space-5);
    text-align: center
}

.pl-specs-eyebrow {
    text-align: center
}

.pl-specs-text {
    max-width: 68ch;
    margin: 0 auto var(--fe-space-6);
    text-align: center;
    color: var(--gray-strong)
}

.pl-spec {
    text-align: center
}

.pl-spec-num {
    margin: 0;
    font-size: var(--fe-fs-display-2);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-black)
}

.pl-spec-num > span {
    margin-left: .15em;
    font-size: var(--fe-fs-4);
    font-weight: 500
}

.pl-spec-label {
    margin: var(--fe-space-2) 0 0;
    color: var(--gray-strong)
}

.pl-handles {
    list-style: none;
    padding: 0;
    margin: 0
}

.pl-handles li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--gray-ghost);
    font-size: .95rem
}

.pl-handles li:last-child {
    border-bottom: 0
}

.pl-handles strong {
    color: var(--ink-black)
}

.pl-handles span {
    color: var(--gray-mid);
    font-size: .85rem;
    text-align: right
}

/* Danh sách gạch đầu dòng 1 dòng 1 ý - dùng trong nội dung 4 trang landing HTML (`pages.content`). */
.pl-bullets {
    list-style: none;
    margin: 0 0 var(--fe-space-5);
    padding: 0;
    display: grid;
    gap: var(--fe-space-2)
}

.pl-bullets li {
    display: flex;
    align-items: flex-start;
    gap: var(--fe-space-2);
    color: var(--gray-strong)
}

.pl-bullets .fe-ico {
    flex: none;
    margin-top: .15em;
    color: var(--silver-dark)
}

.pl-accessory {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--white-pure);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .25s,box-shadow .25s;
    height: 100%
}

.pl-accessory:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(26,26,26,.1)
}

.pl-accessory-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--white-cool);
    color: var(--gray-soft);
    font-size: 1.6rem;
    overflow: hidden
}

.pl-accessory-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pl-accessory-name {
    display: block;
    padding: .6rem .75rem;
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink-dark)
}

.pl-landing .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    border-color: rgba(255,255,255,.12)
}

.pl-landing .table-dark thead th {
    border-color: rgba(255,255,255,.12);
    color: var(--silver-lighter);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .08em
}

.pl-landing .table-dark tbody td {
    border-color: rgba(255,255,255,.12);
    font-size: .95rem
}

.pl-landing .table-dark tbody tr {
    transition: background .2s
}

.pl-landing .table-dark tbody tr:hover {
    background: rgba(255,255,255,.05)
}

@media (max-width: 575.98px) {
    .pl-handles li {
        flex-direction: column;
        gap: .15rem
    }

    .pl-landing .material-title {
        font-size: 1.8rem
    }
}

.navbar-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 .5rem;
    margin-left: 0px;
    color: var(--header-icon,var(--ink-dark));
    font-size: 1.5rem;
    text-decoration: none;
    transition: color .2s
}

.navbar-cart-btn:hover {
    color: var(--gray-mid)
}

.navbar-search-btn {
    margin-left: .25rem
}

.navbar-cart-count {
    position: absolute;
    top: -7px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--header-badge-bg,var(--ink-black));
    color: var(--header-badge-fg,#fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center
}

.navbar-cart-count[hidden] {
    display: none
}

.fe-flash-wrap {
    padding-top: 1rem
}

.fe-flash {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .7rem 1rem;
    margin-bottom: .6rem;
    border-radius: 10px;
    font-size: .92rem;
    background: #f4f4f4;
    color: var(--ink-dark)
}

.fe-flash i {
    margin-top: .15rem
}

.fe-flash--success {
    background: #eef7ee;
    color: #1e6b2f
}

.fe-flash--error {
    background: #fdeceb;
    color: #a3271c
}

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 2100
}

.cart-drawer[hidden] {
    display: none
}

.cart-drawer-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(17,17,17,.45);
    cursor: pointer
}

.cart-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -14px 0 34px rgba(0,0,0,.16);
    animation: cartSlideIn .22s ease
}

@keyframes cartSlideIn {
    from {
        transform: translateX(26px);
        opacity: .65
    }

    to {
        transform: none;
        opacity: 1
    }
}

.cart-drawer-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1
}

.cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #ececec
}

.cart-drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600
}

.cart-drawer-close {
    padding: .25rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--gray-strong);
    font-size: 1.15rem;
    line-height: 1
}

.cart-added {
    display: flex;
    gap: .85rem;
    padding: 1rem 1.2rem;
    background: #fafafa;
    border-bottom: 1px solid #ececec
}

.cart-added-img,.cart-added-ph,.cart-drawer-thumb,.cart-drawer-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #f1f1f1;
    color: var(--gray-mid)
}

.cart-added-img,.cart-added-ph {
    width: 72px;
    height: 72px
}

.cart-drawer-thumb,.cart-drawer-ph {
    width: 48px;
    height: 48px;
    border-radius: 8px
}

.cart-added-img img,.cart-drawer-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cart-added-body {
    min-width: 0
}

.cart-added-name {
    display: block;
    margin-bottom: .2rem;
    color: var(--ink-black);
    font-weight: 600
}

.cart-added-price .now {
    font-weight: 600
}

.cart-added-price .was {
    margin-left: .35rem;
    color: var(--gray-mid);
    font-size: .88rem;
    text-decoration: line-through
}

.cart-added-price .save {
    margin-left: .35rem;
    color: #c0392b;
    font-size: .82rem;
    font-weight: 600
}

.cart-added-qty {
    font-size: .85rem;
    color: var(--gray-mid)
}

.cart-drawer-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.2rem
}

.cart-drawer-list-title {
    margin: 0 0 .6rem;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-mid)
}

.cart-drawer-list ul {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.cart-drawer-list li {
    display: flex;
    align-items: center;
    gap: .65rem
}

.cart-drawer-item {
    flex: 1;
    min-width: 0
}

.cart-drawer-item-name {
    display: block;
    color: var(--ink-black);
    font-size: .95rem
}

.cart-drawer-item-meta {
    font-size: .82rem;
    color: var(--gray-mid)
}

.cart-drawer-item-total {
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap
}

.cart-drawer-empty {
    padding: 1.6rem 1.2rem;
    color: var(--gray-mid)
}

.cart-drawer-foot {
    padding: 1rem 1.2rem 1.2rem;
    border-top: 1px solid #ececec
}

.cart-drawer-foot--empty {
    display: flex;
    flex-direction: column
}

.cart-drawer-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .3rem
}

.cart-drawer-sum strong {
    font-size: 1.15rem
}

.cart-drawer-note {
    margin: 0 0 .85rem;
    font-size: .8rem;
    color: var(--gray-mid)
}

.cart-drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem
}

.cart-drawer-actions .btn {
    width: 100%
}

.cart-drawer-continue {
    display: block;
    width: 100%;
    margin-top: .7rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gray-strong);
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer
}

.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2200;
    max-width: min(92vw,420px);
    padding: .7rem 1rem;
    border-radius: 10px;
    background: var(--ink-black);
    color: #fff;
    font-size: .92rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.22)
}

.cart-toast[hidden] {
    display: none
}

.cart-toast--error {
    background: #c0392b
}

body.cart-drawer-open {
    overflow: hidden
}

@media (max-width: 991.98px) {
    .navbar-cart-btn {
        order: 1;
        margin-left: auto;
        margin-right: .25rem
    }

    .navbar-search-btn {
        order: 1;
        margin-left: 0;
        margin-right: .25rem
    }
}

@media (max-width: 575.98px) {
    .cart-drawer-panel {
        max-width: none
    }
}

#navbar .header-zone {
    display: flex;
    align-items: center
}

#navbar .header-zone--center {
    flex: 1 1 auto;
    min-width: 0
}

#navbar .header-zone:last-child {
    margin-left: auto
}

#navbar .header-zone:empty {
    display: none
}

#navbar .header-row {
    display: block;
    width: 100%
}

#navbar .header-row>.container {
    display: flex;
    align-items: center
}

#navbar .header-row--main>.container {
    min-height: var(--navbar-height,82px)
}

#navbar .header-row--top {
    background: var(--header-top-bg,transparent)
}

#navbar .header-row--top>.container {
    min-height: var(--header-top-h,40px)
}

#navbar .header-row--bottom {
    background: var(--header-bottom-bg,transparent);
    border-top: 1px solid var(--header-border-color,var(--gray-border))
}

#navbar .header-row--bottom>.container {
    min-height: var(--header-bottom-h,48px)
}

@media (max-width: 991.98px) {
    #navbar .header-zone--right {
        order: 1;
        margin-left: auto
    }

    #navbar .header-zone--center {
        order: 2;
        flex: 0 0 auto
    }

    #navbar .navbar-toggler {
        order: 3;
        margin-left: 0 !important
    }

    #navbar .header-zone--right .navbar-cart-btn {
        margin-left: 0;
        margin-right: .25rem
    }

    #navbar .header-zone--right .navbar-search-btn {
        margin-left: 0;
        margin-right: .25rem
    }
}

#navbar .header-cta {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease
}

#navbar .header-cta[data-style="primary"] {
    background: var(--header-cta-bg,var(--header-link-hover,#1a1a1a));
    color: var(--header-cta-fg,#ffffff)
}

#navbar .header-cta[data-style="outline"] {
    border: 1px solid currentColor;
    color: var(--header-cta-bg,var(--header-link-hover,#1a1a1a))
}

#navbar .header-cta:hover {
    opacity: .85
}

#navbar .header-hotline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--header-link,#808080);
    text-decoration: none
}

#navbar .header-hotline i {
    font-size: 1.05rem;
    color: var(--header-icon,#333333)
}

#navbar .header-hotline span {
    display: flex;
    flex-direction: column;
    line-height: 1.15
}

#navbar .header-hotline small {
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85
}

#navbar .header-hotline strong {
    font-size: .95rem;
    font-weight: 700
}

#navbar .header-hotline:hover {
    color: var(--header-link-hover,#1a1a1a)
}

#navbar .header-text {
    font-size: .82rem;
    color: var(--header-link,#808080);
    white-space: nowrap
}

#navbar .header-text--strong {
    font-weight: 700;
    color: var(--header-link-hover,#1a1a1a)
}

#navbar .header-social {
    display: inline-flex;
    align-items: center;
    gap: .25rem
}

#navbar .header-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--header-icon,#333333);
    text-decoration: none;
    transition: background 150ms ease
}

#navbar .header-social-link:hover {
    background: var(--header-dd-hover-bg,#f5f5f3)
}

#navbar .header-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--header-border-color,#d4d4d4)
}

#navbar .header-spacer {
    display: inline-block;
    width: var(--hdr-space,16px);
    flex: 0 0 auto
}

@media (max-width: 991.98px) {
    #navbar [data-hdr-mobile="0"] {
        display: none !important
    }

    #navbar .header-zone:not(:has(>:not([data-hdr-mobile="0"]))) {
        display: none
    }
}

#navbar .header-device--mobile {
    display: none
}

@media (max-width: 991.98px) {
    #navbar .header-device--desktop[data-has-mobile="1"] {
        display: none
    }

    #navbar .header-device--mobile {
        display: block
    }
}

@media (max-width: 767.98px) {
    #navbar .header-row>.container {
        padding-left: 22px !important;
        padding-right: 22px !important
    }
}

.fe-ico {
    display: inline-block;
    width: var(--fe-ico);
    height: var(--fe-ico);
    vertical-align: -0.125em;
    flex: 0 0 auto
}

.fe-ico--sm {
    width: var(--fe-ico-sm);
    height: var(--fe-ico-sm)
}

.fe-ico--lg {
    width: var(--fe-ico-lg);
    height: var(--fe-ico-lg)
}

.fe-ico--xl {
    width: var(--fe-ico-xl);
    height: var(--fe-ico-xl)
}

.fe-btn .fe-ico {
    width: 1em;
    height: 1em
}

:where(img.fe-img),:where(.fe-figure>img) {
    display: block;
    max-width: 100%;
    height: auto
}

.hero-full-carousel {
    display: block
}

[data-slider="pending"]>*:not(:first-child) {
    display: none
}

.fe-section {
    padding-top: var(--fe-section-y);
    padding-bottom: var(--fe-section-y)
}

.fe-section--tight {
    padding-top: var(--fe-space-7);
    padding-bottom: var(--fe-space-7)
}

.fe-section--flush {
    padding-top: 0;
    padding-bottom: 0
}

/* Section do TRÌNH DỰNG TRANG sinh (`id="pb-node-*"` = node có style riêng) hoặc chọn "Bỏ khoảng":
   cho section thành 1 BFC. LÝ DO - đo thật 2026-09-25 trên /giai-phap:
   · `.row` của Bootstrap có `margin-top` ÂM bằng gutter (-24px với `g-4`), `.col` có `margin-top` +24px;
   · section `padding-top:0` (hoặc `--flush`) ⇒ margin âm đó GỘP (collapse) RA NGOÀI section ⇒ ăn mất
     `margin-top` của chính section: style ghi `margin-top:30px` mà hộp section chỉ cách header 6px
     (30-24) ⇒ trông như "section đè/dính vào header", và `padding`/`border` vẽ lệch 24px so với nội dung;
   · BFC ⇒ margin của con bị GIỮ BÊN TRONG ⇒ `padding-top`/`margin-top` đúng như người dựng nhập.
   ⛔ ĐỪNG BỎ: đây chính là lý do cảm giác "margin không hoạt động" khi section không có padding. */
.fe-section[id^="pb-node-"],
.fe-section--flush {
    display: flow-root
}

.fe-section--light {
    background: var(--white-warm)
}

.fe-section--surface {
    background: var(--white-cool)
}

.fe-section--dark {
    background: var(--ink-black);
    color: var(--white-pure)
}

.fe-section--dark .fe-h1,.fe-section--dark .fe-h2,.fe-section--dark .fe-h3 {
    color: var(--white-pure)
}

/* Nút trong SECTION TỐI (`tone=dark` của Trình dựng trang): `.fe-btn--*` mặc định viết cho nền SÁNG ⇒
   "outline"/"ghost" là CHỮ ĐEN trên nền ĐEN (vô hình) và "primary" là NỀN ĐEN trên nền ĐEN.
   Cùng cách `.pl-landing .pl-hero .fe-btn--*` đã làm (lỗi thật đã gặp 2026-09-23) - KHÔNG thêm mã màu mới. */
.fe-section--dark .fe-btn--primary {
    background: var(--white-pure);
    border: var(--fe-btn-border);
    color: var(--ink-black)
}

.fe-section--dark .fe-btn--primary:hover {
    background: var(--ink-black);
    border-color: var(--white-pure);
    color: var(--white-pure)
}

.fe-section--dark .fe-btn--outline {
    background: transparent;
    border: var(--fe-btn-border-invert);
    color: var(--white-pure)
}

.fe-section--dark .fe-btn--outline:hover {
    background: var(--white-pure);
    border-color: var(--white-pure);
    color: var(--ink-black)
}

.fe-section--dark .fe-btn--ghost {
    color: var(--white-pure)
}

.fe-section--dark .fe-lead {
    color: rgba(255,255,255,.72)
}

/* BỀ RỘNG NỘI DUNG = token site (`--fe-container`: 1140px < mốc xl 1320px của Bootstrap).
   Áp cho `.container` NẰM TRONG `.fe-section` - mọi khối nội dung là 1 section (`docs/11` §3), gồm cả
   container do Builder sinh (`fe_container()` giờ chỉ in `class="container"`).
   ⛔ KHÔNG đặt rule này lên `.container` TOÀN CỤC: container của HEADER/BANNER dùng mốc 1320px của Bootstrap
   (`docs/08`) - thu hẹp cả hai là đổi giao diện toàn site.
   Section `width=full` dùng `.container-fluid` ⇒ KHÔNG bị chặn (tràn viền là chủ ý). */

@media (max-width: 767.98px) {
    .fe-section {
        padding-top: var(--fe-section-y-sm);
        padding-bottom: var(--fe-section-y-sm)
    }
}

.fe-h1,.fe-h2,.fe-h3,.fe-h4,.fe-h5,.fe-h6 {
    margin: 0 0 var(--fe-space-3);
    color: var(--ink-black);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em
}

.fe-h1 {
    font-size: clamp(1.9rem,1.2rem + 2.4vw,3rem)
}

.fe-h2 {
    font-size: clamp(1.5rem,1.1rem + 1.4vw,2.125rem)
}

.fe-h3 {
    font-size: clamp(1.15rem,1rem + .6vw,1.4rem)
}

.fe-h4 {
    font-size: 1.125rem
}

.fe-h5 {
    font-size: 1rem
}

.fe-h6 {
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none
}

.fe-h--center {
    text-align: center
}

.fe-eyebrow {
    margin: 0 0 var(--fe-space-2);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-mid)
}

.fe-lead {
    margin: 0 0 var(--fe-space-5);
    max-width: 68ch;
    font-size: 1rem;
    color: var(--gray-strong)
}

.fe-h--center + .fe-lead {
    margin-left: auto;
    margin-right: auto
}

.fe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fe-space-2);
    padding: .625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--fe-radius);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fe-dur) var(--fe-ease),color var(--fe-dur) var(--fe-ease),border-color var(--fe-dur) var(--fe-ease)
}

.fe-btn--primary {
    background: var(--ink-black);
    color: var(--white-pure);
    border-color: var(--ink-black)
}

.fe-btn--primary:hover {
    background: var(--ink-dark);
    border-color: var(--ink-dark);
    color: var(--white-pure)
}

.fe-btn--outline {
    background: transparent;
    color: var(--ink-black);
    border-color: var(--gray-border)
}

.fe-btn--outline:hover {
    border-color: var(--ink-black);
    background: var(--white-cool);
    color: var(--ink-black)
}

.fe-btn--ghost {
    background: transparent;
    color: var(--ink-dark);
    border-color: transparent
}

.fe-btn--ghost:hover {
    background: var(--silver-bg);
    color: var(--ink-black)
}

.fe-btn--sm {
    padding: .375rem .75rem;
    font-size: .875rem
}

.fe-btn--lg {
    padding: .8125rem 1.75rem;
    font-size: 1rem
}

.fe-btn--full {
    width: 100%
}

.fe-btn:focus-visible {
    outline: 2px solid var(--silver-dark);
    outline-offset: 2px
}

.fe-breadcrumb {
    margin: 0 0 var(--fe-space-4);
    font-size: .875rem;
    color: var(--gray-mid)
}

.fe-breadcrumb-ico {
    transform: rotate(180deg);
    color: var(--gray-soft)
}

.fe-breadcrumb ol {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fe-space-2);
    margin: 0;
    padding: 0;
    list-style: none
}

.fe-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2)
}

.fe-breadcrumb li + li::before {
    content: "/";
    color: var(--gray-ghost)
}

.fe-breadcrumb a {
    color: var(--gray-strong);
    text-decoration: none
}

.fe-breadcrumb a:hover {
    color: var(--ink-black);
    text-decoration: underline
}

.fe-breadcrumb [aria-current="page"] {
    color: var(--ink-black)
}

/* DẢI BƯỚC MUA HÀNG (vùng R3b - ngay DƯỚI hero) - docs/11 §3 */
.fe-steps {
    background: var(--white-pure);
    border-bottom: 1px solid var(--gray-border)
}

.fe-steps ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--fe-space-2);
    margin: 0;
    padding: var(--fe-space-4) 0;
    list-style: none
}

.fe-steps li {
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2)
}

.fe-steps-item {
    display: inline-flex;
    align-items: center;
    gap: var(--fe-space-2);
    font-size: var(--fe-fs-3);
    color: var(--fe-muted-strong);
    text-decoration: none
}

.fe-steps-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gray-border);
    border-radius: 50%;
    font-size: var(--fe-fs-2);
    font-weight: 600;
    line-height: 1;
    color: var(--fe-muted-strong)
}

/* Đã qua: viền + chữ mực (rỗng) · Đang ở: ĐẶC nền mực · Chưa tới: mờ (mặc định) */
.fe-steps-item.is-done {
    color: var(--ink-dark)
}

.fe-steps-item.is-done .fe-steps-num {
    border-color: var(--ink-black);
    color: var(--ink-black)
}

.fe-steps-item[aria-current="step"] {
    color: var(--ink-black);
    font-weight: 600
}

.fe-steps-item[aria-current="step"] .fe-steps-num {
    background: var(--ink-black);
    border-color: var(--ink-black);
    color: var(--white-pure)
}

.fe-steps-sep {
    display: inline-flex;
    color: var(--gray-ghost)
}

.fe-steps-sep .fe-ico {
    width: 16px;
    height: 16px
}

a.fe-steps-item:hover {
    color: var(--ink-black);
    text-decoration: underline
}

@media (max-width: 767.98px) {
    .fe-steps ol {
        padding: var(--fe-space-3) 0;
        gap: var(--fe-space-1) var(--fe-space-2)
    }
}

.fe-loader-spinner {
    width: 3rem;
    height: 3rem
}

.blog-intro {
    max-width: 700px
}

.cart-col-qty {
    width: 130px
}

.product-card-brand a {
    color: inherit
}

.bottom-cta-form--stack {
    flex-direction: column
}

.bottom-cta-form--stack button {
    width: 100%
}

/* ── BẢNG THÔNG SỐ KỸ THUẬT (bảng KHOÁ–GIÁ TRỊ 2 cột) ──────────────────────────────────────────
   Nguồn: tab "Thông số kỹ thuật" của sản phẩm - admin nhập bằng CKEditor nên markup là
   `<table><tbody><tr><th>Nhãn</th><td>Giá trị</td></tr>…` và **KHÔNG có `<thead>`**.
   ĐO THẬT 2026-09-26 (`cache/_spec_tables_scan.php`): 71/71 sản phẩm có đúng 1 bảng dạng này
   trong `products.tabs`; `pages`/`posts`/`projects`/`products.description` KHÔNG có bảng 2 cột nào
   (2 bảng còn lại là bảng DỮ LIỆU 3 cột có `<thead>` ⇒ giữ nguyên kiểu cũ).
   VÌ SAO PHẢI TÁCH KIỂU: bảng tra cứu mà dùng kiểu bảng dữ liệu thì
   · rule `tbody>tr:first-child>th` chỉ tô nền xám cho ô nhãn của **HÀNG ĐẦU** ⇒ 7 hàng không đồng
     nhất (hàng đầu xám, hàng 2/4/6 zebra, hàng 3/5/7 trắng);
   · `th` đội luôn 2 kiểu đường kẻ (viền 2px của "header" + 1px của hàng) ⇒ nhìn lem nhem;
   · nhãn in ĐẬM màu mực còn giá trị in mả nhtạ ⇒ ngược phân cấp (mắt phải bám cột giá trị).
   KIỂU MỚI = "bảng tra cứu": 1 đường kẻ MẢNH giữa các hàng · KHÔNG zebra/hover · NHÃN chữ mờ
   (--fe-muted-strong 4.97:1) weight 500 · GIÁ TRỊ chữ mực weight 600 ⇒ phân cấp bằng MÀU + ĐỘ ĐẬM.
   NHẬN DẠNG bằng CẤU TRÚC: KHÔNG `<thead>` + KHÔNG hàng nào có ô thứ 3.
   ⚠️ CHỈ ÁP trong `.product-description` (mô tả + tab sản phẩm - nơi 71/71 bảng là bảng thông số):
   "2 cột" một mình KHÔNG đủ để đoán ý định - bảng DỮ LIỆU 2 cột (vd "Sản phẩm | Giá") cũng 2 cột
   nên KHÔNG mở rộng ra `.content`/`.post-content`/`.project-body` (bảng ở đó giữ kiểu dữ liệu).
   Nơi khác muốn kiểu tra cứu: bọc `<div class="product-description">`. */
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3))) {
    table-layout: fixed;
    margin: var(--fe-space-5) 0 var(--fe-space-6);
    border: 1px solid var(--gray-ghost);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--fe-shadow);
    font-size: var(--fe-fs-4)
}

/* Ô: chỉ kẻ DƯỚI mỗi hàng, cùng 1 độ dày + 1 màu (bỏ kẻ trái/phải của bảng dữ liệu). */
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr>* {
    padding: var(--fe-space-3) var(--fe-space-4);
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--gray-ghost);
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere
}

.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr:last-child>* {
    border-bottom: 0
}

/* NHÃN (ô đầu mỗi hàng, kể cả khi admin dùng <td> thay <th>) - chữ mờ, KHÔNG đậm. */
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr>:first-child {
    width: 32%;
    color: var(--fe-muted-strong);
    font-weight: 500;
    text-align: left
}

/* GIÁ TRỊ - chữ mực, đậm vừa ⇒ nổi hơn nhãn mà không cần nền. */
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr>:nth-child(2) {
    color: var(--ink-black);
    font-weight: 600
}

/* Bảng tra cứu KHÔNG lấy zebra/hover của bảng dữ liệu (nền hàng đổi màu làm nhãn mờ nhấp nháy). */
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr:nth-child(even),
.product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr:hover {
    background: transparent
}

/* Mobile: GIỮ 2 CỘT (bảng chỉ có nhãn ngắn + giá trị ngắn nên không cần cuộn ngang),
   thu padding + hạ 1 bậc cỡ chữ; nhãn nới lên 38% vì chữ xuống dòng sớm hơn. */
@media (max-width: 767.98px) {
    .product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3))) {
        display: table;
        width: 100%;
        overflow: visible;
        margin: var(--fe-space-4) 0 var(--fe-space-5);
        border-radius: var(--radius-sm);
        font-size: var(--fe-fs-3)
    }

    .product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr>* {
        padding: var(--fe-space-2) var(--fe-space-3);
        min-width: 0
    }

    .product-description table:not(:has(thead)):not(:has(tbody tr>:nth-child(3)))>tbody>tr>:first-child {
        width: 38%
    }
}