/* Concept 8 — Fullpage snap-scroll theo đúng UI Diamond Hill Thái Nguyên
   Tone màu brand guideline: ruby #842319, kem #ffe1c0, nền #fef1e8, gold #e6d0a1→#caaf7a */
:root {
  --ruby: #842319;
  --ruby-deep: #691314;
  --cream: #ffe1c0;
  --page-bg: #fef1e8;
  --tint-50: #a36b6a;
  --tint-96: #f9e8e0;
  --gold: #caaf7a;
  --gold-light: #e6d0a1;
  --gold-grad: linear-gradient(160deg, #e6d0a1 0%, #caaf7a 52%, #e6d6a2 100%);
  --ruby-grad: linear-gradient(150deg, #842319 0%, #691314 100%);
  --black: #000000;
  --white: #ffffff;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--page-bg); color: var(--black); line-height: 1.65; }
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

/* ===== Fullpage "lật màn" (JS điều khiển transform, kiểu fullPage.js) ===== */
body.fp-on { overflow: hidden; height: 100vh; }
body.fp-on .fullpage { transition: transform .85s cubic-bezier(.77, 0, .175, 1); will-change: transform; }
body.fp-on .screen { height: 100vh; }
.screen { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; overflow: hidden; }
.scr-overlay { position: absolute; inset: 0; }
/* Phối màu "Sunset Ruby": ruby đậm dồn về mép trái làm khung cho chữ,
   giữa-phải trong dần để ảnh sáng lên, thêm quầng gold như nắng ở góc phải trên,
   đáy tối nhẹ để form strip nổi — theo nhịp sáng của mockup Diamond Hill */
.ov-hero { background:
  linear-gradient(to top, rgba(45, 8, 8, .6), transparent 32%),
  radial-gradient(900px 540px at 82% 16%, rgba(230, 208, 161, .35), transparent 70%),
  linear-gradient(100deg, rgba(77, 14, 15, .88) 0%, rgba(105, 19, 20, .5) 32%, rgba(132, 35, 25, .22) 58%, rgba(176, 58, 30, .1) 80%, transparent 100%); }
/* Màn Tổng quan: panel chữ nằm bên phải → dồn tối sang phải, ảnh sáng bên trái */
.ov-dark { background:
  linear-gradient(280deg, rgba(77, 14, 15, .9) 0%, rgba(105, 19, 20, .55) 42%, rgba(132, 35, 25, .18) 75%, transparent 100%),
  linear-gradient(to top, rgba(45, 8, 8, .35), transparent 30%); }
/* Video / Tiện ích: vignette nhẹ trên-dưới thay vì phủ phẳng */
.ov-soft { background: linear-gradient(to bottom, rgba(45, 8, 8, .38), rgba(45, 8, 8, .1) 38%, rgba(45, 8, 8, .08) 62%, rgba(45, 8, 8, .42)); }
.scr-body { position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto; padding: 96px 72px 40px; }

/* ===== Typography hiển thị (serif nghiêng + sans nhỏ) ===== */
.display-line { line-height: 1.12; }
.display-small { font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: 5px; text-transform: uppercase; font-weight: 400; color: inherit; }
.display-serif { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: 1px; }
.display-small-light { font-size: clamp(1rem, 1.8vw, 1.4rem); letter-spacing: 5px; text-transform: uppercase; color: var(--cream); }
.display-serif-light { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--gold-light); }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--ruby); margin-bottom: 12px; }
.eyebrow-light { color: var(--gold-light); }

/* ===== Header ===== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px 28px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo img { height: 54px; width: auto; display: block; filter: drop-shadow(0 1px 6px rgba(255, 255, 255, .35)); }
.logo-divider { width: 1px; height: 40px; background: rgba(255, 255, 255, .5); }
body.is-subpage .logo-divider { background: rgba(132, 35, 25, .3); }
.logo-by { font-size: .62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); line-height: 1.5; transition: color .3s; }
.logo-by strong { font-size: .72rem; }
body.is-subpage .logo-by, body.on-light-screen .logo-by { color: var(--ruby); }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); font-weight: 700; font-size: 1.02rem; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); transition: color .3s; }
body.is-subpage .header-phone, body.on-light-screen .header-phone { color: var(--ruby); text-shadow: none; }
body.on-light-screen .logo-divider { background: rgba(132, 35, 25, .3); }
.menu-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--white); color: var(--black); border: none; border-radius: 99px; padding: 11px 22px; font: 700 .82rem var(--sans); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); transition: all .25s; }
.menu-btn:hover { background: var(--ruby); color: var(--cream); }

/* ===== Menu overlay ===== */
.menu-overlay { position: fixed; inset: 0; z-index: 300; background: var(--ruby-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.menu-overlay[hidden] { display: none; }
.menu-close { position: absolute; top: 24px; right: 30px; background: none; border: none; color: var(--cream); cursor: pointer; }
.menu-list { display: grid; gap: 4px; text-align: center; max-height: 74vh; overflow-y: auto; padding: 10px; }
.menu-list a { color: var(--cream); text-decoration: none; font-size: clamp(1.05rem, 2.4vh, 1.5rem); font-family: var(--serif); font-style: italic; padding: 4px 20px; transition: color .2s, letter-spacing .2s; }
.menu-list a:hover { color: var(--gold-light); letter-spacing: 2px; }
.menu-hotline { color: var(--gold-light); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.menu-hotline a { color: inherit; text-decoration: none; }

/* ===== Dot-nav trái ===== */
.dot-nav { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: grid; gap: 9px; }
.dot-nav a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dot-dash { width: 14px; height: 2px; background: rgba(132, 35, 25, .45); transition: all .25s; }
.dot-nav a.on-dark .dot-dash { background: rgba(255, 225, 192, .55); }
.dot-label { font-size: .64rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ruby); opacity: 0; transform: translateX(-4px); transition: all .25s; white-space: nowrap; }
.dot-nav a.on-dark .dot-label { color: var(--cream); }
.dot-nav a.active .dot-dash { width: 30px; background: var(--gold); }
.dot-nav a.active .dot-label { opacity: 1; transform: none; }

/* ===== Nút pill ===== */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 30px; border-radius: 99px; border: none; font: 700 .8rem var(--sans); letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all .25s; background: var(--gold-grad); color: var(--ruby-deep); }
.btn-pill:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(202, 175, 122, .5); }
.btn-pill-light { background: var(--white); color: var(--ruby); }
.btn-pill-light:hover { background: var(--cream); }
.btn-pill-ruby { background: var(--ruby); color: var(--cream); }
.btn-pill-ruby:hover { background: var(--ruby-deep); box-shadow: 0 6px 18px rgba(132, 35, 25, .35); }
.btn-pill-outline { background: transparent; border: 1.5px solid var(--white); color: var(--white); }
.btn-pill-outline:hover { background: var(--white); color: var(--ruby); }

