/* === BIẾN TOÀN CỤC (DNA IGNIA) === */
:root {
    /* =========================================
   TẦNG 1: CORE COLOR PALETTE (Từ điển màu gốc)
   - TUYỆT ĐỐI KHÔNG SỬ DỤNG TRỰC TIẾP TẦNG NÀY ĐỂ GÁN CHUẨN CSS
   ========================================= */

  /* Dark & Gray */
  --abyss-black: #050507;
  --crisp-smoke: #EDEDF0;
  --graphite-smoke-dark: #A1A1AA;
  --graphite-smoke-light: #4B4A4D;
  --gunmetal: #2C2C2E;
  
  /* Light */
  --bone-ivory: #F4F0E8;
  
  /* Accent */
  --vivid-ember: #FF4A00;
  --aged-ember: #D7411C;
  --aged-ember-deep: #B83715;

/* =========================================
   TẦNG 2: SEMANTIC TOKENS (Gán chức năng)
   - CHỈ ĐƯỢC PHÉP DÙNG CÁC BIẾN NÀY CHO UI
   - MẶC ĐỊNH LÀ DARK MODE (Section 1)
   ========================================= */
  
  /* Dùng cho thuộc tính: background-color của body hoặc section chính */
  --theme-bg: var(--abyss-black);
  
  /* Dùng cho thuộc tính: color của thẻ h1, h2, h3, h4, tiêu đề lớn */
  --theme-headline: var(--crisp-smoke);
  
  /* Dùng cho thuộc tính: color của thẻ p, span, caption, text đọc dài */
  --theme-body: var(--graphite-smoke-dark);
  
  /* Dùng cho thuộc tính: fill/stroke của SVG, icon, hoặc màu bullet point */
  --theme-icon: var(--vivid-ember);
  
  /* Dùng cho thuộc tính: color tại trạng thái :hover của link, menu, nút bấm */
  --theme-hover: var(--aged-ember);
  
  /* Dùng cho thuộc tính: border, border-bottom, viền card, thẻ <hr> */
  --theme-divider: var(--gunmetal);

    
    --font-cinzel: 'Cinzel', serif;     /* Logo/Hero/Headline */
    --font-spectral: 'Spectral', serif;     /* H1, H2, H3, Quote */
    --font-instrument: 'Instrument Sans', sans-serif;       /* Body/UI (nút, nav, label nhỏ) */

    /* --- [QUY CHUẨN FLUID TYPOGRAPHY] --- */
    /* Cấu trúc: clamp(nhỏ nhất, ưu tiên (vw), lớn nhất) */
    
    --text-xs:   clamp(8px, 0.875rem + 0.15vw, 16px);     /* Body text */
    --text-base: clamp(10px, 1rem + 0.2vw, 18px);   /* Input/Default */
    --text-lg:   clamp(12px, 1.05rem + 0.4vw, 22px);   /* Heading nhỏ */
    --text-xl:   clamp(32px, 1.2rem + 1.2vw, 52px);     /* Heading trung bình */
    --text-2xl:  clamp(52px, 2rem + 2vw, 90px);     /* Hero Heading */

    /* =========================================
       1. SPACING (Hệ thống không gian âm)
       Sử dụng cho margin, padding, gap. Giúp toàn trang đều tăm tắp.
    ========================================= */
    --space-xs: clamp(0.5rem, 0.4vw + 0.3rem, 0.75rem);   /* ~8px - 12px */
    --space-sm: clamp(1rem, 0.8vw + 0.6rem, 1.5rem);      /* ~16px - 24px */
    --space-md: clamp(2rem, 1.5vw + 1rem, 3rem);          /* ~32px - 48px */
    --space-lg: clamp(4rem, 3vw + 2rem, 6rem);            /* ~64px - 96px */
    --space-xl: clamp(8rem, 6vw + 4rem, 12rem);           /* Khoảng cách siêu lớn giữa các Section */

    /* ================================================================= */
  /* DIVIDER SPACER & WIDTH (FLUID CLAMP)                              */
  /* ================================================================= */
  
  /* Độ rộng của đường kẻ: Mobile rộng 80px -> Tự bung ra 180px trên Desktop */
  --divider-width: clamp(5rem, 8vw + 3rem, 11.25rem);
  
  /* Khoảng cách dọc (Trên/Dưới) của đường kẻ để tạo khoảng thở */
  /* Mobile cách 16px -> Tự nới rộng lên 32px trên Desktop */
  --divider-gap: clamp(1rem, 1.5vw + 0.5rem, 2rem);

    /* =========================================
       2. MOTION EASING (Gia tốc chuyển động)
       Không bao giờ phải nhớ lại 4 con số cubic-bezier khó nhằn kia nữa.
    ========================================= */
    /* Entrance */
    
    --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);      /* Decelerate mạnh, dùng cho element bay vào */

    /* Exit / fade-out — KHÔNG dùng ngược ease-luxury, vì exit cần cảm giác "rút lui" nhanh-gọn, không lề mề */
    --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

    /* Reveal chữ/text — chậm hơn, êm hơn ease-luxury, dùng cho headline lớn, caption */
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Parallax / drift — chuyển động liên tục theo scroll, cần đều, không giật ở đầu/cuối */
    --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);
    
    /* Cinematic / hero transform (scale, 3D rotate thanh than) — biên độ chuyển động lớn cần easing "nặng" hơn để có trọng lượng */
    --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1);
    
    /* Magnetic hover */
    --ease-magnetic: cubic-bezier(0.77, 0, 0.175, 1);

    --duration-instant: 0.4s;   /* micro feedback: button press */
    --duration-fast: 0.8s;      /* hover state, magnetic button */
    --duration-base: 1s;      /* text reveal, fade-in card */
    --duration-slow: 1.2s;     /* section transition */
    --duration-cinematic: 1.5s; /* hero 3D charcoal transform, full-bleed video crossfade */

    --stagger-text: 40ms;   /* delay giữa từng chữ/dòng */
    --stagger-grid: 90ms;   /* delay giữa từng item trong grid sản phẩm */

    /* =========================================
       3. Z-INDEX (Hệ thống phân tầng)
       Chống lỗi các khối đè lên nhau lộn xộn.
    ========================================= */
    --z-background: -1;
    --z-normal: 1;
    --z-overlay: 10;
    --z-header: 100;
    --z-modal: 1000;


    /* === DESIGN SYSTEM GRID LAYOUT === */
    /* Định nghĩa một lề duy nhất cho toàn bộ Website (Header, Hero Content, và các Section dưới) */
    --site-padding-x: clamp(40px, 6.5vw, 100px);
    
    /* Các biến màu sắc, duration cũ của bạn giữ nguyên phía dưới... */
}

/* =========================================
   LOCAL THEME OVERRIDES (Chỉ kích hoạt ở Section 2)
   - LƯU Ý CHO AI/DEV: ĐÂY KHÔNG PHẢI LÀ GLOBAL LIGHT MODE TOGGLE.
   - TỰ ĐỘNG LẬT MÀU KHI THÊM CLASS .light-bgr VÀO SECTION
   ========================================= */
.light-bgr {
  --theme-bg: var(--bone-ivory);
  --theme-headline: var(--abyss-black);
  --theme-body: var(--graphite-smoke-light);
  --theme-icon: var(--vivid-ember); 
  --theme-hover: var(--aged-ember-deep);
  --theme-divider: #2C2C2E33; /* Gunmetal 20% Opacity */
}


/* === RESET & CƠ BẢN === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--abyss-black);
    color: var(--crisp-smoke);
    font-family: var(--font-instrument);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }



/* === HEADLINE BUTTON ENTRANCE ANIMATION TỐI ƯU TRẠNG THÁI TĨNH === */
/* Đưa về trạng thái nguyên tử, không can thiệp transition */
.hero-h1, .luxury-btn, .slider-counter, .ignia-orbit {
    opacity: 0;
    transform: translateY(40px);
}


/* === GLOBAL HEADER (Smoked Glassmorphism) === */
.ignia-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* CHỈ GIỮ LẠI ĐÚNG DÒNG NÀY ĐỂ ĐẨY MENU VÀO TRONG */
    padding: 0 var(--site-padding-x);
    
    z-index: 100;
    background: var(--abyss-black);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Đã gỡ bỏ border-bottom để header hòa nhập mượt mà vào nền */
    box-sizing: border-box;
    opacity: 1; /* Hiển thị header ban đầu */
}

/* Nút Bấm & Từ Tính (Magnetic Hover) */
.magnetic-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--crisp-smoke);
    /* 👉 SỬA CHỖ NÀY: 
       - Mobile: Chạm đáy ở 11px.
       - Desktop: Bung ra tối đa 14px. 
    */
    font-size: clamp(8px, 0.8vw + 8px, 13px); /*kích thước chữ MENU */
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    padding: 10px;
    transition: color 0.4s ease;
}

/* Màu chữ khi hover đổi sang cam hỏa biến */
.magnetic-btn:hover { 
    color: var(--aged-ember); 
}

/* Ép Icon Menu (2 vạch ngang) tự động co giãn */
.menu-btn svg {
    /* 👉 FLUID SVG (Tỷ lệ chữ nhật): 
       - Mobile: Thu nhỏ về 18px cho thanh mảnh.
       - Desktop: Bung ra tối đa 26px (hoặc 24px) cho vừa vặn.
    */
    width: clamp(15px, 1.2vw + 12px, 23px);
    
    /* Để auto để trình duyệt tự co giãn chiều cao bám theo width, giữ nguyên tỷ lệ SVG */
    height: auto; 
}

/* Ép Icon Kính lúp tự động co giãn */
.search-btn svg {
    /* 👉 FLUID SVG: 
       - Mobile: 16px (nhỏ nhắn, gọn gàng).
       - Desktop: 22px (rõ nét).
    */
    width: clamp(16px, 1vw + 12px, 22px);
    height: clamp(16px, 1vw + 12px, 22px);
}


/* Ép các nét vẽ của Icon SVG (Menu, Search) cũng đổi màu mượt mà theo chữ */
.magnetic-btn:hover svg path,
.magnetic-btn:hover svg circle,
.magnetic-btn:hover svg line {
    stroke: var(--aged-ember);
    transition: stroke 0.4s ease;
}

/* Logo */
/* Khóa cứng cột giữa và xếp dọc nội dung */
/* 1. KHỐI HEADER CENTER (Vẫn khóa cứng 33.33% để không lệch tâm) */
/* Gia cố khóa chết 3 cột (Bọc lớp thép chống xê dịch) */
.header-left {
    flex: 1 1 0%;
    width: 33.333%;
    max-width: 33.333%; /* Lệnh cấm tuyệt đối việc phình to */
    display: flex;
    justify-content: flex-start;
}

.header-center {
    flex: 1 1 0%;
    width: 33.333%;
    max-width: 33.333%;
    display: flex;
    flex-direction: column; /* Giữ lại để Logo và line xếp dọc */
    align-items: center;
    justify-content: center;
}

.header-right {
    flex: 1 1 0%;
    width: 33.333%;
    max-width: 33.333%;
    display: flex;
    justify-content: flex-end;
}

/* 2. KHỐI HỘP BỌC LOGO (MỚI) */
.logo-wrapper {
    display: flex;
    flex-direction: column;
    
    /* 👉 LỆNH QUAN TRỌNG NHẤT: Ép các phần tử bên trong kéo giãn bằng nhau! 
       Do chữ IGNIA to hơn, nó sẽ làm trụ, đường kẻ ở dưới sẽ bị kéo giãn ra bằng đúng mép chữ. */
    align-items: stretch; 
    
    gap: 6px; /* Khoảng cách giữa chữ và gạch dưới */
}

