/* Thứ tự layer: reset < base < components */
@layer reset, base, components;

/* Reset tối giản (thay cho preflight của Tailwind ở bản cũ) */
@layer reset {
    *,
    ::before,
    ::after,
    ::backdrop {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }

    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        line-height: 1.5;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }

    ol, ul, menu {
        list-style: none;
    }

    img, svg, video, iframe {
        display: block;
        vertical-align: middle;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    button, input, select, textarea {
        font: inherit;
        letter-spacing: inherit;
        color: inherit;
        background-color: transparent;
        border-radius: 0;
    }

    button {
        cursor: pointer;
    }

    [hidden]:where(:not([hidden='until-found'])) {
        display: none !important;
    }
}

/*
 * Màu của từng móng được khai báo thành thuộc tính kiểu <color> để trình duyệt
 * có thể chuyển màu mượt (kể cả bên trong gradient) khi khách đổi màu sơn.
 */
@property --tip {
    syntax: '<color>';
    inherits: true;
    initial-value: #ff4fa3;
}

/* Đặt trong layer base để các breakpoint bên dưới ghi đè được */
@layer base {
:root {
    --ink: #0d0c0c;
    --ink-2: #171515;
    --ink-3: #221f1e;
    --smoke: #2b2625;
    --paper: #f3efe8;
    --paper-2: #e7e0d5;
    --nude: #efd3c4;

    --line-dark: rgb(243 239 232 / 0.13);
    --line-light: rgb(13 12 12 / 0.13);
    --muted-dark: rgb(243 239 232 / 0.64);
    --muted-light: rgb(13 12 12 / 0.62);

    --accent: #ff4fa3;
    --accent-ink: #0d0c0c;
    --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--ink));

    --gutter: 20px;
    --max-w: 1240px;
    --radius-lg: 28px;
    --radius-md: 20px;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --header-h: 68px;

    --font-brand: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-d: var(--font-display), 'Arial Black', system-ui, sans-serif;
    --font-b: var(--font-body), system-ui, sans-serif;
    --font-s: var(--font-serif), Georgia, serif;
}
}