/* ===== 01 HERO ===== */
.hero-body { display: flex; align-items: center; min-height: 72vh; }
.hero-vertical { position: absolute; left: 110px; top: 50%; transform: translateY(-50%); display: block; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--serif); letter-spacing: 10px; font-size: 1rem; color: rgba(255, 225, 192, .65); white-space: nowrap; z-index: 2; }
.hero-headline { margin-left: auto; text-align: right; color: var(--cream); text-shadow: 0 3px 28px rgba(45, 8, 8, .55); }
.hero-headline .display-serif { color: var(--white); font-size: clamp(2.6rem, 6vw, 5.2rem); }
.hero-headline .display-small { color: var(--gold-light); }
.hero-strip { position: relative; z-index: 3; background: rgba(61, 11, 12, .93); backdrop-filter: blur(6px); border-top: 1px solid rgba(230, 208, 161, .55); display: flex; align-items: flex-end; justify-content: center; gap: 34px; padding: 20px 40px 24px; flex-wrap: wrap; }
.hs-label { color: var(--cream); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; font-size: .85rem; padding-bottom: 10px; }
.hs-field { display: grid; gap: 2px; min-width: 220px; }
.hs-field span { color: var(--gold-light); font-size: .78rem; font-weight: 600; }
.hs-field input { background: transparent; border: none; border-bottom: 1px solid rgba(230, 208, 161, .6); color: var(--white); font: inherit; padding: 6px 2px; }
.hs-field input:focus { outline: none; border-bottom-color: var(--gold-light); }
.hero-strip .form-message { width: 100%; text-align: center; margin: 0; }

/* ===== 02 VIDEO ===== */
.video-body { display: flex; align-items: center; justify-content: center; text-align: center; }
.video-play { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: var(--white); text-decoration: none; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; font-size: .9rem; }
.video-play svg { border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; padding: 20px; width: 104px; height: 104px; transition: all .3s; background: rgba(0, 0, 0, .18); }
.video-play:hover svg { background: var(--gold-grad); color: var(--ruby-deep); border-color: transparent; transform: scale(1.06); }

/* ===== 03 TỔNG QUAN ===== */
.overview-body { display: flex; justify-content: flex-end; }
.overview-panel { max-width: 620px; color: var(--cream); }
.overview-panel .display-serif { color: var(--gold-light); }
.overview-panel .display-small { color: var(--cream); }
.overview-desc { margin: 18px 0 22px; font-size: .95rem; color: #fdeede; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; margin-bottom: 26px; }
.overview-grid small { display: block; font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 3px; }
.overview-grid strong { font-size: .94rem; font-weight: 600; line-height: 1.45; }
.ov-num { font-size: 2.3rem; font-weight: 800; color: var(--gold-light); }

/* ===== 04 GIỚI THIỆU ===== */
.screen-intro { background: var(--page-bg); }
.intro-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.intro-text .display-serif { color: var(--ruby); }
.intro-text > p:not(.display-line):not(.eyebrow) { color: #4a3a33; margin-top: 16px; text-align: justify; }
.intro-media img { display: block; border-radius: 10px; box-shadow: 18px 18px 0 var(--tint-96), 0 20px 48px rgba(105, 19, 20, .16); }

/* ===== 05 KẾT NỐI ===== */
.screen-connect { background: var(--white); }
.connect-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding-bottom: 12px; }
.connect-text .display-serif { color: var(--ruby); }
.connect-text > p:not(.display-line):not(.eyebrow) { color: #4a3a33; margin-top: 16px; }
.radar { position: relative; aspect-ratio: 1; max-width: 430px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #fdf3e7 0%, var(--tint-96) 100%); border: 1px solid var(--gold-light); }
.radar-ring { position: absolute; inset: 0; border: 1px dashed var(--gold); border-radius: 50%; opacity: .7; }
.radar-ring.r1 { inset: 16%; }
.radar-ring.r2 { inset: 32%; }
.radar-ring.r3 { inset: 8%; opacity: .4; }
.radar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--ruby); color: var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 8px rgba(132, 35, 25, .18), 0 0 28px rgba(132, 35, 25, .35); }
.radar-pin { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--ruby); border: 1px solid var(--ruby); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); cursor: help; transition: transform .2s; }
.radar-pin:hover { transform: translate(-50%, -50%) scale(1.22); z-index: 2; }
.travel-band { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; width: 100%; padding: 10px 72px 46px; display: flex; gap: 40px; align-items: flex-start; }
.travel-head { font-weight: 800; text-transform: uppercase; color: var(--ruby); letter-spacing: 1px; line-height: 1.35; flex-shrink: 0; }
.travel-head small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tint-50); font-size: .8rem; margin-top: 4px; }
.travel-line { flex: 1; display: flex; gap: 12px; border-top: 1px dashed var(--tint-50); padding-top: 14px; position: relative; }
.travel-car { position: absolute; left: -6px; top: -11px; color: var(--ruby); background: var(--white); }
.travel-stop { flex: 1; }
.travel-stop strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ruby); line-height: 1.2; }
.travel-stop strong::before { content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ruby); margin: -19px 0 8px 2px; }
.travel-stop ul { list-style: none; font-size: .78rem; color: #4a3a33; margin-top: 4px; }

/* ===== 06 TIỆN ÍCH ===== */
.utility-title { position: absolute; z-index: 3; left: 72px; bottom: 190px; }
.utility-spots { position: absolute; inset: 0; z-index: 2; }
.u-spot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white); background: var(--ruby); color: var(--cream); font: 700 .82rem var(--sans); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); transition: transform .2s; }
.u-spot:hover { transform: translate(-50%, -50%) scale(1.28); }
.utility-band { position: relative; z-index: 3; margin-top: auto; background: rgba(254, 241, 232, .96); padding: 20px 72px 24px; }
.utility-legend { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 30px; max-width: 1220px; margin: 0 auto; }
.utility-legend li { font-size: .86rem; font-weight: 600; color: var(--black); }
.utility-legend span { display: inline-block; font-weight: 800; color: var(--ruby); min-width: 30px; }
.mp-tip { position: absolute; z-index: 10; background: var(--ruby-deep); color: var(--cream); font-size: .78rem; padding: 7px 12px; border-radius: 7px; pointer-events: none; white-space: nowrap; transform: translate(-50%, -135%); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.mp-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ruby-deep); }