/* 3. LOGO (Giữ nguyên như nãy) */
.logo {
    font-family: var(--font-cinzel);
    font-size: clamp(24px, 1.5vw + 12px, 36px);
    font-weight: 400;
    color: var(--crisp-smoke);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em; /* Bù đắp để đối xứng hoàn hảo */
}

/* 4. ĐƯỜNG KẺ LOGO LINE (Xóa clamp đi) */
.logo-line {
    /* 👉 Trả về 100%. Lúc này nó không lấy 100% của màn hình nữa, 
       mà lấy đúng 100% bề ngang của khối hộp .logo-wrapper! */
    width: 100%; 
    
    height: 1px;
    background-color: var(--gunmetal);
    position: relative;
}

/* === PHẦN MENU OVERLAY CHIA ĐÔI (ĐÃ NÂNG CẤP HIỆU ỨNG TRÀN VIỀN MACALLAN) === */
.overlay-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: var(--abyss-black);
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    /* VŨ KHÍ MỚI: Bắt đầu là 1 điểm tròn vô hình ở góc trên cùng bên trái (0% 0%) */
    clip-path: circle(0% at 0% 0%); 
    
    pointer-events: none; /* Khóa tương tác khi đóng */
    /* LƯU Ý: Xóa bỏ hoàn toàn các dòng opacity và transition cũ ở đây */
}

/* Trạng thái khi mở menu */
.overlay-menu.is-active {
    pointer-events: auto; /* Mở khóa tương tác khi bung ra */
}

/* Nội dung bên trái */
.menu-content {
    display: flex;
    align-items: center;
    padding-left: 10vw;
}

/* Hình ảnh bên phải */
.menu-visual {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.menu-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform, filter; /* Tối ưu hóa chuyển động 60fps */
}

.overlay-menu.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* === CẬP NHẬT LẠI CSS CỦA MENU ITEM === */
.menu-item {
    font-family: var(--font-spectral);
    font-size: clamp(22px, 2vw, 34px);
    font-weight: 300;
    color: var(--crisp-smoke);
    display: flex;             /* BẮT BUỘC: Giúp chữ và mũi tên nằm ngang */
    align-items: center;       /* Căn giữa theo chiều dọc */
    gap: 40px;                 /* Khoảng cách giữa chữ và mũi tên */
    margin-bottom: 2vh;
    transition: color 0.4s ease;
    cursor: pointer;
}

/* === CSS CHO MŨI TÊN (ĐÃ NÂNG CẤP) === */
.hover-arrow {
    opacity: 0;                
    transform: translateX(-20px); 
    color: var(--aged-ember); 
    /* Gia tốc Điện ảnh (Cinematic Easing) siêu mượt */
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    /* VŨ KHÍ MỚI: Cấm Flexbox bóp nhỏ mũi tên */
    flex-shrink: 0;
}

/* Khi chuột chạm vào chữ -> Mũi tên trượt ra */
.menu-item:hover .hover-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* (Giữ nguyên dòng này của bạn) */
.menu-item:hover { color: var(--aged-ember); }


.menu-text {
    display: block;
    transform: translateY(0%);
}

/* === XÓA DẤU CHẤM TRIỆT ĐỂ === */
.menu-links, 
.menu-links li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0;
    margin: 0;
}

/* === DROPDOWN SEARCH NÂNG CẤP === */
.search-dropdown {
    position: fixed;
    top: 0; left: 0; 
    width: 100%;
    background: var(--abyss-black);
    border-bottom: none;
   
    
    /* [TỐI ƯU RESPONSIVE]: Padding tự co giãn để không bị thô trên mobile */
    padding: clamp(80px, 12vh, 100px) 5vw clamp(30px, 5vh, 40px) 5vw;
    
    z-index: 95;
    transform: translateY(-100%);
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gunmetal);
    padding: 20px 0;
    color: var(--crisp-smoke);
    font-family: var(--font-instrument);
    
    /* [TỐI ƯU RESPONSIVE]: Chữ input luôn dễ đọc ở mọi độ phân giải */
    font-size: clamp(15px, 1.3vw, 35px); 
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.1em;
    outline: none;
    transition: border-color 0.4s ease;
}

.search-input:focus { 
    border-color: var(--aged-ember); 
}

/* 2. Font của chữ Discover (Placeholder) - Ép nó nhỏ hơn */
.search-input::placeholder {
    color: #666666;
    font-weight: 300;
    /* Ép size nhỏ hơn hẳn so với input */
    font-size: clamp(14px, 1.3vw, 18px) !important; 
    line-height: 1.2;
}

/* === HERO SECTION === */
.hero-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--abyss-black);
}

.hero-inner {
    /* Khởi tạo Full width/height cho Animation thu nhỏ */
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    will-change: width, height, border-radius;
}

.hero-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide.slide-active {
    opacity: 1;
    pointer-events: auto;
}

.slide-bg {
    width: 100%; height: 100%;
    transform: scale(1.1); /* Chờ parallax zoom out */
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide.slide-active .slide-bg {
    transform: scale(1);
}

.slide-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}

/* === CẬP NHẬT KHUNG CHỨA HERO CONTENT === */
.slide-content {
    position: absolute;
    top: 50%; 
    left: 8vw;
    transform: translateY(-50%);
    
    /* VŨ KHÍ MỚI: Giới hạn bề ngang khung chứa trên mobile để tránh ép chữ quá sát rìa phải */
    width: calc(100% - 16vw); 
}

/* === NÂNG CẤP TYPOGRAPHY HIERARCHY === */
.hero-h1 {
    font-family: var(--font-spectral);
    
    /* 👉 FIX CỐT LÕI 1: Thay thế 7vw bằng biến hệ thống var(--text-2xl) 
       Biến này có hàm clamp() bảo vệ, giúp tiêu đề trên Mobile giữ vững độ lớn tối thiểu 32px, 
       không bao giờ bị teo nhỏ lép vế trước cái nút nữa! */
    font-size: var(--text-2xl); 
    
    font-weight: 300;
    line-height: 1.1;
    color: var(--crisp-smoke);
}

.italic-quote {
    font-style: italic;
    font-weight: 300;
    color: #fff;
}

/* Điều khiển & SVG Signature */
.hero-controls {
    position: absolute;
/* 1. CHỈNH VỊ TRÍ CẢ KHỐI (ĐẨY VỀ LỀ PHẢI) 
       - Mặc định đang là 5vw. 
       - 🛠️ Cách sửa: Giảm con số này xuống (Ví dụ: 3vw, 2vw hoặc 40px) 
         để đẩy toàn bộ cụm này ép sát về phía lề phải màn hình.
    */
    right: 1.8vw; 
    
    /* (Tùy chọn) Bạn có thể tăng/giảm số 5vh này nếu muốn đẩy cả khối lên/xuống */
    bottom: 5vh; 
    
    display: flex;
    align-items: flex-end;
    
    /* 2. CHỈNH KHOẢNG CÁCH GIỮA SỐ ĐẾM VÀ CHỮ "I" 
       - Mặc định đang là 40px.
       - 🛠️ Cách sửa: 
         + Tăng lên (VD: 60px, 80px, hoặc 4vw) để đẩy số và chữ I lùi xa nhau ra.
         + Giảm xuống (VD: 20px, 15px) để kéo chúng sát rịt lại gần nhau.
    */
    gap: 10px; 
    
    z-index: 10;
}

.slider-counter {
    font-family: var(--font-instrument);
    
    /* 🛠️ FLUID TYPOGRAPHY: 
       - Mobile: Nhỏ nhất là 14px.
       - Desktop: Lớn nhất bung ra 22px. 
       - Ở giữa: Tự động trượt mượt mà theo tỷ lệ màn hình (1vw + 10px).
    */
    font-size: clamp(10px, 1vw + 8px, 13px); 
    
    font-weight: 500;
    letter-spacing: 0.1em;
    display: flex;
    
    /* Khoảng cách giữa các số cũng được co giãn từ 6px -> 12px */
    gap: clamp(6px, 0.5vw + 4px, 12px); 
    
    color: var(--crisp-smoke);
    margin-bottom: 5px;
}

.counter-separator { color: var(--gunmetal); }



/* ====================================================================
   IGNIA — ORBIT SLIDE INDICATOR (GSAP PHYSICS)
   ==================================================================== */

.ignia-orbit { 
    position: relative; 
    
    /* Giữ nguyên kích thước khung gốc để JS tính toán tọa độ không bị sai lệch */
    width: 160px; 
    height: 220px; 
    
    /* 🛠️ VŨ KHÍ FLUID VẬT LÝ TOÀN CỤC:
       Phóng to/thu nhỏ TOÀN BỘ khối này (bao gồm cả quỹ đạo JS, SVG và Đốm lửa)
       - Mobile: Thu nhỏ về tỷ lệ 0.7 (70%) cho gọn gàng.
       - Desktop: Bung chuẩn tỷ lệ 1 (100%) hoặc to hơn nếu muốn.
    */
    transform: scale(clamp(0.7, 0.5rem + 1vw, 1));
    
    /* Ép tâm thu phóng nằm ở góc dưới bên phải, giúp nó luôn bám sát lề màn hình không bị lơ lửng */
    transform-origin: bottom right; 
    /* 🛠️ THÊM DÒNG NÀY VÀO: 
       Dùng số âm để kéo tụt quỹ đạo chữ I và dấu chấm xuống dưới. 
       Bạn có thể thử -40px, -50px hoặc -60px đến khi vừa mắt! 
    */
    margin-bottom: -80px;
}

.orbit-svg {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none; /* Không chặn click */
}

/* ----- FLUID: ĐỘ DÀY CHỮ "I" ----- */
.stem-base, .stem-fill {
    position: absolute;
    /* Bề ngang nét chữ: Thanh mảnh 2px trên mobile, đậm 4px trên màn hình lớn */
    width: clamp(1px, 0.2vw + 1px, 2px);
    border-radius: 2px;
}

.stem-base {
    background: rgba(237, 237, 240, 0.18);
}
.stem-fill {
    background: var(--crisp-smoke);
    transform-origin: bottom center; 
}

/* ----- FLUID: ĐỐM LỬA (SPARK) ----- */
.ignia-spark {
    position: absolute;
    
    /* 🛠️ TUYỆT CHIÊU BẢO TOÀN HÌNH KHỐI: 
       Dùng biến cục bộ (--spark-size) để gán chung cho width và height. 
       Điều này đảm bảo đốm lửa luồn là HÌNH TRÒN TUYỆT ĐỐI khi co giãn từ 8px -> 14px.
    */
    --spark-size: clamp(4px, 0.8vw + 2px, 7px);
    width: var(--spark-size); 
    height: var(--spark-size); 
    
    border-radius: 50%;
    background: var(--vivid-ember);
    
    /* Quầng sáng (Glow) cũng co giãn độ nhòe từ 8px lên 16px */
    box-shadow: 0 0 clamp(8px, 1vw + 5px, 16px) 1px var(--vivid-ember); 
    
    transform: translate(-50%, -50%); 
    opacity: 0; 
    will-change: transform; 
}


/* ====================================================================
   IGNIA ORBIT — INTERACTIVE NODES NÂNG CẤP
   ==================================================================== */

