/* ==========================================================================
   style.css — 1 ON 1 · Cố vấn định hướng chuyên gia (Đặng Trang Nhung)
   Màu thương hiệu: tím chuyển #270043 → #550a80, trắng #fafbfa, nhấn #dbfc71.
   Phông: Playfair Display (tiêu đề) + Be Vietnam Pro (mọi chữ còn lại).
   ========================================================================== */

:root {
  --tim-1: #270043;
  --tim-2: #550a80;
  --tim-sau: #14001f;
  --tim-giua: #3b0662;
  --tim-sang: #8a3fc0;
  --trang: #fafbfa;
  --chanh: #dbfc71;
  --chanh-dam: #c6ea52;
  --muc: #1d0b2c;
  --chu-phu: #5d4c6d;
  --nen-sang: #fafbfa;
  --nen-sang-2: #f3eef8;
  --vien-sang: #e5ddee;
  --chu-phu-toi: rgba(250, 251, 250, .74);
  --vien-toi: rgba(250, 251, 250, .14);
  --kinh: rgba(250, 251, 250, .06);
  --xanh-ok: #2f9e5b;
  --do-loi: #c2264b;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --chuyen: linear-gradient(135deg, var(--tim-1) 0%, var(--tim-2) 100%);
  --bo: 24px;
  --bo-nho: 14px;
  --dem-doc: clamp(76px, 10vw, 132px);
  --cao-dh: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cao-dh) + 12px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--muc);
  background: var(--tim-sau);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--chanh); outline-offset: 3px; border-radius: 6px; }
.an { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.khung { width: min(1180px, 100% - 40px); margin-inline: auto; }
.khung-hep { width: min(760px, 100% - 32px); margin-inline: auto; }

/* --------------------------------------------------------------- Khối nền */
.khoi { position: relative; padding-block: var(--dem-doc); overflow: hidden; }
.khoi-sang { background: var(--nen-sang); color: var(--muc); }
.khoi-sang-2 { background: var(--nen-sang-2); color: var(--muc); }
.khoi-toi { background: var(--tim-sau); color: var(--trang); }
.khoi-chuyen { background: var(--chuyen); color: var(--trang); }
.khoi-toi p, .khoi-chuyen p { color: var(--chu-phu-toi); }

/* Quầng sáng mờ trôi chậm */
.quang {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle, rgba(138, 63, 192, .9) 0%, rgba(85, 10, 128, 0) 70%);
}
.quang-chanh { background: radial-gradient(circle, rgba(219, 252, 113, .35) 0%, rgba(219, 252, 113, 0) 70%); opacity: .5; }
.js .quang { animation: troi 18s ease-in-out infinite alternate; }
@keyframes troi { to { translate: 40px -30px; scale: 1.12; } }

/* ----------------------------------------------------------- Chữ chung */
.nhan {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tim-2); margin: 0 0 18px;
}
.nhan::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.khoi-toi .nhan, .khoi-chuyen .nhan, .hero .nhan { color: var(--chanh); }
.dau-muc { max-width: 820px; margin-bottom: clamp(36px, 5vw, 60px); }
.dau-muc.giua { margin-inline: auto; text-align: center; }
.dau-muc.giua .nhan::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.tieu-de {
  font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.22; letter-spacing: -.01em;
}
.tieu-de em { font-style: italic; color: var(--tim-2); }
.khoi-toi .tieu-de em, .khoi-chuyen .tieu-de em { color: var(--chanh); }
.dan { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.75; color: var(--chu-phu); margin-top: 20px; }
.khoi-toi .dan, .khoi-chuyen .dan { color: var(--chu-phu-toi); }
strong { font-weight: 700; }