/* ===== 07 HÌNH ẢNH slider ===== */
.screen-slider { background: var(--black); }
.slider-stage { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .7s ease; }
.slide.active { opacity: 1; }
.slide figcaption { position: absolute; left: 72px; bottom: 150px; color: var(--white); font-size: 1.05rem; letter-spacing: 2.5px; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.slider-band { position: relative; z-index: 3; margin-top: auto; background: rgba(254, 241, 232, .96); display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 22px 72px; }
.slider-info strong { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; color: var(--ruby); letter-spacing: 1px; }
.slider-info p { font-size: .86rem; color: #4a3a33; max-width: 640px; }
.slider-nums { display: flex; align-items: center; gap: 6px; }
.slider-nums button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--tint-50); font: 700 .95rem var(--sans); cursor: pointer; transition: all .25s; position: relative; }
.slider-nums button + button::before { content: '|'; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); color: var(--gold-light); font-weight: 400; }
.slider-nums button.active { background: var(--ruby); color: var(--cream); }

/* ===== 08 MẶT BẰNG ===== */
.screen-plan { background: var(--white); }
.plan-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 50px; align-items: center; }
.plan-text .display-serif { color: var(--ruby); }
.plan-accordion { display: grid; margin: 26px 0; }
.pa-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; border-bottom: 1px solid var(--tint-96); padding: 16px 4px; font: 600 1.02rem var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--tint-50); cursor: pointer; transition: color .2s; text-align: left; }
.pa-item:hover, .pa-item.active { color: var(--ruby); }
.pa-item.active { border-bottom-color: var(--ruby); }
.plan-map { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 46px rgba(105, 19, 20, .16); }
.plan-map > img { display: block; width: 100%; }
.mp-unit { position: absolute; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--white); cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .4); transition: transform .2s; }
.mp-unit:hover { transform: translate(-50%, -50%) scale(1.5); z-index: 5; }
.mp-unit-shophouse { background: var(--gold); }
.mp-unit-lienke { background: var(--cream); }
.mp-unit.hidden { display: none; }
.plan-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 16px; background: rgba(254, 241, 232, .92); border-radius: 8px; padding: 8px 14px; font-size: .76rem; font-weight: 600; }
.plan-legend span { display: flex; align-items: center; gap: 6px; }
.plan-legend i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.plan-legend .lg-shophouse { background: var(--gold); }
.plan-legend .lg-lienke { background: var(--cream); }

/* ===== 09 SẢN PHẨM ===== */
.screen-unit { background: var(--page-bg); }
.unit-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 50px; align-items: center; }
.unit-text .display-serif { color: var(--ruby); }
.unit-name { margin: 22px 0 10px; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--black); }
.unit-name em { color: var(--ruby); font-style: normal; }
.unit-type { display: inline-block; background: var(--gold-grad); color: var(--ruby-deep); font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; padding: 4px 12px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }
.unit-spec { font-size: .95rem; color: #4a3a33; padding: 7px 0; border-bottom: 1px solid var(--tint-96); }
.unit-spec strong { color: var(--ruby-deep); float: right; }
.unit-desc { font-size: .86rem; color: var(--tint-50); margin: 12px 0 20px; }
.unit-media img { display: block; border-radius: 10px; box-shadow: 0 20px 50px rgba(105, 19, 20, .18); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.unit-dots { position: relative; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; max-width: 1360px; margin: 0 auto; width: 100%; padding: 0 72px 34px; }
.unit-dots button { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ruby); background: transparent; cursor: pointer; transition: background .2s; }
.unit-dots button.active { background: var(--ruby); }

/* ===== 10 ĐỐI TÁC ===== */
.screen-partner { background: radial-gradient(760px 420px at 82% 12%, rgba(230, 208, 161, .2), transparent 65%), var(--ruby-grad); }
.partner-body { text-align: center; color: var(--cream); }
.partner-logo { width: 210px; margin: 0 auto 14px; display: block; }
.partner-tagline { letter-spacing: 3px; text-transform: uppercase; font-size: .88rem; margin-bottom: 40px; }
.partner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; max-width: 1050px; margin: 0 auto; border-top: 1px solid rgba(255, 225, 192, .4); border-bottom: 1px solid rgba(255, 225, 192, .4); padding: 34px 10px; }
.partner-item small { display: block; font-size: .76rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 12px; }
.partner-item strong { font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; }
.partner-item img { max-height: 52px; width: auto; margin: 0 auto; filter: brightness(0) invert(1); }

