/* ============================================================================
   Linh Thu - web tinh (chi giao dien, khong co backend)
   Bang mau lay tu anh mau: xanh ru non, kem, nhan vang.
   ========================================================================== */
/* display=block (khong phai swap): Google Fonts tach rieng file cho tung
   bang chu (vd subset "vietnamese" tai rieng, cham hon "latin"). Voi
   display=swap, trinh duyet ve TAM bang subset da co truoc khi subset
   vietnamese tai xong - vai chu co dau mu + dau thanh (A^'/A^`) bi ve SAI/
   rơi dau ra ngoai trong luc cho. display=block cho trinh duyet AN chu 1
   chut roi ve dung luon, khong bao gio ve sai dau. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Noto+Serif:wght@600;700&display=block');

:root {
  --green-900: #2f4529;
  --green-800: #3c5a34;
  --green-700: #4f7043;
  --green-600: #628a52;
  --green-500: #7aa267;
  --green-300: #a9c39a;
  --green-100: #e4eede;
  --gold: #c6a15b;
  --gold-dark: #a9843f;
  --fire: #d1653f;
  --fire-dark: #a94727;
  --water: #5b9bc4;
  --water-dark: #3d6f92;
  --cream: #f6f2e7;
  --cream-2: #fbf9f1;
  --ink: #34402f;
  --ink-soft: #5f6b58;
  --white-glass: rgba(255, 255, 255, 0.74);
  --white-glass-2: rgba(255, 255, 255, 0.55);
  --shadow-sm: 0 2px 10px rgba(60, 74, 44, 0.08);
  --shadow-md: 0 12px 34px rgba(52, 64, 47, 0.14);
  --shadow-lg: 0 26px 64px rgba(52, 64, 47, 0.22);
  --radius: 18px;
  --radius-lg: 26px;
  /* 'Be Vietnam Pro' lam lop du phong TRUOC Georgia: mot so may/trinh
     duyet thieu dung glyph dau kep hiem (Ắ/Ầ...) o do dam cua Playfair
     Display, roi tu thay rieng dau bang font he thong khong khop —
     chu bi vo/le dau (nguoi dung bao 2026-09-13, "BĂ´T ĐÂ`U" thay vi
     "BẮT ĐẦU"). Be Vietnam Pro da nap san moi trang, co day du dau
     tieng Viet, nen la lop du phong an toan hon Georgia. */
  --serif: 'Playfair Display', 'Be Vietnam Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* h1/h2/h3 dung var(--sans) (Be Vietnam Pro) thay vi var(--serif) (Playfair
   Display) - 2026-09-13, phat hien Playfair Display ve SAI vi tri dau cho
   nhieu chu tieng Viet co 2 dau chong (vd Ắ/Ầ o tieu de trang chu, Ế o tieu
   de Bang xep hang) tren mot so may that, KHONG chi 1 cho/1 do dam nhu tuong
   ban dau - nguoi dung chon doi han sang font an toan cho MOI tieu de thay
   vi va tung cho khi phat hien. Logo (.brand b) van giu Playfair Display vi
   khong co dau doi, chua tung thay loi. font-variant-numeric (chu so kieu
   chu Playfair) giu lai vi vo hai voi Be Vietnam Pro, phong khi h1/h2/h3
   con noi chua so (gia/dem nguoc dung class .price/.countdown rieng, van
   Playfair Display, khong bi anh huong). */
h1, h2, h3 { font-family: var(--sans); color: var(--green-800); margin: 0; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* 2026-10-22: chi le TREN/DUOI - truoc la `padding: 84px 0` nen moi khoi "section container" (16 trang)
   mat le trai/phai cua .container -> chu dinh sat mep man hinh dien thoai. */
.section { padding-top: 84px; padding-bottom: 84px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }

/* --- phong canh nen -------------------------------------------------------- */
.scenery {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 82% -10%, #e7eef6 0%, rgba(231,238,246,0) 62%),
    radial-gradient(900px 520px at 6% -4%, #e9f1e1 0%, rgba(233,241,225,0) 58%),
    linear-gradient(180deg, #edf3ec 0%, #f1f0e4 46%, var(--cream-2) 100%);
}
.scenery svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scenery::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 44% at 50% 116%, rgba(122,162,103,.22), rgba(122,162,103,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 26%);
}

/* --- nut ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--white-glass); color: var(--green-800); box-shadow: var(--shadow-sm); border: 1px solid rgba(98,138,82,.25); }
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: #fff; box-shadow: var(--shadow-md); }
.btn-sm { padding: 9px 18px; font-size: 12px; }

/* --- header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(246,242,231,.94), rgba(246,242,231,.74));
  border-bottom: 1px solid rgba(98,138,82,.16);
}
/* Header desktop: logo + nut o hang tren, nav ("TRANG CHU"..."VE DU AN",
   13 muc) luon o hang RIENG ben duoi, tu xuong dong (flex-wrap) khi khong
   du cho - KHONG BAO GIO an vao menu gap (☰) tren desktop/tablet du man
   hinh hep den dau, chi dien thoai that (duoi 680px) moi gom lai. Nguoi
   dung yeu cau ro: "desktop cu dan trai het, chi dien thoai moi gom lai"
   (2026-09-13) - truoc do co thu nang nguong gap (☰) len 1920px nhung
   van bi nguoi dung bat gap ☜ hien tren man hinh ho coi la "may tinh". */
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; order: 1; }
.brand .mark { width: 40px; height: 40px; flex: none; }
.brand b { font-family: var(--serif); font-size: 22px; letter-spacing: .16em; color: var(--green-800); display: block; white-space: nowrap; }
.brand span { font-size: 10px; letter-spacing: .26em; color: var(--ink-soft); text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 24px; order: 3; flex-basis: 100%; }
.nav a { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 0; position: relative; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--green-800); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); border-radius: 2px; }
.nav a.locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.nav a.locked:hover { color: var(--ink-soft); }
.header-actions { display: flex; align-items: center; gap: 14px; order: 2; margin-left: auto; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--white-glass); box-shadow: var(--shadow-sm); color: var(--green-700); border: 0; }
.nav-toggle { display: none; }
.nav-login { display: none; }

/* --- hero ------------------------------------------------------------- */
.hero { padding: 52px 0 46px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(200px, 300px) minmax(300px, 356px);
  gap: 26px; align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(30px, 3.3vw, 44px); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; overflow-wrap: break-word; }