/* ----------------------------------------------------------------- Nút */
.nut {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.nut:active { transform: scale(.97); }
.nut::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
@media (hover: hover) { .nut:hover::after { transform: translateX(120%); } }
.nut-chanh { background: var(--chanh); color: var(--muc); box-shadow: 0 10px 30px -10px rgba(219, 252, 113, .55); }
@media (hover: hover) { .nut-chanh:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(219, 252, 113, .7); } }
.nut-tim { background: var(--chuyen); color: var(--trang); box-shadow: 0 12px 30px -14px rgba(85, 10, 128, .8); }
@media (hover: hover) { .nut-tim:hover { transform: translateY(-2px); } }
.nut-vien { background: transparent; color: var(--trang); border-color: rgba(250, 251, 250, .38); }
@media (hover: hover) { .nut-vien:hover { border-color: var(--chanh); color: var(--chanh); } }
.khoi-sang .nut-vien, .khoi-sang-2 .nut-vien, .than-buoc .nut-vien { color: var(--muc); border-color: var(--vien-sang); background: #fff; }
@media (hover: hover) { .khoi-sang .nut-vien:hover, .than-buoc .nut-vien:hover { border-color: var(--tim-2); color: var(--tim-2); } }
.nut-rong { width: 100%; }
.nut-lon { min-height: 60px; font-size: 17px; }
.nut-nho { min-height: 42px; padding: 9px 18px; font-size: 14.5px; }
.nut[disabled], .nut[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.mui-ten { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
@media (hover: hover) { .nut:hover .mui-ten { transform: translateX(4px); } }
.nut-chu { background: none; border: 0; padding: 0; color: var(--tim-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ======================================================= THANH ĐIỀU HƯỚNG */
.tien-do { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--chanh); transform-origin: 0 50%; transform: scaleX(0); }
.dieu-huong {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--cao-dh);
  display: flex; align-items: center; transition: background .35s, box-shadow .35s, backdrop-filter .35s;
}
.dieu-huong.cuon { background: rgba(20, 0, 31, .78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--vien-toi); }
.dieu-huong .khung { display: flex; align-items: center; gap: 28px; }
.logo { display: block; flex: none; }
.logo img { width: 150px; height: auto; }
.dieu-huong nav { display: flex; gap: 26px; margin-left: auto; }
.dieu-huong nav a { color: var(--chu-phu-toi); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s; }
.dieu-huong nav a:hover { color: var(--chanh); }
.dieu-huong .nut { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
@media (max-width: 979px) { .dieu-huong nav { display: none; } .dieu-huong .nut { margin-left: auto; } }
@media (max-width: 400px) { .logo img { width: 124px; } .dieu-huong .nut { padding: 9px 16px; font-size: 14px; } }

/* ================================================================ HERO */
.hero {
  position: relative; overflow: hidden; color: var(--trang);
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(85, 10, 128, .95) 0%, rgba(39, 0, 67, 0) 60%),
    linear-gradient(160deg, var(--tim-1) 0%, var(--tim-sau) 70%);
  padding-top: calc(var(--cao-dh) + clamp(28px, 5vw, 64px));
}
.hero::after { /* hạt nhiễu rất mờ cho nền có chiều sâu */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-luoi { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: 24px; }
.hero-chu { padding-bottom: clamp(48px, 7vw, 96px); }
.hero h1 { font-weight: 400; }
.h1-lon {
  display: block; font-family: var(--serif); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(88px, 13.5vw, 184px); line-height: 1; padding-top: .04em; color: var(--trang);
}
.h1-lon .chu { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.h1-lon .chu i { display: inline-block; font-style: normal; }
.h1-lon .cach { display: inline-block; width: .26em; }
.js .h1-lon .chu i { transform: translateY(108%); animation: troi-len .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes troi-len { to { transform: none; } }
.h1-phu {
  display: block; margin-top: 10px; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(27px, 3.4vw, 44px); line-height: 1.25; color: var(--trang);
}
.khau-hieu {
  display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0;
  font-size: 13.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--chanh) !important;
}
.khau-hieu span { white-space: nowrap; }
.khau-hieu::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--chanh); box-shadow: 0 0 0 5px rgba(219, 252, 113, .18); }
.hero-dan { max-width: 540px; margin: 20px 0 0; font-size: clamp(17.5px, 1.7vw, 20px); line-height: 1.7; color: var(--chu-phu-toi); }
.hero-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-the { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, auto); gap: 10px; justify-content: start; }
.hero-the li {
  padding: 12px 16px; border-radius: 16px; background: var(--kinh); border: 1px solid var(--vien-toi);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-the b { display: block; font-size: 15.5px; font-weight: 700; color: var(--trang); line-height: 1.3; white-space: nowrap; }
.hero-the span { display: block; font-size: 12.5px; color: var(--chu-phu-toi); margin-top: 2px; white-space: nowrap; }
.hero-the .gia b { color: var(--chanh); }

.hero-anh { position: relative; align-self: end; display: flex; justify-content: center; min-height: 100%; }
.hero-anh img { position: relative; z-index: 2; width: min(100%, 520px); height: auto; filter: drop-shadow(0 30px 60px rgba(10, 0, 20, .55)); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.vong {
  position: absolute; z-index: 1; left: 50%; top: 14%; width: min(92%, 500px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(138, 63, 192, .9) 0%, rgba(85, 10, 128, .4) 45%, rgba(85, 10, 128, 0) 70%);
}
.vong::before, .vong::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: 1px solid rgba(219, 252, 113, .32); }
.vong::after { inset: 8%; border-color: rgba(250, 251, 250, .14); border-style: dashed; }
.js .vong::before { animation: xoay 40s linear infinite; border-top-color: var(--chanh); }
@keyframes xoay { to { transform: rotate(360deg); } }
.the-ten {
  position: absolute; z-index: 3; right: 0; bottom: 18%; padding: 14px 18px; border-radius: 18px; max-width: 250px;
  background: rgba(20, 0, 31, .55); border: 1px solid var(--vien-toi); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.the-ten b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.3; }
.the-ten span { display: block; font-size: 12.5px; color: var(--chu-phu-toi); line-height: 1.5; margin-top: 2px; }
.js .the-ten { animation: lo-lung 6s ease-in-out infinite alternate; }
@keyframes lo-lung { to { translate: 0 -10px; } }

/* -------------------------------------------------------- Dải chữ chạy */
.dai-chay { background: var(--chanh); color: var(--muc); overflow: hidden; padding: 16px 0; }
.dai-chay-ruot { display: flex; width: max-content; }
.dai-chay-ruot span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 24px); font-weight: 600; }
.dai-chay-ruot span::after { content: '✦'; font-style: normal; font-size: .7em; color: var(--tim-2); }
.js .dai-chay-ruot { animation: chay 38s linear infinite; }
@keyframes chay { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- Hiện khi cuộn */
.js [data-hien] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--tre, 0s); }
.js [data-hien].hien { opacity: 1; transform: none; }