/* ===== 11 THƯ VIỆN ===== */
.screen-library { background: linear-gradient(150deg, #f3ddba 0%, var(--gold-light) 55%, #d9bd8a 100%); }
.library-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.library-card { background: var(--page-bg); border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 16px 40px rgba(105, 19, 20, .16); transition: transform .3s; display: block; }
.library-card:hover { transform: translateY(-8px); }
.library-card header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: var(--ruby); }
.library-card header span { font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: .88rem; }
.library-card img { width: 100%; height: 46vh; min-height: 260px; object-fit: cover; display: block; }

/* ===== 12 TIN TỨC ===== */
.screen-news { background: linear-gradient(170deg, var(--page-bg) 0%, var(--tint-96) 100%); }
.news-body-screen .display-serif { color: var(--ruby); }
.news-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 30px; }
.news-card { display: block; text-decoration: none; color: inherit; }
.news-card img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 14px; box-shadow: 0 10px 26px rgba(105, 19, 20, .13); transition: transform .3s; }
.news-card:hover img { transform: translateY(-5px); }
.news-card h3 { font-size: .98rem; font-weight: 800; text-transform: uppercase; line-height: 1.4; margin-bottom: 8px; color: var(--black); }
.news-card p { font-size: .84rem; color: #4a3a33; margin-bottom: 10px; }
.news-more { font-size: .78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ruby); }
.news-all { margin-top: 26px; text-align: right; }
.news-all a { color: var(--ruby); font-weight: 700; text-decoration: none; letter-spacing: 1px; }

/* ===== 13 LIÊN HỆ ===== */
.screen-contact { background: linear-gradient(120deg, #b03a1e 0%, var(--ruby) 40%, #d97a35 100%); }
.contact-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.contact-info { color: var(--cream); display: grid; gap: 14px; }
.contact-info small { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 3px; }
.contact-info a { color: inherit; text-decoration: none; }
.ci-phone { font-size: 2rem; font-weight: 800; }
.ci-follow { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: .82rem; margin-top: 8px; }
.ci-social { display: flex; gap: 18px; }
.ci-social a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--gold-light); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 2px; }
.ci-note { font-size: .74rem; opacity: .8; max-width: 480px; margin-top: 10px; }
.contact-card { background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .35); border-radius: 18px; padding: 38px 36px; display: grid; gap: 14px; }
.contact-card .display-small { color: var(--ruby-deep); font-weight: 600; }
.contact-card .display-serif { color: var(--ruby-deep); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.cc-field { display: grid; gap: 4px; }
.cc-field span { font-weight: 700; font-size: .85rem; color: var(--ruby-deep); }
.cc-field input, .cc-field textarea { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px; padding: 11px 13px; font: inherit; color: var(--black); }
.cc-field input:focus, .cc-field textarea:focus { outline: none; border-color: var(--ruby); background: rgba(255, 255, 255, .8); }
.cc-field textarea { min-height: 86px; resize: vertical; }
.cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-card .btn-pill-outline { border-color: var(--white); color: var(--white); justify-self: end; }
.copyright { position: absolute; right: 30px; bottom: 16px; color: var(--cream); font-size: .78rem; opacity: .8; }

/* ===== Form chung ===== */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-message { font-size: .86rem; min-height: 1.2em; color: var(--gold-light); }
.form-message.ok { color: #9fd48a; }
.form-message.err { color: #ffb3a6; }

/* ===== Lightbox ===== */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(20, 5, 4, .94); display: none; align-items: center; justify-content: center; padding: 4vh 4vw; }
.lightbox.open { display: flex; }
.lightbox img, .lightbox iframe { max-width: 100%; max-height: 88vh; border-radius: 8px; }
.lightbox iframe { width: min(1100px, 92vw); aspect-ratio: 16/9; }
.lightbox-close { position: absolute; top: 18px; right: 24px; background: none; border: none; color: var(--cream); cursor: pointer; }

/* ===== Trang tin tức (cuộn thường) ===== */
.subpage { padding: 130px 24px 70px; max-width: 1280px; margin: 0 auto; }
body.is-subpage { background: var(--page-bg); }
.sub-container { margin-bottom: 50px; }
.sub-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.subpage .display-serif { color: var(--ruby); }
.news-row-page { margin-top: 34px; }
.article-meta { font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tint-50); margin-bottom: 10px; }
.article-meta a { color: var(--ruby); text-decoration: none; }
.article-title { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--ruby); font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 20px; line-height: 1.25; }
.article-thumb { border-radius: 12px; margin-bottom: 26px; box-shadow: 0 14px 36px rgba(105, 19, 20, .14); }
.article-content { font-size: 1.02rem; }
.article-content p { margin-bottom: 16px; }
.article-content h2, .article-content h3 { color: var(--ruby); margin: 26px 0 12px; }

