/* ============================================================ concept3.css — Senna Wellness Retreat · CONCEPT 3 Mood: editorial sang trọng kiểu RAKxa — serif tương phản cao (Cormorant), UPPERCASE giãn chữ, nhiều khoảng trắng, chữ đặt trên nền sạch CẠNH ảnh (không đè lên ảnh rối) → dễ đọc. Bảng màu gần như đơn sắc warm-neutral; footer espresso. ============================================================ */ :root{ --bg:#FBFAF7; /* trắng ngà ấm — nền chính */ --white:#FFFFFF; --greige:#F0EBE2; /* dải warm-neutral rất nhạt */ --espresso:#221E1A; /* footer + scrim hero (section màu duy nhất) */ --ink:#2B2722; --ink-soft:#5A534B; --muted:#9A9186; /* eyebrow / meta xám */ --accent:#9A4F37; /* clay — dùng RẤT tiết chế (hover/link) */ --line:rgba(43,39,34,.16); --line-soft:rgba(43,39,34,.09); --serif:'Cormorant Garamond', Georgia, serif; --sans:'Be Vietnam Pro', system-ui, sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --maxw:1320px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:300;line-height:1.9;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;width:100%;height:100%;object-fit:cover} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 64px} /* ---- Typography: serif tương phản cao, UPPERCASE giãn chữ — hierarchy mạnh ---- */ h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:.015em;color:var(--ink)} .display{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.07em;line-height:1.1} .eyebrow{font-family:var(--sans);font-size:.62rem;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);font-weight:500} .lead{font-size:1.04rem;line-height:1.95;color:var(--ink-soft);font-weight:300;max-width:46ch;letter-spacing:.005em} .meta{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--muted)} .ph{position:relative;overflow:hidden;background:#E7E0D4} .ph img{transition:transform 1.6s var(--ease)} /* ---- Button: viền chữ nhật mảnh, hover trượt nền (sạch, không lỗi) ---- */ .cbtn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:var(--sans);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink);padding:17px 40px;border:1px solid var(--ink);background:transparent;position:relative;isolation:isolate;overflow:hidden;transition:color .55s var(--ease),border-color .55s var(--ease)} .cbtn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--ease);z-index:-1} .cbtn:hover{color:#fff} .cbtn:hover::before{transform:scaleX(1);transform-origin:left center} .cbtn.light{color:#fff;border-color:rgba(255,255,255,.65)} .cbtn.light::before{background:#fff} .cbtn.light:hover{color:var(--ink);border-color:#fff} .cbtn.solid{color:#fff;border-color:var(--ink);background:var(--ink)} .cbtn.solid::before{background:var(--accent)} .cbtn.solid:hover{color:#fff;border-color:var(--accent)} /* Header CTA: tự đổi sáng/tối theo nền (trên hero tối ↔ khi cuộn nền trắng) */ header .nav>.cbtn{padding:13px 27px;font-size:.62rem;color:#fff;border-color:rgba(255,255,255,.6)} header .nav>.cbtn::before{background:#fff} header .nav>.cbtn:hover{color:var(--ink);border-color:#fff} header.scrolled .nav>.cbtn{color:var(--ink);border-color:var(--ink)} header.scrolled .nav>.cbtn::before{background:var(--ink)} header.scrolled .nav>.cbtn:hover{color:#fff;border-color:var(--ink)} /* link tinh tế */ .tlink{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:10px;transition:.4s var(--ease)} .tlink .a{transition:.4s var(--ease)} .tlink:hover{color:var(--accent)}.tlink:hover .a{transform:translateX(6px)} /* ============ HEADER ============ */ header{position:fixed;inset:0 0 auto 0;z-index:100;padding:26px 0;transition:.55s var(--ease)} header::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,30,26,.34),transparent);opacity:1;transition:.55s var(--ease);z-index:-1} /* backdrop-filter dat trên chính
se tao containing block cho MOI con position:fixed. Hai thu bi anh huong, deu la con cua header: - drawer mobile .nav.has-menu .menu (inset:0) -> chi phu dai header - .mega-panel (mega-menu.js: header.appendChild) Nen khi da scroll, mo menu mobile thi nen phu co lai bang header, chu tran ra de len noi dung trang. O dau trang (chua .scrolled) thi khong loi. Cach sua: giu y nguyen hieu ung nhung dua nen mo xuong ::before — pseudo-element khong tao containing block cho cac phan tu anh em. */ header.scrolled{padding:15px 0;background:transparent;box-shadow:0 14px 36px -26px rgba(34,30,26,.5)} header.scrolled::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(251,250,247,.96);backdrop-filter:blur(16px)} header.scrolled::after{opacity:0} .nav{display:flex;align-items:center;justify-content:space-between;gap:30px} .brand-img{height:54px;width:auto;object-fit:contain;display:block;filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.35));transition:.55s var(--ease)} header.scrolled .brand-img{height:44px;filter:none} .nav ul{display:flex;gap:34px;list-style:none} .nav ul a{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:400;text-shadow:0 1px 10px rgba(0,0,0,.45);transition:.4s var(--ease);position:relative} header.scrolled .nav ul a{color:var(--ink);text-shadow:none} .nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .4s var(--ease);opacity:.6} .nav ul a:hover::after{right:0} .nav ul a:hover{color:#fff} header.scrolled .nav ul a:hover{color:var(--accent)} /* Vung cham >=44px: truoc day chi 26x15px (3 vach 1px + 2 gap 6px), rat de bam truot. Padding mo rong vung bam, margin am giu nguyen vi tri thi giac cua 3 vach. */ /* .burger la