/* ============================================================ MỞ ĐẦU */
.mo-dau-luoi { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.mo-dau-luoi .tieu-de { position: sticky; top: calc(var(--cao-dh) + 32px); }
.cau-hoi-lon { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.45; color: var(--tim-2); margin: 0 0 28px; }
.ds-cau-hoi { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 12px; }
.ds-cau-hoi li {
  position: relative; padding: 16px 20px 16px 54px; border-radius: 16px; background: #fff; border: 1px solid var(--vien-sang);
  font-weight: 500; line-height: 1.55; box-shadow: 0 1px 0 rgba(39, 0, 67, .03);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.ds-cau-hoi li::before {
  content: '?'; position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--trang); background: var(--chuyen);
}
@media (hover: hover) { .ds-cau-hoi li:hover { transform: translateX(6px); border-color: rgba(85, 10, 128, .35); box-shadow: 0 10px 30px -18px rgba(85, 10, 128, .5); } }
.ban-do {
  margin-top: 30px; padding: 58px 30px 28px; border-radius: var(--bo); background: var(--chuyen); color: var(--trang);
  position: relative; overflow: hidden;
}
.ban-do::before { content: '“'; position: absolute; left: 26px; top: 6px; font-family: var(--serif); font-size: 96px; line-height: 1; color: var(--chanh); opacity: .55; }
.ban-do p { color: var(--chu-phu-toi); margin-bottom: .8em; }
.ban-do p:last-child { margin: 0; }
.ban-do .lon { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--trang); }
.ban-do .lon em { color: var(--chanh); }

/* ========================================================== TRĂN TRỞ */
.luoi-tran-tro { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.the-tran-tro {
  position: relative; padding: 28px 28px 26px; border-radius: var(--bo); background: var(--kinh); border: 1px solid var(--vien-toi);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, background .35s;
}
@media (hover: hover) { .the-tran-tro:hover { transform: translateY(-4px); border-color: rgba(219, 252, 113, .4); background: rgba(250, 251, 250, .09); } }
.the-tran-tro .so { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--chanh); letter-spacing: .1em; }
.the-tran-tro h3 { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 23px); font-weight: 600; line-height: 1.35; margin: 10px 0 12px; color: var(--trang); }
.the-tran-tro p { font-size: 15.5px; line-height: 1.7; margin: 0 0 .7em; }
.the-tran-tro p:last-child { margin: 0; }

/* ========================================================== BƯỚC NGOẶT */
.buoc-ngoat { text-align: center; }
.chu-vien {
  font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(36px, 6.4vw, 86px); line-height: 1.22; padding-top: .15em; margin: 0 auto 32px; max-width: 1000px;
  color: transparent; -webkit-text-stroke: 1.2px rgba(250, 251, 250, .55);
  background: linear-gradient(90deg, var(--chanh) 0 50%, transparent 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.6s cubic-bezier(.4, 0, .2, 1);
}
.chu-vien.hien, html:not(.js) .chu-vien { background-position: 0 0; }
.buoc-ngoat .dan-lon { max-width: 760px; margin: 0 auto; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.7; color: var(--trang) !important; }
.buoc-ngoat .dan-lon strong { color: var(--chanh); font-weight: 700; }
.ba-dong { display: grid; gap: 6px; max-width: 760px; margin: 36px auto 0; }
.ba-dong p { margin: 0; font-size: clamp(16.5px, 1.6vw, 19px); }
.ba-dong .manh { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.2vw, 27px); color: var(--trang) !important; line-height: 1.45; margin-top: 8px; }

/* ======================================================= PHIÊN CỐ VẤN */
.phien-dau { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px); }
.khong-phai { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.khong-phai li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--vien-sang); line-height: 1.6; }
.khong-phai li svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.khong-phai .x { stroke: #b4405f; }
.khong-phai .mai-la { background: var(--chuyen); color: var(--trang); border: 0; }
.khong-phai .mai-la svg { stroke: var(--chanh); }
.khong-phai svg { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tap-trung-dau { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.1vw, 26px); text-align: center; margin: 0 auto 30px; max-width: 720px; color: var(--tim-2); line-height: 1.45; }
.ds-tap-trung { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: tt; }
.ds-tap-trung li {
  position: relative; padding: 26px 22px 24px; border-radius: var(--bo); background: #fff; border: 1px solid var(--vien-sang);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
@media (hover: hover) { .ds-tap-trung li:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(85, 10, 128, .55); border-color: rgba(85, 10, 128, .3); } }
.ds-tap-trung .so { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--chuyen); color: var(--chanh); font-family: var(--serif); font-weight: 700; font-size: 18px; }
.ds-tap-trung h3 { font-size: 14.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.45; margin: 18px 0 10px; color: var(--tim-1); }
.ds-tap-trung p { font-size: 15px; line-height: 1.65; color: var(--chu-phu); margin: 0; }