/* ===== Responsive ===== */
@media (max-width: 1180px) {
  .scr-body { padding: 96px 30px 30px; }
  .hero-vertical { display: none; }
  .utility-title { left: 30px; bottom: 210px; }
  .slide figcaption { left: 30px; }
  .travel-band, .slider-band, .utility-band { padding-left: 30px; padding-right: 30px; }
  .unit-dots { padding: 0 30px 26px; }
}
@media (max-width: 1024px) {
  .dot-nav { display: none; }
  /* Panel chữ tràn toàn màn → overlay tối đều cho đủ tương phản */
  .ov-dark { background: linear-gradient(rgba(45, 8, 8, .68), rgba(77, 14, 15, .78)); }
  .ov-hero { background: linear-gradient(rgba(61, 11, 12, .72), rgba(77, 14, 15, .6) 55%, rgba(45, 8, 8, .72)); }
  .screen { min-height: 0; padding: 40px 0; }
  .screen-hero, .screen-video, .screen-slider, .screen-utility { min-height: 92vh; padding: 0; }
  .intro-body, .connect-body, .plan-body, .unit-body, .contact-body { grid-template-columns: 1fr; gap: 34px; }
  .overview-body { justify-content: flex-start; }
  .library-cards { grid-template-columns: 1fr; }
  .library-card img { height: 200px; min-height: 0; }
  .utility-legend { grid-template-columns: 1fr 1fr; }
  .header-phone { display: none; }
}
@media (max-width: 700px) {
  .hero-strip { flex-direction: column; align-items: stretch; gap: 12px; }
  .hs-field { min-width: 0; }
  .cc-row { grid-template-columns: 1fr; }
  .travel-band { flex-direction: column; gap: 16px; }
  .travel-line { flex-wrap: wrap; gap: 18px; }
  .travel-stop { flex: 1 1 40%; }
  .slider-band { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 24px; }
  .utility-legend { grid-template-columns: 1fr; gap: 5px; }
  .utility-title { bottom: auto; top: 100px; }
  .logo-by, .logo-divider { display: none; }
  .contact-card { padding: 26px 20px; }
  .copyright { position: static; text-align: center; padding: 14px 0; }
}

/* ===== Video nền YouTube: tự chạy, lặp, không click sang được YouTube ===== */
.video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* iframe phủ tràn màn theo tỷ lệ 16:9, canh giữa */
.video-bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.ov-video { background: linear-gradient(to bottom, rgba(45, 8, 8, .35), rgba(45, 8, 8, .05) 40%, rgba(45, 8, 8, .08) 62%, rgba(45, 8, 8, .45)); pointer-events: none; }
/* Nút mở bản có âm thanh: dời xuống góc trái dưới, nhường trung tâm cho video */
.video-body { display: flex; align-items: flex-end; min-height: 100vh; padding-bottom: 56px; }
.video-play-corner { flex-direction: row !important; gap: 12px !important; font-size: .78rem !important; letter-spacing: 2px; }
.video-play-corner svg { width: 54px !important; height: 54px !important; padding: 12px !important; }

/* ===== Thanh điều khiển video tự dựng (YouTube IFrame API) ===== */
.video-controls { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 16px; color: var(--white); background: rgba(20, 5, 4, .38); backdrop-filter: blur(8px); border: 1px solid rgba(255, 225, 192, .25); padding: 10px 22px; border-radius: 99px; }
.video-controls[hidden] { display: none; }
.video-controls button { background: none; border: none; color: var(--white); cursor: pointer; display: flex; align-items: center; padding: 4px; transition: color .2s, transform .2s; }
.video-controls button:hover { color: var(--gold-light); transform: scale(1.12); }
.vc-time { font-size: .84rem; letter-spacing: 1px; min-width: 86px; text-align: center; font-variant-numeric: tabular-nums; }
#vc-seek { width: min(420px, 38vw); height: 3px; cursor: pointer; accent-color: #e6d0a1; }
@media (max-width: 700px) {
  .video-controls { gap: 10px; padding: 8px 16px; bottom: 20px; width: calc(100% - 32px); }
  #vc-seek { width: 100%; min-width: 0; flex: 1; }
  .vc-time { min-width: 74px; font-size: .74rem; }
}

/* ===== Tinh chỉnh lề trái/phải cho cân đối (kiểu Diamond Hill: lề thoáng ~6% màn) ===== */
@media (min-width: 1181px) {
  :root {
    --edge: clamp(48px, 6vw, 124px);          /* lề nội dung section */
    --edge-header: clamp(32px, 4.8vw, 96px);  /* lề header + copyright */
  }
  .site-header { padding: 18px var(--edge-header); }
  .dot-nav { left: clamp(26px, 3.2vw, 64px); }
  .scr-body { padding-left: var(--edge); padding-right: var(--edge); }
  .hero-vertical { left: calc(var(--edge) + 40px); }
  .utility-title { left: var(--edge); }
  .slide figcaption { left: var(--edge); }
  .travel-band, .slider-band, .utility-band { padding-left: var(--edge); padding-right: var(--edge); }
  .unit-dots { padding-left: var(--edge); padding-right: var(--edge); }
  .copyright { right: var(--edge-header); }
  .menu-close { right: var(--edge-header); }
}