/* Các điểm nút bấm tương tác tàng hình */
.orbit-node {
    position: absolute;
    /* Sử dụng biến fluid đã cấu hình để đồng bộ kích thước nút */
    --node-size: clamp(24px, 2vw + 10px, 35px);
    width: var(--node-size);
    height: var(--node-size);
    
    /* Căn tâm nút bấm chuẩn vào tọa độ (X,Y) của JS */
    transform: translate(-50%, -50%); 
    
    background: none;
    border: none;
    cursor: pointer;
    z-index: 15; /* Nằm trên cùng để dễ dàng bắt sự kiện click */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chấm đồ họa hiển thị bên trong nút bấm */
.orbit-node::after {
    content: '';
    /* 🛠️ SỬA CHỖ NÀY ĐỂ CHẤM TRÒN NHỎ ĐI:
       Mặc định clamp đang dao động từ 5px đến 8px. 
       Hãy hạ xuống mức 3px đến 5px để chấm nhìn mảnh dẻ và tinh tế hơn.
       Ví dụ sửa thành: clamp(3px, 0.2vw + 2px, 5px);
    */
    width: clamp(6px, 0.4vw + 2px, 8px);
    height: clamp(6px, 0.4vw + 2px, 8px);
    border-radius: 50%;
    background-color: var(--crisp-smoke);
    
    /* TRẠNG THÁI TĨNH: Ẩn hoàn toàn tàng hình */
    opacity: 0; 
    
    /* Hiệu ứng chuyển đổi mượt mà chuẩn brand luxury */
    transition: opacity var(--duration-instant) var(--ease-luxury), 
                transform var(--duration-instant) var(--ease-luxury);
}

/* HIỆU ỨNG HOVER TOÀN CỤC: 
   Khi người dùng di chuột vào vùng chứa điều khiển, các điểm neo sẽ lộ diện mờ siêu mảnh 15% */
.hero-controls:hover .orbit-node::after {
    opacity: 0.15;
}

/* HIỆU ỨNG HOVER RIÊNG LẺ: 
   Khi di chuột trực tiếp vào một điểm cụ thể, chấm đó sẽ sáng bừng và phình nhẹ lên */
.orbit-node:hover::after {
    /* 🛠️ SỬA ĐỘ ĐẬM CỦA CHẤM KHI CHỈ ĐỊNH CLICK:
       Mặc định đang ép độ đậm cực cao opacity: 0.8 !important;
       Hãy hạ xuống khoảng 0.5 hoặc 0.6 để màu cam rực cháy dịu đi, nhạt và thanh lịch hơn.
    */
    opacity: 0.4 !important;
    transform: scale(1);
    background-color: var(--crisp-smoke); /* Đổi sắc cam hỏa biến kích thích tương tác */
}


/* ================================================= */
/* BUTTON GLASS HERO - CỐ ĐỊNH CẤU TRÚC GỐC - CHỈ TÍCH HỢP CODE FLUID     */
/* ================================================= */

.luxury-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 🛠️ THÊM CODE FLUID: Tự động co giãn khoảng đệm theo tỷ lệ màn hình */
    /* =========================================
       🛠️ CHỈNH KHOẢNG CÁCH VỚI HEADLINE TẠI ĐÂY 
       ========================================= */
    /* Mặc định đang là var(--space-md) hoặc 40px */
    
    /* -> Nếu muốn NÚT TỤT XUỐNG XA CHỮ HƠN: 
          Tăng lên: 60px, 80px hoặc var(--space-lg) */
          
    
          /* 🛠️ CHỈNH NHỎ NÚT Ở ĐÂY (Sửa thông số Padding):
       - Cụm 1 (Trục dọc): Giảm xuống khoảng 8px -> 14px (nút sẽ mỏng hơn).
       - Cụm 2 (Trục ngang): Giảm xuống khoảng 20px -> 36px (nút sẽ bớt bè ra 2 bên).
    */
    padding: clamp(8px, 1.2vh, 18px) clamp(16px, 4vw, 32px);
    /* -> Nếu muốn NÚT SÁT LẠI GẦN CHỮ HƠN: 
          Giảm xuống: 20px, 30px hoặc var(--space-sm) */
    margin-top: calc(var(--space-xs) + 10px);
    
    /* 1. XÓA BỎ BORDER Ở ĐÂY */
    /* border: 2px solid rgba(255, 255, 255, 0.8); -> Đã xóa */
    
    /* 🛠️ THÊM CODE FLUID: Chuyển sang đơn vị 'em' để bo góc co giãn tỷ lệ thuận theo kích thước nút */
    border-radius: 0px 3em 3em 3em; 
    text-decoration: none;
    overflow: hidden; 
    transition: color 0.4s ease, border-color 0.4s ease;
    
    /* 2. THÊM DÒNG NÀY: Ép trình duyệt dùng card đồ họa (GPU) để fix lỗi răng cưa */
    transform: translateZ(0); 
}

/* 3. TẠO LỚP VIỀN GIẢ (::after) NẰM ĐÈ LÊN TRÊN CÙNG */
.luxury-btn::after {
    content: "";
    position: absolute;
    inset: 0; /* Tương đương top:0; left:0; right:0; bottom:0; - Phủ kín nút */
    border: 3px solid #FFFFFFCC; /* Mang viền xuống đây */
    
    /* Đồng bộ bo góc tương đối theo nút cha */
    border-radius: 0px 3em 3em 3em; 
    
    pointer-events: none; /* Tránh chặn click chuột của người dùng */
    z-index: 3; /* Nằm trên cùng, đè lên ::before (z-index:1) và chữ (z-index:2) */
    transition: border-color 0.4s ease;
}

/* 4. KHI HOVER: Đổi màu viền của ::after */
.luxury-btn:hover::after {
    border-color: #FFFFFFCC;
}

/* ================================================= */
/* CÁC PHẦN DƯỚI ĐÂY GIỮ NGUYÊN HOÀN TOÀN CODE CỦA BẠN */
/* ================================================= */

.btn-text {
    position: relative;
    z-index: 2;
    color: #fff;
    font-family: var(--font-instrument);
    
    /* 🛠️ THÊM CODE FLUID: Chữ tự động co giãn đồng bộ theo kích thước root mới */
    /* 🛠️ CHỈNH NHỎ CHỮ Ở ĐÂY:
       - Thu nhỏ cỡ chữ xuống mức 11px đến 13px để trông sắc sảo hơn.
       - Hoặc dùng số tĩnh: font-size: 11px;
    */
    font-size: clamp(12px, 0.8vw + 4px, 22px);
    
    letter-spacing: 3px;
    transition: color 0.4s ease;
}

.luxury-btn::before {
    content: "";
    position: absolute;
    top: 0; 
    right: -20%; 
    width: 140%; 
    height: 100%;
    background: white;
    transform: skewX(45deg) translateX(150%);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1; /* Nằm dưới chữ và viền */
}

.luxury-btn:hover::before {
    transform: skewX(45deg) translateX(0%); 
}

.luxury-btn:hover .btn-text {
    color: #000;
}

/* Trói cứng không gian của chữ MENU / CLOSE để nút không bị phình to ra */
.magnetic-btn span {
    display: inline-block;
    
    /* Cấp sẵn 60px (đủ sức chứa chữ CLOSE mà không làm phình nút) */
    width: 60px; 
    
    /* Ép chữ bám vào lề trái để khi đổi từ 4 chữ sang 5 chữ không bị giật ngược */
    text-align: left; 
}


/* === SECTION 2 HEADER - OUR SIGNATURE === */
.section-product-feature {
  width: 100%;
  background-color: var(--abyss-black);
  padding-left: var(--site-padding-x);
  padding-right: var(--site-padding-x);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Khối giới hạn Layout chữ - Thiết lập tỉ lệ vàng thị giác */
.sec-header-container {
  max-width: 1080px; 
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* Đảm bảo khối luôn nằm chính giữa màn hình */
}

/* Subtitle: Đơn giản, kéo giãn khoảng cách chữ */
.sec-subtitle {
  font-family: var(--font-instrument);
  font-size: var(--text-lg);
  color: var(--crisp-smoke);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
  display: inline-block;
}

/* Title: Tĩnh lặng và uy nghiêm */
.sec-title {
  font-family: var(--font-spectral);
  font-size: var(--text-xl);
  color: var(--crisp-smoke);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* SVG Divider Wrapper: Khoảng đệm kỹ thuật */
/* ================================================================= */
.svg-divider-wrapper {
  /* 1. Gọi hệ không gian âm fluid clamp để tạo khoảng thở đối xứng */
  margin-top: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  margin-bottom: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  
  /* 2. Gọi hệ điều phối kích thước fluid clamp cho họa tiết */
  width: clamp(10rem, 8vw + 3rem, 13.25rem);
  margin-left: auto;
  margin-right: auto;
  
  /* 3. TRIỆT TIÊU TOÀN BỘ KHỐI HỘP NỀN XÁM BỊ LỖI */
  background-color: transparent !important; /* Xóa bỏ nền xám cứng */
  min-height: auto; /* Trả lại chiều cao tự nhiên bám theo SVG gốc */
  
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; /* Đảm bảo các đường cong của họa tiết không bị cắt cụm */
  
  opacity: 0; /* Giữ nguyên cấu trúc ẩn để GSAP thực hiện cú hích reveal mượt mà */
}

/* 4. ÉP ĐỘNG LỰC HỌC CHO THẺ SVG BÊN TRONG TỰ CO GIÃN ĐỒNG BỘ */
.svg-divider-wrapper svg,
.svg-divider-wrapper img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.svg-divider-wrapper svg {
    width: 200px; /* Độ rộng hiển thị thực tế trên web, chỉnh to nhỏ bằng số này */
    height: auto; /* Tự động tính chiều cao theo tỷ lệ viewBox */
}

/* Description: Khối văn bản sâu lắng, kiểm soát độ rộng dòng đọc */
.sec-description {
  font-family: var(--font-instrument);
  font-size: var(--text-base);
  color: #A1A1AA;
  opacity: 0.7;
  line-height: 1.618;
  margin: 0;
  max-width: 580px;
  text-wrap: balance;
}

/* === PRODUCT SHOWCASE SECTION === */
/* === BỐ CỤC BẤT ĐỐI XỨNG === */
.product-showcase {
  width: 100%;
  background-color: var(--theme-bg);
  padding: 15vh var(--site-padding-x);
  display: flex;
  flex-direction: column;
  gap: 25vh; /* Khoảng cách cuộn rộng rãi */
  overflow: hidden;
}

.product-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  z-index: var(--z-normal);
}

/* CĂN LỀ: Khối 1 bên trái, Khối 2 bên phải */
.product-eucalyptus {
  align-items: flex-start;
  text-align: left;
}

.product-lychee {
  align-items: flex-end;
  text-align: right;
}

/* === LAYER TEXT (NỔI LÊN TRÊN, CHIẾM 75% MÀN HÌNH) === */
.product-micro-copy {
  font-family: var(--font-instrument);
  font-size: var(--text-base);
  color: var(--theme-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2vh;
  z-index: 3; /* Nổi lên trên ảnh */
  position: relative;
}

.giant-text {
  font-family: var(--font-spectral);
  font-size: clamp(4rem, 11vw, 15rem); /* Tỷ lệ an toàn, bành trướng mà không vỡ */
  font-weight: 400;
  color: var(--theme-headline);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  z-index: 3; /* Nổi lên trên ảnh */
  position: relative;
  width: 100%;
  max-width: 75vw; /* KHÓA 75% BỀ NGANG: Chữ tự động ngắt dòng nếu quá dài */
  word-wrap: break-word;
  transition: opacity 0.4s ease;
}

/* === LAYER ẢNH (CHÌM XUỐNG DƯỚI, NẰM ĐỐI DIỆN CHỮ) === */
.product-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* Chìm dưới text */
  width: clamp(300px, 45vw, 700px); /* Kích thước ảnh 45% */
  height: auto;
  pointer-events: none; /* Xuyên chuột */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

/* Tọa độ ảnh ngược với chữ */
.product-eucalyptus .product-image {
  right: 0; /* Chữ trái, Ảnh ép phải */
  width: clamp(150px, 35vw, 300px);
}

.product-lychee .product-image {
  left: 0; /* Chữ phải, Ảnh ép trái */
}

/* HIỆU ỨNG HOVER (Nhẹ nhàng, không giật cục) */
.product-card:hover .product-image {
  transform: translateY(-50%) scale(1.03); 
  filter: brightness(1.2) drop-shadow(0 15px 30px rgba(0,0,0,0.5));
}

.product-card:hover .giant-text {
  opacity: 0.8; /* Text chìm mờ đi một chút để tôn ảnh lên */
}

/* === MOBILE (DƯỚI 768px) === */
@media (max-width: 768px) {
  .product-showcase { gap: 15vh; }
  .product-eucalyptus, .product-lychee { align-items: center; text-align: center; }
  
  .product-micro-copy, .giant-text { 
    max-width: 100%; 
  }
  .giant-text { 
    font-size: 15vw; 
  }
  
  /* Đẩy ảnh xuống dưới chữ thành 1 khối dọc thay vì absolute */
  .product-image {
    position: relative;
    transform: none !important;
    top: auto; right: auto; left: auto;
    width: 80vw;
    margin-top: -3vh; /* Kéo ảnh lẹm lên chữ 1 chút tạo độ kết dính */
    z-index: 1;
  }
  .product-card:hover .product-image {
    transform: scale(1.02) !important;
  }
}

/* =========================================
   SECTION 4 - THE ORIGIN
   Câu chuyện khởi nguyên Binchotan: Lò nung truyền thống
   - Bố cục TÁCH BẠCH: chữ bên trên + lò bên dưới (không chồng lấn).
   - Video mở FULL MÀN HÌNH khi bấm Play (không bị ảnh lò che).
   ========================================= */

/* === KHUNG SECTION (Toàn màn hình - nền tối) === */
.section-origin {
  position: relative;
  /* KHÔNG dùng isolation: giữ lớp phủ video fixed (z-index modal) vươn lên TRÊN cả header */
  width: 100%;
  min-height: 100dvh;                /* 100dvh thay vì 100vh: tránh lỗi thanh URL iOS Safari */
  background-color: var(--theme-bg);
  display: flex;
  flex-direction: column;            /* Xếp dọc: chữ -> lò -> (lớp phủ video) */
  justify-content: center;
  align-items: center;
  padding: calc(var(--space-xl) + 0px) calc(var(--site-padding-x) + 0px);
  box-sizing: border-box;
}

/* === KHỐI CHỮ (đồng bộ NGUYÊN cấu trúc chữ với Section 2 - Our Signature) === */
.origin-copy {
  position: relative;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;               /* Căn nội dung chữ GIỮA khối */
  text-align: center;                /* Căn text GIỮA màn hình */
  max-width: clamp(320px, 52vw, 820px);
  margin-bottom: calc(var(--space-lg) + 0px);  /* Khoảng thở lớn giữa chữ và lò */
}

/* Nhịp khoảng thở giữa headline và nút CTA (Section 4 KHÔNG dùng hoạ tiết .svg-divider-wrapper) */
.origin-copy .sec-title {
  margin-bottom: calc(var(--space-md) + 0px);  /* SỬA BIẾN NÀY ĐỂ TĂNG/GIẢM KHOẢNG CÁCH */
}

/* Nút CTA tái sử dụng component .luxury-btn có sẵn của Hero */
.origin-copy .luxury-btn {
  margin-top: calc(var(--space-sm) + 0px);
}

/* === DÒNG CHỮ GỢI CUỘN "DIVE IN" (bên phải - trong không gian âm của khung lò) === */
.origin-scroll-hint {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--site-padding-x) + 0px);  /* Bám đúng trục lề chuẩn của toàn site */
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* Căn dọc bằng flex - không dùng transform để GSAP tự do animate */
  gap: calc(var(--space-sm) + 0px);
  pointer-events: none;      /* Không chặn thao tác chuột với khung lò */
}