.hero h1 .accent { color: var(--gold-dark); display: block; }
.hero p.lead { font-size: 17px; color: var(--ink-soft); max-width: 440px; margin: 22px 0 30px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- element teaser (Hoa/Thuy/Moc) ------------------------------------ */
.elements-kicker { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.elements { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.el { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--white-glass); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; }
.el i { width: 18px; height: 18px; border-radius: 50%; display: block; box-shadow: inset 0 -3px 5px rgba(0,0,0,.18), 0 0 10px 1px var(--glow, transparent); }
.el-hoa i { background: radial-gradient(circle at 34% 30%, #ffcf9b, var(--fire) 55%, var(--fire-dark)); --glow: rgba(209,101,63,.55); }
.el-thuy i { background: radial-gradient(circle at 34% 30%, #eaf7ff, var(--water) 55%, var(--water-dark)); --glow: rgba(91,155,196,.5); }
.el-moc i { background: radial-gradient(circle at 34% 30%, #dff2d2, var(--green-500) 55%, var(--green-700)); --glow: rgba(122,162,103,.5); }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 440px; }
.hero-visual .halo-tint {
  position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; filter: blur(8px);
  background:
    radial-gradient(38% 38% at 22% 30%, rgba(209,101,63,.22), rgba(209,101,63,0) 70%),
    radial-gradient(38% 38% at 78% 28%, rgba(91,155,196,.22), rgba(91,155,196,0) 70%),
    radial-gradient(42% 42% at 50% 84%, rgba(122,162,103,.24), rgba(122,162,103,0) 70%);
}
.hero-visual .halo {
  position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,251,238,.35) 45%, rgba(255,255,255,0) 66%);
  filter: blur(3px);
}
.sparkle-fire { background: #ffb37a; box-shadow: 0 0 12px 3px rgba(209,101,63,.7); top: 6%; left: 40%; animation-delay: .7s; }
.sparkle-water { background: #bfe6ff; box-shadow: 0 0 12px 3px rgba(91,155,196,.7); bottom: 10%; right: 18%; animation-delay: 1.9s; }
.companion-stage { position: relative; width: 100%; display: grid; place-items: center; }
.egg-fallback { position: relative; width: min(360px, 78%); animation: float 6s ease-in-out infinite; }
.egg-fallback img { width: 100%; aspect-ratio: 300 / 340; object-fit: cover; border-radius: 20px; display: block; box-shadow: var(--shadow-md); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* Linh thu dang dong hanh (thay trung khi da xac dinh he + admin da upload
   sprite sheet that) - container CO DINH kich thuoc, chuyen dong chi nam
   BEN TRONG frame anh (background-position), khong bob ca khoi nhu trung. */
.companion-animation {
  position: relative; width: 320px; height: 320px; max-width: 100%;
  background-repeat: no-repeat; background-size: 500% 500%;
}
.companion-shadow {
  position: absolute; bottom: 4%; width: 55%; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40,26,16,.22), rgba(40,26,16,0) 72%);
  filter: blur(2px);
}
.sparkle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff8e6; box-shadow: 0 0 12px 3px rgba(255,236,178,.8); animation: tw 3s ease-in-out infinite; }
.sparkle:nth-child(1) { top: 14%; left: 8%; animation-delay: .2s; }
.sparkle:nth-child(2) { top: 40%; right: 4%; animation-delay: 1.1s; }
.sparkle:nth-child(3) { bottom: 24%; left: 2%; animation-delay: 2s; }
.sparkle:nth-child(4) { top: 8%; right: 22%; animation-delay: 1.6s; }
@keyframes tw { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.leaf { position: absolute; width: 24px; color: var(--green-500); opacity: .0; animation: drift 9s linear infinite; }
.leaf:nth-of-type(1) { top: 16%; left: 18%; animation-delay: 0s; }
.leaf:nth-of-type(2) { top: 34%; right: 14%; animation-delay: 3s; }
.leaf:nth-of-type(3) { bottom: 26%; left: 12%; animation-delay: 6s; }
@keyframes drift { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .8; } 100% { transform: translateY(-70px) rotate(140deg); opacity: 0; } }

/* --- journey card --------------------------------------------------- */
.journey {
  background: var(--white-glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--radius-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
}
.journey h3 { text-align: center; font-size: 19px; letter-spacing: .16em; text-transform: uppercase; }
.journey .rule { text-align: center; color: var(--gold); letter-spacing: .6em; margin: 6px 0 16px; font-size: 12px; }
.step { display: flex; gap: 14px; padding: 12px; border-radius: 16px; align-items: flex-start; }
.step.is-active { background: linear-gradient(180deg, rgba(122,162,103,.16), rgba(122,162,103,.05)); }
.step .dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); font-weight: 700; }
.step.is-active .dot { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; }
.step b { display: block; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--green-800); }
.step small { color: var(--ink-soft); }
.countdown { margin-top: 14px; text-align: center; padding: 16px; border-radius: 16px; background: rgba(246,242,231,.72); border: 1px dashed rgba(169,132,63,.42); }
.countdown .t { font-family: var(--serif); font-size: 34px; font-weight: 800; color: var(--green-800); letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }
.countdown small { display: block; color: var(--ink-soft); font-size: 12px; }

/* --- feature strip ------------------------------------------------ */
.features {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white-glass); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 10px; margin-top: 22px;
  border: 1px solid rgba(255,255,255,.75);
}
.feature { display: flex; gap: 12px; padding: 6px 18px; align-items: flex-start; }
.feature + .feature { border-left: 1px solid rgba(98,138,82,.18); }
.feature .ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; }
.feature b { display: block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--green-800); text-wrap: balance; }
.feature small { color: var(--ink-soft); font-size: 13px; }

/* --- section title + cards -------------------------------------- */
.sec-title { text-align: center; margin-bottom: 40px; }
.sec-title h2 { font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: .04em; }
.sec-title .flourish { color: var(--gold); letter-spacing: .5em; margin-top: 6px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card {
  background: var(--white-glass); border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--radius); padding: 24px; text-align: center;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card .art { width: 92px; height: 92px; margin: 0 auto 16px; }
.card h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.card p { color: var(--ink-soft); font-size: 14px; min-height: 42px; }

/* --- generic page hero (sub-pages) ---------------------------- */
.page-hero { padding: 64px 0 20px; text-align: center; }
.page-hero .kicker { color: var(--gold-dark); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.page-hero h1 { font-size: clamp(32px, 4.5vw, 52px); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0; }
.page-hero p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; }
.crumbs { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.crumbs a:hover { color: var(--green-800); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* cua-hang.html: 3 luoi nay hien tai chi co 1-2 the (vd chi 1 loai trung
   doi bang Linh Thach) - .grid-3 mac dinh keo het 3 cot co dinh de lai 1-2
   cot trong rong rat mat can doi. Gioi han rong toi da moi the + can giua
   hang thay vi keo dai/de trong - van len toi 3 cot binh thuong khi du the. */
#egg-grid, #coin-egg-grid, #pets-manage-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  justify-content: center;
  max-width: 1116px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tile {
  background: var(--white-glass); border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile .thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(160deg, #eef3e9, #e3ece0); }
.tile .thumb svg { width: 58%; }
.tile .thumb img, .article-row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-row .thumb { overflow: hidden; }
/* The "full card" (linh-thu.html, 2026-09-15): anh THE DAY DU rieng cho
   Hoa/Moc/Thuy (ten + tinh cach + cau thoai da ve san trong anh, khong
   phai creature cutout nua) - khac 3 the con lai (Tho/Quang/Am, van dung
   khung .thumb 4:3 + .body rieng nhu cu vi chua co art that). Khong dung
   aspect-ratio 4/3 + cover nhu .thumb thuong (se cat mat chu/pill trong
   anh) - de tile tu cao theo ty le that cua anh doc (portrait), khong co
   .body rieng vi anh da la toan bo noi dung the. */
.tile-fullcard .thumb { aspect-ratio: auto; background: none; }
.tile-fullcard .thumb img { width: 100%; height: auto; object-fit: contain; display: block; }
.tile-fullcard .thumb svg { width: 40%; margin: 30% auto; }
/* Anh THE DAY DU da tu ve san khung/vien rieng cua no (border bo goc, nen
   gradient) - .tile mac dinh cong them 1 lop border+nen+box-shadow rieng
   NUA de cua tren cung, tao hieu ung "vien trong vien" + khoang trang ke
   giua 2 lop (2026-09-15, nguoi dung phat hien). Bo het border/nen/shadow
   rieng cua .tile cho 3 the nay - de anh la khung DUY NHAT, khong con lop
   nao chong len nua. An toan voi anh nguon doi sau nay mien la van tu ve
   san vien nhu hien tai, khong can sua CSS lai moi lan doi anh. */
.tile-fullcard { background: none; border: none; box-shadow: none; }
.tile-fullcard:hover { box-shadow: none; }
.tile .body { padding: 20px; }
.tile .body h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .05em; }
.tile .body p { color: var(--ink-soft); font-size: 14px; margin: 6px 0 12px; }
.price { font-family: var(--serif); font-weight: 800; color: var(--gold-dark); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; }
/* Dung o nhieu noi (checkout, lich su nap vi, dau truong, hoi...) nhung
   CHUA TUNG duoc dinh nghia o day - phat hien 2026-09-12 khi nguoi dung
   xem lich su vi that, chu chay dinh vao nhau khong co khoang cach. */
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(98,138,82,.12); }
.user-row:last-child { border-bottom: 0; }
/* vi.html: #wallet-amount + hang chua no khong co rule rieng nao (khong
   giong .search-row o dau-truong.html/hoi.html, moi noi tu dinh nghia rieng
   trong <style> cua trang do) - o vi.html no chi la <input> tho, rong theo
   mac dinh trinh duyet (~170px) nen chu placeholder dai bi cat. */
#wallet-step-pick .search-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
#wallet-amount { flex: 1; min-width: 220px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(98,138,82,.3); font: inherit; }
#wallet-step-pick .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* vi.html: khoi nap tien truoc day keo het chieu rong .container (1240px)
   trong khi noi dung chi la 1 cot ngan - tren man rong tao khoang trang lech
   han sang phai (nguoi dung chup anh that, 2026-09-13). Thu hep + can giua
   toan bo khoi, va doi dong "So du hien co" tro troi thanh 1 "the vi" rieng
   theo dung cong thuc the da dung o .journey/.countdown - toan bo mau lay
   tu bien CSS (doi theo he lua/nuoc/go), khong hardcode hex nao. */
.wallet-wrap { max-width: 620px; margin: 0 auto; }
.wallet-card {
  background: var(--white-glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 22px 26px; margin-bottom: 22px;
  text-align: center; position: relative; overflow: hidden;
}
.wallet-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--gold), var(--green-600));
}
.wallet-card-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.wallet-card .price { font-size: 30px; }
#wallet-presets button:hover, #wallet-presets button:focus-visible { border-color: var(--gold-dark); color: var(--gold-dark); }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--green-100); color: var(--green-700); }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { text-transform: uppercase; letter-spacing: .03em; margin: 34px 0 12px; font-size: 24px; }
.prose p { color: var(--ink); margin: 12px 0; }
.prose ul { margin: 12px 0; padding-left: 22px; color: var(--ink); }
.prose li { margin: 6px 0; }
.prose .updated-at { color: var(--ink-soft); font-size: 13px; margin-top: -6px; }
.prose .callout { background: rgba(198,161,91,.14); border: 1px solid rgba(169,132,63,.28);
                   border-radius: 14px; padding: 14px 18px; margin: 16px 0; font-size: 14.5px; }
.article-row { display: flex; gap: 26px; align-items: center; padding: 22px 4px; border-bottom: 1px solid rgba(98,138,82,.16); }
.article-row .thumb { flex: none; width: 216px; aspect-ratio: 4/3; border-radius: 14px; background: linear-gradient(160deg, #eef3e9, #e3ece0); display: grid; place-items: center; }
.article-row .thumb svg { width: 54%; }
.article-row > div:last-child { flex: 1 1 auto; min-width: 0; }
.article-row h3 { font-size: 19.5px; margin: 2px 0 6px; }
.article-row time { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.article-row p.muted { font-size: 15.5px; line-height: 1.55; max-width: 62ch; }

/* --- footer --------------------------------------------------- */
.site-footer { background: linear-gradient(180deg, rgba(246,242,231,0), rgba(228,238,222,.72)); margin-top: 48px; border-top: 1px solid rgba(98,138,82,.16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 30px; padding: 56px 0 30px; }
.footer-grid h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-800); margin: 0 0 14px; }
.footer-grid a { display: block; color: var(--ink-soft); font-size: 14px; padding: 4px 0; }
/* 2026-10-22: nut (Zalo/TikTok) trong chan trang khong bi rule link tren de padding/mau -> chu tran khung. */
.footer-grid a.btn { display: inline-flex; padding: 9px 16px; font-size: 12px; }
.footer-grid a.btn-gold { color: #fff; }
.footer-grid a:hover { color: var(--green-800); }
.socials { display: flex; gap: 10px; margin: 8px 0 16px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; background: var(--white-glass); display: grid; place-items: center; color: var(--green-700); box-shadow: var(--shadow-sm); font-weight: 700; }
.newsletter { display: flex; gap: 8px; }
.newsletter input { flex: 1; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(98,138,82,.3); background: #fff; font: inherit; }
.footer-bottom { text-align: center; color: var(--ink-soft); font-size: 12px; padding: 18px 0 40px; }

/* --- nut Zalo ho tro noi (moi trang, xem site.js) ---------------------- */
.zalo-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: #0068ff; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 8px 16px 8px 8px;
  box-shadow: 0 6px 20px rgba(0,104,255,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.zalo-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,104,255,.45); }
.zalo-float b {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: #fff; color: #0068ff; border-radius: 50%;
  font-family: var(--serif); font-size: 17px; font-style: normal;
}
.zalo-float span { white-space: nowrap; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
@media (max-width: 480px) {
  .zalo-float { padding: 8px; right: 14px; bottom: 14px; }
  .zalo-float span { display: none; }
}

/* --- responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-visual { min-height: 320px; }
  .journey { width: 100%; max-width: 480px; margin: 0 auto; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .feature:nth-child(3) { border-left: 0; }
  .cards, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Nav rieng 1 breakpoint RONG hon (khong chung voi luoi/hero o tren) - danh
   sach trang da tang len 12+ muc (dau truong, xep hang, quai rung, hoi,
   bat dau, bo suu tap, vi...), khong con du cho tren 1 hang o man hinh
   desktop "vua" nua (~1100-1400px) - chu logo bi ep xuong dong xen ke voi
   nav thay vi tu rut gon dung luc. Chuyen sang menu rut gon SOM hon. */
/* Duoi 680px moi la "dien thoai that" theo dung y nguoi dung - tu day
   tro xuong mang hamburger (☰) quay lai nhu cu (nav an vao ngan keo).
   Tren 680px (tablet/desktop) nav luon hien du, xem quy tac flex-wrap o
   tren, KHONG dung media query nay nua. */
@media (max-width: 680px) {
  .site-header .container { padding-top: 0; padding-bottom: 0; height: 78px; flex-wrap: nowrap; }
  .nav {
    position: fixed; inset: 78px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--cream-2); box-shadow: var(--shadow-md); padding: 8px 0;
    transform: translateY(-140%); transition: transform .25s ease; margin: 0;
    flex-basis: auto;
    /* 2026-10-25: menu dai hon man hinh dien thoai -> cuon duoc */
    max-height: calc(100vh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 12px 28px; }
  .nav a.active::after { display: none; }
  .nav-toggle { display: grid; }
  .nav-login { display: block; border-top: 1px solid rgba(98,138,82,.16); color: var(--green-800); font-weight: 700; }
  .header-actions .btn-primary:not(.keep-mobile) { display: none; }
  .header-actions .keep-mobile { padding: 7px 12px; font-size: 12px; }
  /* Da dang nhap: "Xin chao, X" + nut Dang xuat rieng trong header-actions
     tran ra khoi man hinh hep - da co san lua chon "Dang xuat" khac trong
     chinh menu rut gon (#nav-logout), an bot cap trung o day. */
  .header-actions .muted { display: none; }
  .header-actions #site-logout { display: none; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .feature { border-left: 0 !important; min-width: 0; }
  .cards, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* Footer 2 cot (dat o breakpoint 1024px) qua chat o dien thoai that -
     moi cot qua hep, 2 hang lech cao thap trong nhin mat can bang. Dua ve
     1 cot, xep doc lan luot tung muc. */
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .container { padding: 0 18px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .hero { padding: 30px 0 40px; }
  .hero h1 { font-size: clamp(23px, 6.6vw, 32px); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero p.lead { font-size: 16px; }
  .article-row { flex-direction: column; align-items: flex-start; }
  .article-row .thumb { width: 100%; }
  .page-hero h1 { font-size: clamp(24px, 7.5vw, 40px); }
  .countdown .t { font-size: 30px; }
}
@media (max-width: 480px) {
  /* man hinh doc dien thoai: logo + tagline canh tranh khong gian voi
     icon-btn (gio hang/menu) o mot so trang - thu gon logo, an tagline,
     tranh vo dong chu (dau tieng Viet bi tach roi khi dang xuong dong). */
  .site-header .container { gap: 10px; }
  .brand { gap: 8px; }
  .brand .mark { width: 32px; height: 32px; }
  .brand b { font-size: 15px; letter-spacing: .05em; white-space: nowrap; }
  .brand > span > span { display: none; }
  .header-actions .btn-sm { padding: 8px 14px; font-size: 11px; white-space: nowrap; }
}

/* --- gam mau rieng theo he cua linh thu dang active (moi trang, xem
   site.js) - CUNG 1 khoi voi app.css, xem ghi chu day du o do (2026-09-12).
   "sieu_vip" la khung de san cho hang linh thu hiem hon Than Thoai, chua
   co con nao, mau tam. */
body.theme-hoa {
  --green-900: #5a1f12; --green-800: #8a2e18; --green-700: #c0432a;
  --green-600: #e0693a; --green-500: #ef8f66; --green-300: #f6c4a8; --green-100: #fde8da;
  --gold: #f4a542; --gold-dark: #d9822a;
  --cream: #fdf3ea; --cream-2: #fffaf5;
}
body.theme-thuy {
  --green-900: #123a5c; --green-800: #1d5fa8; --green-700: #2b74c2;
  --green-600: #4a93d8; --green-500: #7db9d8; --green-300: #a9d3ea; --green-100: #e2f1fa;
  --gold: #5bc4e8; --gold-dark: #2e9fc7;
  --cream: #eef7fc; --cream-2: #f7fbfe;
}
body.theme-moc {
  --green-900: #1e3a17; --green-800: #2c5c24; --green-700: #3f7a34;
  --green-600: #5a9c4a; --green-500: #7fbd6a; --green-300: #b3dba0; --green-100: #e6f5df;
  --gold: #c8dd6e; --gold-dark: #9fb84a;
  --cream: #f3f8ec; --cream-2: #f9fcf5;
}
body.theme-sieu-vip {
  --green-900: #2d1b4e; --green-800: #4a2f7a; --green-700: #6b4a9e;
  --green-600: #8f6bc4; --green-500: #ab8ed6; --green-300: #cfbbe8; --green-100: #ede4f7;
  --gold: #e8c468; --gold-dark: #c9a13f;
  --cream: #f7f2fb; --cream-2: #fbf8fd;
}
body.theme-hoa .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #ffe0c9 0%, rgba(255,224,201,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #ffd4b0 0%, rgba(255,212,176,0) 55%),
    linear-gradient(180deg, #fdeadb 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-thuy .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #cfe9fb 0%, rgba(207,233,251,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #bfe1f5 0%, rgba(191,225,245,0) 55%),
    linear-gradient(180deg, #e3f3fb 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-moc .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #d7ecc7 0%, rgba(215,236,199,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #c9e6b6 0%, rgba(201,230,182,0) 55%),
    linear-gradient(180deg, #e9f5df 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body.theme-sieu-vip .scenery {
  background:
    radial-gradient(1100px 520px at 78% -6%, #e3d4f5 0%, rgba(227,212,245,0) 60%),
    radial-gradient(900px 500px at 10% 4%, #d8c3ee 0%, rgba(216,195,238,0) 55%),
    linear-gradient(180deg, #f0e6fa 0%, var(--cream) 42%, var(--cream-2) 100%);
}
body[class*="theme-"] .scenery svg { display: none; }
/* .tile la "card" chinh cua cac trang nay (trung, tin tuc, he linh thu) -
   them vien + phat sang giong .pet-card ben app.css cho dong bo cam giac. */
body[class*="theme-"] .tile {
  border: 2px solid var(--green-500);
  box-shadow: 0 18px 44px rgba(0,0,0,.08), 0 0 40px -14px var(--green-500);
}


/* ==========================================================================
   HOMEPAGE VISUAL MATCH V2 — presentation only
   Mục tiêu: tiến gần mockup Hỏa/Thủy/Mộc mà không thay business logic.
   (2026-09-13, patch do ChatGPT soạn từ zip mã nguồn trang chủ, đã kiểm tra
   + chỉnh 2 điểm trước khi áp - xem docs/VAN-HANH.md để biết lý do:
   1) đã BỎ khối @media(min-width:1180px) ép .site-header/.nav về 1 hàng -
      xung đột trực tiếp với fix header/nav đã chốt cùng ngày (nav tự xuống
      hàng 2 khi hẹp, không bao giờ ép về 1 hàng bằng cách thu nhỏ chữ), và
      khối đó không giới hạn body[data-page="trang-chu"] nên sẽ ảnh hưởng
      MỌI trang, ngoài phạm vi "chỉ sửa hero" ban đầu.
   2) .hero h1 / .journey h3 đổi 'Playfair Display' -> var(--sans) - giữ
      đúng fix lỗi gãy dấu tiếng Việt (Ấ/Ầ) đã mất 3 vòng mới chốt xong. */

body[data-page="trang-chu"] .site-header {
  background: rgba(255, 250, 244, .91);
  border-bottom-color: rgba(189, 86, 41, .12);
  box-shadow: 0 4px 24px rgba(109, 50, 21, .04);
}
body.theme-thuy[data-page="trang-chu"] .site-header { background: rgba(246, 252, 255, .92); }
body.theme-moc[data-page="trang-chu"] .site-header { background: rgba(250, 252, 244, .92); }
/* Giam do noi bat cua nav CHI o trang chu (nguoi moi chua bat dau khong
   can xu ly het "Vi/Cua toi/Dau truong/Xep hang/Quai rung/Hoi..." ngay -
   phan hoi 2026-09-14) - van du doc/bam duoc binh thuong, chi nhe hon ve
   thi giac de mat con nguoi doc theo dung luong Thong diep -> Linh thu ->
   Bat dau -> Hanh trinh. Cac trang khac (dashboard, cua hang...) khong doi. */
body[data-page="trang-chu"] .nav a { opacity: .74; font-size: 12.5px; }
body[data-page="trang-chu"] .nav a:hover,
body[data-page="trang-chu"] .nav a.active { opacity: 1; }

/* Nền hero dùng asset phong cảnh thật; default trang chủ = Hỏa. */
body[data-page="trang-chu"] .hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 755px;
  padding: 96px 0 68px;
  background-image:
    linear-gradient(90deg, rgba(255,247,238,.76) 0%, rgba(255,244,231,.48) 35%, rgba(255,239,224,.28) 61%, rgba(255,237,219,.20) 100%),
    url('theme-backgrounds/hoa.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.theme-hoa[data-page="trang-chu"] .hero-home {
  background-image:
    linear-gradient(90deg, rgba(255,247,238,.76) 0%, rgba(255,244,231,.48) 35%, rgba(255,239,224,.28) 61%, rgba(255,237,219,.20) 100%),
    url('theme-backgrounds/hoa.png');
}
body.theme-thuy[data-page="trang-chu"] .hero-home {
  background-image:
    linear-gradient(90deg, rgba(242,251,255,.52), rgba(234,248,255,.20)),
    url('theme-backgrounds/thuy.png');
  /* Anh Thuy thoang/cao hon Hoa - rieng he nay moi can cao them (2026-09-14). */
  min-height: clamp(650px, 76vh, 820px);
}
/* Bot khong khi "nuoc" rat nhe: vai bot troi rat cham, mo dan len roi tat -
   thuan CSS (khong DOM/JS them), chi rieng he Thuy, khong lam nang trang. */
body.theme-thuy[data-page="trang-chu"] .hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(210,244,255,.8), rgba(210,244,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(210,244,255,.75), rgba(210,244,255,0) 70%);
  background-repeat: no-repeat;
  background-size: 10px 10px, 7px 7px, 6px 6px, 9px 9px;
  background-position: 14% 82%, 24% 88%, 68% 90%, 79% 84%;
  animation: thuy-bubbles 9s ease-in infinite;
}
@keyframes thuy-bubbles {
  0%   { background-position: 14% 82%, 24% 88%, 68% 90%, 79% 84%; opacity: 0; }
  10%  { opacity: .8; }
  85%  { opacity: .5; }
  100% { background-position: 14% 30%, 24% 20%, 68% 25%, 79% 15%; opacity: 0; }
}
body.theme-moc[data-page="trang-chu"] .hero-home {
  background-image:
    linear-gradient(90deg, rgba(248,252,239,.50), rgba(240,250,231,.16)),
    url('theme-backgrounds/moc.png');
}
body[data-page="trang-chu"] .hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Wash ngang nhe them cho vung chu de doc hon (2026-09-13), fade het
       truoc khi den vung trung - van thay nui phia sau, khong phu trang. */
    linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 49% 33%, rgba(255,255,255,.58), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 68%);
}
body[data-page="trang-chu"] .hero-home .container {
  /* max-width goc cua .container (var(--maxw)) + margin:0 auto se tu canh
     giua roi CONG THEM vao padding ben duoi -> le trai bi day ra xa hon
     du kien (do that: 343px/17.9vw o 1920px thay vi ~8.5vw muon). Bo han
     max-width, de CHINH padding nay quyet dinh le - do dung ~8.5vw that. */
  max-width: none;
  padding-left: clamp(52px, 8.5vw, 165px);
  padding-right: clamp(52px, 8.5vw, 165px);
}
body[data-page="trang-chu"] .hero-grid {
  /* justify-content mac dinh (start), KHONG dung space-between - vi 3 cot
     co max-width co dinh (khong dung fr), space-between se day toan bo
     khoang trong con lai (~150px+ o man 1920px) vao 2 khe ho, vuot xa muc
     tieu 55-75px giua cac cot. De khoi bam sat trai theo padding container
     rieng o tren, phan trong con lai hien nen phong canh (dung y). */
  /* Cot 3 (Hanh trinh) thu hep ~8% (430->395px, 2026-09-14 phan hoi "chiem
     kha nhieu dien tich") - 2 cot con lai giu nguyen. */
  grid-template-columns: minmax(420px, 500px) minmax(300px, 360px) minmax(350px, 395px);
  column-gap: clamp(48px, 3.4vw, 68px);
  align-items: center;
}

/* Typography + họa tiết tiêu đề. */
body[data-page="trang-chu"] .hero-copy { position: relative; z-index: 2; }
body[data-page="trang-chu"] .hero-title-wrap { position: relative; width: min(100%, 520px); }
body[data-page="trang-chu"] .hero h1 {
  /* Thu Noto Serif (co Vietnamese, xem @import dau file, van @display=block
     chong loi gay dau) cho cam giac fantasy gan Playfair hon - da tu kiem
     tra ky bang Playwright (chu co dau that, ca luc tai xong lan chup som
     cache lanh) truoc khi giu lai; neu sau nay phat hien gay dau o may/
     trinh duyet khac, doi thang ve var(--sans) nhu cu, dung hoi lai vi day
     la quy tac an toan da co tien le (xem cmt dau file site.css). */
  font-family: 'Noto Serif', var(--sans);
  font-size: clamp(40px, 2.85vw, 56px);
  line-height: 1.08;
  letter-spacing: .006em;
  font-weight: 700;
  color: #b92f25;
  max-width: 510px;
  text-shadow: 0 2px 0 rgba(255,255,255,.35);
}
body[data-page="trang-chu"] .hero h1 .accent {
  display: block;
  margin-top: 8px;
  color: #e57c2b;
  background: linear-gradient(90deg, #e26328 0%, #e98933 58%, #efad50 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-thuy[data-page="trang-chu"] .hero h1 { color: #1567b8; }
body.theme-thuy[data-page="trang-chu"] .hero h1 .accent {
  /* Dam hon ban dau ~15-20% (2026-09-14, phan hoi "qua nhat, gan chim vao
     may") - va BO text-shadow trang ke thua tu .hero h1 (rgba(255,255,255,.35))
     vi no lam vet sang ha them vao dung luc chu da nhat, cang chim vao nen
     may trang. Doi sang shadow toi rat nhe de tach chu khoi nen sang. */
  background: linear-gradient(180deg,#2ea6e6,#0d6cc0);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 2px 6px rgba(10,70,120,.18);
}
body.theme-moc[data-page="trang-chu"] .hero h1 { color: #2d6a2d; }
body.theme-moc[data-page="trang-chu"] .hero h1 .accent {
  background: linear-gradient(90deg,#347b34,#5b9d43 62%,#91bd57);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-title-flame {
  position: absolute;
  width: 38px;
  height: 38px;
  right: 84px;
  top: -2px;
  color: #ef6331;
  opacity: .85;
  filter: drop-shadow(0 5px 10px rgba(224,90,35,.16));
}
.hero-title-swish {
  position: absolute;
  width: 64px;
  right: 28px;
  bottom: -4px;
  color: #ec8b32;
  opacity: .75;
}
/* Giot nuoc rieng cho he Thuy (khong phai icon lua doi mau) - an mac dinh,
   chi hien khi body.theme-thuy; nguoc lai an flame di. Swish (net cong) da
   trung tinh, dung chung duoc ca 2 he, chi doi mau. */
.hero-title-drop { display: none; }
body.theme-thuy .hero-title-flame { display: none; }
body.theme-thuy .hero-title-drop {
  display: block;
  position: absolute;
  width: 38px;
  height: 38px;
  right: 84px;
  top: -2px;
  color: #268fd6;
  opacity: .88;
  filter: drop-shadow(0 5px 10px rgba(22,120,190,.16));
}
body.theme-thuy .hero-title-swish { color: #52c1ef; }
body.theme-moc .hero-title-flame, body.theme-moc .hero-title-swish { color: #68a84e; }
body[data-page="trang-chu"] .hero p.lead {
  max-width: 510px;
  margin: 30px 0 28px;
  font-size: 17px;
  line-height: 1.75;
  color: #84584b;
}
body.theme-thuy[data-page="trang-chu"] .hero p.lead { color: #356783; }
body.theme-moc[data-page="trang-chu"] .hero p.lead { color: #566b4f; }
body[data-page="trang-chu"] .elements-kicker {
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .15em;
  color: #774539;
}
body.theme-thuy[data-page="trang-chu"] .elements-kicker { color:#2d6084; }
body.theme-moc[data-page="trang-chu"] .elements-kicker { color:#3f6740; }

/* Element pills giống mockup: icon thật, active đổi theo theme. */
body[data-page="trang-chu"] .elements { gap: 12px; margin-bottom: 26px; }
body[data-page="trang-chu"] .el {
  min-width: 108px;
  height: 42px;
  justify-content: center;
  padding: 0 16px 0 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.88);
  color: #6f625b;
  box-shadow: 0 6px 16px rgba(111,65,39,.06);
  transition: .18s ease;
  /* Khong bam chon duoc (chi hien thi he dang active theo thiet bi) - dat
     ro cursor:default de khong trong nhu 1 nut bam (phan hoi 2026-09-14). */
  cursor: default;
}
body[data-page="trang-chu"] .el-icon {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #eee; color: #888;
}
body[data-page="trang-chu"] .el-icon svg { width: 15px; height: 15px; fill: currentColor; }
body[data-page="trang-chu"] .el-hoa .el-icon { color:#fff2cf; background:linear-gradient(180deg,#ef6d37,#cb3220); box-shadow:0 0 16px rgba(239,93,47,.28); }
body[data-page="trang-chu"] .el-thuy .el-icon { color:white; background:linear-gradient(180deg,#62c7f1,#2c8fc9); box-shadow:0 0 14px rgba(72,168,220,.20); }
body[data-page="trang-chu"] .el-moc .el-icon { color:white; background:linear-gradient(180deg,#88bf66,#548d3e); box-shadow:0 0 14px rgba(84,141,62,.18); }
/* body.theme-hoa .el-hoa (con Hoa dang active) khong con dung style nhat
   nay nua - da co khoi rieng "nen dac + chu trang" o duoi (2026-09-14).
   Rule nay gio CHI con la mac dinh cho khach/chua co he (khong theme nao). */
body[data-page="trang-chu"] .el-hoa {
  color:#c54425;
  background:linear-gradient(90deg,rgba(255,235,201,.96),rgba(255,205,113,.86));
  border-color:rgba(245,143,69,.28);
  box-shadow:0 6px 16px rgba(221,76,35,.14),0 0 12px rgba(255,150,56,.12);
}
body.theme-thuy[data-page="trang-chu"] .el-hoa,
body.theme-moc[data-page="trang-chu"] .el-hoa { color:#6f625b; background:rgba(255,255,255,.78); box-shadow:0 8px 22px rgba(60,70,80,.07); }
body.theme-hoa[data-page="trang-chu"] .el-thuy,
body.theme-moc[data-page="trang-chu"] .el-thuy { color:#6f625b; background:rgba(255,255,255,.78); box-shadow:0 8px 22px rgba(60,70,80,.07); }
body.theme-hoa[data-page="trang-chu"] .el-moc,
body.theme-thuy[data-page="trang-chu"] .el-moc { color:#6f625b; background:rgba(255,255,255,.78); box-shadow:0 8px 22px rgba(60,70,80,.07); }
/* Pill dang active = nen dac + chu trang, dong bo ca 3 he (2026-09-14,
   ban dau chi lam Thuy - xem ghi chu cu; nay lam not Hoa/Moc theo dung yeu
   cau "lam cho 2 he con lai"). Pill INACTIVE cua chinh he do (2 khoi tren)
   van la nen nhat mo - chi pill DANG active moi doi sang nen dac. */
body.theme-thuy[data-page="trang-chu"] .el-thuy {
  color:#fff;
  background:linear-gradient(135deg,#55c7f2,#188be0);
  border-color:transparent;
  box-shadow:0 10px 26px rgba(18,120,200,.30),0 0 22px rgba(88,199,242,.24);
}
body.theme-thuy[data-page="trang-chu"] .el-thuy .el-icon {
  background:rgba(255,255,255,.30); color:#fff; box-shadow:none;
}
body.theme-hoa[data-page="trang-chu"] .el-hoa {
  color:#fff;
  background:linear-gradient(135deg,#f0895a,#c0432a);
  border-color:transparent;
  box-shadow:0 10px 26px rgba(192,67,42,.30),0 0 22px rgba(224,105,58,.24);
}
body.theme-hoa[data-page="trang-chu"] .el-hoa .el-icon {
  background:rgba(255,255,255,.30); color:#fff; box-shadow:none;
}
body.theme-moc[data-page="trang-chu"] .el-moc {
  color:#fff;
  background:linear-gradient(135deg,#7fbd6a,#3f7a34);
  border-color:transparent;
  box-shadow:0 10px 26px rgba(63,122,52,.30),0 0 22px rgba(90,156,74,.24);
}
body.theme-moc[data-page="trang-chu"] .el-moc .el-icon {
  background:rgba(255,255,255,.30); color:#fff; box-shadow:none;
}

/* CTA lớn và giàu chiều sâu hơn. */
body[data-page="trang-chu"] .hero-cta { gap: 16px; }
body[data-page="trang-chu"] .hero-cta .btn {
  min-height: 58px;
  justify-content: center;
  padding: 0 26px;
  font-size: 15px;
  border-radius: 999px;
  letter-spacing: .02em;
}
body[data-page="trang-chu"] .hero-cta .btn-primary { min-width: 250px; }
body[data-page="trang-chu"] .hero-cta .btn-ghost { min-width: 238px; }
body[data-page="trang-chu"] .hero-cta .btn-primary {
  background: linear-gradient(180deg,#f05731,#c82322);
  box-shadow:0 15px 34px rgba(195,49,29,.22),0 0 22px rgba(255,137,52,.15);
}
body.theme-thuy[data-page="trang-chu"] .hero-cta .btn-primary { background:linear-gradient(180deg,#37b8ef,#1584db); box-shadow:0 12px 28px rgba(22,135,215,.23); }
.btn-icon-drop { display: none; }
body.theme-thuy[data-page="trang-chu"] .hero-cta .btn-primary .btn-icon { display: none; }
body.theme-thuy[data-page="trang-chu"] .hero-cta .btn-primary .btn-icon-drop { display: inline-block; width:17px; height:17px; margin-right:2px; }
body.theme-moc[data-page="trang-chu"] .hero-cta .btn-primary { background:linear-gradient(180deg,#70b34f,#347c36); box-shadow:0 15px 34px rgba(53,123,54,.20); }
body[data-page="trang-chu"] .hero-cta .btn-ghost {
  background: rgba(255,255,255,.82);
  color:#b83a27;
  border:1.5px solid rgba(235,100,55,.65);
  box-shadow:0 10px 26px rgba(119,67,42,.08);
}
body.theme-thuy[data-page="trang-chu"] .hero-cta .btn-ghost { color:#2479ba; border-color:#42a8e4; }
body.theme-thuy[data-page="trang-chu"] .hero-cta .btn-ghost .btn-arrow { color:#2479ba; }
body.theme-moc[data-page="trang-chu"] .hero-cta .btn-ghost { color:#3e7a36; border-color:rgba(79,142,67,.55); }
.btn-icon { width:17px; height:17px; margin-right:2px; }
.btn-arrow { width:16px; height:16px; margin-left:6px; }

/* Trứng trung tâm: vuông, lớn, không còn halo trắng che background. */
body[data-page="trang-chu"] .hero-visual { min-height: 480px; }
body[data-page="trang-chu"] .hero-visual .halo-tint { opacity:.15; width:115%; }
body[data-page="trang-chu"] .hero-visual .halo { opacity:.12; width:108%; }
body[data-page="trang-chu"] .egg-fallback {
  width: min(320px, 100%);
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 14px 20px rgba(96,44,18,.14));
}
body[data-page="trang-chu"] .egg-fallback img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* contain, khong phai cover: anh linh thu chinh thuc (2026-09-15) co chi
     tiet (canh rong, sung nai) sat mep, cover se cat mat - khac voi anh
     trung vuong cu hop voi cover. */
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 12px 30px rgba(93,37,21,.16);
}
body.theme-thuy[data-page="trang-chu"] .egg-fallback { filter:drop-shadow(0 10px 18px rgba(22,98,158,.12)); }
body.theme-moc[data-page="trang-chu"] .egg-fallback { filter:drop-shadow(0 14px 22px rgba(46,99,44,.14)); }
/* Giam cam giac "the game vuong nang" cua trung he Thuy (phan hoi 2026-09-14)
   - bo vien trang cung, tang bo goc, box-shadow nhe hon, va them 1 glow nuoc
   rat mem phia sau (::before tren companion-stage, khong them DOM) de hoa
   vao background thay vi nhu 1 tam the noi tren nen. */
body.theme-thuy[data-page="trang-chu"] .egg-fallback img {
  border-radius: 34px;
  box-shadow: 0 16px 34px rgba(20,110,180,.14);
}
body.theme-thuy[data-page="trang-chu"] .companion-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140,210,250,.38), rgba(140,210,250,0) 70%);
  filter: blur(22px);
}
/* Cung glow mem phia sau nhu Thuy, cho Hoa (mac dinh/theo he) va Moc - phan
   hoi 2026-09-14 "con linh thu nen la tam diem hon nua, hoi hoa vao nen". */
body[data-page="trang-chu"] .companion-stage::before,
body.theme-hoa[data-page="trang-chu"] .companion-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,150,80,.34), rgba(255,150,80,0) 70%);
  filter: blur(22px);
}
body.theme-moc[data-page="trang-chu"] .companion-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130,210,120,.34), rgba(130,210,120,0) 70%);
  filter: blur(22px);
}
/* Linh thu dong hanh - tang ~12% (300-360 -> 335-405px, phan hoi 2026-09-14
   "nen la tam diem hon"), khong bob (chuyen dong nam trong sprite frame),
   giu bong nhe duoi chan hoa vao phong canh. */
body[data-page="trang-chu"] .companion-animation {
  width: clamp(335px, 36vw, 405px);
  height: clamp(335px, 36vw, 405px);
  filter: drop-shadow(0 14px 20px rgba(96,44,18,.14));
}
body.theme-thuy[data-page="trang-chu"] .companion-animation {
  filter:drop-shadow(0 14px 22px rgba(22,98,158,.16));
  /* Rieng he Thuy to hon mot chut theo phan hoi 2026-09-14 (330-390px thay
     vi 300-360px dung chung). */
  width: clamp(330px, 34vw, 390px);
  height: clamp(330px, 34vw, 390px);
}
/* Pet Thuy dung tren mat nuoc - doi bong chan sang xanh nuoc + them 1 vong
   ripple lan rat nhe, thuan CSS tren ::after cua .companion-shadow (div co
   san do site.js dung, khong them DOM/JS). */
body.theme-thuy[data-page="trang-chu"] .companion-shadow {
  background: radial-gradient(ellipse at center, rgba(60,150,210,.28), rgba(60,150,210,0) 72%);
}
body.theme-thuy[data-page="trang-chu"] .companion-shadow::after {
  content: "";
  position: absolute;
  inset: -6px -18%;
  border-radius: 50%;
  border: 1px solid rgba(120,200,240,.35);
  animation: thuy-ripple 3.4s ease-out infinite;
}
@keyframes thuy-ripple {
  0%   { transform: scale(.7); opacity: .55; }
  80%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
body.theme-moc[data-page="trang-chu"] .companion-animation { filter:drop-shadow(0 14px 22px rgba(46,99,44,.14)); }
/* Float rat nhe (2026-09-13, giam tu -7px con -5px theo phan hoi "vat the
   bay qua ro" - xem docs/VAN-HANH.md). */
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
body[data-page="trang-chu"] .leaf { color:#ef7a34; }
body.theme-thuy[data-page="trang-chu"] .leaf { color:#5bbce9; }
body.theme-moc[data-page="trang-chu"] .leaf { color:#6da653; }

/* Card hành trình: lớn hơn, trắng ngà, viền trang trí kiểu giấy phép thuật. */
body[data-page="trang-chu"] .journey {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 24px;
  border-radius: 26px;
  background:
    linear-gradient(135deg,rgba(244,119,72,.16) 0 13px,transparent 13px) top left/42px 42px no-repeat,
    linear-gradient(225deg,rgba(244,119,72,.16) 0 13px,transparent 13px) top right/42px 42px no-repeat,
    linear-gradient(45deg,rgba(244,119,72,.12) 0 13px,transparent 13px) bottom left/42px 42px no-repeat,
    linear-gradient(315deg,rgba(244,119,72,.12) 0 13px,transparent 13px) bottom right/42px 42px no-repeat,
    rgba(255,253,249,.94);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow:0 22px 48px rgba(95,55,31,.14), inset 0 0 0 1px rgba(232,132,88,.09);
  backdrop-filter: blur(12px) saturate(1.05);
}
body[data-page="trang-chu"] .journey::before {
  content:"";
  position:absolute; inset:10px;
  border:1px solid rgba(229,104,55,.14);
  border-radius:22px;
  pointer-events:none;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
}
body.theme-thuy[data-page="trang-chu"] .journey {
  /* Doi han ca goc trang tri (khong chi doi hue) - vien 4 goc gradient cam
     cua Hoa doi thanh xanh nuoc, dung y "khoang trang nhieu hon, shadow nhe
     hon" nguoi dung yeu cau (2026-09-14). */
  background:
    linear-gradient(135deg,rgba(72,170,244,.18) 0 13px,transparent 13px) top left/42px 42px no-repeat,
    linear-gradient(225deg,rgba(72,170,244,.18) 0 13px,transparent 13px) top right/42px 42px no-repeat,
    linear-gradient(45deg,rgba(72,170,244,.13) 0 13px,transparent 13px) bottom left/42px 42px no-repeat,
    linear-gradient(315deg,rgba(72,170,244,.13) 0 13px,transparent 13px) bottom right/42px 42px no-repeat,
    rgba(250,254,255,.92);
  border-color: rgba(88,183,232,.45);
  box-shadow:0 24px 60px rgba(36,116,168,.15),inset 0 0 0 1px rgba(89,183,232,.11);
}
body.theme-thuy[data-page="trang-chu"] .journey::before { border-color: rgba(72,170,244,.14); }
/* Nhan ornament nuoc them 1 net song mem tren dau panel (phan hoi "chua fantasy
   bang anh mau" 2026-09-14) - thuan CSS, khong them DOM, rat nhe khong roi. */
body.theme-thuy[data-page="trang-chu"] .journey::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 130px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 9c14 8 30 8 44 1 9-5 15-9 22-9-1 5-5 8-9 11-11 7-27 8-48-1-5-2-7-2-9-2Z' fill='none' stroke='%2343abe5' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
body.theme-moc[data-page="trang-chu"] .journey { background:rgba(253,255,248,.91); box-shadow:0 26px 56px rgba(55,92,44,.17),inset 0 0 0 1px rgba(110,165,80,.11); }
body[data-page="trang-chu"] .journey h3 {
  /* Xem ghi chu Noto Serif o .hero h1 phia tren - cung 1 quy tac an toan. */
  font-family: 'Noto Serif', var(--sans);
  font-size: clamp(22px, 1.5vw, 27px);
  line-height: 1.2;
  white-space: nowrap;
  color:#aa3028;
  letter-spacing:.05em;
  font-weight:700;
}
body.theme-thuy[data-page="trang-chu"] .journey h3 { color:#1b67ad; }
body.theme-moc[data-page="trang-chu"] .journey h3 { color:#2f6b32; }
body[data-page="trang-chu"] .journey .rule { margin:7px 0 15px; color:#e48934; font-size:9px; letter-spacing:.5em; }
body.theme-thuy[data-page="trang-chu"] .journey .rule { color:#43abe5; }
body.theme-moc[data-page="trang-chu"] .journey .rule { color:#6aa655; }
body[data-page="trang-chu"] .step { gap:14px; padding:11px 12px; border-radius:16px; transition:opacity .15s ease; }
body[data-page="trang-chu"] .step + .step { margin-top:1px; }
/* Buoc CHUA toi luot mo nhat di, buoc dang lam noi bat ro hon (phan hoi
   2026-09-14 "nguoi dung nhin phat hieu ngay minh dang o buoc 1"). */
body[data-page="trang-chu"] .step:not(.is-active) { opacity: .62; }
body[data-page="trang-chu"] .step.is-active { background:linear-gradient(180deg,rgba(237,91,56,.13),rgba(237,91,56,.05)); }
body.theme-thuy[data-page="trang-chu"] .step.is-active { background:linear-gradient(180deg,rgba(61,159,221,.15),rgba(61,159,221,.05)); }
body.theme-moc[data-page="trang-chu"] .step.is-active { background:linear-gradient(180deg,rgba(92,153,69,.15),rgba(92,153,69,.05)); }
body[data-page="trang-chu"] .step .dot { width:48px; height:48px; background:#ffe4d8; color:#d84b2c; }
body[data-page="trang-chu"] .step.is-active .dot { background:linear-gradient(180deg,#ee6b3e,#d52c27); color:white; }
body.theme-thuy[data-page="trang-chu"] .step .dot { background:#e4f3fd; color:#2b8ecb; }
body.theme-thuy[data-page="trang-chu"] .step.is-active .dot { background:linear-gradient(180deg,#54baf0,#2786d2); }
body.theme-moc[data-page="trang-chu"] .step .dot { background:#ebf5e3; color:#548d44; }
body.theme-moc[data-page="trang-chu"] .step.is-active .dot { background:linear-gradient(180deg,#74ad58,#3e7c38); }
body[data-page="trang-chu"] .step b { font-size:13px; font-weight:600; color:#9d352a; }
body.theme-thuy[data-page="trang-chu"] .step b { color:#25699f; }
body.theme-moc[data-page="trang-chu"] .step b { color:#3f7038; }
body[data-page="trang-chu"] .step small { display:block; margin-top:4px; font-size:12.5px; line-height:1.5; }
body[data-page="trang-chu"] .countdown {
  position:relative;
  margin-top:15px;
  padding:16px 18px 15px;
  border-radius:16px;
  background:rgba(255,248,240,.70);
  border:1px solid rgba(229,123,73,.46);
}
body.theme-thuy[data-page="trang-chu"] .countdown { background:rgba(241,250,255,.74); border-color:rgba(78,168,222,.43); }
body.theme-moc[data-page="trang-chu"] .countdown { background:rgba(247,252,240,.76); border-color:rgba(101,155,77,.42); }
body[data-page="trang-chu"] .countdown::before,
body[data-page="trang-chu"] .countdown::after {
  content:"";
  position:absolute;
  top:50%; width:14px; height:18px;
  background:currentColor;
  color:#ee7c37;
  clip-path:path('M9 0 C5 6 1 10 1 16 C1 21 4 23 9 23 C14 23 17 20 17 15 C17 10 13 5 9 0 Z');
  opacity:.8;
}
body[data-page="trang-chu"] .countdown::before { left:26px; }
body[data-page="trang-chu"] .countdown::after { right:26px; }
body.theme-thuy[data-page="trang-chu"] .countdown::before, body.theme-thuy[data-page="trang-chu"] .countdown::after { color:#39a7e4; }
/* Icon 2 ben countdown he Thuy: doi tu clip-path teardrop chung (nhin giong
   mieng bang/trapezoid o kich thuoc nho) sang DUNG path giot nuoc dang dung
   o pill Thuy/nut CTA (.el-thuy .el-icon / .btn-icon-drop) de dong bo hinh
   dang toan he (phan hoi 2026-09-14). */
body.theme-thuy[data-page="trang-chu"] .countdown::before,
body.theme-thuy[data-page="trang-chu"] .countdown::after {
  width: 15px; height: 20px;
  clip-path: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.5 8 4.5 12.4 4.5 16.5a7.5 7.5 0 0 0 15 0C19.5 12.4 16.5 8 12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.5 8 4.5 12.4 4.5 16.5a7.5 7.5 0 0 0 15 0C19.5 12.4 16.5 8 12 2Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
body.theme-moc[data-page="trang-chu"] .countdown::before, body.theme-moc[data-page="trang-chu"] .countdown::after { color:#659d4f; }
body[data-page="trang-chu"] .countdown .t { font-size:46px; line-height:1.2; color:#ad3328; }
body.theme-thuy[data-page="trang-chu"] .countdown .t { color:#1b6cb4; }
body.theme-moc[data-page="trang-chu"] .countdown .t { color:#38733a; }

/* Strip kế tiếp nhô nhẹ lên giống mockup. */
body[data-page="trang-chu"] .hero-home + .container { position:relative; z-index:3; margin-top:-36px; }
body[data-page="trang-chu"] .hero-home + .container .features {
  background:rgba(255,253,249,.91);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 -8px 30px rgba(105,65,39,.07),0 18px 42px rgba(73,57,44,.10);
}

/* Responsive: giữ layout cũ nhưng vẫn dùng nền mới. */
@media (max-width: 1179px) {
  body[data-page="trang-chu"] .hero-home { min-height:0; padding:56px 0 76px; }
  /* Duoi nguong desktop rong, tra lai padding container binh thuong (28px
     nhu .container goc) - clamp(52-165px) o tren CHI danh cho man hinh
     rong that su, tranh nuot mat khong gian tren dien thoai/may tinh bang. */
  body[data-page="trang-chu"] .hero-home .container { padding-left:28px; padding-right:28px; }
  body[data-page="trang-chu"] .hero-grid { grid-template-columns:minmax(0,1fr); max-width:760px; gap:34px; justify-content:center; }
  body[data-page="trang-chu"] .hero-copy { text-align:center; }
  body[data-page="trang-chu"] .hero-title-wrap { margin:0 auto; }
  body[data-page="trang-chu"] .hero p.lead { margin-left:auto; margin-right:auto; }
  body[data-page="trang-chu"] .elements, body[data-page="trang-chu"] .hero-cta { justify-content:center; }
  body[data-page="trang-chu"] .hero-visual { min-height:390px; }
  body[data-page="trang-chu"] .journey { max-width:500px; margin:0 auto; }
}
@media (max-width: 680px) {
  body[data-page="trang-chu"] .hero-home { padding:38px 0 66px; background-position:center top; }
  body[data-page="trang-chu"] .hero h1 { font-family:var(--sans); font-size:clamp(34px,10vw,46px); line-height:1.06; }
  .hero-title-flame { width:50px; height:50px; right:8px; top:-8px; }
  .hero-title-swish { display:none; }
  body[data-page="trang-chu"] .hero p.lead { font-size:15px; line-height:1.7; margin-top:24px; }
  body[data-page="trang-chu"] .el { min-width:0; flex:1 1 30%; padding:9px 10px; }
  body[data-page="trang-chu"] .hero-visual { min-height:310px; }
  body[data-page="trang-chu"] .egg-fallback { width:min(300px,88vw); }
  body[data-page="trang-chu"] .companion-animation { width:min(300px,88vw); height:min(300px,88vw); }
  body[data-page="trang-chu"] .journey { padding:25px 18px 20px; border-radius:24px; }
  body[data-page="trang-chu"] .journey h3 { font-size:23px; }
  body[data-page="trang-chu"] .countdown .t { font-size:34px; }
  body[data-page="trang-chu"] .countdown::before { left:18px; }
  body[data-page="trang-chu"] .countdown::after { right:18px; }
  body[data-page="trang-chu"] .hero-home + .container { margin-top:-24px; }
}

/* He Thuy tren laptop MAN HINH THAP (khong phai hep) - vd 1440x900 - phan
   hoi "Kham pha ngay" bi cat duoi day viewport (2026-09-14). min-height
   clamp(650px,76vh,820px) + padding 96/68px cong lai gan bang het 1 cua so
   900px cao, khong con du cho CTA. Chi ap dung khi man RONG (>=1180px, duoi
   nguong do da co block rieng o tren dat min-height:0 roi) VA THAP
   (<=920px) - khong dung max-width vi day la van de CHIEU CAO man hinh,
   khong phai chieu rong. */
@media (max-height: 920px) and (min-width: 1180px) {
  body.theme-thuy[data-page="trang-chu"] .hero-home {
    min-height: auto;
    padding-top: 52px;
    padding-bottom: 36px;
  }
  body.theme-thuy[data-page="trang-chu"] .hero p.lead { margin: 18px 0 16px; }
  body.theme-thuy[data-page="trang-chu"] .elements-kicker { margin-bottom: 8px; }
  body.theme-thuy[data-page="trang-chu"] .elements { margin-bottom: 16px; }
  body.theme-thuy[data-page="trang-chu"] .hero-visual { min-height: 340px; }
}

/* --- 2026-10-28: cac lop dung chung voi app.css ma site.css con thieu ------------------------
   (thong bao loi ghep o bat-dau, cua-hang, vi hien thanh chu tron; hang nut dinh nhau). */
.panel {
  background: var(--white-glass); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px;
}
.msg { padding: 11px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; display: none; }
.msg.err { display: block; background: #fbeae5; color: #a5402a; }
.msg.ok { display: block; background: #e7f1e0; color: #3c5a34; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.between { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
@media (max-width: 480px) { .panel { padding: 18px; } }