/* ===== Fullpage trên mobile: màn cao 100dvh, nội dung dài cuộn bên trong màn ===== */
@supports (height: 100dvh) {
  body.fp-on { height: 100dvh; }
  body.fp-on .screen { height: 100dvh; }
}
@media (max-width: 1024px) {
  body.fp-on .screen { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* ===== Màn Kết nối: đường nét đứt chạy liên tục (kỹ thuật Diamond Hill) =====
   Bí quyết mượt: |stroke-dashoffset| = đúng 1 chu kỳ dasharray, chạy linear infinite */
.radar-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.rl-ring { fill: none; stroke: var(--gold); stroke-width: .45; stroke-dasharray: 3 3; opacity: .75; animation: dashSpin 1.4s linear infinite; }
.rl-road { fill: none; stroke: var(--ruby); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 2.85 2.85; opacity: .8; animation: dashMove .3s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -5.7; } }  /* 2.85+2.85 = 1 chu kỳ */
@keyframes dashSpin { to { stroke-dashoffset: -6; } }    /* 3+3 = 1 chu kỳ */

/* ===== Màn Kết nối: dàn dựng xuất hiện tuần tự khi lật tới (kiểu GSAP stagger của DH) ===== */
#ket-noi .connect-text .eyebrow,
#ket-noi .connect-text .display-line,
#ket-noi .connect-text > p:not(.display-line):not(.eyebrow) { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
#ket-noi .connect-map { opacity: 0; transition: opacity 1s ease; }
#ket-noi .travel-head { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
#ket-noi .travel-stop { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .6s ease; }
#ket-noi .travel-car { opacity: 0; transform: translateX(-60px); transition: opacity .6s ease, transform .8s cubic-bezier(.22,.8,.35,1); }

#ket-noi.entered .connect-text .eyebrow { opacity: 1; transform: none; transition-delay: .15s; }
#ket-noi.entered .connect-text .display-line { opacity: 1; transform: none; transition-delay: .3s; }
#ket-noi.entered .connect-text > p:not(.display-line):not(.eyebrow) { opacity: 1; transform: none; transition-delay: .5s; }
#ket-noi.entered .connect-map { opacity: 1; transition-delay: .45s; }
#ket-noi.entered .travel-head { opacity: 1; transform: none; transition-delay: .8s; }
#ket-noi.entered .travel-stop { opacity: 1; transform: none; }
#ket-noi.entered .travel-stop:nth-of-type(1) { transition-delay: .9s; }
#ket-noi.entered .travel-stop:nth-of-type(2) { transition-delay: 1.05s; }
#ket-noi.entered .travel-stop:nth-of-type(3) { transition-delay: 1.2s; }
#ket-noi.entered .travel-stop:nth-of-type(4) { transition-delay: 1.35s; }
#ket-noi.entered .travel-car { opacity: 1; transform: none; transition-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .rl-ring, .rl-road { animation: none; }
  #ket-noi .connect-text .eyebrow, #ket-noi .connect-text .display-line,
  #ket-noi .connect-text > p:not(.display-line):not(.eyebrow),
  #ket-noi .connect-map, #ket-noi .travel-head, #ket-noi .travel-stop, #ket-noi .travel-car { opacity: 1; transform: none; transition: none; }
}

/* ===== Bản đồ kết nối thật (ketnoi_ok.png) + SVG động đè lên ===== */
.geo-map { position: relative; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 46px rgba(105, 19, 20, .18); }
.geo-map img { display: block; width: 100%; }
.geo-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Vòng bán kính 1KM/2KM: nét đứt ruby xoay chậm */
.geo-ring { fill: none; stroke: var(--ruby); stroke-width: 3; stroke-dasharray: 14 14; opacity: .5; animation: geoSpin 2.4s linear infinite; }
/* Tim đường: nét đứt kem chạy dọc trục đường (đè lên lòng đường ruby của ảnh) */
.geo-road { fill: none; stroke: #ffe9d8; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 20 20; opacity: .95; animation: geoDash .5s linear infinite; }
@keyframes geoDash { to { stroke-dashoffset: -40; } }  /* 20+20 = 1 chu kỳ */
@keyframes geoSpin { to { stroke-dashoffset: -28; } }  /* 14+14 = 1 chu kỳ */
/* Màn kết nối: bản đồ 3:2 chiếm cột rộng hơn — CHỈ desktop, mobile giữ 1 cột */
@media (min-width: 1025px) {
  .connect-body { grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); }
}
@media (prefers-reduced-motion: reduce) { .geo-ring, .geo-road { animation: none; } }

/* ===== Timeline khoảng cách kiểu Diamond Hill =====
   Bullseye + xe trên line chấm; số lớn + đơn vị xoay dọc phía trên;
   chấm mốc trên line; list địa danh kẻ trái phía dưới */