.origin-scroll-hint-text {
  font-family: var(--font-instrument);
  /* Cỡ chữ RIÊNG (clamp fluid): cố tình nhỏ hơn nhãn "The Origin" (.sec-subtitle = --text-lg: 12px -> 22px)
     để dòng gợi cuộn thật mảnh, tinh tế, không tranh chấp thị giác với khối chữ.
     Dải hiển thị thực tế: ~9.9px (1024px) -> 12px (từ 1440px trở lên) = nhỏ hơn nhãn ít nhất 2 CỠ.
     SỬA 3 SỐ NÀY ĐỂ TĂNG/GIẢM CỠ CHỮ: (nhỏ nhất, ưu tiên fluid, lớn nhất) */
  font-size: clamp(9px, 0.5vw + 0.3rem, 12px);
  color: var(--theme-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl; /* Chữ xoay dọc, đọc từ trên xuống */
}

/* Đường kẻ mảnh dẫn hướng cuộn xuống */
.origin-scroll-hint-line {
  position: relative;
  width: 1px;
  height: clamp(56px, 9vh, 96px);
  background-color: var(--theme-divider);
  overflow: hidden;
}

/* Tia lửa mảnh chạy dọc đường kẻ - tượng trưng hướng cuộn (chỉ animate transform, không đụng layout) */
.origin-scroll-hint-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: clamp(20px, 3vh, 32px);
  background: linear-gradient(to bottom, transparent, var(--vivid-ember) 50%, transparent);
  animation: origin-hint-drift calc(var(--duration-slow) + 0s) var(--ease-drift) infinite;
}

@keyframes origin-hint-drift {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(420%); }
}

/* === SÂN KHẤU LÒ NUNG (nằm HẲN DƯỚI chữ - không chồng lấn) === */
.origin-stage {
  position: relative;
  z-index: var(--z-normal);
  width: 100%;
  max-width: clamp(960px, 84vw, 1440px);  /* Giới hạn khung lò để giữ không gian âm 2 bên */
  aspect-ratio: 16 / 9;                   /* Khớp tỷ lệ PNG gốc (1644 x 926) */
  margin-inline: auto;
  /* overflow: visible - cho phép ảnh lò PHÓNG TO TRÀN KHỎI KHUNG 16:9 khi zoom để lấp kín
     toàn màn hình (khi zoom, GSAP đẩy z-index của sân khấu lên var(--z-modal) + 1 nên lò
     + ảnh nền luôn nằm trên mọi lớp khác của trang) */
  overflow: visible;
  border-radius: clamp(4px, 0.4vw, 8px);
  background-color: var(--abyss-black);
  /* NÂNG MỌI PIXEL TỐI HƠN NỀN LÊN ĐÚNG NỀN SITE (chống "đường viền" hình chữ nhật):
     File ảnh lò có NỀN ĐỤC màu #030304 - tối hơn --abyss-black (#050507) 2 đơn vị sáng,
     nên trước đây mép khung .origin-stage hiện thành 1 đường kẻ mờ.
     lighten = lấy giá trị SÁNG HƠN giữa ảnh và nền => phần tối của ảnh tự động thành
     ĐÚNG BẰNG var(--abyss-black) => mép khung hoà hoàn toàn vào nền đen.
     SỬA MÀU NỀN CỦA SECTION thì phải sửa cả dòng này cho khớp. */
  mix-blend-mode: lighten;
  /* KHÔNG dùng perspective/3D ở đây: hiệu ứng zoom chạy bằng scale 2D thuần nên toạ độ CỬA LÒ
     tính được chính xác 100% (xem hằng số KILN_DOOR_* trong app.js). Chiều sâu của hiệu ứng
     được tạo bằng parallax thật: ảnh nền charcoal phóng to CHẬM hơn ảnh lò. */
}

/* === LỚP 1: ẢNH LÒ (lớp TRÊN - phần cửa lò đã xoá phông) === */
.origin-kiln-image {
  position: absolute;
  /* z-index 2: LUÔN nằm TRÊN ảnh nền charcoal (ảnh nền khai báo SAU trong HTML nên phải hạ nó xuống) */
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;           /* Khóa tâm ảnh GIỮA khung: hết bị lệch trái */
  display: block;
  filter: brightness(0.92) saturate(0.85); /* Đồng bộ tông màu tối sang trọng */
  transform-origin: 49.67% 54.54%;   /* Tâm zoom = TÂM CỬA LÒ (đo từ file ảnh - khớp KILN_DOOR_* trong app.js) */
  will-change: transform, opacity;
}

/* === LỚP 2: ẢNH NỀN CHARCOAL (nằm SAU ảnh lò - chỉ lộ ra qua phần cửa lò) ===
   - Gần như cùng khung với ảnh lò, chỉ lùi vào 0.25% mỗi cạnh để mép ảnh KHÔNG ló ra ở viền khung
     (xem ghi chú "XOÁ ĐƯỜNG VIỀN CỦA KHUNG LÒ" bên dưới) nên ở trạng thái tĩnh, cửa lò hiện đúng ảnh than này.
   - Khi zoom: lớp này phóng to CHẬM hơn ảnh lò (bedScale < kilnScale) tạo chiều sâu,
     và phải phủ kín màn hình TRƯỚC khi cửa lò biến mất hẳn. */
.origin-kiln-bed {
  position: absolute;
  z-index: 1;                        /* Nằm DƯỚI ảnh lò */
  /* THU NHỎ 0.25% MỖI CẠNH: mép ảnh than phải nằm HẲN BÊN TRONG khung, sau lưng ảnh lò (đục).
     Trước đây mép ảnh trùng khít mép khung nên ló ra 1 pixel sáng -> thành "đường viền".
     Ảnh thu nhỏ ĐỀU 4 cạnh nên TÂM ảnh vẫn trùng tâm khung => không lệch hiệu ứng zoom.
     SỬA 0.25% / 99.5% nếu muốn mép ảnh than lùi sâu hơn vào trong. */
  inset: 0.25%;
  width: 99.5%;
  height: 99.5%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.98) saturate(1.05); /* Giữ tông than hồng ấm, đồng bộ với ảnh lò */
  transform-origin: 49.67% 54.54%;   /* Tâm zoom = TÂM CỬA LÒ (đo từ file ảnh - khớp KILN_DOOR_* trong app.js) */
  will-change: transform, opacity;
}

/* === XOÁ "ĐƯỜNG VIỀN" CỦA KHUNG LÒ (ĐÃ ĐO BẰNG SỐ LIỆU THẬT, KHÔNG PHỎNG ĐOÁN) ===
   NGUYÊN NHÂN:
   1) File ảnh lò the-kiln-169a.png có NỀN ĐỤC màu #030304 (độ sáng 3.07) trải kín khung 16:9,
      trong khi nền site --abyss-black là #050507 (độ sáng 5.14) => chênh 2 đơn vị sáng
      => hiện ra 1 đường viền mờ hình chữ nhật đúng bằng mép khung .origin-stage.
   2) Ảnh than phía SAU (charcoal (2).jpeg) bị ló ra 1 PIXEL ở mép khung (đo được: 104 điểm sáng
      ở cột x=1309, sáng tới 24.9) do mép ảnh trùng khít ranh giới khung.
   CÁCH SỬA (nằm ngay trong 2 khối .origin-stage và .origin-kiln-bed ở TRÊN):
   1) .origin-stage dùng mix-blend-mode: lighten => mọi pixel tối hơn --abyss-black được NÂNG
      đúng bằng --abyss-black => mép khung hoà vào nền, không còn ranh giới cứng.
   2) .origin-kiln-bed thu nhỏ 0.25% mỗi cạnh => mép ảnh than nằm hẳn BÊN TRONG khung,
      sau lưng ảnh lò (đục) nên không bao giờ ló ra nữa.
   TUYỆT ĐỐI GIỮ 2 CƠ CHẾ NÀY, bỏ đi là đường viền hiện lại ngay. */