/* ======================================================== MANG GÌ RA */
.mang-luoi { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.ds-mang { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ds-mang li {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px;
  background: var(--kinh); border: 1px solid var(--vien-toi); color: var(--trang); line-height: 1.6; font-size: 16.5px;
}
.ds-mang li svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--chanh); stroke: var(--muc); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chu-nho-ket { font-size: 14.5px; font-style: italic; margin-top: 18px; }
.di-kem { margin-top: 30px; padding: 22px 24px; border-radius: 18px; border: 1px dashed rgba(219, 252, 113, .45); }
.di-kem .nhan { margin-bottom: 12px; }
.di-kem ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.di-kem li { padding: 8px 14px; border-radius: 999px; background: rgba(219, 252, 113, .12); color: var(--chanh); font-weight: 600; font-size: 14.5px; }

/* =================================================== DÀNH CHO AI / CHƯA */
.ai-luoi { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: stretch; }
.the-ai { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--bo); background: #fff; border: 1px solid var(--vien-sang); }
.the-ai h3 { font-family: var(--serif); font-size: clamp(24px, 2.5vw, 30px); font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.the-ai > p { color: var(--chu-phu); }
.the-ai.chua { background: var(--nen-sang-2); }
.ds-tich { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ds-tich li { position: relative; padding-left: 36px; line-height: 1.6; font-weight: 500; }
.ds-tich li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--tim-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbfc71' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.ghi-chu-ai { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vien-sang); color: var(--chu-phu); }
.ghi-chu-ai strong { color: var(--muc); }
.ds-chua { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 4px; counter-reset: c; }
.ds-chua li { padding: 14px 0; border-top: 1px solid var(--vien-sang); }
.ds-chua li:first-child { border-top: 0; padding-top: 4px; }
.ds-chua b { display: flex; gap: 12px; align-items: baseline; line-height: 1.5; }
.ds-chua b .so { flex: none; font-family: var(--serif); color: #b4405f; font-weight: 700; }
.ds-chua p { margin: 6px 0 0 34px; font-size: 15px; line-height: 1.65; color: var(--chu-phu); }
.mot-dieu {
  margin-top: 20px; padding: clamp(28px, 4vw, 48px); border-radius: var(--bo); background: var(--chuyen); color: var(--trang); text-align: center; position: relative; overflow: hidden;
}
.mot-dieu .nhan { color: var(--chanh); }
.mot-dieu .nhan::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.mot-dieu p { max-width: 760px; margin: 0 auto 1em; color: var(--chu-phu-toi); }
.mot-dieu .trich { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.45; color: var(--trang); margin-bottom: 0; }

/* ========================================================= NGƯỜI CỐ VẤN */
.tn-luoi { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.tn-anh { position: relative; display: flex; justify-content: center; }
.tn-anh::before {
  content: ''; position: absolute; left: 50%; top: 10%; width: 92%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(219, 252, 113, .28) 0%, rgba(138, 63, 192, .35) 40%, rgba(85, 10, 128, 0) 70%);
}
.tn-anh img { position: relative; width: min(100%, 470px); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.tn-ten { font-family: var(--serif); font-size: clamp(40px, 5.4vw, 68px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; padding-top: .08em; }
.tn-chuc { margin: 18px 0 0; display: grid; gap: 8px; }
.tn-chuc p { margin: 0; color: var(--trang) !important; font-weight: 600; line-height: 1.55; }
.tn-chuc p:first-child { color: var(--chanh) !important; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.tn-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; }
.tn-so div { padding: 18px 18px 16px; border-radius: 18px; background: var(--kinh); border: 1px solid var(--vien-toi); }
.tn-so b { display: block; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.1; color: var(--chanh); }
.tn-so div > span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--chu-phu-toi); }
.tn-bio p { font-size: 16.5px; }
.tn-an { margin-top: 18px; }

/* ============================================================ THÔNG TIN */
.tt-luoi { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.bang-tt { border-radius: var(--bo); background: #fff; border: 1px solid var(--vien-sang); overflow: hidden; }
.bang-tt > div { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--vien-sang); }
.bang-tt > div:first-child { border-top: 0; }
.bang-tt dt { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chu-phu); padding-top: 2px; }
.bang-tt dd { margin: 0; font-weight: 600; line-height: 1.6; }
.bang-tt dd small { display: block; font-weight: 400; color: var(--chu-phu); font-size: 14.5px; margin-top: 2px; }
.ve {
  position: relative; padding: 34px 30px 30px; border-radius: 28px; color: var(--trang); text-align: center; overflow: hidden;
  background: radial-gradient(circle at 20% 0%, rgba(219, 252, 113, .22), transparent 45%), var(--chuyen);
  box-shadow: 0 40px 80px -40px rgba(39, 0, 67, .8); transform-style: preserve-3d; transition: transform .2s ease-out;
}
.ve::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 40%); pointer-events: none; }
.ve-ten { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.1; }
.ve-phu { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--chu-phu-toi); margin-top: 4px; }
.ve-cat { margin: 24px -30px; border-top: 2px dashed rgba(250, 251, 250, .22); position: relative; }
.ve-cat::before, .ve-cat::after { content: ''; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--nen-sang-2); }
.ve-cat::before { left: -13px; } .ve-cat::after { right: -13px; }
.ve-gia { font-family: var(--serif); font-weight: 700; font-size: clamp(42px, 4.6vw, 56px); line-height: 1.1; color: var(--chanh); }
.ve-gia-phu { font-size: 14px; color: var(--chu-phu-toi); margin: 6px 0 22px; }
.ve .nut { width: 100%; }
.ve-luu-y { font-size: 13px; color: var(--chu-phu-toi); margin: 14px 0 0; }