.travel-band { align-items: flex-start; }
.travel-head { font-weight: 800; text-transform: uppercase; color: var(--ruby-deep); letter-spacing: .5px; font-size: 1.18rem; line-height: 1.3; }
.travel-head small { display: block; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ruby); font-size: .95rem; margin-top: 10px; line-height: 1.45; }
.travel-line { position: relative; border-top: 0; padding-top: 0; display: flex; padding-left: 96px; }
/* Line chấm tròn nhỏ chạy hết chiều ngang */
.travel-line::before { content: ''; position: absolute; left: 0; right: 0; top: 72px; height: 3px; background-image: radial-gradient(circle, var(--ruby-deep) 1.3px, transparent 1.6px); background-size: 11px 3px; background-repeat: repeat-x; }
/* Bullseye điểm xuất phát */
.travel-start { position: absolute; left: -4px; top: 72px; transform: translateY(-48%); width: 30px; height: 30px; color: var(--ruby-deep); }
.travel-start svg { width: 100%; height: 100%; display: block; }
/* Xe đậu trên line, sau bullseye */
.travel-car { position: absolute; left: 40px; top: 39px; color: var(--ruby-deep); background: none; width: auto; height: auto; display: block; }
.travel-stop { flex: 1; position: relative; }
.ts-time { display: inline-flex; align-items: flex-start; gap: 2px; height: 72px; }
.ts-time strong { font-size: clamp(2.1rem, 2.9vw, 3.2rem); font-weight: 500; letter-spacing: -.05em; color: var(--ruby-deep); line-height: .95; }
.ts-unit { writing-mode: vertical-rl; font-size: .66rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ruby-deep); margin-top: 7px; }
.ts-dot { position: absolute; left: 5px; top: 72px; transform: translateY(-38%); width: 11px; height: 11px; border-radius: 50%; background: var(--ruby-deep); }
.travel-stop ul { list-style: none; margin: 20px 0 0 10px; padding-left: 13px; border-left: 1px solid rgba(132, 35, 25, .35); font-size: .82rem; color: #4a3a33; line-height: 1.75; }
/* Vô hiệu dot cũ vẽ bằng ::before của bản trước */
.travel-stop strong::before { content: none; }
/* Bullseye tham gia dàn dựng entered */
#ket-noi .travel-start { opacity: 0; transition: opacity .5s ease; }
#ket-noi.entered .travel-start { opacity: 1; transition-delay: .85s; }

@media (max-width: 700px) {
  .travel-line { padding-left: 0; flex-direction: column; gap: 20px; }
  .travel-line::before, .travel-start, .travel-car, .ts-dot { display: none; }
  .ts-time { height: auto; }
  .travel-stop ul { margin-top: 8px; }
}

/* ===== Widget liên hệ dọc bên phải (kiểu concept5, phối ruby) — chỉ desktop ===== */
.side-cta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 95; display: none; flex-direction: column; transition: opacity .35s ease; }
@media (min-width: 1025px) { .side-cta { display: flex; } }
.side-cta a { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; padding: 13px 6px; background: rgba(61, 11, 12, .94); backdrop-filter: blur(4px); border: 1px solid rgba(230, 208, 161, .28); border-right: none; color: var(--gold-light); text-decoration: none; font-size: .6rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; text-align: center; line-height: 1.3; transition: background .2s, color .2s; }
.side-cta a + a { border-top: none; }
.side-cta a:first-child { border-radius: 10px 0 0 0; }
.side-cta a:last-child { border-radius: 0 0 0 10px; }
.side-cta a:hover { background: var(--ruby); color: var(--cream); }
.side-cta .sc-highlight { background: var(--gold-grad); color: var(--ruby-deep); border-color: rgba(230, 208, 161, .6); }
.side-cta .sc-highlight:hover { filter: brightness(1.06); color: var(--ruby-deep); }
/* Ẩn khi đang đứng ở màn video (engine fullpage đặt data-screen trên body) */
body[data-screen="video"] .side-cta { opacity: 0; pointer-events: none; }