/* === NÚT PLAY TRÊN MIỆNG LÒ ĐÃ BỎ: video TỰ CHẠY khi zoom cửa lò kết thúc (không cần bấm) === */

/* === LỚP PHỦ VIDEO FULL MÀN HÌNH (position: fixed trực thuộc body - luôn che đúng viewport) === */
/* Mở video: mọc ra từ vị trí CỬA LÒ rồi nở to phủ kín màn hình.
   (JS ghi đè transform-origin bằng toạ độ miệng lò thật trên màn hình khi bắt đầu pin) */
.origin-video-frame {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--abyss-black);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.6);
  transform-origin: 49.67% 54.54%; /* Tâm CỬA LÒ (đo từ file ảnh) - video mọc ra/thu về từ đây */
  transition: opacity calc(var(--duration-cinematic) + 0s) var(--ease-cinematic),
              transform calc(var(--duration-cinematic) + 0s) var(--ease-cinematic),
              visibility 0s linear calc(var(--duration-cinematic) + 0s);
}

.origin-video-frame.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);           /* Nở to như cửa lò vừa lấp đầy khung hình */
  transition: opacity calc(var(--duration-cinematic) + 0s) var(--ease-cinematic),
              transform calc(var(--duration-cinematic) + 0s) var(--ease-cinematic),
              visibility 0s linear 0s;
}

/* Khoá cuộn trang khi video full màn hình đang mở (JS gắn class này) */
body.origin-video-locked {
  overflow: hidden;
}

/* Lõi bên trong: phủ kín toàn bộ viewport */
.origin-video-core {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.origin-video {
  position: absolute;
  /* NÂNG VIDEO LÊN LỚP 2 (cao hơn ảnh lò z-index 1): video luôn HIỆN RÕ trên khung lò */
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === THANH ĐIỀU KHIỂN TÙY CHỈNH (nằm dưới đáy lớp phủ video) === */
.origin-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* NÂNG THANH ĐIỀU KHIỂN LÊN TRÊN VIDEO (video z-index 2) - không để video phủ khuất nút bấm */
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: calc(var(--space-sm) + 0px);
  padding: calc(var(--space-sm) + 0px) calc(var(--space-md) + 0px);
  background: linear-gradient(to top, rgba(5, 5, 7, 0.85), rgba(5, 5, 7, 0));
}

/* Ẩn thanh điều khiển trong lúc lớp phủ đang "mở cửa" (khung video còn ẩn sau ảnh lò).
   Chỉ hiện khi video đã LIVE - phát full màn hình (JS gắn class .is-live). */
.origin-video-frame.is-open:not(.is-live) .origin-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Nút Play/Pause & Exit dùng chung kiểu dáng */
.origin-toggle-btn,
.origin-exit-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 3vw, 44px);
  height: clamp(32px, 3vw, 44px);
  border-radius: 50%;
  color: var(--crisp-smoke);
  background: rgba(237, 237, 240, 0.08);
  border: 1px solid rgba(237, 237, 240, 0.1);
  cursor: pointer;
  transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              background-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              border-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              transform calc(var(--duration-fast) + 0s) var(--ease-magnetic);
}

.origin-toggle-btn:hover,
.origin-exit-btn:hover {
  color: var(--abyss-black);
  background-color: var(--vivid-ember);
  border-color: var(--vivid-ember);
}

.origin-toggle-btn:active,
.origin-exit-btn:active {
  transform: scale(0.98);
}

.origin-toggle-btn svg,
.origin-exit-btn svg {
  width: clamp(14px, 1.4vw, 20px);
  height: clamp(14px, 1.4vw, 20px);
}

/* Hoán đổi icon Play/Pause khi video chạy (JS gắn class .is-playing) */
.origin-toggle-btn .icon-play { display: none; }
.origin-video-frame.is-playing .origin-toggle-btn .icon-play { display: block; }
.origin-video-frame.is-playing .origin-toggle-btn .icon-pause { display: none; }

/* === THANH SCRUBBER (Đường kẻ mảnh) === */
.origin-scrubber {
  --scrub-progress: 0%;   /* JS cập nhật biến này theo tiến trình video */
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
              var(--vivid-ember) var(--scrub-progress),
              rgba(237, 237, 240, 0.18) var(--scrub-progress));
  cursor: pointer;
  outline: none;
}

.origin-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(9px, 0.9vw, 13px);
  height: clamp(9px, 0.9vw, 13px);
  border-radius: 50%;
  background: var(--crisp-smoke);
  border: none;
  box-shadow: 0 0 clamp(6px, 1vw, 12px) rgba(255, 74, 0, 0.5); /* Quầng tàn lửa mờ */
  transition: transform calc(var(--duration-instant) + 0s) var(--ease-magnetic);
}

.origin-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.origin-scrubber::-moz-range-thumb {
  width: clamp(9px, 0.9vw, 13px);
  height: clamp(9px, 0.9vw, 13px);
  border-radius: 50%;
  background: var(--crisp-smoke);
  border: none;
  box-shadow: 0 0 clamp(6px, 1vw, 12px) rgba(255, 74, 0, 0.5);
}

.origin-scrubber::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: transparent; /* Để lộ nền gradient của input bên dưới */
}

/* Ẩn dòng chữ gợi cuộn trên màn hình hẹp để không đè lên khung lò */
@media (max-width: 1024px) {
  .origin-scroll-hint {
    display: none;
  }
}

/* === MOBILE (DƯỚI 768px) === */
@media (max-width: 768px) {
  .origin-copy {
    max-width: 100%;
  }
}

/* =========================================
   SECTION 5 - THE EXPLORE
   Dải ảnh TOÀN CHIỀU RỘNG + hiệu ứng MỞ TỪ TÂM RA 2 BÊN (center-out reveal).
   - Chỉ animate clip-path + transform + opacity (GSAP điều khiển) -> không đụng layout, không lag.
   - Khối chữ phủ căn giữa nên luôn nằm trên TRỤC ĐỐI XỨNG, lề ngang đúng var(--site-padding-x).
   ========================================= */

/* === KHUNG SECTION (khoảng thở siêu lớn trên/dưới để tách hẳn khỏi Section 4) === */
.section-explore {
  position: relative;
  width: 100%;
  background-color: var(--theme-bg);
  /* SỬA BIẾN NÀY ĐỂ TĂNG/GIẢM KHOẢNG THỞ QUANH DẢI ẢNH */
  padding: calc(var(--space-xl) + 0px) 0;
  box-sizing: border-box;
}

/* === KHUNG MẶT NẠ ẢNH (mở ra từ tâm) === */
.explore-veil {
  position: relative;
  width: 100%;
  /* Chiều cao tối thiểu fluid: đủ chỗ cho chữ phủ trên mobile, KHÔNG dùng số tĩnh cứng */
  min-height: clamp(320px, 52vw, 760px);
  overflow: hidden;
  background-color: var(--abyss-black);

  /* TRẠNG THÁI ĐẦU: ảnh còn khép kín ở TÂM (2 cạnh trái/phải ép vào giữa).
     GSAP mở dần về inset(0% ...) khi dải ảnh trượt vào màn hình.
     LƯU Ý: TUYỆT ĐỐI KHÔNG gán transition cho thẻ này - GSAP phải toàn quyền điều khiển clip-path. */
  clip-path: inset(0% 50% 0% 50%);
  will-change: clip-path;
}

/* === ẢNH GỐC TRONG KHUNG MẶT NẠ === */
.explore-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;            /* Ảnh luôn cao bằng khung mặt nạ, không hở nền */
  object-fit: cover;
  object-position: center;        /* Khóa TÂM ảnh: mobile crop vẫn giữ đúng chủ thể giữa khung */
  /* Làm dịu tông ảnh cho hợp chất luxury (tông tối, không dùng bóng đổ) */
  filter: brightness(0.9) saturate(0.92) contrast(1.03);
  will-change: transform;
}

/* === MÀNG TỐI GRADIENT (chỉ gradient - quy tắc cấm dùng blur cho thẻ đang cuộn trên trang) === */
.explore-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-normal);       /* Nằm DƯỚI khối chữ (khối chữ dùng var(--z-overlay)) */
  pointer-events: none;           /* Không chặn chuột */
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 7, 0.72) 0%,
    rgba(5, 5, 7, 0.28) 45%,
    rgba(5, 5, 7, 0.78) 100%
  );
}

/* === KHỐI CHỮ PHỦ (đồng bộ NGUYÊN cấu trúc chữ với Section 2 & Section 4) === */
.explore-copy {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);      /* Nằm TRÊN màng tối gradient */
  display: flex;
  flex-direction: column;
  align-items: center;            /* Căn GIỮA => luôn đúng trục đối xứng của site */
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  /* Lề trái/phải đúng trục lề chuẩn của toàn bộ website */
  padding-left: calc(var(--site-padding-x) + 0px);
  padding-right: calc(var(--site-padding-x) + 0px);
  pointer-events: none;           /* Không chặn chuột vào khung ảnh */
}

/* Nhịp khoảng thở giữa headline và nút CTA (giống Section 4 - KHÔNG dùng hoạ tiết divider) */
.explore-copy .sec-title {
  /* SỬA BIẾN NÀY ĐỂ TĂNG/GIẢM KHOẢNG CÁCH */
  margin-bottom: calc(var(--space-md) + 0px);
  max-width: clamp(320px, 46vw, 900px);
  text-wrap: balance;             /* Ngắt dòng cân đối, không để chữ lẻ loi 1 từ */
}

/* Nút CTA tái sử dụng component .luxury-btn có sẵn: mở lại tương tác chuột cho riêng nút */
.explore-copy .luxury-btn {
  margin-top: calc(var(--space-sm) + 0px);
  pointer-events: auto;
}

/* === MOBILE (DƯỚI 768px) === */
@media (max-width: 768px) {
  .explore-veil {
    /* Cao hơn trên mobile để chữ phủ không chen lên chủ thể của ảnh */
    min-height: clamp(420px, 96vw, 620px);
  }

  .explore-copy .sec-title {
    max-width: 100%;
  }
}


/* =================================================================
   SECTION 7 - BEHIND THE MYSTERY (Khoa học của sự tinh luyện)
   - Bố cục 2 cột TỶ LỆ VÀNG (1 : 1.618): cột chữ DÍNH (sticky) + lưới Bento 2x2.
   - Mọi khoảng cách gọi từ hệ biến :root qua vỏ calc(var(--x) + 0px) để tiện tinh chỉnh sau này.
   - KÍCH THƯỚC RIÊNG (bo góc, khe viền kép, bề ngang chữ) khai báo bằng clamp() để tự co giãn.
   - LƯU Ý SỐNG CÒN: KHÔNG đặt overflow: hidden lên .mystery-section
     (overflow: hidden sẽ biến section thành scrollport và VÔ HIỆU HOÁ position: sticky của cột chữ).
   ================================================================= */

/* === KHUNG SECTION (khoảng thở siêu lớn trên/dưới để tách hẳn khỏi Section 5) === */
.mystery-section {
  /* --- [BẢNG ĐIỀU KHIỂN NHANH] CHỈ SỬA CÁC BIẾN TRONG KHỐI NÀY --- */
  --mystery-lift: clamp(2px, 0.28vw, 4px);           /* Độ NÂNG của thẻ khi hover */
  --mystery-radius-outer: clamp(12px, 1.1vw, 18px);  /* Bo góc VỎ NGOÀI (kỹ thuật viền kép) */
  --mystery-radius-inner: clamp(9px, 0.85vw, 12px);  /* Bo góc LÕI TRONG của thẻ */
  --mystery-bezel-gap: clamp(3px, 0.32vw, 5px);      /* Khe hở giữa vỏ ngoài và lõi trong */
  --mystery-measure: clamp(280px, 26vw, 460px);      /* Bề ngang khối chữ trái (kiểm soát độ dài dòng) */
  --mystery-card-min-h: clamp(200px, 16vw, 280px);   /* Chiều cao tối thiểu của thẻ thông số */

  position: relative;
  width: 100%;
  /* Nền tối theo semantic token của hệ thống (tương đương --abyss-black) */
  background-color: var(--theme-bg);
  /* Lề ngang dùng ĐÚNG trục lề chuẩn của toàn site (Header + mọi section) */
  padding: calc(var(--space-xl) + 0px) calc(var(--site-padding-x) + 0px);
  box-sizing: border-box;
}