@layer base {
    html {
        scroll-padding-top: calc(var(--header-h) + 8px);
        -webkit-text-size-adjust: 100%;
    }

    html:has(dialog[open]) {
        overflow: hidden;
    }

    body {
        background: var(--ink);
        color: var(--paper);
        font-family: var(--font-b);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background: var(--accent);
        color: var(--accent-ink);
    }

    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

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

@layer components {
    /* ---------- Tiện ích chung ---------- */

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .skip-link {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 100;
        padding: 10px 16px;
        border-radius: 999px;
        background: var(--paper);
        color: var(--ink);
        font-weight: 600;
        transform: translateY(-200%);
    }

    .skip-link:focus {
        transform: none;
    }

    .wrap {
        width: 100%;
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted-dark);
    }

    .eyebrow::before {
        content: '';
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
        transition: background-color 0.4s;
    }

    /* ---------- Nút ---------- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 54px;
        padding: 0 8px 0 24px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition:
            transform 0.25s var(--ease-out),
            background-color 0.4s,
            color 0.4s,
            border-color 0.25s;
        -webkit-tap-highlight-color: transparent;
    }

    .btn:active {
        transform: scale(0.97);
    }

    .btn__icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgb(0 0 0 / 0.14);
        transition: transform 0.3s var(--ease-out);
    }

    .btn:hover .btn__icon {
        transform: translateX(3px);
    }

    .btn--accent {
        background: var(--accent);
        color: var(--accent-ink);
    }

    .btn--dark {
        background: var(--ink);
        color: var(--paper);
    }

    .btn--dark .btn__icon {
        background: var(--accent);
        color: var(--accent-ink);
    }

    .btn--ghost,
    .btn--outline {
        padding: 0 24px;
        border: 1px solid var(--line-dark);
    }

    .btn--outline {
        border-color: var(--line-light);
        color: var(--ink);
    }

    .btn--ghost:hover {
        border-color: var(--paper);
    }

    .btn--lg {
        min-height: 62px;
        font-size: 17px;
    }

    .icon-btn {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--line-dark);
        color: inherit;
        cursor: pointer;
        transition:
            background-color 0.25s,
            border-color 0.25s;
    }

    .icon-btn:hover {
        border-color: currentColor;
    }

    .icon-btn--light {
        border-color: var(--line-light);
    }

    /* ---------- Header ---------- */

    .site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 10px;
        height: var(--header-h);
        /* Căn thẳng hàng với nội dung .wrap trên màn hình rộng */
        padding: env(safe-area-inset-top) calc(max(0px, (100% - var(--max-w)) / 2) + var(--gutter)) 0;
        transition:
            background-color 0.35s,
            border-color 0.35s,
            backdrop-filter 0.35s;
        border-bottom: 1px solid transparent;
    }

    .site-header.is-scrolled {
        background: rgb(13 12 12 / 0.72);
        border-bottom-color: var(--line-dark);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .brand__mark {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--accent-ink);
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 15px;
        letter-spacing: -0.02em;
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    /* Chữ thương hiệu GLAMS theo kiểu chữ có chân đậm của logo */
    .brand__word {
        font-family: var(--font-brand);
        font-weight: 900;
        font-size: 25px;
        line-height: 1;
        letter-spacing: 0.03em;
    }

    .brand__name {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 16px;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid var(--line-dark);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }

    .status__dot {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8a8583;
    }

    .status[data-state='open'] .status__dot {
        background: #34d27b;
    }

    .status[data-state='open'] .status__dot::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid #34d27b;
        animation: ping 1.8s ease-out infinite;
    }

    .status[data-state='closed'] .status__dot {
        background: #ff6b5e;
    }

    .status--light {
        margin-left: 0;
        border-color: var(--line-light);
    }

    @keyframes ping {
        from {
            transform: scale(0.6);
            opacity: 0.9;
        }
        to {
            transform: scale(1.6);
            opacity: 0;
        }
    }

    /* Điện thoại: chỉ giữ logo tròn để nhường chỗ cho trạng thái mở cửa */
    @media (max-width: 479px) {
        .brand__name {
            display: none;
        }
    }

    /* ---------- Hero ---------- */

    .hero {
        position: relative;
        min-height: 100svh;
        padding: calc(var(--header-h) + 28px) 0 36px;
        /* Lớp trên cùng làm ánh sáng tan dần về màu nền ở cuối khối, không để lại vệt cắt với khối sau */
        background:
            linear-gradient(to bottom, transparent 62%, var(--ink) 98%),
            radial-gradient(70% 45% at 90% 38%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
            radial-gradient(50% 30% at 0% 85%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
            var(--ink);
        overflow: hidden;
    }

    /* Lớp nhiễu hạt mịn cho cảm giác in ấn */
    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.08;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
    }

    .hero__inner {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 8px;
    }

    .hero__title {
        /* Chừa chỗ cho dấu tiếng Việt ở dòng đầu (Để, bộ...) */
        margin-top: max(18px, 0.3em);
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(3.1rem, 15.5vw, 8.4rem);
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .hero__line {
        display: block;
    }

    .hero__title em {
        font-family: var(--font-s);
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.03em;
        color: var(--accent);
        transition: color 0.4s;
    }

    /* Hiệu ứng xuất hiện khi tải trang */
    .hero__in {
        animation: rise 0.9s var(--ease-out) both;
        animation-delay: calc(var(--d, 0) * 90ms + 100ms);
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(28px);
        }
    }

    .hero__visual {
        display: grid;
        justify-items: center;
        gap: 6px;
    }

    .hero__footer {
        display: grid;
        gap: 28px;
        margin-top: 8px;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero__actions .btn--accent {
        flex: 1 1 auto;
    }

    .highlights {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid var(--line-dark);
    }

    .highlights__value {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 30px;
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .highlights__value span {
        color: var(--accent);
        transition: color 0.4s;
    }

    .highlights__label {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--muted-dark);
    }

    /* ---------- Móng tay vẽ bằng CSS ---------- */

    /*
     * Màu móng: --pick (khách chọn trong popup) > --tip-default (màu gốc của mẫu) > màu nhấn của site.
     */
    .tip {
        --tip: var(--pick, var(--tip-default, var(--accent)));
        position: relative;
        display: block;
        border-radius: 50% 50% 44% 44% / 66% 66% 34% 34%;
        background: var(--tip);
        box-shadow:
            inset 0 -10px 18px rgb(0 0 0 / 0.22),
            inset 0 6px 10px rgb(255 255 255 / 0.12),
            0 14px 30px rgb(0 0 0 / 0.35);
        overflow: hidden;
    }

    /* Vệt bóng của lớp sơn */
    .tip::after {
        content: '';
        position: absolute;
        top: 12%;
        left: 20%;
        width: 18%;
        height: 50%;
        border-radius: 999px;
        background: linear-gradient(to bottom, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0));
        filter: blur(0.5px);
    }

    .p-solid {
        background: var(--tip);
    }

    .p-french {
        --tip-default: #fffdf8;
        background: radial-gradient(130% 78% at 50% 100%, var(--nude) 62%, var(--tip) 63%);
    }

    .p-french-color {
        background: radial-gradient(130% 78% at 50% 100%, var(--nude) 62%, var(--tip) 63%);
    }

    .p-mirror {
        background: linear-gradient(
            150deg,
            color-mix(in srgb, var(--tip) 35%, white) 0%,
            var(--tip) 28%,
            color-mix(in srgb, var(--tip) 55%, black) 52%,
            color-mix(in srgb, var(--tip) 40%, white) 70%,
            var(--tip) 100%
        );
    }

    .p-chrome {
        --tip-default: #a9aeb6;
        background: linear-gradient(
            150deg,
            color-mix(in srgb, var(--tip) 6%, white) 0%,
            var(--tip) 26%,
            color-mix(in srgb, var(--tip) 50%, black) 48%,
            color-mix(in srgb, var(--tip) 18%, white) 66%,
            color-mix(in srgb, var(--tip) 80%, black) 100%
        );
    }

    .p-cateye {
        background: radial-gradient(
            34% 95% at 58% 48%,
            color-mix(in srgb, var(--tip) 30%, white) 0%,
            var(--tip) 45%,
            color-mix(in srgb, var(--tip) 35%, black) 100%
        );
    }

    .p-glitter {
        background:
            radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.95) 0 1px, transparent 1.6px) 0 0 / 9px 9px,
            radial-gradient(circle at 70% 60%, rgb(255 236 180 / 0.9) 0 1.2px, transparent 1.8px) 3px 4px / 13px 13px,
            linear-gradient(to top, var(--tip), color-mix(in srgb, var(--tip) 60%, white));
    }

    .p-marble {
        --tip-default: #7c7c86;
        background:
            radial-gradient(60% 30% at 30% 30%, transparent 55%, color-mix(in srgb, var(--tip) 60%, transparent) 57%, transparent 60%),
            radial-gradient(70% 40% at 80% 70%, transparent 52%, color-mix(in srgb, var(--tip) 50%, transparent) 54%, transparent 57%),
            radial-gradient(40% 25% at 55% 50%, transparent 50%, rgb(201 169 110 / 0.8) 52%, transparent 55%),
            linear-gradient(160deg, #fbfaf7, #e9e6e0);
    }

    .p-dots {
        background:
            radial-gradient(circle, #fffdf8 0 3px, transparent 3.5px) 0 0 / 14px 14px,
            var(--tip);
    }

    .p-ombre {
        --tip-default: #d9387a;
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--tip) 15%, #ffe2c2) 0%,
            color-mix(in srgb, var(--tip) 55%, #ff9a7a) 45%,
            var(--tip) 100%
        );
    }

    /* Xà cừ, ẩn hoa: ánh ngọc trai nhiều sắc */
    .p-pearl {
        --tip-default: #f1e4ef;
        background:
            radial-gradient(60% 40% at 38% 28%, rgb(255 255 255 / 0.85), transparent 60%),
            radial-gradient(70% 55% at 72% 78%, color-mix(in srgb, var(--tip) 45%, #bfe3ff), transparent 70%),
            radial-gradient(55% 45% at 20% 70%, color-mix(in srgb, var(--tip) 50%, #ffd6f0), transparent 70%),
            var(--tip);
    }

    .p-stripe {
        background:
            linear-gradient(90deg, transparent 47%, var(--ink) 47% 53%, transparent 53%),
            linear-gradient(90deg, transparent 20%, var(--tip) 20% 23%, transparent 23% 77%, var(--tip) 77% 80%, transparent 80%),
            var(--nude);
    }

    /* Quạt móng ở hero */
    .fan {
        position: relative;
        width: 100%;
        max-width: 380px;
        height: 214px;
        margin-top: 12px;
    }

    .fan__tip {
        position: absolute;
        left: 50%;
        bottom: 50px;
        width: 62px;
        height: 108px;
        margin-left: -31px;
        transform-origin: 50% 200%;
        transform: rotate(calc((var(--i) - 2) * 19deg));
        transition: --tip 0.7s ease calc(var(--i) * 80ms);
        animation: fan-open 1.1s var(--ease-out) both;
        animation-delay: calc(var(--i) * 70ms + 350ms);
    }

    @keyframes fan-open {
        from {
            transform: rotate(0deg) translateY(40px);
            opacity: 0;
        }
    }

    /* Vệt sáng lướt qua khi đổi màu */
    .fan.is-painting .fan__tip::before,
    .viewer__art.is-painting .mini-fan__tip::before {
        content: '';
        position: absolute;
        inset: -20% -60%;
        background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.55) 50%, transparent 60%);
        animation: shine 0.9s ease-out both;
        animation-delay: calc(var(--i) * 80ms);
        z-index: 1;
    }

    @keyframes shine {
        from {
            transform: translateX(-60%);
        }
        to {
            transform: translateX(60%);
        }
    }

    /* Bảng chọn màu sơn */
    .picker {
        display: grid;
        justify-items: center;
        gap: 12px;
        border: 0;
        min-width: 0;
    }

    .picker__legend {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 13px;
        color: var(--muted-dark);
        margin-bottom: 12px;
    }

    .picker__swatches {
        clear: both;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .swatch {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .swatch__dot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--swatch);
        box-shadow:
            inset 0 -4px 8px rgb(0 0 0 / 0.25),
            inset 0 3px 5px rgb(255 255 255 / 0.3);
        transition:
            transform 0.3s var(--ease-out),
            box-shadow 0.3s;
    }

    .swatch:hover .swatch__dot {
        transform: scale(1.08);
    }

    .swatch input:checked + .swatch__dot {
        transform: scale(1.12);
        box-shadow:
            inset 0 -4px 8px rgb(0 0 0 / 0.25),
            0 0 0 3px var(--ink),
            0 0 0 5px var(--paper);
    }

    .swatch input:focus-visible + .swatch__dot {
        outline: 2px solid var(--paper);
        outline-offset: 6px;
    }

    .picker__name {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.01em;
    }

    .picker__hint {
        font-family: var(--font-b);
        font-weight: 400;
        font-size: 13px;
        color: var(--muted-dark);
    }

    /* ---------- Dải chữ chạy ---------- */

    .marquee {
        position: relative;
        z-index: 2;
        margin-block: -14px;
        padding: 16px 0;
        background: var(--accent);
        color: var(--accent-ink);
        transform: rotate(-2.5deg) scale(1.06);
        overflow: hidden;
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    .marquee__track {
        display: flex;
        width: max-content;
        animation: marquee 28s linear infinite;
    }

    .marquee__group {
        display: flex;
        align-items: center;
        gap: 22px;
        padding-right: 22px;
    }

    .marquee__item {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 26px;
        line-height: 1;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    @keyframes marquee {
        to {
            transform: translateX(-50%);
        }
    }

    /* ---------- Khung section ---------- */

    .section {
        position: relative;
        padding-block: 88px;
    }

    .section--dark {
        background: var(--ink);
        color: var(--paper);
    }

    /* Khối ít nội dung (như "Khách nói gì"): lề trên dưới rộng hơn cho thoáng */
    .section--roomy {
        padding-block: 140px;
    }

    .section--light {
        background: var(--paper);
        color: var(--ink);
    }

    .section--accent {
        background: var(--accent);
        color: var(--accent-ink);
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    .section__head {
        display: grid;
        gap: 10px;
        margin-bottom: 36px;
    }

    .section__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(2.9rem, 13.5vw, 6.5rem);
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .section__lead {
        max-width: 38ch;
        font-size: 16px;
        color: var(--muted-dark);
    }

    .section--light .section__lead {
        color: var(--muted-light);
    }

    .swipe-hint {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--accent);
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.4s;
    }

    .swipe-hint::after {
        content: '→';
        animation: nudge 1.6s ease-in-out infinite;
    }

    @keyframes nudge {
        50% {
            transform: translateX(5px);
        }
    }

    /* ---------- Dải thẻ vuốt ngang ---------- */

    .rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(82%, 340px);
        gap: 14px;
        padding-inline: var(--gutter);
        scroll-padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .rail::-webkit-scrollbar {
        display: none;
    }

    .rail > * {
        scroll-snap-align: start;
    }

    .rail-progress {
        margin-top: 22px;
    }

    .rail-progress::before {
        content: '';
        display: block;
        height: 3px;
        border-radius: 3px;
        background: var(--line-dark);
    }

    .rail-progress span {
        display: block;
        height: 3px;
        margin-top: -3px;
        border-radius: 3px;
        background: var(--accent);
        transform-origin: left;
        transform: scaleX(0.15);
        transition:
            transform 0.15s linear,
            background-color 0.4s;
    }

    /* Thẻ dịch vụ */
    .service-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 360px;
        padding: 24px;
        border-radius: var(--radius-lg);
        background: var(--ink-2);
        border: 1px solid var(--line-dark);
        overflow: hidden;
    }

    .service-card__num {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 76px;
        line-height: 0.9;
        letter-spacing: -0.05em;
        color: transparent;
        -webkit-text-stroke: 1.2px rgb(243 239 232 / 0.35);
    }

    .service-card__tip {
        position: absolute;
        top: -18px;
        right: 26px;
        width: 58px;
        height: 98px;
        transform: rotate(14deg);
        transition: --tip 0.6s ease;
    }

    .service-card__title {
        margin-top: auto;
        padding-top: 40px;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: -0.03em;
    }

    .service-card__text {
        margin-top: 10px;
        font-size: 15px;
        color: var(--muted-dark);
    }

    .service-card__meta {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--line-dark);
    }

    .service-card__price {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 30px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--accent);
        transition: color 0.4s;
    }

    .service-card__price small {
        font-family: var(--font-b);
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 0;
        color: var(--muted-dark);
    }

    .service-card__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted-dark);
        transition: color 0.2s;
    }

    .service-card__link:hover {
        color: var(--paper);
    }

    /* ---------- Chip lọc / tab ---------- */

    .chips {
        display: flex;
        gap: 8px;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chips::-webkit-scrollbar {
        display: none;
    }

    .chip {
        flex: none;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid var(--line-light);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition:
            background-color 0.25s,
            color 0.25s,
            border-color 0.25s;
    }

    .chip[aria-selected='true'] {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--paper);
    }

    .chips--dark .chip {
        border-color: var(--line-dark);
    }

    .chips--dark .chip[aria-pressed='true'] {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--accent-ink);
    }

    /* ---------- Bảng giá ---------- */

    .price-panel {
        margin-top: 18px;
        animation: rise 0.5s var(--ease-out) both;
    }

    .price-list__row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 17px 0;
        border-bottom: 1px solid var(--line-light);
    }

    .price-list__name {
        font-size: 16px;
        font-weight: 500;
    }

    .price-list__dots {
        flex: 1;
        min-width: 16px;
        border-bottom: 1.5px dotted rgb(13 12 12 / 0.28);
        transform: translateY(-4px);
    }

    .price-list__price {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 18px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .price-list__price small {
        font-family: var(--font-b);
        font-weight: 400;
        font-size: 12px;
        color: var(--muted-light);
        margin-right: 4px;
    }

    .price-menu__foot {
        display: grid;
        gap: 18px;
        justify-items: start;
        margin-top: 28px;
    }

    .price-menu__note {
        max-width: 46ch;
        font-size: 14px;
        color: var(--muted-light);
    }

    /* ---------- Lookbook ---------- */

    .looks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 210px;
        grid-auto-flow: dense;
        gap: 12px;
        margin-top: 22px;
    }

    .looks__item.is-tall {
        grid-row: span 2;
    }

    .looks__item[hidden] {
        display: none;
    }

    .looks__item {
        animation: pop 0.45s var(--ease-out) both;
    }

    @keyframes pop {
        from {
            opacity: 0;
            transform: scale(0.94);
        }
    }

    .look {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-md);
        overflow: hidden;
        text-align: left;
        cursor: pointer;
        isolation: isolate;
        transition: transform 0.35s var(--ease-out);
    }

    .look:active {
        transform: scale(0.98);
    }

    .look--ink {
        background: var(--ink-3);
        color: var(--paper);
    }

    .look--paper {
        background: var(--paper-2);
        color: var(--ink);
    }

    .look--accent {
        background: var(--accent-soft);
        color: var(--paper);
        transition:
            background-color 0.4s,
            transform 0.35s var(--ease-out);
    }

    .look--smoke {
        background: var(--smoke);
        color: var(--paper);
    }

    .look__art {
        position: absolute;
        inset: 0 0 52px;
        display: grid;
        place-items: center;
    }

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

    .mini-fan {
        position: relative;
        width: 120px;
        height: 110px;
    }

    .looks__item.is-tall .mini-fan {
        transform: scale(1.35);
    }

    .mini-fan__tip {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 40px;
        height: 70px;
        margin-left: -20px;
        transform-origin: 50% 160%;
        transform: rotate(calc((var(--i) - 1) * 25deg));
        transition:
            --tip 0.6s ease,
            transform 0.5s var(--ease-out);
    }

    .look:hover .mini-fan__tip {
        transform: rotate(calc((var(--i) - 1) * 31deg));
    }

    .look__cap {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 12px;
        display: grid;
        gap: 2px;
    }

    .look__name {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 16px;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .look__tag {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.6;
    }

    .look__plus {
        position: absolute;
        top: 10px;
        right: 10px;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid currentColor;
        opacity: 0.5;
    }

    /* Ô có ảnh thật: ảnh phủ kín ô, tên mẫu nằm trên lớp mờ tối ở chân ảnh */
    .look:has(.look__img) {
        color: #fff;
    }

    .look:has(.look__img) .look__art {
        inset: 0;
    }

    .look:has(.look__img)::after {
        content: '';
        position: absolute;
        inset: 45% 0 0;
        z-index: 1;
        background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.72));
        pointer-events: none;
    }

    .look:has(.look__img) .look__cap,
    .look:has(.look__img) .look__plus {
        z-index: 2;
    }

    .look:has(.look__img) .look__tag {
        opacity: 0.8;
    }

    .look:has(.look__img) .look__plus {
        opacity: 0.85;
        background: rgb(0 0 0 / 0.25);
    }

    .look__img {
        transition: transform 0.6s var(--ease-out);
    }

    .look:hover .look__img {
        transform: scale(1.04);
    }

    /* ---------- Chuyển màu mềm giữa các khối khác màu ---------- */

    /*
     * .blend cao 0, nằm đúng ranh giới; lớp ::before trải lên hai khối (nằm trong phần lề trống)
     * và chuyển màu theo đường cong từ màu khối trên sang màu khối dưới, để hai khối tan vào nhau.
     */
    .blend {
        --blend-h: 180px;
        position: relative;
        z-index: 1;
        height: 0;
        pointer-events: none;
    }

    .blend::before,
    .blend::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--blend-h) / -2);
        height: var(--blend-h);
    }

    .blend::before {
        background: linear-gradient(
            to bottom,
            var(--from) 0%,
            color-mix(in srgb, var(--from) 94%, var(--to)) 14%,
            color-mix(in srgb, var(--from) 78%, var(--to)) 30%,
            color-mix(in srgb, var(--from) 50%, var(--to)) 50%,
            color-mix(in srgb, var(--from) 22%, var(--to)) 70%,
            color-mix(in srgb, var(--from) 6%, var(--to)) 86%,
            var(--to) 100%
        );
        transition: background 0.4s;
    }

    /* Hạt nhiễu mịn phủ lên vùng chuyển màu để không thấy sọc màu */
    .blend::after {
        opacity: 0.08;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
    }

    .blend--ink-paper {
        --from: var(--ink);
        --to: var(--paper);
    }

    .blend--paper-ink {
        --from: var(--paper);
        --to: var(--ink);
    }

    .blend--ink-accent {
        --from: var(--ink);
        --to: var(--accent);
    }

    .blend--accent-ink {
        --from: var(--accent);
        --to: var(--ink);
    }

    /* Trang con có lề đầu trang hẹp hơn: dùng dải ngắn để không đè lên chữ */
    .page-hero + .blend {
        --blend-h: 90px;
    }

    /* ---------- Ảnh sản phẩm: xấp ảnh vuốt được ---------- */

    .gallery {
        overflow: hidden;
        background:
            radial-gradient(55% 45% at 50% 68%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
            var(--ink);
        transition: background-color 0.4s;
    }

    .gallery__head .eyebrow {
        margin-bottom: 4px;
    }

    .deck-area {
        display: grid;
        justify-items: center;
        gap: 26px;
    }

    .deck {
        position: relative;
        width: min(100%, 340px);
        aspect-ratio: 4 / 5;
        margin-top: 8px;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        outline-offset: 12px;
        border-radius: 22px;
    }

    .deck__card {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 10px;
        border-radius: 22px;
        background: #f6f1ea;
        box-shadow: 0 26px 50px rgb(0 0 0 / 0.55);
        cursor: grab;
        will-change: transform;
        transition:
            transform 0.55s var(--ease-out),
            opacity 0.4s ease;
    }

    .deck__card img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 14px;
        object-fit: cover;
        pointer-events: none;
    }

    .deck__card.is-dragging {
        transition: none;
        cursor: grabbing;
    }

    /* Gợi ý vuốt khi khách cuộn tới lần đầu */
    .deck.is-hint .deck__card.is-top {
        animation: deck-hint 1.2s var(--ease-out) 0.3s;
    }

    @keyframes deck-hint {
        30% {
            translate: -34px 0;
            rotate: -6deg;
        }
        60% {
            translate: 18px 0;
            rotate: 3deg;
        }
    }

    .deck__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: min(100%, 340px);
    }

    .deck__nav {
        width: 52px;
        height: 52px;
    }

    .deck__info {
        display: grid;
        gap: 2px;
        min-width: 0;
        text-align: center;
    }

    .deck__count {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 13px;
        color: var(--muted-dark);
        font-variant-numeric: tabular-nums;
    }

    .deck__count b {
        font-size: 18px;
        color: var(--accent);
        transition: color 0.4s;
    }

    .deck__title {
        overflow: hidden;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.01em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* ---------- Vì sao chọn ---------- */

    .reasons__list {
        display: grid;
        border-top: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent);
    }

    .reasons__item {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 10px;
        padding: 22px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent);
    }

    .reasons__num {
        grid-row: span 2;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 15px;
        padding-top: 6px;
        opacity: 0.7;
    }

    .reasons__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .reasons__text {
        margin-top: 6px;
        font-size: 15px;
        opacity: 0.82;
        max-width: 44ch;
    }

    /* ---------- Đánh giá ---------- */

    .review {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px;
        border-radius: 26px 26px 26px 6px;
        background: var(--ink-2);
        border: 1px solid var(--line-dark);
    }

    .review__stars {
        display: flex;
        gap: 3px;
        color: var(--accent);
        transition: color 0.4s;
    }

    .review__text {
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: -0.005em;
    }

    .review__who {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
        font-size: 14px;
    }

    .review__who small {
        display: block;
        color: var(--muted-dark);
        font-size: 13px;
    }

    .review__avatar {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--accent-ink);
        font-family: var(--font-d);
        font-weight: 800;
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    /* ---------- Đánh giá trên Google ---------- */

    .review-cta {
        position: relative;
        display: grid;
        gap: 10px;
        padding: 28px 24px;
        border-radius: 26px 26px 26px 6px;
        background: var(--ink-2);
        border: 1px solid var(--line-dark);
        transition:
            border-color 0.25s,
            transform 0.3s var(--ease-out);
    }

    .review-cta:hover {
        border-color: var(--accent);
    }

    .review-cta:active {
        transform: scale(0.99);
    }

    .review-cta__stars {
        display: flex;
        gap: 4px;
        color: var(--accent);
        transition: color 0.4s;
    }

    .review-cta__title {
        max-width: 18ch;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .review-cta__text {
        font-size: 15px;
        color: var(--muted-dark);
    }

    .review-cta__go {
        position: absolute;
        top: 22px;
        right: 22px;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--accent-ink);
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    /* ---------- Academy ---------- */

    /* Cùng nền với các khối tối xung quanh, không viền, để liền mạch */
    .academy {
        background: var(--ink);
    }

    .section__title em {
        font-family: var(--font-s);
        font-style: italic;
        font-weight: 500;
        color: var(--accent);
        transition: color 0.4s;
    }

    .academy__steps {
        display: grid;
        gap: 12px;
    }

    .academy__step {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 12px;
        align-items: start;
        padding: 22px 20px;
        border-radius: var(--radius-md);
        border: 1px solid var(--line-dark);
        background: var(--ink-2);
    }

    .academy__num {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 34px;
        line-height: 1;
        color: var(--accent);
        transition: color 0.4s;
    }

    .academy__title {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.02em;
    }

    .academy__text {
        margin-top: 4px;
        font-size: 15px;
        color: var(--muted-dark);
    }

    .academy__cta {
        margin-top: 28px;
    }

    /* ---------- Ghé tiệm ---------- */

    .visit__grid {
        display: grid;
        gap: 28px;
    }

    .visit__address {
        display: flex;
        gap: 12px;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .visit__address .icon {
        flex: none;
        margin-top: 4px;
    }

    .visit__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
    }

    .hours {
        margin-top: 32px;
    }

    .hours__list {
        margin-top: 14px;
    }

    .hours__row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--line-light);
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }

    .hours__row.is-today {
        font-weight: 700;
    }

    .hours__badge {
        margin-left: 8px;
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        transition:
            background-color 0.4s,
            color 0.4s;
    }

    .map {
        min-height: 320px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: var(--ink);
    }

    .map__facade {
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 8px;
        width: 100%;
        height: 100%;
        min-height: 320px;
        color: var(--paper);
        cursor: pointer;
        background:
            radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 45%),
            repeating-linear-gradient(0deg, transparent 0 38px, rgb(255 255 255 / 0.06) 38px 39px),
            repeating-linear-gradient(90deg, transparent 0 38px, rgb(255 255 255 / 0.06) 38px 39px),
            var(--ink);
    }

    .map__pin {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--accent-ink);
        animation: bob 2.2s ease-in-out infinite;
    }

    @keyframes bob {
        50% {
            transform: translateY(-6px);
        }
    }

    .map__label {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 18px;
    }

    .map__sub {
        font-size: 13px;
        color: var(--muted-dark);
    }

    .map__frame {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 320px;
        border: 0;
    }

    /* ---------- Footer ---------- */

    .site-footer {
        padding: 96px 0 calc(120px + env(safe-area-inset-bottom));
        background: var(--ink);
        overflow: hidden;
    }

    .site-footer__cta {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(2.2rem, 10vw, 4.5rem);
        line-height: 1.02;
        letter-spacing: -0.04em;
        margin-bottom: 24px;
        max-width: 12ch;
    }

    .site-footer__big {
        margin: 72px 0 0;
        font-family: var(--font-brand);
        font-weight: 900;
        font-size: clamp(4rem, 22vw, 16rem);
        line-height: 0.9;
        letter-spacing: 0.02em;
        color: transparent;
        -webkit-text-stroke: 1.2px rgb(243 239 232 / 0.25);
        text-align: center;
    }

    .site-footer__tagline {
        margin: 14px 0 36px;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.36em;
        text-transform: uppercase;
        color: var(--muted-dark);
    }

    .site-footer__bottom {
        display: grid;
        gap: 20px;
        padding-top: 24px;
        border-top: 1px solid var(--line-dark);
    }

    .socials {
        display: flex;
        gap: 10px;
    }

    .site-footer__meta {
        font-size: 13px;
        color: var(--muted-dark);
    }

    /* ---------- Thanh đặt lịch cố định ---------- */

    .dock {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 50;
        display: grid;
        grid-template-columns: 52px 52px 1fr;
        gap: 8px;
        padding: 7px;
        border-radius: 999px;
        background: rgb(23 21 21 / 0.82);
        border: 1px solid var(--line-dark);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        backdrop-filter: blur(18px) saturate(1.5);
        box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
        transform: translateY(160%);
        transition: transform 0.5s var(--ease-out);
    }

    .dock.is-visible {
        transform: none;
    }

    .dock__btn {
        display: grid;
        place-items: center;
        height: 52px;
        border-radius: 50%;
        background: var(--ink-3);
        color: var(--paper);
    }

    .dock__btn--zalo {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .dock__book {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 52px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-ink);
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        transition:
            background-color 0.4s,
            color 0.4s,
            transform 0.2s;
    }

    .dock__book:active {
        transform: scale(0.97);
    }

    /* ---------- Hộp thoại chung ---------- */

    dialog {
        color: inherit;
    }

    dialog::backdrop {
        background: rgb(8 7 7 / 0.6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /* Menu toàn màn hình */
    .nav-overlay {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--ink);
        color: var(--paper);
    }

    .nav-overlay[open] {
        animation: fade 0.3s ease both;
    }

    .nav-overlay__inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: calc(14px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    }

    .nav-overlay__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-overlay__links {
        margin-top: 40px;
    }

    .nav-overlay__links li {
        border-bottom: 1px solid var(--line-dark);
    }

    .nav-overlay[open] .nav-overlay__links li {
        animation: rise 0.6s var(--ease-out) both;
        animation-delay: calc(var(--d) * 50ms + 80ms);
    }

    .nav-overlay__links a {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 14px 0;
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(2rem, 10vw, 3.5rem);
        line-height: 1.05;
        letter-spacing: -0.04em;
    }

    .nav-overlay__links a span {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--accent);
    }

    .nav-overlay__foot {
        margin-top: auto;
        padding-top: 32px;
        font-size: 14px;
        color: var(--muted-dark);
    }

    .nav-overlay__foot a {
        display: inline-block;
        margin-top: 6px;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 22px;
        color: var(--paper);
    }

    @keyframes fade {
        from {
            opacity: 0;
        }
    }

    /* Bảng đặt lịch */
    /*
     * Khung hộp thoại không tự cuộn (tránh hiện thanh cuộn khi bảng đang trượt vào);
     * nếu màn hình quá thấp thì phần nội dung bên trong .sheet__panel mới cuộn.
     */
    .sheet {
        width: 100%;
        max-width: 100%;
        max-height: none;
        margin: auto 0 0;
        padding: 0;
        border: 0;
        overflow: visible;
        background: transparent;
        color: var(--ink);
    }

    .sheet[open] .sheet__panel {
        animation: sheet-up 0.45s var(--ease-out) both;
    }

    @keyframes sheet-up {
        from {
            transform: translateY(100%);
        }
    }

    .sheet__panel {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px var(--gutter) calc(24px + env(safe-area-inset-bottom));
        border-radius: 28px 28px 0 0;
        background: var(--paper);
    }

    .sheet__handle {
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto 14px;
        border-radius: 5px;
        background: rgb(13 12 12 / 0.18);
    }

    .sheet__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sheet__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 34px;
        letter-spacing: -0.04em;
    }

    .sheet__lead {
        margin-top: 4px;
        font-size: 15px;
        color: var(--muted-light);
    }

    .sheet__look {
        margin-top: 14px;
        padding: 12px 16px;
        border-radius: 14px;
        background: var(--paper-2);
        font-size: 14px;
    }

    .sheet__options {
        display: grid;
        gap: 10px;
        margin-top: 18px;
    }

    .option {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px 14px 14px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--line-light);
        transition: transform 0.2s;
    }

    .option:active {
        transform: scale(0.98);
    }

    .option__icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--paper);
        font-size: 12px;
        font-weight: 800;
    }

    .option--primary .option__icon {
        background: var(--accent);
        color: var(--accent-ink);
    }

    .option__body {
        flex: 1;
        display: grid;
        gap: 2px;
    }

    .option__body strong {
        font-weight: 600;
        font-size: 16px;
    }

    .option__body small {
        font-size: 13px;
        color: var(--muted-light);
    }

    .sheet__copy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        margin-top: 14px;
        border-radius: 999px;
        border: 1px dashed rgb(13 12 12 / 0.3);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Xem lớn mẫu nail */
    .viewer {
        width: min(100% - 24px, 480px);
        max-height: calc(100% - 24px);
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--ink-2);
        color: var(--paper);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .viewer[open] {
        animation: pop 0.4s var(--ease-out) both;
    }

    .viewer__panel {
        position: relative;
    }

    .viewer__close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        background: rgb(13 12 12 / 0.5);
    }

    .viewer__art {
        position: relative;
        display: grid;
        place-items: center;
        height: min(44vh, 360px);
    }

    .viewer__art .mini-fan {
        transform: scale(2);
    }

    .viewer__art img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .viewer__body {
        display: grid;
        gap: 6px;
        padding: 22px 22px 24px;
    }

    .viewer__tag {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .viewer__name {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 32px;
        line-height: 1.05;
        letter-spacing: -0.035em;
    }

    /* Bảng chọn màu trong popup mẫu nail */
    .viewer__picker {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin: 10px -6px 0;
        border: 0;
        min-width: 0;
    }

    .viewer__picker .swatch {
        width: 44px;
        height: 44px;
    }

    .viewer__picker[hidden],
    .viewer__color[hidden] {
        display: none;
    }

    .swatch__dot--original {
        background: conic-gradient(#fffdf8 0 25%, #a9aeb6 0 50%, #d9387a 0 75%, var(--accent) 0);
    }

    .viewer__color {
        margin-bottom: 14px;
        font-size: 13px;
        color: var(--muted-dark);
    }

    .viewer__color strong {
        font-family: var(--font-d);
        font-size: 16px;
        font-weight: 700;
        color: var(--paper);
    }

    /* ---------- Trang con (Blog, bài viết, 404) ---------- */

    .wrap--narrow {
        max-width: 780px;
    }

    .icon--flip {
        transform: scaleX(-1);
    }

    .page-hero {
        padding: calc(var(--header-h) + 48px) 0 56px;
        background:
            radial-gradient(70% 60% at 90% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
            var(--ink);
    }

    .page-hero__title {
        margin-top: 18px;
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(3rem, 14vw, 6.5rem);
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .page-hero__title em {
        font-family: var(--font-s);
        font-style: italic;
        font-weight: 500;
        color: var(--accent);
        transition: color 0.4s;
    }

    .page-hero__title--post {
        margin-top: 22px;
        font-size: clamp(2.2rem, 9vw, 4rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .page-hero__lead {
        margin-top: 16px;
        max-width: 42ch;
        color: var(--muted-dark);
    }

    .page-hero__back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--muted-dark);
    }

    .page-hero__back:hover {
        color: var(--paper);
    }

    .page-hero__meta {
        margin-top: 16px;
        font-size: 14px;
        color: var(--muted-dark);
    }

    .blog-list {
        padding-top: 48px;
    }

    .posts {
        display: grid;
        gap: 18px;
    }

    .post-card__link {
        display: grid;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--line-light);
        transition: transform 0.35s var(--ease-out);
    }

    .post-card__link:hover {
        transform: translateY(-4px);
    }

    .post-card__media {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 16 / 10;
        background: var(--ink-3);
        overflow: hidden;
    }

    .post-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .post-card__body {
        display: grid;
        gap: 8px;
        padding: 20px 22px 24px;
    }

    .post-card__date {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: var(--muted-light);
    }

    .post-card__title {
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .post-card__excerpt {
        font-size: 15px;
        color: var(--muted-light);
    }

    .post-card__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        font-size: 14px;
        font-weight: 600;
    }

    .blog-empty {
        padding: 40px 0 20px;
    }

    .blog-empty__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(1.8rem, 7vw, 2.8rem);
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .blog-empty__text {
        margin-top: 10px;
        color: var(--muted-light);
    }

    .blog-empty__actions {
        margin-top: 24px;
    }

    .post-cover {
        margin-top: -24px;
        margin-bottom: -60px;
        position: relative;
        z-index: 1;
    }

    .post-cover img {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
    }

    .post-body {
        padding-top: 100px;
    }

    /* Nội dung bài viết soạn từ trang quản trị */
    .prose {
        font-size: 17px;
        line-height: 1.75;
        color: #2a2725;
    }

    .prose > * + * {
        margin-top: 1.1em;
    }

    .prose h2,
    .prose h3 {
        margin-top: 1.8em;
        font-family: var(--font-d);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--ink);
    }

    .prose h2 {
        font-size: 28px;
    }

    .prose h3 {
        font-size: 22px;
    }

    .prose a {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
    }

    .prose ul,
    .prose ol {
        padding-left: 1.3em;
    }

    .prose ul {
        list-style: disc;
    }

    .prose ol {
        list-style: decimal;
    }

    .prose li + li {
        margin-top: 0.4em;
    }

    .prose img {
        border-radius: var(--radius-md);
    }

    .prose blockquote {
        padding-left: 18px;
        border-left: 3px solid var(--accent);
        font-style: italic;
        color: var(--muted-light);
    }

    .post-cta {
        display: grid;
        justify-items: start;
        gap: 10px;
        margin-top: 56px;
        padding: 28px 24px;
        border-radius: var(--radius-lg);
        background: var(--paper-2);
    }

    .post-cta__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 26px;
        letter-spacing: -0.03em;
    }

    .post-cta__text {
        color: var(--muted-light);
        margin-bottom: 8px;
    }

    .related__title {
        font-family: var(--font-d);
        font-weight: 800;
        font-size: 34px;
        letter-spacing: -0.03em;
        margin-bottom: 20px;
    }

    .related__list a {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        align-items: center;
        padding: 18px 0;
        border-bottom: 1px solid var(--line-dark);
    }

    .related__list time {
        grid-column: 1;
        font-size: 12px;
        color: var(--muted-dark);
    }

    .related__list span {
        grid-column: 1;
        font-family: var(--font-d);
        font-weight: 700;
        font-size: 20px;
        line-height: 1.2;
    }

    .related__list .icon {
        grid-column: 2;
        grid-row: 1 / span 2;
        color: var(--accent);
    }

    .notfound {
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: calc(var(--header-h) + 40px) 0 140px;
    }

    .notfound__code {
        font-family: var(--font-brand);
        font-weight: 900;
        font-size: clamp(6rem, 40vw, 16rem);
        line-height: 0.9;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--accent);
    }

    .notfound__title {
        margin-top: 12px;
        font-family: var(--font-d);
        font-weight: 800;
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.05;
        letter-spacing: -0.035em;
    }

    .notfound__text {
        margin-top: 12px;
        max-width: 40ch;
        color: var(--muted-dark);
    }

    .notfound__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
    }

    /* ---------- Hiệu ứng hiện dần khi cuộn ---------- */

    .js [data-reveal] {
        opacity: 0;
        transform: translateY(32px);
        transition:
            opacity 0.9s var(--ease-out),
            transform 0.9s var(--ease-out);
        transition-delay: calc(var(--d, 0) * 80ms);
    }

    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }

    /* ---------- Máy tính bảng & desktop ---------- */

    @media (min-width: 768px) {
        :root {
            --gutter: 40px;
            --header-h: 80px;
        }

        .section {
            padding-block: 130px;
        }

        .section--roomy {
            padding-block: 200px;
        }

        .academy__steps,
        .posts {
            grid-template-columns: repeat(3, 1fr);
        }

        .section__head {
            margin-bottom: 56px;
        }

        .looks {
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 250px;
        }

        .dock {
            left: auto;
            right: 24px;
            bottom: 24px;
            width: 340px;
        }

        .visit__grid {
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: start;
        }

        .map,
        .map__facade,
        .map__frame {
            min-height: 520px;
        }

        .site-footer__bottom {
            grid-template-columns: 1fr auto;
            align-items: center;
        }

        .sheet {
            width: min(100% - 48px, 460px);
            margin: auto;
        }

        .sheet__panel {
            max-height: calc(100dvh - 48px);
            border-radius: var(--radius-lg);
            padding-bottom: 28px;
        }

        /* Máy tính: bảng nằm giữa màn hình nên hiện kiểu phóng nhẹ thay vì trượt từ đáy */
        .sheet[open] .sheet__panel {
            animation: pop 0.35s var(--ease-out) both;
        }

        .sheet__handle {
            display: none;
        }

        .reasons__item {
            grid-template-columns: 80px 1fr 1fr;
            align-items: baseline;
            padding: 30px 0;
        }

        .reasons__num {
            grid-row: auto;
        }

        .reasons__title {
            font-size: 38px;
        }

        .reasons__text {
            margin-top: 0;
            font-size: 17px;
        }
    }

    @media (min-width: 1024px) {
        .hero {
            display: flex;
            align-items: center;
        }

        .hero__inner {
            grid-template-columns: 1.25fr 1fr;
            grid-template-areas:
                'copy visual'
                'footer visual';
            column-gap: 40px;
            align-items: center;
        }

        .hero__copy {
            grid-area: copy;
        }

        .hero__title {
            font-size: clamp(4.5rem, 7.4vw, 7.6rem);
        }

        .hero__visual {
            grid-area: visual;
        }

        .hero__footer {
            grid-area: footer;
            max-width: 560px;
        }

        .hero__actions .btn--accent {
            flex: 0 0 auto;
        }

        .fan {
            height: 380px;
            max-width: 460px;
        }

        .gallery__inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .deck {
            width: min(100%, 400px);
        }

        .deck__bar {
            width: min(100%, 400px);
        }

        .fan__tip {
            width: 96px;
            height: 162px;
            margin-left: -48px;
            bottom: 80px;
        }

        .rail--services {
            grid-auto-flow: row;
            grid-template-columns: repeat(3, 1fr);
            max-width: var(--max-w);
            margin-inline: auto;
            overflow: visible;
        }

        .rail--reviews {
            grid-auto-flow: row;
            grid-template-columns: repeat(4, 1fr);
            max-width: var(--max-w);
            margin-inline: auto;
            overflow: visible;
        }

        .rail-wrap .rail-progress,
        .swipe-hint {
            display: none;
        }

        .looks {
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 280px;
        }
    }

    /* Tôn trọng thiết lập giảm chuyển động của người dùng */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            transition-delay: 0s !important;
        }

        .marquee__track {
            animation: none;
        }

        .js [data-reveal] {
            opacity: 1;
            transform: none;
        }
    }
}