.ba-buoc { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: b; }
.ba-buoc li { position: relative; padding: 24px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--vien-sang); }
.ba-buoc b { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--chanh); color: var(--muc); font-weight: 800; }
.ba-buoc h3 { font-size: 17px; font-weight: 700; margin: 14px 0 6px; line-height: 1.4; }
.ba-buoc p { margin: 0; font-size: 15px; color: var(--chu-phu); line-height: 1.6; }

/* ============================================================== HỎI ĐÁP */
.ds-hoi { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.ds-hoi details { border-radius: 18px; background: var(--kinh); border: 1px solid var(--vien-toi); transition: border-color .3s, background .3s; }
.ds-hoi details[open] { border-color: rgba(219, 252, 113, .35); background: rgba(250, 251, 250, .08); }
.ds-hoi summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 24px; font-weight: 600; font-size: 17px; line-height: 1.5; color: var(--trang); }
.ds-hoi summary::-webkit-details-marker { display: none; }
.ds-hoi summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(219, 252, 113, .14); color: var(--chanh); font-size: 20px; font-weight: 400; transition: transform .3s; }
.ds-hoi details[open] summary::after { transform: rotate(45deg); }
.ds-hoi details p { padding: 0 24px 20px; margin: 0; font-size: 16px; }

/* ============================================================ LỜI KẾT */
.loi-ket { text-align: center; }
.loi-ket .tieu-de { max-width: 900px; margin: 0 auto; }
.loi-ket-dong { display: grid; gap: 4px; margin: 30px auto 0; max-width: 720px; }
.loi-ket-dong p { margin: 0; font-size: clamp(17px, 1.7vw, 19.5px); }
.loi-ket .doan { max-width: 720px; margin: 26px auto 0; font-size: clamp(16.5px, 1.6vw, 18.5px); }
.cau-chot { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.35; color: var(--chanh) !important; max-width: 860px; margin: 40px auto 36px; }