/* === LƯỚI 2 CỘT TỶ LỆ VÀNG (trái 1 : phải 1.618) === */
.mystery-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  align-items: start;                    /* Bắt buộc: để cột chữ co đúng chiều cao nội dung => sticky mới chạy */
  gap: calc(var(--space-lg) + 0px);
  width: 100%;
}

/* === CỘT TRÁI: KHỐI CHỮ DÍNH THEO CON TRỎ CUỘN === */
.mystery-header {
  position: sticky;
  top: 20%;                              /* SỬA SỐ NÀY ĐỂ ĐỔI ĐIỂM NEO của cột chữ khi cuộn */
  align-self: start;                     /* Không kéo giãn cột => sticky hoạt động đúng trong lưới */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(var(--mystery-measure) + 0px);
}

/* Nhãn mở đầu (eyebrow) của cột trái */
.mystery-eyebrow {
  display: inline-block;
  font-family: var(--font-instrument);
  font-size: calc(var(--text-xs) + 0px);
  font-weight: 400;
  text-transform: uppercase;             /* BẮT BUỘC in hoa + giãn chữ rộng theo quy chuẩn label */
  letter-spacing: 0.15em;
  color: var(--theme-body);
  margin-bottom: calc(var(--space-sm) + 0px);
  /* Trạng thái khởi điểm cho GSAP (khớp đúng giá trị timeline animate) */
  opacity: 0;
  transform: translateY(40px);
}

/* Tiêu đề chính của cột trái */
.mystery-title {
  margin: 0 0 calc(var(--space-sm) + 0px) 0;
  font-family: var(--font-spectral);
  font-size: calc(var(--text-xl) + 0px);
  font-weight: 500;
  line-height: 1.1618;                   /* Nhịp dòng theo tỷ lệ vàng */
  color: var(--theme-headline);
  text-wrap: balance;                    /* Ngắt dòng cân đối, không để chữ lẻ loi 1 từ */
  opacity: 0;
  transform: translateY(40px);
}
/* Đoạn mô tả dài của cột trái */
.mystery-description {
  margin: 0;
  font-family: var(--font-instrument);
  font-size: calc(var(--text-base) + 0px);
  color: var(--theme-body);
  line-height: 1.618;                    /* Tỷ lệ vàng cho nhịp đọc */
  opacity: 0;
  transform: translateY(40px);
}



/* === CỘT PHẢI: LƯỚI BENTO 2x2 (kín khít - tự lấp mọi khoảng hụt ở góc lưới) === */
.mystery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;                 /* Xếp gạch kín khít, không để lỗ hổng ở góc lưới */
  gap: calc(var(--space-md) + 0px);
  width: 100%;
}

/* === THẺ THÔNG SỐ - KỸ THUẬT VIỀN KÉP (VỎ NGOÀI BỌC LÕI TRONG) ===
   .perf-card (vỏ ngoài) = KHUNG CHỜ dành riêng cho GSAP điều khiển transform + opacity.
   TUYỆT ĐỐI KHÔNG gán transition lên vỏ ngoài: CSS transition sẽ "đóng băng" hiệu ứng GSAP.
   Toàn bộ hover (nâng thẻ + viền ember) diễn ra ở lõi trong .perf-card-core => không xung đột. */
.perf-card {
  position: relative;
  display: block;
  height: 100%;
  padding: calc(var(--mystery-bezel-gap) + 0px);
  border: 1px solid rgba(255, 255, 255, 0.04);      /* Viền mảnh lớp vỏ ngoài */
  border-radius: calc(var(--mystery-radius-outer) + 0px);
  box-sizing: border-box;
  /* Trạng thái khởi điểm cho GSAP (khớp đúng giá trị timeline animate) - tránh "nháy" nội dung */
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* Lõi trong: bề mặt thẻ thật sự (nền sáng 2% + viền hairline 8%) */
.perf-card-core {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: calc(var(--mystery-card-min-h) + 0px);
  padding: calc(var(--space-md) + 0px);
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--mystery-radius-inner) + 0px);
  box-sizing: border-box;
  /* Chỉ chuyển động đúng 3 thuộc tính - TUYỆT ĐỐI KHÔNG dùng transition: all */
  transition: transform calc(var(--duration-fast) + 0s) var(--ease-luxury),
              border-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              background-color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Hover: viền ấm lên như tàn lửa + nhấc nhẹ khối thẻ (tạo sức căng vật lý) */
.perf-card:hover .perf-card-core {
  transform: translateY(calc(-1 * var(--mystery-lift)));  /* SỬA BIẾN --mystery-lift Ở ĐẦU SECTION 7 ĐỂ ĐỔI ĐỘ NÂNG */
  border-color: rgba(255, 120, 50, 0.5);                  /* Viền ember ấm */
  background-color: rgba(255, 255, 255, 0.035);
}

/* === NHÃN NHỎ TRONG THẺ (kèm chấm tàn lửa - dùng biến --theme-icon cho bullet) === */
.perf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) + 0px);
  font-family: var(--font-instrument);
  font-size: calc(var(--text-xs) + 0px);
  font-weight: 400;
  text-transform: uppercase;             /* In hoa + giãn chữ rộng theo quy chuẩn label */
  letter-spacing: 0.15em;
  color: var(--theme-body);
}

/* Chấm tàn lửa (bullet) vẽ bằng CSS - không dùng icon font */
.perf-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: clamp(3px, 0.3vw, 5px);
  height: clamp(3px, 0.3vw, 5px);
  border-radius: 50%;
  background-color: var(--theme-icon);
}

/* === CON SỐ LỚN (serif) TRONG THẺ === */
.perf-value {
  margin-top: calc(var(--space-sm) + 0px);
  font-family: var(--font-spectral);
  font-size: calc(var(--text-xl) + 0px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--theme-headline);
}

/* Phần tử số đếm: chữ số đều bề ngang => con số KHÔNG nhảy qua lại trong lúc đếm */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* === TIÊU ĐỀ THẺ === */
.perf-title {
  margin-top: calc(var(--space-sm) + 0px);
  font-family: var(--font-spectral);
  font-size: calc(var(--text-lg) + 0px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--theme-headline);
}

/* === MÔ TẢ THẺ (tự hút xuống đáy lõi để 4 thẻ luôn đều trục) === */
.perf-desc {
  margin-top: auto;                      /* Đẩy khối mô tả xuống đáy thẻ */
  padding-top: calc(var(--space-sm) + 0px);
  font-family: var(--font-instrument);
  font-size: calc(var(--text-base) + 0px);
  color: var(--theme-body);
  line-height: 1.618;                    /* Tỷ lệ vàng cho nhịp đọc */
  opacity: 0.7;                          /* Hạ nhẹ độ sáng, đồng bộ với .sec-description */
}

/* ================================================================= */
/* === TABLET (DƯỚI 1024px): cột chữ hết dính, xếp chồng lên lưới === */
/* ================================================================= */
@media (max-width: 1024px) {
  .mystery-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .mystery-header {
    position: static;                    /* Bỏ sticky: cột chữ nằm hẳn TRÊN lưới thẻ */
    max-width: 100%;
  }
}

/* ================================================================= */
/* === MOBILE (DƯỚI 768px): sập lưới Bento 2x2 về 1 CỘT DUY NHẤT ==== */
/* ================================================================= */
@media (max-width: 768px) {
  .mystery-grid {
    grid-template-columns: minmax(0, 1fr);  /* Ép sập về 1 cột */
    gap: calc(var(--space-sm) + 0px);
  }

  .perf-card-core {
    min-height: auto;                    /* Mobile: chiều cao theo nội dung, không kéo dài vô ích */
    padding: calc(var(--space-sm) + 0px);
  }
}





/* =================================================================
   SECTION 8 - BEHIND THE FLAME (Journal / Stories Carousel)
   - Khối tiêu đề căn giữa trên trục đối xứng; băng chuyền bài viết trượt ngang.
   - Mọi khoảng cách gọi từ hệ biến :root qua vỏ calc(var(--x) + 0px).
   - Kích thước riêng (bề ngang thẻ, bo góc, nút điều hướng) khai báo bằng clamp()
     để kế thừa tính Fluid Responsive.
   - LƯU Ý SỐNG CÒN: .story-card do GSAP điều khiển transform + opacity
     => TUYỆT ĐỐI KHÔNG gán transition lên thẻ này (tránh đóng băng hiệu ứng).
   ================================================================= */

.stories-section {
  /* --- [BẢNG ĐIỀU KHIỂN NHANH] CHỈ SỬA CÁC BIẾN TRONG KHỐI NÀY --- */
  --stories-card-w: clamp(240px, 24vw, 400px);        /* Bề ngang mỗi thẻ bài viết */
  --stories-card-gap: clamp(16px, 1.5vw, 28px);       /* Khe hở giữa 2 thẻ liên tiếp */
  --stories-media-ratio: 4 / 5;                       /* Tỷ lệ khung ảnh thumbnail */
  --stories-radius-outer: clamp(10px, 0.9vw, 16px);   /* Bo góc VỎ NGOÀI (viền kép) */
  --stories-radius-inner: clamp(7px, 0.7vw, 12px);    /* Bo góc LÕI TRONG của ảnh */
  --stories-bezel-gap: clamp(3px, 0.3vw, 5px);        /* Khe hở giữa vỏ ngoài và lõi trong */
  --stories-nav-size: clamp(44px, 3.4vw, 56px);       /* Đường kính nút điều hướng */
  --stories-nav-line: rgba(255, 255, 255, 0.8);         /* Trắng 80% — trùng viền #FFFFFFCC của .luxury-btn */
  --stories-nav-icon: clamp(16px, 1.15vw, 20px);      /* Cỡ icon chevron bên trong pill */
  --stories-nav-border: 1.5px;                       /* = 1/2 viền 3px của .luxury-btn (BUTTON GLASS HERO) */

  position: relative;
  width: 100%;
  /* Nền tối theo semantic token của hệ thống */
  background-color: var(--theme-bg);
  /* Khoảng thở siêu lớn trên/dưới để tách hẳn khỏi Section 7 */
  padding-top: calc(var(--space-xl) + 0px);
  padding-bottom: calc(var(--space-xl) + 0px);
  box-sizing: border-box;
}

/* === KHỐI TIÊU ĐỀ SECTION (căn giữa toàn bộ trên trục đối xứng) === */
.stories-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Lề ngang đúng trục lề chuẩn của Header + mọi Section */
  padding-left: calc(var(--site-padding-x) + 0px);
  padding-right: calc(var(--site-padding-x) + 0px);
  box-sizing: border-box;
}

/* Nhãn eyebrow: nhỏ, in hoa, giãn chữ rộng */
.stories-eyebrow {
  display: inline-block;
  font-family: var(--font-instrument);
  font-size: calc(var(--text-xs) + 0px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--theme-body);
  margin-bottom: calc(var(--space-sm) + 0px);
  /* Trạng thái khởi điểm cho GSAP (khớp đúng giá trị timeline animate) */
  opacity: 0;
  transform: translateY(40px);
}