/* ===== Widget liên hệ mobile: thanh bar cố định đáy màn (vùng ngón cái) ===== */
@media (max-width: 1024px) {
  .side-cta { display: flex; flex-direction: row; top: auto; bottom: 0; left: 0; right: 0; transform: none; z-index: 96; background: rgba(61, 11, 12, .96); backdrop-filter: blur(6px); border-top: 1px solid rgba(230, 208, 161, .35); padding-bottom: env(safe-area-inset-bottom); }
  .side-cta a { flex: 1; width: auto; padding: 9px 4px 10px; border: none; border-left: 1px solid rgba(230, 208, 161, .18); border-radius: 0 !important; font-size: .56rem; gap: 4px; }
  .side-cta a:first-child { border-left: none; }
  .side-cta a span br { display: none; }
  /* "Lên đầu" ít giá trị trên mobile — ẩn để 4 nút chính rộng rãi */
  .side-cta a:last-child { display: none; }
  /* Chừa chỗ cho bar: nội dung trong màn không bị che đáy */
  body.fp-on .screen { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ===== Mobile cuộn thường (fullpage tắt): chừa chỗ cho bar liên hệ đáy màn ===== */
@media (max-width: 1024px) {
  body.is-fullpage:not(.fp-on) { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ===== Tab bar mobile kiểu Zalo/MoMo: nền sáng, 5 mục, Đăng ký tròn nhô giữa ===== */
@media (max-width: 1024px) {
  .side-cta { background: rgba(254, 241, 232, .97); backdrop-filter: blur(8px); border-top: 1px solid rgba(202, 175, 122, .5); box-shadow: 0 -6px 20px rgba(105, 19, 20, .12); }
  .side-cta a { color: var(--ruby-deep); border-left: none !important; font-size: .58rem; font-weight: 700; letter-spacing: .3px; gap: 3px; padding: 9px 2px 10px; background: transparent; }
  .side-cta a:hover { background: transparent; color: var(--ruby); }
  .side-cta a:last-child { display: flex; }  /* hiện lại "Lên đầu" cho đủ 5 mục */
  /* Nút Đăng ký: vòng tròn gold nhô lên giữa bar */
  .side-cta .sc-highlight { background: transparent; border-color: transparent; overflow: visible; position: relative; filter: none; }
  .side-cta .sc-highlight svg { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; padding: 16px; box-sizing: border-box; background: var(--gold-grad); color: var(--ruby-deep); border-radius: 50%; border: 4px solid var(--page-bg); box-shadow: 0 6px 18px rgba(105, 19, 20, .35); }
  .side-cta .sc-highlight span { margin-top: 26px; color: var(--ruby-deep); }
  .side-cta .sc-highlight:active svg { transform: translateX(-50%) scale(.94); }
}

/* ===== Menu overlay tút lại: quầng sáng, logo, ẩn scrollbar, mục trồi lần lượt ===== */
.menu-overlay { background: radial-gradient(640px 400px at 50% -80px, rgba(230, 208, 161, .18), transparent 70%), var(--ruby-grad); }
.menu-logo { width: 90px; margin-bottom: 4px; }
.menu-list { max-height: calc(100dvh - 230px); overflow-y: auto; scrollbar-width: none; }
.menu-list::-webkit-scrollbar { display: none; }
.menu-list a { position: relative; font-size: clamp(1rem, 2.45vh, 1.35rem); padding: 4px 20px; }
.menu-list a::after { content: ''; display: block; width: 0; height: 1px; background: var(--gold-grad); margin: 4px auto 0; transition: width .3s; }
.menu-list a:hover::after { width: 44px; }
.menu-hotline { background: rgba(230, 208, 161, .12); border: 1px solid rgba(230, 208, 161, .4); padding: 10px 26px; border-radius: 99px; margin-top: 18px; }
/* Mở menu: các mục trồi lên lần lượt */
.menu-overlay:not([hidden]) .menu-list a { animation: menuIn .45s ease both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.menu-list a:nth-child(1) { animation-delay: .04s; } .menu-list a:nth-child(2) { animation-delay: .08s; }
.menu-list a:nth-child(3) { animation-delay: .12s; } .menu-list a:nth-child(4) { animation-delay: .16s; }
.menu-list a:nth-child(5) { animation-delay: .2s; }  .menu-list a:nth-child(6) { animation-delay: .24s; }
.menu-list a:nth-child(7) { animation-delay: .28s; } .menu-list a:nth-child(8) { animation-delay: .32s; }
.menu-list a:nth-child(9) { animation-delay: .36s; } .menu-list a:nth-child(10) { animation-delay: .4s; }
.menu-list a:nth-child(11) { animation-delay: .44s; } .menu-list a:nth-child(12) { animation-delay: .48s; }
.menu-list a:nth-child(13) { animation-delay: .52s; } .menu-list a:nth-child(14) { animation-delay: .56s; }

/* ===== Menu drawer cong: nhô từ phải, nền sau chỉ phủ mờ nhẹ ===== */
.menu-overlay { background: rgba(20, 5, 4, .42); backdrop-filter: blur(2px); flex-direction: row; justify-content: flex-end; align-items: stretch; }
.menu-panel { position: relative; width: min(400px, 84vw); background: #7b2016; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; }
.menu-overlay:not([hidden]) .menu-panel { animation: drawerIn .5s cubic-bezier(.2, .85, .3, 1) both; }
@keyframes drawerIn { from { transform: translateX(55%); opacity: .3; } to { transform: none; opacity: 1; } }
/* Mép cong nhô ra bên trái panel (liền màu, không thấy khớp nối) */
.menu-curve { position: absolute; right: 100%; top: 0; width: 64px; height: 100%; color: #7b2016; margin-right: -1px; pointer-events: none; }
.menu-close { top: 20px; right: 20px; }
/* Các mục nhô theo đường cong (giữa phình ra nhiều nhất) — dùng left để không đè animation transform */
.menu-list a { position: relative; }
.menu-list a:nth-child(1)  { left: -4px; }  .menu-list a:nth-child(2)  { left: -11px; }
.menu-list a:nth-child(3)  { left: -18px; } .menu-list a:nth-child(4)  { left: -24px; }
.menu-list a:nth-child(5)  { left: -29px; } .menu-list a:nth-child(6)  { left: -32px; }
.menu-list a:nth-child(7)  { left: -34px; } .menu-list a:nth-child(8)  { left: -34px; }
.menu-list a:nth-child(9)  { left: -32px; } .menu-list a:nth-child(10) { left: -29px; }
.menu-list a:nth-child(11) { left: -24px; } .menu-list a:nth-child(12) { left: -18px; }
.menu-list a:nth-child(13) { left: -11px; } .menu-list a:nth-child(14) { left: -4px; }

/* ===== Menu MẪU 05: timeline dọc + chấm gold, đánh dấu màn hiện tại ===== */
.menu-list { position: relative; padding-left: 6px; }
.menu-list::before { content: ''; position: absolute; left: 12px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(230, 208, 161, .55) 8%, rgba(230, 208, 161, .55) 92%, transparent); }
.menu-list a { left: 0 !important; display: flex; align-items: center; gap: 16px; text-align: left; font-family: var(--sans); font-style: normal; font-size: .95rem; font-weight: 500; letter-spacing: 1px; padding: 8px 20px 8px 0; }
.menu-list a::after { display: none; }  /* bỏ gạch chân hover kiểu cũ */
.ml-dot { flex-shrink: 0; width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; border: 1.5px solid var(--gold); background: #7b2016; box-sizing: border-box; transition: all .25s; position: relative; z-index: 1; }
.menu-list a:hover { color: var(--gold-light); letter-spacing: 1.5px; }
.menu-list a:hover .ml-dot { background: var(--gold); }
/* Màn hiện tại: chấm to phát sáng + chữ gold đậm — trả lời "tôi đang ở đâu" */
.menu-list a.active { color: var(--gold-light); font-weight: 700; }
.menu-list a.active .ml-dot { width: 13px; height: 13px; margin-left: 0; background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 0 0 4px rgba(230, 208, 161, .22), 0 0 14px rgba(230, 208, 161, .6); }
/* Hotline pill gold như mẫu 05 */
.menu-hotline { background: var(--gold-grad); border: none; color: var(--ruby-deep); font-weight: 800; }
.menu-hotline a { color: inherit; }

/* ===== Drawer gọn góc phải: bỏ mép cong, thu hẹp panel ===== */
.menu-curve { display: none; }
.menu-panel { width: min(320px, 80vw); padding: 24px 22px; border-left: 1px solid rgba(230, 208, 161, .35); box-shadow: -20px 0 50px rgba(20, 5, 4, .45); }
.menu-logo { width: 74px; }
.menu-list a { font-size: .92rem; padding: 6px 12px 6px 0; }
.menu-hotline { padding: 9px 22px; font-size: 1rem; margin-top: 14px; }