/* ============================================================ CHÂN TRANG */
.chan-trang { background: #0d0015; color: var(--chu-phu-toi); padding: 52px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 14.5px; }
.chan-trang .khung { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.chan-trang img { width: 150px; }
.chan-trang p { margin: 0; line-height: 1.7; }
.chan-trang b { color: var(--trang); }
.chan-trang a { color: var(--chanh); text-decoration: none; font-weight: 600; }
.chan-trang .lien-ket { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ----------------------------------------------- Thanh đặt lịch bám đáy */
.thanh-dinh {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(20, 0, 31, .9); border: 1px solid var(--vien-toi);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.thanh-dinh.hien { transform: none; }
.thanh-dinh div { line-height: 1.25; color: var(--trang); }
.thanh-dinh b { display: block; font-size: 14.5px; }
.thanh-dinh div span { font-size: 13px; color: var(--chanh); font-weight: 700; }
.thanh-dinh .nut { min-height: 46px; padding: 10px 20px; font-size: 15px; }
@media (max-width: 979px) { .thanh-dinh { display: flex; } }

/* --------------------------------------------------------- Nhãn chạy thử */
.nhan-chay-thu {
  position: fixed; left: 12px; top: calc(var(--cao-dh) + 8px); z-index: 70; padding: 6px 12px; border-radius: 999px;
  background: #ffd84d; color: #3a2a00; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.trang-buoc .nhan-chay-thu { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }

/* ===================================================== ĐIỆN THOẠI / MÁY TÍNH BẢNG */
@media (max-width: 1100px) {
  .ds-tap-trung { grid-template-columns: repeat(3, 1fr); }
  .hero-the { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 979px) {
  .hero { padding-top: calc(var(--cao-dh) + 20px); }
  .hero-luoi, .mo-dau-luoi, .phien-dau, .mang-luoi, .ai-luoi, .tn-luoi, .tt-luoi { grid-template-columns: 1fr; }
  .hero-chu { text-align: center; padding-bottom: 0; }
  .hero-chu .nhan::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
  .hero-dan { margin-inline: auto; }
  .hero-nut { justify-content: center; }
  .hero-the { justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; margin-inline: auto; }
  .hero-the li { text-align: center; }
  .hero-anh { margin-top: 8px; }
  .hero-anh img { width: min(86%, 420px); }
  .the-ten { right: 50%; translate: 50% 0; bottom: 10%; text-align: center; }
  .js .the-ten { animation: none; }

  .dau-muc, .mo-dau-luoi > div:first-child, .phien-dau > div:first-child, .mang-luoi > div:first-child { text-align: center; margin-inline: auto; }
  .chu-nho-ket { text-align: center; }
  .khau-hieu { display: block; }
  .khau-hieu::before { display: none; }
  .dau-muc .nhan::after, .mo-dau-luoi .nhan::after, .phien-dau .nhan::after, .mang-luoi .nhan::after, .tn-chu .nhan::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
  .mo-dau-luoi .tieu-de { position: static; }
  .cau-hoi-lon { text-align: center; }
  .luoi-tran-tro { grid-template-columns: 1fr; }
  .the-tran-tro { text-align: center; }
  .ds-tap-trung { grid-template-columns: repeat(2, 1fr); }
  .ds-tap-trung li { text-align: center; }
  .ds-tap-trung li:last-child { grid-column: 1 / -1; }
  .the-ai h3, .the-ai > p { text-align: center; }
  .ghi-chu-ai { text-align: center; }
  .tn-chu { text-align: center; }
  .tn-anh img { width: min(78%, 400px); }
  .bang-tt > div { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .ba-buoc { grid-template-columns: repeat(2, 1fr); }
  .ba-buoc li { text-align: center; }
  .chan-trang .khung { flex-direction: column; text-align: center; }
  .chan-trang .lien-ket { justify-content: center; }
  .chan-trang { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .khung { width: calc(100% - 32px); }
  .h1-lon { font-size: clamp(80px, 25vw, 120px); }
  .ds-tap-trung { grid-template-columns: 1fr; }
  .ba-buoc { grid-template-columns: 1fr; }
  .tn-so { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tn-so div { padding: 14px 8px; text-align: center; }
  .tn-so b { font-size: 26px; }
  .tn-so div > span { font-size: 12px; }
  .ve { padding: 30px 22px 24px; }
  .ve-cat { margin-inline: -22px; }
  .ds-cau-hoi li { text-align: left; }
  .the-ai { padding: 24px 20px; }
  .ds-hoi summary { padding: 18px 18px; font-size: 16px; }
  .ds-hoi details p { padding: 0 18px 18px; }
  .nut { padding-inline: 22px; }
}
@media (max-width: 640px) {
  .hero .nhan { font-size: 11.5px; letter-spacing: .16em; }
  .hero .nhan::before, .hero .nhan::after { width: 18px; }
}
@media (max-width: 400px) {
  .hero-nut .nut { width: 100%; }
  .hero-the b { font-size: 14.5px; }
  .hero-the li { padding: 10px 10px; }
  .khau-hieu { font-size: 12px; letter-spacing: .14em; }
}

/* ==========================================================================
   TRANG ĐẶT LỊCH (/dang-ky/)
   ========================================================================== */
.trang-buoc { background: var(--nen-sang-2); }
.dau-buoc {
  position: relative; overflow: hidden; color: var(--trang); text-align: center;
  background: radial-gradient(900px 500px at 80% 0%, rgba(85, 10, 128, .95), rgba(39, 0, 67, 0) 60%), linear-gradient(160deg, var(--tim-1), var(--tim-sau));
  padding: 22px 0 34px;
}
.dau-buoc-tren { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.dau-buoc-tren .ve-trang { color: var(--chu-phu-toi); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.dau-buoc-tren .ve-trang:hover { color: var(--chanh); }
.dau-buoc-tren img { width: 132px; }
.dau-buoc .nhan { color: var(--chanh); justify-content: center; }
.dau-buoc .nhan::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.dau-buoc h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 48px); line-height: 1.2; }
.mo-ta-buoc { max-width: 560px; margin: 12px auto 0; color: var(--chu-phu-toi); }
.chip-su-kien { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.chip-su-kien span { padding: 7px 14px; border-radius: 999px; background: var(--kinh); border: 1px solid var(--vien-toi); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip-su-kien span:last-child { color: var(--chanh); }
.cac-buoc { list-style: none; padding: 0; margin: 26px auto 0; display: flex; justify-content: center; gap: 6px; max-width: 620px; }
.cac-buoc li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--chu-phu-toi); position: relative; }
.cac-buoc li::before { content: ''; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; background: var(--vien-toi); }
.cac-buoc li:first-child::before { display: none; }
.cac-buoc b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--kinh); border: 1px solid var(--vien-toi); font-size: 14px; color: var(--trang); position: relative; z-index: 1; transition: background .3s, color .3s; }
.cac-buoc .dang b { background: var(--chanh); color: var(--muc); border-color: var(--chanh); box-shadow: 0 0 0 6px rgba(219, 252, 113, .16); }
.cac-buoc .dang { color: var(--trang); font-weight: 700; }
.cac-buoc .xong b { background: var(--tim-sang); border-color: var(--tim-sang); }
.cac-buoc .xong::before, .cac-buoc .dang::before { background: var(--chanh); opacity: .6; }

.than-buoc { padding: 28px 0 80px; }
.the-buoc { background: #fff; border-radius: var(--bo); border: 1px solid var(--vien-sang); padding: clamp(22px, 4vw, 34px); margin-bottom: 16px; box-shadow: 0 20px 50px -40px rgba(39, 0, 67, .45); transition: opacity .3s; }
.tieu-de-phan { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 27px); line-height: 1.3; }
.so-phan { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--chuyen); color: var(--chanh); font-family: var(--sans); font-size: 16px; font-weight: 800; }
.phan-mo-ta { color: var(--chu-phu); margin: 10px 0 20px; font-size: 15.5px; }
.loi-dan { padding: 16px 18px; border-radius: 16px; background: var(--nen-sang-2); border-left: 3px solid var(--tim-2); font-size: 15.5px; line-height: 1.7; color: var(--muc); margin: 14px 0 22px; }
.vung-khoa.khoa { opacity: .62; }
.vung-khoa.khoa > :not(.tieu-de-phan):not(.ghi-chu-khoa) { display: none !important; }
.ghi-chu-khoa { display: none; margin: 10px 0 0; color: var(--chu-phu); font-size: 15px; }
.vung-khoa.khoa .ghi-chu-khoa { display: block; }

.o-nhap { margin-bottom: 18px; }
.o-nhap label, .cau legend { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 8px; line-height: 1.5; }
.o-nhap label small, .cau legend small { font-weight: 400; color: var(--chu-phu); }
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input:not([type]), textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--vien-sang); background: #fff;
  font: inherit; font-size: 16px; color: var(--muc); line-height: 1.5; transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--tim-2); box-shadow: 0 0 0 4px rgba(85, 10, 128, .12); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--do-loi); }
.loi { color: var(--do-loi); font-size: 14px; margin: 6px 0 0; min-height: 0; line-height: 1.5; }
.loi:empty { display: none; }
.hai-o { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.goi-y-cau { font-size: 14px; color: var(--chu-phu); margin: -2px 0 10px; font-weight: 400; }

.cau { border: 0; padding: 0; margin: 0 0 26px; }
.cau legend { padding: 0; }
.cau legend .so-cau { color: var(--tim-2); margin-right: 6px; }
.ds-chon { display: grid; gap: 8px; }
.chon { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--vien-sang); cursor: pointer; line-height: 1.5; font-size: 15.5px; transition: border-color .2s, background .2s; }
.chon:hover { border-color: rgba(85, 10, 128, .4); }
.chon input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #b9a9c8; border-radius: 6px; background: #fff; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.chon input[type="radio"] { border-radius: 50%; }
.chon input:checked { background: var(--tim-2); border-color: var(--tim-2); }
.chon input:checked::after { content: ''; width: 10px; height: 6px; border: solid var(--chanh); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.chon input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--chanh); transform: none; }
.chon:has(input:checked) { border-color: var(--tim-2); background: #f8f3fc; }
.chon:has(input:focus-visible) { outline: 3px solid var(--tim-2); outline-offset: 2px; }
.o-khac { margin-top: 8px; }

/* ----- Chọn lịch */
.lich-dang-tai { display: flex; align-items: center; gap: 10px; color: var(--chu-phu); padding: 18px 0; }
.chon-ngay { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.o-ngay {
  flex: none; width: 78px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--vien-sang); background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; scroll-snap-align: start; transition: border-color .2s, background .2s, color .2s;
}
.o-ngay small { font-size: 12px; color: var(--chu-phu); font-weight: 600; }
.o-ngay b { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.o-ngay em { font-style: normal; font-size: 11.5px; color: var(--chu-phu); }
.o-ngay:hover { border-color: rgba(85, 10, 128, .45); }
.o-ngay[aria-pressed="true"] { background: var(--chuyen); border-color: transparent; color: var(--trang); }
.o-ngay[aria-pressed="true"] small, .o-ngay[aria-pressed="true"] em { color: var(--chanh); }
.chon-gio { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 6px; }
.o-gio { padding: 13px 10px; border-radius: 14px; border: 1.5px solid var(--vien-sang); background: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: border-color .2s, background .2s; line-height: 1.3; }
.o-gio small { display: block; font-weight: 500; font-size: 12px; color: var(--chu-phu); }
.o-gio:hover { border-color: var(--tim-2); }
.o-gio[aria-pressed="true"] { background: var(--chanh); border-color: var(--chanh); }
.o-gio[aria-pressed="true"] small { color: var(--muc); }
.mui-gio { font-size: 13.5px; color: var(--chu-phu); margin: 10px 0 0; }
.da-chon-lich { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: #f8f3fc; border: 1.5px solid rgba(85, 10, 128, .25); display: flex; gap: 12px; align-items: center; }
.da-chon-lich svg { flex: none; width: 26px; height: 26px; stroke: var(--tim-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.da-chon-lich b { display: block; }
.da-chon-lich span { font-size: 14px; color: var(--chu-phu); }
.lich-trong { padding: 18px; border-radius: 16px; background: var(--nen-sang-2); color: var(--chu-phu); }

/* ----- Tóm tắt các bước đã xong */
.tom-tat { display: grid; gap: 0; border-radius: 16px; background: var(--nen-sang-2); padding: 6px 18px; }
.tom-tat > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--vien-sang); font-size: 15px; }
.tom-tat > div:first-child { border-top: 0; }
.tom-tat span { color: var(--chu-phu); flex: none; }
.tom-tat b { text-align: right; word-break: break-word; }
.tom-tat .sua { justify-content: flex-end; }

/* ----- Thanh toán */
.dong-y { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--nen-sang-2); cursor: pointer; line-height: 1.55; font-size: 15.5px; font-weight: 600; margin-bottom: 18px; }
.dong-y input { flex: none; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--tim-2); border-radius: 7px; background: #fff; display: grid; place-items: center; }
.dong-y input:checked { background: var(--tim-2); }
.dong-y input:checked::after { content: ''; width: 11px; height: 6px; border: solid var(--chanh); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.thanh-toan { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.khung-qr { text-align: center; padding: 14px; border-radius: 18px; border: 1.5px solid var(--vien-sang); background: #fff; }
.khung-qr img { width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.khung-qr p { font-size: 13px; color: var(--chu-phu); margin: 10px 0 0; line-height: 1.5; }
.dong-ck { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vien-sang); }
.dong-ck:first-child { border-top: 0; padding-top: 0; }
.dong-ck span { display: block; font-size: 13px; color: var(--chu-phu); }
.dong-ck b { display: block; font-size: 16.5px; word-break: break-word; }
.tien-lon { color: var(--tim-2); font-family: var(--serif); font-size: 22px !important; }
.nut-chep { flex: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--vien-sang); background: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.nut-chep:hover { border-color: var(--tim-2); color: var(--tim-2); }
.nut-chep.da { background: var(--xanh-ok); border-color: var(--xanh-ok); color: #fff; }
.luu-y-ck { font-size: 14px; color: var(--chu-phu); margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fffbea; border: 1px solid #f2e3a4; }
.giu-cho { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: #f1fbd9; border: 1px solid #d8ef9c; font-size: 14.5px; line-height: 1.5; }
.giu-cho svg { flex: none; width: 22px; height: 22px; stroke: #4c6b00; fill: none; stroke-width: 2; stroke-linecap: round; }
.tieu-de-nho { font-weight: 800; font-size: 15px; letter-spacing: .04em; margin: 26px 0 10px; }

.vung-tha { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; border-radius: 18px; border: 2px dashed #cbbcda; background: #fbf9fd; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; }
.vung-tha:hover, .vung-tha.dang-keo { border-color: var(--tim-2); background: #f6effb; }
.vung-tha.co-loi { border-color: var(--do-loi); }
.vung-tha input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vung-tha span { font-size: 14px; color: var(--chu-phu); }
.bieu-tuong-tai { width: 48px; height: 48px; border-radius: 50%; display: grid !important; place-items: center; background: var(--chuyen); }
.bieu-tuong-tai svg { width: 24px; height: 24px; fill: none; stroke: var(--chanh); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.xem-truoc { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; border: 1.5px solid var(--vien-sang); }
.xem-truoc img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.xem-truoc div { flex: 1; min-width: 0; }
.xem-truoc b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xem-truoc span { font-size: 13.5px; color: var(--xanh-ok); font-weight: 600; }
.thanh-gui { margin-top: 22px; }
.dang-quay { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: quay .8s linear infinite; display: inline-block; flex: none; }
@keyframes quay { to { transform: rotate(360deg); } }

/* ----- Hoàn tất */
.da-xong { background: #fff; border-radius: var(--bo); border: 1px solid var(--vien-sang); padding: clamp(26px, 5vw, 44px); text-align: center; }
.da-xong h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4vw, 38px); line-height: 1.25; margin-bottom: 10px; }
.dau-tich { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--chuyen); box-shadow: 0 0 0 10px rgba(85, 10, 128, .1); }
.dau-tich svg { width: 36px; height: 36px; fill: none; stroke: var(--chanh); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ma-dang-ky { display: inline-block; margin: 6px 0 22px; padding: 10px 22px; border-radius: 14px; background: var(--nen-sang-2); font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--tim-2); letter-spacing: .04em; }
.lich-xong { margin: 0 auto 22px; max-width: 480px; padding: 16px 18px; border-radius: 16px; background: var(--chuyen); color: var(--trang); }
.lich-xong span { display: block; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chanh); font-weight: 700; }
.lich-xong b { display: block; font-size: 18px; margin-top: 4px; }
.cac-viec { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 560px; text-align: left; display: grid; gap: 12px; }
.cac-viec li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--nen-sang-2); line-height: 1.6; font-size: 15.5px; }
.cac-viec li > b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tim-2); color: var(--chanh); font-size: 14px; }
.cac-viec .nut { margin-top: 10px; }
.cac-viec li > div, .da-xong p { overflow-wrap: anywhere; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.da-xong [data-lien-he] a { color: var(--tim-2); font-weight: 700; text-decoration: none; }

@media (max-width: 640px) {
  .hai-o { grid-template-columns: 1fr; }
  .thanh-toan { grid-template-columns: 1fr; }
  .khung-qr { max-width: 280px; margin: 0 auto; }
  .tieu-de-phan { justify-content: center; text-align: center; flex-direction: column; gap: 10px; }
  .phan-mo-ta, .ghi-chu-khoa { text-align: center; }
  .cac-buoc span { font-size: 12px; }
  .cac-viec li { flex-direction: column; align-items: center; text-align: center; }
  .tom-tat > div { flex-direction: column; gap: 2px; text-align: center; }
  .tom-tat b { text-align: center; }
  .tom-tat .sua { align-items: center; }
  .cac-viec .nut, .hang-nut .nut { width: 100%; }
  .dau-buoc-tren img { width: 112px; }
  .chip-su-kien span { font-size: 12.5px; padding: 6px 11px; }
}
@media (max-width: 400px) {
  .cac-buoc li span { font-size: 11px; }
  .o-ngay { width: 70px; }
  .chon-gio { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------- Giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-hien] { opacity: 1; transform: none; }
  .js .h1-lon .chu i { transform: none; }
  .chu-vien { background-position: 0 0; }
}