/* Tiêu đề chính dạng serif */
.stories-title {
  margin: 0;
  font-family: var(--font-spectral);
  font-size: calc(var(--text-xl) + 0px);
  font-weight: 500;
  line-height: 1.1618;
  color: var(--theme-headline);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(40px);
}

/* Hoạ tiết phân cách dùng lại class gốc .svg-divider-wrapper:
   chỉ bổ sung trạng thái khởi điểm trượt lên (opacity 0 đã có trong rule gốc) */
.stories-header .svg-divider-wrapper {
  transform: translateY(40px);
}

/* Nút CTA "OUR STORIES" dùng lại .luxury-btn: chỉ chỉnh nhịp khoảng cách dưới divider */
.stories-header .luxury-btn {
  margin-top: calc(var(--space-md) + 0px);
}

/* === BĂNG CHUYỀN BÀI VIẾT (cuộn ngang) === */
.stories-carousel-wrapper {
  position: relative;
  width: 100%;
  /* Tách khỏi khối tiêu đề bằng khoảng thở lớn */
  margin-top: calc(var(--space-lg) + 0px);
  /* Lề trái đúng trục site; phần đệm phải nằm trên track để thẻ cuối thoát đẹp */
  padding-left: calc(var(--site-padding-x) + 0px);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* Cuộn quán tính mượt trên iOS */
  overscroll-behavior-x: contain;      /* Không kéo lây cả trang khi hết danh sách */
  scrollbar-width: none;               /* Ẩn thanh cuộn - giữ mặt phẳng sạch */
}

/* Ẩn thanh cuộn trên trình duyệt WebKit */
.stories-carousel-wrapper::-webkit-scrollbar {
  display: none;
}

/* Viền focus mảnh khi điều hướng bằng bàn phím */
.stories-carousel-wrapper:focus-visible,
.stories-nav-arrow:focus-visible {
  outline: 1px solid var(--theme-icon);
  outline-offset: clamp(2px, 0.3vw, 4px);
}

/* Đường ray flex: giữ 5 thẻ trên MỘT hàng ngang, không tự xuống dòng */
.stories-carousel-track {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--stories-card-gap) + 0px);
  width: max-content;
  /* Đệm phải nằm TRONG vùng cuộn => thẻ cuối không dính sát mép màn hình */
  padding-right: calc(var(--site-padding-x) + 0px);
  box-sizing: border-box;
}

/* === THẺ BÀI VIẾT (khung chờ cho GSAP điều khiển transform + opacity) === */
.story-card {
  flex: 0 0 var(--stories-card-w);
  width: var(--stories-card-w);
  opacity: 0;
  transform: translateX(60px);
  will-change: transform, opacity;
}

/* === KỸ THUẬT VIỀN KÉP CHO ẢNH THUMBNAIL === */
/* Toàn bộ nội dung thẻ là một liên kết => vùng bấm rộng, dễ tương tác */
.story-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

/* Vỏ ngoài thumbnail - lớp vỏ viền siêu mảnh bo góc lớn */
.story-media {
  padding: calc(var(--stories-bezel-gap) + 0px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: calc(var(--stories-radius-outer) + 0px);
  background-color: rgba(255, 255, 255, 0.015);
  transition: border-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              background-color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Lõi trong: khung cắt ảnh + nơi diễn ra hiệu ứng zoom */
.story-media-core {
  position: relative;
  overflow: hidden;                    /* Cắt gọn phần ảnh phình ra khi hover */
  aspect-ratio: var(--stories-media-ratio);
  border-radius: calc(var(--stories-radius-inner) + 0px);
  background-color: var(--gunmetal);   /* Nền chờ khi ảnh chưa tải xong */
}

/* Ảnh thumbnail: zoom chậm + hạ sáng nhẹ cho hợp chất luxury */
.story-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.86) saturate(0.9) contrast(1.04);
  transform: scale(1);
  transition: transform calc(var(--duration-slow) + 0s) var(--ease-luxury),
              filter calc(var(--duration-slow) + 0s) var(--ease-luxury);
  will-change: transform;
}

/* Hover / bàn phím: ảnh phình nhẹ, viền vỏ ấm lên như tàn lửa */
.story-link:hover .story-image,
.story-link:focus-visible .story-image {
  transform: scale(1.06);
  filter: brightness(0.96) saturate(1) contrast(1.04);
}

.story-link:hover .story-media,
.story-link:focus-visible .story-media {
  border-color: color-mix(in srgb, var(--vivid-ember) 35%, transparent);
  background-color: rgba(255, 255, 255, 0.03);
}

/* Nhãn phân loại bài viết (eyebrow + chấm tàn lửa vẽ bằng CSS) */
.story-category {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) + 0px);
  margin-top: calc(var(--space-sm) + 0px);
  font-family: var(--font-instrument);
  font-size: calc(var(--text-xs) + 0px);
  font-weight: 400;
  text-transform: uppercase;           /* In hoa + giãn chữ rộng theo quy chuẩn label */
  letter-spacing: 0.15em;
  color: var(--theme-body);
  transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Chấm tàn lửa (bullet) vẽ bằng CSS - không dùng icon font */
.story-category::before {
  content: "";
  flex-shrink: 0;
  width: clamp(3px, 0.3vw, 5px);
  height: clamp(3px, 0.3vw, 5px);
  border-radius: 50%;
  background-color: var(--theme-icon);
}

/* Tiêu đề bài viết */
.story-title {
  margin-top: calc(var(--space-xs) + 0px);
  font-family: var(--font-spectral);
  font-size: calc(var(--text-lg) + 0px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--theme-headline);
  text-wrap: balance;
  transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Hover / bàn phím: tiêu đề ấm lên như tàn lửa */
.story-link:hover .story-title,
.story-link:focus-visible .story-title {
  color: var(--theme-hover);
}

/* === CỤM NÚT ĐIỀU HƯỚNG (neo góc phải dưới) === */
.stories-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--space-sm) + 0px);
  margin-top: calc(var(--space-md) + 0px);
  padding-left: calc(var(--site-padding-x) + 0px);
  padding-right: calc(var(--site-padding-x) + 0px);
  /* Trạng thái khởi điểm cho GSAP (khớp đúng giá trị timeline animate) */
  opacity: 0;
  transform: translateY(calc(var(--space-sm) + 0px));
}

/* === PILL GLASS NAV (kế thừa cấu trúc .luxury-btn của BUTTON GLASS HERO) === */
/* Vỏ pill: giữ nhịp bo góc "em" + căn giữa của BUTTON GLASS HERO,
   BỎ hoàn toàn lớp ::before tráng gương, chỉ còn viền hairline ôm 2 mũi tên */
.stories-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--space-xs) + 0px);
  padding-right: calc(var(--space-xs) + 0px);
  /* Viền 1.5px vẽ bằng inset box-shadow: border thật bị Chrome làm tròn xuống 1px
     trên màn hình 1x, còn inset shadow vẫn render đúng 1.5px = 1/2 viền 3px của .luxury-btn */
  border: 0;
  box-shadow: inset 0 0 0 calc(var(--stories-nav-border) + 0px) var(--stories-nav-line);
  border-radius: 3em;
  background-color: rgba(255, 255, 255, 0.02);
  /* KHÔNG ép translateZ(0): lớp GPU sẽ làm tròn viền về 1px, mất độ dày 1.5px đã chốt */
}

/* Hai vùng bấm mũi tên nằm chung trong một vỏ pill (không kẻ vạch chia) */
.stories-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--stories-nav-size) * 1.15 + 0px);
  height: calc(var(--stories-nav-size) + 0px);
  padding: 0;
  border: 0;
  border-radius: 3em;
  background-color: transparent;
  /* Mũi tên mang ĐÚNG màu viền của pill (--stories-nav-line) */
  color: var(--stories-nav-line);
  cursor: pointer;
  /* Chỉ chuyển màu + scale: không animate thuộc tính layout */
  transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury),
              transform calc(var(--duration-fast) + 0s) var(--ease-magnetic);
}

/* Icon chevron nét siêu mảnh, canh giữa lòng vùng bấm */
.stories-nav-arrow svg {
  width: calc(var(--stories-nav-icon) + 0px);
  height: auto;
  display: block;
}

/* Nét chevron dày ĐÚNG BẰNG viền pill: non-scaling-stroke giữ độ dày theo px CSS,
   không bị phóng to/thu nhỏ theo viewBox 24x24 của icon */
.stories-nav-arrow svg polyline {
  stroke-width: calc(var(--stories-nav-border) + 0px);
  vector-effect: non-scaling-stroke;
}

/* Hover: mũi tên bùng sắc tàn lửa theo quy chuẩn accent của hệ thống */
.stories-nav-arrow:not(:disabled):hover {
  color: var(--theme-icon);
}

/* Phản hồi vật lý khi bấm (scale 0.94) */
.stories-nav-arrow:not(:disabled):active {
  transform: scale(0.94);
}

/* Trạng thái chạm đầu/cuối danh sách: mũi tên mờ đi, không còn tương tác */
.stories-nav-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  color: var(--stories-nav-line);
}

/* ================================================================= */
/* === TABLET (DƯỚI 1024px): thu bề ngang thẻ để lộ thẻ kế tiếp === */
/* ================================================================= */
@media (max-width: 1024px) {
  .stories-section {
    --stories-card-w: clamp(220px, 34vw, 320px);
  }
}

/* ================================================================= */
/* === MOBILE (DƯỚI 768px): mỗi thẻ chiếm ~3/4 bề ngang để gợi ý vuốt === */
/* ================================================================= */
@media (max-width: 768px) {
  .stories-section {
    --stories-card-w: clamp(220px, 74vw, 300px);
    --stories-card-gap: calc(var(--space-sm) + 0px);
  }
}


/* ================================================================= */
/* BẮT ĐẦU: FOOTER - QUIET LUXURY B2B                                */
/* (Chỉ nối thêm, không sửa bất kỳ khối CSS phía trên)               */
/* ================================================================= */

.site-footer {
    /* --- [BẢNG ĐIỀU KHIỂN NHANH] CHỈ SỬA CÁC BIẾN TRONG KHỐI NÀY --- */
    --footer-hairline: rgba(255, 255, 255, 0.08);    /* Đường phân cách siêu mảnh */
    --footer-muted: rgba(255, 255, 255, 0.6);        /* Xám lặng cho link + mô tả */
    --footer-bright: #FFFFFF;                         /* Trắng thuần cho logo + tiêu đề */
    --footer-social-size: clamp(36px, 2.8vw, 44px);   /* Đường kính icon mạng xã hội */
    --footer-icon-size: clamp(15px, 1.1vw, 18px);     /* Cỡ nét icon bên trong */
    --footer-top-ink: rgba(255, 255, 255, 0.9);      /* Viền + mũi tên dùng CHUNG một màu trắng */
    --footer-top-scrim: transparent;                  /* Nền trong suốt hoàn toàn */
    --footer-top-width: clamp(24px, 1.8vw, 28px);     /* Bề ngang capsule (đã thu nhỏ) */
    --footer-top-height: clamp(32px, 2.6vw, 40px);    /* SỬA SỐ NÀY: chiều cao capsule (đã rút ngắn lại một chút) */
    --footer-top-inset: clamp(8px, 0.8vw, 14px);      /* SỬA SỐ NÀY: khoảng lùi khỏi mép phải để không bị cắt cạnh */
    --footer-top-arrow: clamp(11px, 0.8vw, 13px);     /* Cỡ mũi tên bên trong */
    --footer-motto-size: clamp(9px, 0.55vw + 5.5px, 13px);      /* Cỡ chữ câu motto (Cinzel in hoa) */
    --footer-signature-size: clamp(11px, 0.45vw + 7.5px, 15px); /* Cỡ chữ chữ ký (Cinzel nghiêng) */

    /* Ghi đè semantic token CỤC BỘ (chỉ trong phạm vi Footer) */
    --theme-bg: var(--abyss-black);
    --theme-headline: var(--footer-bright);
    --theme-body: var(--footer-muted);
    --theme-icon: var(--vivid-ember);
    --theme-hover: var(--vivid-ember);
    --theme-divider: var(--footer-hairline);

    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--theme-bg);
    /* Đường kẻ hairline thay cho khoảng đệm: tách Footer khỏi Journal mà không gây nặng nề */
    border-top: 1px solid var(--theme-divider);
    /* Lề ngang đúng trục lề chuẩn của Header + mọi Section */
    padding-left: calc(var(--site-padding-x) + 0px);
    padding-right: calc(var(--site-padding-x) + 0px);
    /* Khoảng thở lớn phía trên (4rem -> 6rem) theo tinh thần Quiet Luxury */
    padding-top: calc(var(--space-lg) + 0px);
    padding-bottom: calc(var(--space-md) + 0px);
}

/* === LƯỚI 3 CỘT (chia theo Tỉ lệ vàng 1.618) === */
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 0.85fr) minmax(0, 1fr);
    gap: calc(var(--space-lg) + 0px);
    padding-bottom: calc(var(--space-lg) + 0px);
    box-sizing: border-box;
}

/* Mỗi cột xếp dọc, canh trái trên cùng một trục */
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* === CỘT 1: THƯƠNG HIỆU === */
.footer-brand-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--space-xs) + 0px);
}

.footer-wordmark {
    font-family: var(--font-cinzel);
    font-size: clamp(20px, 1.5vw + 10px, 32px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-left: 0.2em;             /* Bù đắp letter-spacing để cân đúng trục trái */
    color: var(--theme-headline);
}

/* Gạch chân dưới wordmark: kéo dài đúng bằng bề ngang chữ IGNIA */
.footer-wordmark-rule {
    width: 100%;
    height: 1px;
    background-color: var(--theme-divider);
}

.footer-tagline {
    margin-top: calc(var(--space-sm) + 0px);
    max-width: clamp(16rem, 24vw, 24rem);
    font-family: var(--font-instrument);
    font-size: calc(var(--text-base) + 0px);
    font-weight: 400;
    line-height: 1.618;
    color: var(--theme-body);
    text-wrap: balance;
}



/* === TIÊU ĐỀ CỘT (label in hoa, giãn chữ rộng) === */
.footer-heading {
    margin: 0 0 calc(var(--space-md) + 0px);
    font-family: var(--font-instrument);
    font-size: calc(var(--text-xs) + 0px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--theme-headline);
}

/* === CỘT 2: QUICK LINKS === */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + 0px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-link {
    position: relative;
    display: inline-block;
    padding-bottom: clamp(2px, 0.2vw, 4px);
    font-family: var(--font-instrument);
    font-size: calc(var(--text-base) + 0px);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--theme-body);
    text-decoration: none;
    /* Chỉ chuyển màu: không animate thuộc tính layout */
    transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Gạch chân tàn lửa: mọc dần từ trái sang phải bằng transform */
.footer-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--theme-icon);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--theme-headline);
}

.footer-link:hover::after,
.footer-link:focus-visible::after {
    transform: scaleX(1);
}

/* === CỘT 3: LIÊN HỆ B2B === */
.footer-address {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xs) + 0px);
    margin: 0;
    font-style: normal;               /* Tắt chữ nghiêng mặc định của thẻ address */
    font-family: var(--font-instrument);
    font-size: calc(var(--text-base) + 0px);
    line-height: 1.618;
    color: var(--theme-body);
}

.footer-address-line {
    display: block;
}

/* Email: phần tử hành động duy nhất trong cột nên mang sắc trắng thuần */
.footer-mail {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-top: calc(var(--space-xs) + 0px);
    padding-bottom: clamp(2px, 0.2vw, 4px);
    font-family: var(--font-instrument);
    font-size: calc(var(--text-base) + 0px);
    letter-spacing: 0.02em;
    color: var(--theme-headline);
    text-decoration: none;
    transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

.footer-mail::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--theme-icon);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

.footer-mail:hover,
.footer-mail:focus-visible {
    color: var(--theme-hover);
}

.footer-mail:hover::after,
.footer-mail:focus-visible::after {
    transform: scaleX(1);
}

/* === ICON MẠNG XÃ HỘI (vòng tròn hairline) === */
.footer-socials {
    display: flex;
    align-items: center;
    gap: calc(var(--space-sm) + 0px);
    margin-top: calc(var(--space-md) + 0px);
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--footer-social-size) + 0px);
    height: calc(var(--footer-social-size) + 0px);
    border: 1px solid var(--theme-divider);
    border-radius: 50%;
    color: var(--theme-body);
    text-decoration: none;
    transition: color calc(var(--duration-fast) + 0s) var(--ease-luxury),
                border-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
                transform calc(var(--duration-fast) + 0s) var(--ease-magnetic);
}

.footer-social svg {
    width: calc(var(--footer-icon-size) + 0px);
    height: auto;
    display: block;
}

.footer-social:hover,
.footer-social:focus-visible {
    color: var(--theme-headline);
    border-color: color-mix(in srgb, var(--theme-icon) 60%, transparent);
    transform: translateY(-2px);      /* Nhấc nhẹ: phản hồi vật lý, không đổi layout */
}

.footer-social:active {
    transform: scale(0.94);
}

/* === THANH BẢN QUYỀN === */
.footer-bottom {
    /* 2 làn: motto (trái) - chữ ký (phải) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--space-sm) + 0px);
    padding-top: calc(var(--space-md) + 0px);
    border-top: 1px solid var(--theme-divider);
    box-sizing: border-box;
}

/* Câu motto bên trái: Cinzel in hoa, giãn chữ rộng, cỡ chữ fluid theo viewport */
.footer-motto {
    margin: 0;
    font-family: var(--font-cinzel);
    font-size: calc(var(--footer-motto-size) + 0px);
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--theme-body);
    text-wrap: balance;
}

/* Chữ ký bên phải: Cinzel nghiêng, giữ nguyên hoa/thường (không ép all caps) */
.footer-signature {
    margin: 0;
    font-family: var(--font-cinzel);
    font-size: calc(var(--footer-signature-size) + 0px);
    font-style: italic;               /* Cinzel không có bản italic thật: trình duyệt tự nghiêng (synthetic oblique) */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: none;             /* Giữ đúng hoa/thường như nội dung gốc */
    text-align: right;
    color: var(--theme-body);
    text-wrap: balance;
}

/* === NÚT MŨI TÊN NỔI VỀ ĐẦU TRANG (chỉ hiện khi cuộn LÊN) === */
/* Nút pill cũ được xoay 90 độ: dài theo trục dọc, hai đầu bo tròn tuyệt đối (capsule) */
.footer-top-btn {
    /* Lùi khỏi mép phải một khoảng nhỏ: tránh bị cạnh màn hình / thanh cuộn cắt mất viền */
    position: fixed;
    right: calc(var(--footer-top-inset) + 0px);
    bottom: calc(var(--space-md) + 0px);
    /* Nằm trên nội dung nhưng DƯỚI menu overlay (90) và Header (100) */
    z-index: var(--z-overlay);

    /* Khung đứng: hẹp ngang - cao dọc, đúng tư thế của pill sau khi xoay 90 độ */
    width: calc(var(--footer-top-width) + 0px);
    height: calc(var(--footer-top-height) + 0px);

    /* Chỉ còn mũi tên nằm giữa lòng nút */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* Viền trắng nét mảnh + nền trong suốt hoàn toàn */
    border: 1px solid var(--footer-top-ink);
    border-radius: calc(var(--footer-top-width) / 2);   /* Bo tròn 2 đầu thành capsule */
    background-color: var(--footer-top-scrim);
    color: var(--footer-top-ink);                       /* Mũi tên trắng cùng màu viền */

    cursor: pointer;

    /* Trạng thái mặc định: ẨN — JS sẽ gắn .is-visible khi người dùng cuộn ngược lên */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Rút hẳn ra ngoài mép phải: lúc hiện ra có cảm giác trồi ra từ cạnh màn hình */
    transform: translateX(65%);

    /* Chỉ chuyển động opacity + transform (không animate thuộc tính layout) */
    transition: opacity calc(var(--duration-fast) + 0s) var(--ease-luxury),
                transform calc(var(--duration-fast) + 0s) var(--ease-luxury),
                visibility calc(var(--duration-fast) + 0s) var(--ease-luxury),
                border-color calc(var(--duration-fast) + 0s) var(--ease-luxury),
                color calc(var(--duration-fast) + 0s) var(--ease-luxury);
}

/* Trạng thái hiện: fade in + trượt ra khỏi mép phải, chỉ khi cuộn LÊN */
.footer-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.footer-top-btn svg {
    width: calc(var(--footer-top-arrow) + 0px);
    height: auto;
    display: block;
}

/* Hover / bàn phím: viền + mũi tên sáng lên thành trắng thuần */
.footer-top-btn:hover,
.footer-top-btn:focus-visible {
    border-color: var(--footer-bright);
    color: var(--footer-bright);
}

/* Phản hồi vật lý khi bấm */
.footer-top-btn:active {
    transform: scale(0.94);
}

/* Tôn trọng cài đặt giảm chuyển động: bật/tắt tức thời, không fade */
@media (prefers-reduced-motion: reduce) {
    .footer-top-btn {
        transition: none;
        transform: none;
    }
}

/* === TRẠNG THÁI BÀN PHÍM: viền tàn lửa mảnh, không dùng outline mặc định === */
.footer-link:focus-visible,
.footer-mail:focus-visible,
.footer-social:focus-visible,
.footer-top-btn:focus-visible {
    outline: 1px solid var(--theme-icon);
    outline-offset: clamp(3px, 0.3vw, 5px);
}

/* Nút đã lùi khỏi mép phải nên dùng khoảng hở outline chuẩn của site (không cần ghi đè) */

/* ================================================================= */
/* === TABLET (DƯỚI 1024px): 2 cột, cột thương hiệu chiếm trọn hàng === */
/* ================================================================= */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: calc(var(--space-md) + 0px);
    }

    .footer-col-brand {
        grid-column: 1 / -1;   /* Trải hết 2 cột: không để lỗ hổng ở góc lưới */
    }

    /* Thanh đáy: xếp dọc, canh trái để chữ không bị chật */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--space-xs) + 0px);
    }

    .footer-signature {
        text-align: left;
    }
}

/* ================================================================= */
/* === MOBILE (DƯỚI 768px): sập 1 cột, thanh bản quyền xếp dọc ======= */
/* ================================================================= */
@media (max-width: 768px) {
    .site-footer {
        padding-top: calc(var(--space-md) + 0px);
        /* Tinh chỉnh cỡ chữ thanh đáy riêng cho mobile: vẫn fluid bằng clamp */
        --footer-motto-size: clamp(9px, 2.6vw, 11px);        /* SỬA SỐ NÀY: cỡ motto trên mobile */
        --footer-signature-size: clamp(10px, 3vw, 12.5px);   /* SỬA SỐ NÀY: cỡ chữ ký trên mobile */
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--space-md) + 0px);
    }

    .footer-heading {
        margin-bottom: calc(var(--space-sm) + 0px);
    }

    /* Thanh đáy đã xếp dọc từ breakpoint 1024px, chỉ siết lại khoảng cách */
    .footer-bottom {
        gap: calc(var(--space-xs) + 0px);
    }
}

/* ================================================================= */
/* KẾT THÚC: FOOTER - QUIET LUXURY B2B                               */
/* ================================================================= */