/* ============================================================================
 *  /kh — SAIGON SMILE · Cổng thông tin khách hàng
 *  Cùng hệ thiết kế với /form: tông cam #ec7700, font Be Vietnam Pro,
 *  mobile-first, có giao diện sáng/tối. Không phụ thuộc framework CSS nào.
 * ==========================================================================*/

:root, [data-theme="light"]{
  --accent:#ec7700; --accent-2:#ff9a3d; --accent-ink:#fff; --accent-soft:#fff3e6;
  --bg:#fbf7f2; --bg-2:#f3efe9; --panel:#fff; --line:#eadfd3;
  --txt:#241c14; --muted:#7a6a5a; --soft:#9b8b7b;
  --ring:rgba(236,119,0,.22);
  --good:#15803d; --good-bg:#e8f6ec; --warn:#b45309; --warn-bg:#fdf3e3;
  --bad:#c81e1e;  --bad-bg:#fdeaea;  --info:#0369a1;  --info-bg:#e8f2fb;
  --shadow:0 1px 3px rgba(60,40,20,.07), 0 10px 30px rgba(60,40,20,.07);
  --shadow-sm:0 1px 2px rgba(60,40,20,.06);
}
/* Nhịp chuyển động dùng chung — đổi ở đây là đổi cả trang.
   --ease     : mềm hai đầu, cho hover/đổi màu.
   --ease-out : bung nhanh rồi hãm chậm, cho phần tử xuất hiện. */
:root{
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --accent:#ff9a3d; --accent-2:#ffb066; --accent-ink:#241206; --accent-soft:#2a1e12;
  --bg:#14100c; --bg-2:#1c1712; --panel:#211b15; --line:#342a20;
  --txt:#f2e9df; --muted:#b6a695; --soft:#8f8171;
  --ring:rgba(255,154,61,.25);
  --good:#4ade80; --good-bg:#16281c; --warn:#fbbf24; --warn-bg:#2a2011;
  --bad:#f87171;  --bad-bg:#2a1414;  --info:#38bdf8;  --info-bg:#12222c;
  --shadow:none; --shadow-sm:none;
}

*{box-sizing:border-box}
/* Thuộc tính [hidden] phải THẮNG mọi display của app (menu, modal, ô mã OTP…),
   nếu không thì .modal{display:grid} sẽ ghi đè display:none của UA stylesheet. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25; margin:0}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.dim{color:var(--muted)}
.r{text-align:right}

/* ── Nút chung ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:12px; font:inherit; font-weight:700; font-size:1rem;
  padding:13px 22px; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px var(--ring)}
.btn-primary:hover{box-shadow:0 12px 28px var(--ring); transform:translateY(-1px)}
.btn-primary:hover{background:#d56b00}
[data-theme="dark"] .btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn-block{width:100%}
form .btn-block{margin-top:18px}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn.loading{position:relative; color:transparent !important}
.btn.loading::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.theme-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem;
  display:grid; place-items:center; flex:0 0 auto;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.theme-btn:active{transform:scale(.92) rotate(-15deg)}
.theme-btn:hover{color:var(--accent); border-color:var(--accent)}

/* ── Trường nhập ─────────────────────────────────────────────────────────── */
.fld{display:block; font-size:.85rem; font-weight:600; color:var(--muted); margin:16px 0 6px}
.input-ic{position:relative; display:flex; align-items:center}
.input-ic > i:first-child{position:absolute; left:14px; color:var(--soft); font-size:1.05rem; pointer-events:none}
.input{
  width:100%; padding:14px 14px 14px 42px; font:inherit; font-size:1.02rem;
  color:var(--txt); background:var(--panel); border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
.input::placeholder{color:var(--soft)}
.eye{
  position:absolute; right:8px; width:34px; height:34px; border:0; border-radius:9px;
  background:transparent; color:var(--soft); cursor:pointer; display:grid; place-items:center;
}
.eye:hover{color:var(--accent); background:var(--bg-2)}

.err{color:var(--bad); font-size:.9rem; min-height:1.2em; margin:8px 0 0; font-weight:500}
.err:empty{margin:0; min-height:0}
.fine{color:var(--muted); font-size:.85rem; margin:16px 0 0}
.hint{color:var(--muted); font-size:.92rem; margin:0 0 14px}
.link-btn{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:none; border:0; padding:0; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--accent); cursor:pointer;
}
.link-btn:hover{text-decoration:underline}
.link-btn[disabled]{color:var(--soft); cursor:not-allowed; text-decoration:none}
.back{
  display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0;
  color:var(--muted); font:inherit; font-size:.88rem; cursor:pointer; margin-bottom:14px;
}
.back:hover{color:var(--accent)}

/* ── Thông báo ───────────────────────────────────────────────────────────── */
.alert{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  font-size:.92rem; margin:0 0 16px; border:1px solid transparent;
}
.alert i{font-size:1.05rem; line-height:1.4; flex:0 0 auto}
.alert.info{background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb,var(--info) 22%, transparent)}
.alert.warn{background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 22%, transparent)}
.alert.ok  {background:var(--good-bg); color:var(--good); border-color:color-mix(in srgb,var(--good) 22%, transparent)}
.alert.bad {background:var(--bad-bg);  color:var(--bad);  border-color:color-mix(in srgb,var(--bad) 22%, transparent)}

/* ════════════════════════ TRANG ĐĂNG NHẬP ════════════════════════ */
/* NỀN THƯƠNG HIỆU CHO MỌI MÀN HÌNH.
   Trên PC ảnh nền nằm ở cột trái (.auth-side). Trên mobile không đủ chỗ cho cột
   đó, nhưng KHÔNG để trang trắng trơn: chính <body> mang ảnh nền + lớp cam, phần
   đầu trang thành "hero" gọn (logo + tiêu đề), thẻ đăng nhập nổi lên trên.
   --hero = ảnh nền, do index.php truyền vào .auth-body/.auth-side. */
.auth-body{
  min-height:100vh;
  background-color:#b25005;
  background-image:linear-gradient(165deg,rgba(209,96,10,.93),rgba(236,119,0,.84) 48%,rgba(150,66,4,.96)), var(--hero);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;
}
[data-theme="dark"] .auth-body{
  background-color:#14100c;
  background-image:linear-gradient(165deg,rgba(28,20,12,.93),rgba(58,32,8,.9) 48%,rgba(14,10,7,.97)), var(--hero);
}
/* minmax(0,1fr): không cho nội dung (thẻ 420px) đẩy cột rộng hơn màn hình → mobile
   không bị tràn ngang. */
/* rows: auto 1fr → chỉ cột đăng nhập giãn ra chiếm phần cao còn thừa, dải hero
   không bị kéo cao tạo khoảng trống giữa tiêu đề và thẻ đăng nhập. */
.auth-wrap{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; min-height:100vh}

/* Mobile: .auth-side thu thành dải hero trong suốt (nền đã ở body) */
.auth-side{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:26px 20px 4px; text-align:center; color:#fff;
  background:none;
}
.auth-side .side-logo{height:34px; width:auto}
.auth-side h1{
  font-size:1.42rem; font-weight:800; letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(80,34,0,.35); overflow-wrap:anywhere;
}
.auth-side p{margin:0; max-width:38ch; font-size:.92rem; opacity:.95}
.side-points, .side-foot{display:none}

.auth-main{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:18px 18px 30px; width:100%; min-width:0;
}
.auth-top{width:100%; max-width:420px; display:flex; align-items:center; justify-content:flex-end; margin-bottom:12px}
.top-logo{height:30px; width:auto; display:none}      /* mobile: logo đã ở hero */
[data-theme="dark"] .top-logo.light{display:none}

.auth-card{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:26px 22px 24px;
  /* Nổi trên nền ảnh → cần bóng sâu hơn bóng thẻ thường */
  box-shadow:0 2px 6px rgba(50,25,0,.12), 0 18px 46px rgba(50,25,0,.28);
}
/* Nút sáng/tối nằm trên nền cam → kính mờ, không phải khối trắng */
.auth-main .theme-btn{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); color:#fff;
  backdrop-filter:blur(6px);
}
.auth-main .theme-btn:hover{background:rgba(255,255,255,.28); border-color:#fff; color:#fff}
.auth-card h2{font-size:1.4rem; font-weight:800; margin:0 0 6px}
.auth-card .lead{color:var(--muted); font-size:.95rem; margin:0 0 4px}
.auth-card .lead b{color:var(--txt)}

.step{display:none}
/* Chuyển bước đăng nhập: trượt lên + hiện dần, cùng nhịp với trang hồ sơ */
.step.is-active{display:block; animation:stepIn .42s var(--ease-out) both}
@keyframes stepIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* Ô nhập OTP */
.otp-boxes{display:flex; gap:8px; justify-content:space-between}
.otp{
  flex:1 1 0; min-width:0; height:56px; text-align:center; font-size:1.4rem; font-weight:700;
  color:var(--txt); background:var(--panel); border:1px solid var(--line); border-radius:12px;
  font-family:inherit; font-variant-numeric:tabular-nums;
}
.otp:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
.otp.filled{border-color:var(--accent)}

.devcode{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--accent-soft); border:1px dashed var(--accent); border-radius:12px;
  padding:12px 16px; margin:0 0 16px;
}
.devcode span{font-size:.85rem; font-weight:600; color:var(--muted)}
.devcode b{font-size:1.5rem; letter-spacing:.22em; color:var(--accent); font-variant-numeric:tabular-nums}

/* Thanh đo độ mạnh mật khẩu */
.meter{height:6px; background:var(--bg-2); border-radius:100px; overflow:hidden; margin:10px 0 6px}
.meter > i{display:block; height:100%; width:0; background:var(--bad); border-radius:100px; transition:width .2s, background .2s}
.meter-txt{font-size:.82rem; color:var(--muted)}

/* Footer nằm trên nền cam (mobile) → chữ sáng */
.auth-foot{margin-top:20px; text-align:center; font-size:.85rem; color:rgba(255,255,255,.86)}
.auth-foot a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45)}
.auth-foot .cr{margin-top:6px; color:rgba(255,255,255,.68); font-size:.8rem}

/* Máy rất nhỏ: hero mỏng lại để thẻ đăng nhập lên cao, đỡ phải cuộn */
@media (max-width:400px){
  .auth-side{padding:20px 16px 2px; gap:7px}
  .auth-side .side-logo{height:29px}
  .auth-side h1{font-size:1.24rem}
  .auth-side p{font-size:.87rem}
  .auth-card{padding:22px 17px 20px; border-radius:18px}
}

/* PC: nền ảnh chuyển về cột thương hiệu bên trái, phần còn lại nền sáng bình thường */
@media (min-width:900px){
  .auth-body{background:var(--bg)}
  [data-theme="dark"] .auth-body{background:var(--bg)}
  .auth-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows:1fr}
  .auth-side{
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
    gap:18px; padding:54px 56px; color:#fff; text-align:left;
    background-image:linear-gradient(150deg,rgba(209,96,10,.93),rgba(236,119,0,.86) 55%,rgba(178,80,5,.94)), var(--hero);
    background-size:cover; background-position:center;
  }
  .auth-side .side-logo{height:38px; width:auto; align-self:flex-start; margin-bottom:8px}
  .auth-side h1{font-size:2.35rem; font-weight:800; letter-spacing:-.015em; text-shadow:none}
  .auth-side h1 span{display:block}          /* PC: mỗi vế một dòng */
  .auth-side p{margin:0; max-width:34ch; font-size:1rem; opacity:.95}
  .side-points{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:11px}
  .side-points li{display:flex; align-items:center; gap:11px; font-size:.96rem; opacity:.96}
  .side-points i{font-size:1.1rem; opacity:.9}
  .side-foot{display:block; margin-top:26px; font-size:.92rem; opacity:.92}
  .auth-main{justify-content:center; padding:40px}
  .auth-top{justify-content:space-between; margin-bottom:20px}
  .top-logo{display:block}
  .top-logo.dark{display:none}
  [data-theme="dark"] .top-logo.light{display:none}
  [data-theme="dark"] .top-logo.dark{display:block}
  .auth-card{padding:32px 30px 28px; box-shadow:var(--shadow)}
  .auth-main .theme-btn{
    background:var(--panel); border-color:var(--line); color:var(--muted); backdrop-filter:none;
  }
  .auth-main .theme-btn:hover{color:var(--accent); border-color:var(--accent); background:var(--panel)}
  .auth-foot{color:var(--muted)}
  .auth-foot a{color:var(--muted); text-decoration:none}
  .auth-foot a:hover{text-decoration:underline}
  .auth-foot .cr{color:var(--soft)}
}

/* ════════════════════════ TRANG HỒ SƠ ════════════════════════
 *  Ngôn ngữ thị giác: "spa yên tĩnh" — nhiều khoảng thở, bo góc lớn, cam ấm
 *  dùng tiết chế (chỉ ở điểm nhấn), chuyển động chậm & mượt.
 *  Mọi chuyển động đều tắt khi máy bật "giảm chuyển động" (cuối mục này).
 * ------------------------------------------------------------------------- */

/* Nền trang: hai vệt sáng ấm rất nhẹ thay cho nền phẳng — có chiều sâu mà
   không làm nhiễu nội dung. Cố định để không trôi khi cuộn. */
body{
  background-image:
    radial-gradient(1100px 620px at 12% -8%,  color-mix(in srgb,var(--accent) 11%, transparent), transparent 62%),
    radial-gradient(900px  560px at 92% 4%,   color-mix(in srgb,var(--accent-2) 9%, transparent), transparent 60%);
  background-attachment:fixed; background-repeat:no-repeat;
}

/* ── Thanh trên: kính mờ, nổi bóng khi bắt đầu cuộn ─────────────────────── */
.topbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--panel) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease);
}
.topbar.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -12px rgba(60,35,10,.30);
  background:color-mix(in srgb,var(--panel) 92%, transparent);
}
.topbar .wrap{
  max-width:1220px; margin:0 auto; padding:0 22px; height:64px;   /* khớp .shell */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; transition:opacity .25s var(--ease)}
.brand:hover{opacity:.75}
.brand img{height:28px; width:auto}
.brand img.dark{display:none}
[data-theme="dark"] .brand img.light{display:none}
[data-theme="dark"] .brand img.dark{display:block}
.tb-right{display:flex; align-items:center; gap:10px}

.menu{position:relative}
.menu-btn{
  display:flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:100px; padding:5px 13px 5px 5px; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--txt); cursor:pointer; max-width:230px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.menu-btn:hover{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
.menu-btn:active{transform:scale(.98)}
.menu-btn .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu-btn > i{color:var(--muted); font-size:.8rem; transition:transform .3s var(--ease)}
.menu.open .menu-btn > i{transform:rotate(180deg)}

.ava{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent-2),var(--accent) 60%,#c2610a);
  color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:.02em;
}
.ava.sm{width:28px; height:28px; font-size:.78rem; font-weight:700}

.menu-pop{
  position:absolute; right:0; top:calc(100% + 10px); min-width:224px; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 4px 10px rgba(60,35,10,.07), 0 22px 48px -16px rgba(60,35,10,.30);
  padding:7px; display:grid; gap:2px;
  transform-origin:top right; animation:popIn .26s var(--ease-out) both;
}
.menu-pop > *{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border:0; border-radius:11px;
  background:none; font:inherit; font-size:.93rem; color:var(--txt); text-align:left; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.menu-pop > * i{color:var(--muted); transition:color .2s var(--ease)}
.menu-pop > *:hover{background:var(--bg-2); text-decoration:none; padding-left:15px}
.menu-pop > *:hover i{color:var(--accent)}
.menu-pop .danger, .menu-pop .danger i{color:var(--bad)}

/* ══ KHUNG & ĐIỀU HƯỚNG ═══════════════════════════════════════════════════
 *  Cùng bốn mục, hai chỗ đặt:
 *    · mobile  → .tabbar cố định đáy màn hình (kiểu app)
 *    · PC      → .sidebar cột trái, dính dưới thanh trên
 *  Đổi mục KHÔNG tải lại trang: mỗi mục là một <section class="view">, JS bật
 *  .is-active theo #hash (xem app.js, mục ROUTER).
 * ------------------------------------------------------------------------ */
.shell{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr)}
/* ⚠️ KHÔNG đặt `margin:0 auto` / `justify-self:center` cho .page.
   .page là GRID ITEM: auto-margin làm nó chuyển sang shrink-to-fit → nhận
   min-content của nội dung bên trong (thanh lọc nowrap ~530px) thay vì bám
   đúng bề ngang cột → tràn ngang trên máy hẹp. Căn giữa đã do .shell lo. */
.page{margin:0; padding:22px 18px 40px; min-width:0}

/* Chỗ trống cuối trang cho thanh dưới khỏi che nội dung (kể cả vùng an toàn
   iPhone). Trên PC không có thanh dưới → trả lại 0 ở media query. */
.app{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

/* ── Trang con ──────────────────────────────────────────────────────────── */
.view{display:none}
.view.is-active{display:block}
/* Chuyển mục: trượt nhẹ lên + hiện dần. JS gắn lại class để chạy lại animation. */
.motion .view.is-active{animation:viewIn .4s var(--ease-out) both}
@keyframes viewIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ── Cột trái (PC) ──────────────────────────────────────────────────────── */
.sidebar{display:none}
.side-me{
  display:flex; align-items:center; gap:12px; padding:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.side-me .ava{width:46px; height:46px; font-size:.95rem}
.side-me > div{min-width:0; display:grid; gap:6px; justify-items:start}
.side-me b{
  font-size:.95rem; font-weight:700; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.side-nav{display:grid; gap:4px}
.side-nav a{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:12px 14px; border-radius:14px; font-size:.95rem; font-weight:600;
  color:var(--muted); border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.side-nav a:hover{background:var(--bg-2); color:var(--txt); text-decoration:none; transform:translateX(2px)}
.side-nav a > i{font-size:1.15rem; width:22px; text-align:center; flex:0 0 auto}
.side-nav a > span{flex:1 1 auto; min-width:0}
.side-nav a > em{
  font-style:normal; font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:100px;
  background:var(--bg-2); color:var(--muted); flex:0 0 auto;
  transition:background .25s var(--ease), color .25s var(--ease);
}
/* Mục đang xem: nền cam mềm + vạch cam bên trái */
.side-nav a.on{
  background:var(--accent-soft); color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 24%, transparent);
}
.side-nav a.on::before{
  content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:100px; background:var(--accent);
}
.side-nav a.on > em{background:var(--accent); color:var(--accent-ink)}

.side-help{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:15px 16px;
  background:var(--panel); border:1px dashed var(--line); border-radius:18px;
}
.side-help > i{font-size:1.25rem; color:var(--accent)}
.side-help span{display:block; font-size:.8rem; color:var(--muted)}
.side-help a{font-weight:800; font-size:1rem}

/* ── Thanh dưới (mobile) ────────────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--panel);                                   /* nền lót */
  background:color-mix(in srgb,var(--panel) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 24px -14px rgba(60,35,10,.45);
}
.tabbar a{
  display:grid; justify-items:center; gap:3px; padding:9px 4px 8px;
  color:var(--muted); font-size:.7rem; font-weight:600; text-decoration:none;
  transition:color .25s var(--ease);
}
.tabbar a:hover{text-decoration:none}
.tb-ic{
  position:relative; display:grid; place-items:center;
  width:46px; height:30px; border-radius:100px; font-size:1.2rem;
  transition:background .3s var(--ease), transform .35s var(--ease-out), color .25s var(--ease);
}
/* Huy hiệu số ở góc icon */
.tb-ic em{
  position:absolute; top:-3px; right:5px; font-style:normal;
  min-width:17px; height:17px; padding:0 4px; border-radius:100px;
  background:var(--accent); color:var(--accent-ink);
  font-size:.62rem; font-weight:800; line-height:17px; text-align:center;
  border:2px solid var(--panel);
}
.tb-lb{line-height:1.2}
.tabbar a.on{color:var(--accent)}
.tabbar a.on .tb-ic{background:var(--accent-soft); transform:translateY(-2px)}
.tabbar a:active .tb-ic{transform:scale(.9)}

/* ── Liên kết "Xem tất cả" ở đầu khối ───────────────────────────────────── */
.more{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700;
  color:var(--accent); white-space:nowrap;
}
.more i{font-size:.85rem; transition:transform .25s var(--ease)}
.more:hover{text-decoration:none}
.more:hover i{transform:translateX(3px)}

/* ── Danh sách hành động (mục Hồ sơ) ────────────────────────────────────── */
.acts{display:grid; gap:10px}
.act{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border:1px solid var(--line); border-radius:16px;
  background:var(--panel); color:var(--txt); font:inherit; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.act:hover{
  border-color:color-mix(in srgb,var(--accent) 34%, var(--line));
  background:var(--bg-2); text-decoration:none; transform:translateX(3px);
}
.act > i:first-child{
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent); font-size:1.1rem;
}
.act > div{flex:1 1 auto; min-width:0}
.act b{display:block; font-size:.97rem; font-weight:700}
.act span{display:block; font-size:.82rem; color:var(--muted)}
.act .go{color:var(--soft); font-size:.9rem; transition:transform .25s var(--ease)}
.act:hover .go{transform:translateX(3px); color:var(--accent)}
.act.danger > i:first-child{background:var(--bad-bg); color:var(--bad)}
.act.danger b{color:var(--bad)}
.act.danger:hover{border-color:color-mix(in srgb,var(--bad) 36%, var(--line))}

/* ── PC: bật cột trái, tắt thanh dưới ───────────────────────────────────── */
@media (min-width:1040px){
  .app{padding-bottom:0}
  .tabbar{display:none}
  .shell{grid-template-columns:262px minmax(0,1fr); gap:26px; padding:24px 22px 0}
  .sidebar{
    display:block; align-self:start;
    position:sticky; top:88px;                 /* 64px thanh trên + khoảng thở */
  }
  .page{padding:0 0 44px}
}

/* ══ THẺ THÀNH VIÊN (hero) ══════════════════════════════════════════════
   Nửa trên là "mặt thẻ": ảnh spa phủ lớp cam thương hiệu, avatar có quầng
   sáng, tên + hạng. Nửa dưới là thông tin hành chính trên nền panel để đọc
   thoải mái — tránh đổ cả khối cam lớn gây chói. */
.hero{
  position:relative; overflow:hidden; margin-bottom:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:26px;
  box-shadow:0 1px 3px rgba(60,40,20,.05), 0 18px 44px -22px rgba(60,40,20,.28);
}
.hero-head{
  position:relative; padding:30px 26px 26px; color:#fff; isolation:isolate;
  background-color:#c2610a;
  background-image:
    linear-gradient(118deg,rgba(178,80,5,.95) 0%,rgba(224,110,4,.88) 46%,rgba(255,154,61,.72) 100%),
    var(--hero);
  background-size:cover; background-position:center 38%;
}
[data-theme="dark"] .hero-head{
  background-color:#241206;
  background-image:
    linear-gradient(118deg,rgba(28,18,10,.95) 0%,rgba(74,38,8,.9) 46%,rgba(140,72,14,.75) 100%),
    var(--hero);
}
/* Vệt sáng chéo rất nhẹ cho mặt thẻ đỡ phẳng */
.hero-head::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 100% at 88% -20%,rgba(255,255,255,.26),transparent 58%);
}
.hero-id{display:flex; align-items:center; gap:17px}
.ava-ring{
  position:relative; flex:0 0 auto; padding:4px; border-radius:50%;
  background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(255,255,255,.25));
  box-shadow:0 10px 26px -8px rgba(40,18,0,.55);
}
.hero .ava{background:linear-gradient(140deg,#fff,#ffe9d2); color:#c2610a}
.hero-name{min-width:0}
.hello{
  display:block; font-size:.83rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; opacity:.82; margin-bottom:2px;
}
.hero-name h1{
  font-size:1.5rem; font-weight:800; letter-spacing:-.015em;
  text-shadow:0 1px 14px rgba(70,30,0,.28); overflow-wrap:anywhere;
}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
/* Trên mặt thẻ cam: chip dùng kính mờ trắng */
.hero-head .chip{
  background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.3); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.81rem; font-weight:600;
  background:var(--bg-2); color:var(--muted); border:1px solid var(--line);
  padding:5px 11px; border-radius:100px;
}
.chip.lg{font-size:.9rem; padding:8px 14px; color:var(--txt)}
.tier{
  display:inline-flex; align-items:center; gap:6px; font-size:.81rem; font-weight:700;
  padding:5px 12px; border-radius:100px; color:#fff; background:var(--accent);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
}
.tier.dia {background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.tier.pla {background:linear-gradient(135deg,#0f766e,#2dd4bf)}
.tier.gold{background:linear-gradient(135deg,#a15c05,#fbbf24)}
.tier.sil {background:linear-gradient(135deg,#475569,#94a3b8)}
.tier.mem {background:linear-gradient(135deg,#8a4304,#ff9a3d)}

.id-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:20px 30px; margin:0; padding:24px 26px; background:var(--panel);
}
/* Cố tình KHÔNG kẻ ô: hàng cuối thường thiếu ô, kẻ khung sẽ lộ ô trống lệch.
   Khoảng trắng rộng + nhãn nhỏ chữ hoa đã đủ tách các trường. */
.id-grid > div.wide{grid-column:1/-1}
.id-grid dt{
  font-size:.72rem; font-weight:700; color:var(--soft);
  text-transform:uppercase; letter-spacing:.06em;
}
.id-grid dd{margin:5px 0 0; font-size:1rem; font-weight:600; overflow-wrap:anywhere}

/* ══ LỊCH HẸN SẮP TỚI ══ */
.appt{
  position:relative; display:flex; gap:13px; align-items:flex-start; margin-bottom:16px;
  background:var(--good-bg); color:var(--good);
  border:1px solid color-mix(in srgb,var(--good) 24%, transparent);
  border-radius:18px; padding:15px 18px; font-size:.95rem; overflow:hidden;
}
.appt > i{font-size:1.25rem; margin-top:1px}
.appt b{color:inherit}
.appt .dim{color:inherit; opacity:.75}
/* Nhịp thở nhẹ ở mép trái để mắt bắt được lịch hẹn */
.appt::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--good); opacity:.55; animation:breathe 3.6s ease-in-out infinite;
}

/* ══ SỐ LIỆU TÓM TẮT ══════════════════════════════════════════════════════
   Vòng tiến độ liệu trình là con số khách quan tâm nhất → cho nó một thẻ
   riêng, to, bên trái; bốn số phụ xếp lưới bên phải. */
.kpis{display:grid; gap:13px; margin-bottom:22px}
.kpi-tiles{display:grid; gap:13px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:780px){
  .kpis.has-ring{grid-template-columns:290px minmax(0,1fr)}
}
/* Không có vòng tiến độ thì 4 ô trải hết bề ngang */
@media (min-width:780px){
  .kpis:not(.has-ring) .kpi-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.kpi{
  display:flex; align-items:center; gap:13px; background:var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.kpi:hover{
  transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 34%, var(--line));
  box-shadow:0 2px 6px rgba(60,40,20,.06), 0 16px 32px -18px rgba(60,40,20,.42);
}
.k-ic{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent); font-size:1.15rem;
  transition:transform .35s var(--ease-out), background .3s var(--ease);
}
.kpi:hover .k-ic{transform:scale(1.08) rotate(-4deg)}
.kpi b{display:block; font-size:1.34rem; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums}
.kpi b i{font-size:.85rem; font-weight:600; color:var(--muted); font-style:normal}
/* Chỉ nhãn (span con TRỰC TIẾP của khối chữ) mới xuống dòng — span nằm trong <b>
   là con số đang đếm, phải ở cùng dòng với đơn vị. */
.kpi > div > span{display:block; font-size:.8rem; color:var(--muted); margin-top:1px}

/* Thẻ vòng tiến độ */
.kpi-ring{
  flex-direction:column; gap:12px; text-align:center; padding:22px 18px;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 70%),
    var(--panel);
}
.ring-wrap{position:relative; width:142px; height:142px; flex:0 0 auto}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-linecap:round}
.ring .ring-bg{stroke:var(--bg-2); stroke-width:11}
/* --off (inline) = độ lệch nét ứng với phần trăm. Cùng quy ước với .bar:
   không JS → vẽ đúng ngay; có JS → chạy từ vòng rỗng lên. */
.ring .ring-fg{
  stroke:url(#ringGrad); stroke-width:11;
  stroke-dasharray:327; stroke-dashoffset:var(--off,327);
}
.motion .ring .ring-fg{stroke-dashoffset:327; transition:stroke-dashoffset 1.5s var(--ease-out)}
.motion .ring .ring-fg.is-on{stroke-dashoffset:var(--off,327)}
.ring-txt{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1.15; text-align:center;
}
.ring-txt b, .ring-txt > span{white-space:nowrap}
.ring-txt b{font-size:2rem; font-weight:800; letter-spacing:-.02em}
.ring-txt b i{font-size:1rem; font-weight:700; font-style:normal; color:var(--muted)}
/* > span: chỉ nhãn "Tiến độ". Span trong <b> là con số, giữ nguyên cỡ & màu. */
.ring-txt > span{font-size:.76rem; color:var(--muted); font-weight:600}
.ring-foot{display:grid; gap:2px}
.ring-foot b{font-size:1.02rem; font-weight:800}
.ring-foot span{font-size:.81rem; color:var(--muted)}

/* ══ KHỐI NỘI DUNG ══ */
.block{
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 1px 3px rgba(60,40,20,.045), 0 16px 40px -26px rgba(60,40,20,.30);
  padding:24px; margin-bottom:18px;
}
.block-head{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.block-head h2{
  display:flex; align-items:center; gap:11px; font-size:1.14rem; font-weight:800;
  letter-spacing:-.01em;
}
/* Icon tiêu đề đặt trong ô cam mềm — mốc thị giác cho từng khối */
.block-head h2 i{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:1rem; flex:0 0 auto;
}

.seg{
  display:flex; flex-wrap:wrap; gap:4px; background:var(--bg-2); border-radius:14px; padding:4px;
  border:1px solid var(--line);
}
.seg button{
  position:relative; border:0; background:none; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--muted); padding:8px 14px; border-radius:10px; cursor:pointer; white-space:nowrap;
  transition:color .25s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.seg button:hover{color:var(--txt)}
.seg button.on{
  background:var(--panel); color:var(--accent); box-shadow:0 1px 2px rgba(60,40,20,.10);
}
.seg button:active{transform:scale(.97)}

/* ══ DANH SÁCH DỊCH VỤ ĐÃ SỬ DỤNG ═══════════════════════════════════════
   Phần quan trọng nhất của trang: mỗi liệu trình là một thẻ có dải màu
   trạng thái ở mép trái, thanh tiến độ dày và số buổi còn lại nổi rõ. */
.svc-list{display:grid; gap:13px}
.svc{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:18px; padding:17px 18px 16px 21px;
  background:var(--panel);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Dải trạng thái mép trái — gradient mềm thay cho viền đặc thô */
.svc::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
}
.svc.done::before{background:linear-gradient(180deg,color-mix(in srgb,var(--good) 65%, #fff),var(--good))}
.svc.plain::before{background:linear-gradient(180deg,var(--line),var(--soft))}
.svc:hover{
  transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 30%, var(--line));
  box-shadow:0 2px 6px rgba(60,40,20,.05), 0 18px 34px -20px rgba(60,40,20,.45);
}
.svc.done{background:color-mix(in srgb,var(--good-bg) 42%, var(--panel))}

.svc-top{display:flex; gap:13px; align-items:flex-start; justify-content:space-between}
.svc-name h3{font-size:1.04rem; font-weight:700; letter-spacing:-.005em}
.svc-meta{display:flex; flex-wrap:wrap; gap:6px 15px; margin-top:8px; font-size:.83rem; color:var(--muted)}
.svc-meta span{display:inline-flex; align-items:center; gap:5px}
.svc-meta i{color:var(--soft)}
.pill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap;
  font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:100px;
}
.pill.ok{background:var(--good-bg); color:var(--good)}
.pill.go{background:var(--warn-bg); color:var(--warn)}
.pill.neutral{background:var(--bg-2); color:var(--muted); border:1px solid var(--line)}

.bar{
  height:10px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:100px; overflow:hidden; margin:16px 0 7px;
}
/* --w (đặt inline trong home.php) = độ dài đích của thanh.
   Không có JS: lấy thẳng --w, thanh hiện đúng ngay.
   Có JS (.motion): bắt đầu từ 0, JS gắn .is-on khi thẻ lọt vào tầm mắt → chạy. */
.bar > i{
  display:block; height:100%; width:var(--w,0); border-radius:100px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  position:relative;
}
.motion .bar > i{width:0; transition:width 1.15s var(--ease-out)}
.motion .bar > i.is-on{width:var(--w,0)}
/* Ánh sáng chạy dọc thanh tiến độ khi liệu trình đang thực hiện */
.svc.active .bar > i::after{
  content:""; position:absolute; inset:0; border-radius:100px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%); animation:sheen 2.8s var(--ease) 1.2s infinite;
}
.svc.done .bar > i{background:linear-gradient(90deg,var(--good),color-mix(in srgb,var(--good) 55%, #fff))}
.bar-txt{display:flex; justify-content:space-between; font-size:.83rem; color:var(--muted)}
.bar-txt b{color:var(--txt)}
.svc-foot{
  display:flex; flex-wrap:wrap; gap:7px 17px; margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--line); font-size:.83rem; color:var(--muted);
}
.svc-foot span{display:inline-flex; align-items:center; gap:6px}
.svc-foot i{color:var(--soft)}
.svc-foot .amt{color:var(--txt); font-weight:700; margin-left:auto}
.svc-foot .amt i{color:var(--accent)}

/* ══ TAB LỊCH SỬ ══ */
.tab{display:none}
.tab.is-active{display:block; animation:tabIn .42s var(--ease-out) both}

.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px}
.tbl{width:100%; border-collapse:collapse; font-size:.92rem}
.tbl th{
  text-align:left; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--soft); padding:11px 13px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:13px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tbody tr{transition:background .22s var(--ease)}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th.r, .tbl td.r{text-align:right}
/* Dòng phụ trong ô bảng (nhóm dịch vụ dưới tên gói…) */
.tbl .sub{display:block; font-size:.8rem; color:var(--muted); margin-top:3px}

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip.lg{transition:transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.chip.lg:hover{transform:translateY(-2px); border-color:var(--accent); color:var(--accent)}

.mini{font-size:.9rem; font-weight:700; color:var(--muted); margin:20px 0 10px}
.list{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.93rem}
.list li{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--bg-2); border:1px solid transparent; border-radius:12px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.list li:hover{border-color:var(--line); transform:translateX(3px)}
.list i{color:var(--accent)}

.empty{text-align:center; padding:44px 18px; color:var(--muted)}
.empty i{
  font-size:1.7rem; color:var(--soft); display:grid; place-items:center; margin:0 auto 14px;
  width:64px; height:64px; border-radius:50%; background:var(--bg-2);
}
.empty p{margin:0 0 6px; font-weight:700; color:var(--txt); font-size:1rem}
.empty span{font-size:.88rem; display:block; max-width:44ch; margin:0 auto}
.empty.sm{padding:28px 12px}
.empty.sm i{font-size:1.3rem; width:48px; height:48px; margin-bottom:10px}

.src-note{font-size:.83rem; color:var(--muted); text-align:center; margin:14px 0 0; line-height:1.75}
.src-note i{color:var(--soft)}
.warn-txt{color:var(--warn)}

.page-foot{
  max-width:1120px; margin:0 auto; padding:26px 18px 40px;
  text-align:center; font-size:.85rem; color:var(--muted);
  border-top:1px solid var(--line);
}
.page-foot a{color:var(--muted); transition:color .22s var(--ease)}
.page-foot a:hover{color:var(--accent)}
.page-foot .cr{margin-top:7px; color:var(--soft); font-size:.8rem}

/* ══ HỘP THOẠI ══ */
.modal{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px;
  background:rgba(28,16,4,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .25s var(--ease) both;
}
.modal-card{
  width:100%; max-width:430px; background:var(--panel); border:1px solid var(--line);
  border-radius:22px; box-shadow:0 30px 70px -20px rgba(30,15,0,.55); padding:24px;
  animation:modalIn .38s var(--ease-out) both;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.modal-head h3{display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:800}
.modal-head h3 i{color:var(--accent)}
.modal-head .x{
  border:0; background:var(--bg-2); color:var(--muted); width:34px; height:34px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center;
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.modal-head .x:hover{background:var(--bad-bg); color:var(--bad); transform:rotate(90deg)}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
.modal-foot .btn{padding:11px 18px; font-size:.95rem}

.prose{max-width:760px}
.prose h1{font-size:1.5rem; font-weight:800; margin:8px 0 14px}
.prose h2{font-size:1.08rem; font-weight:700; margin:26px 0 8px}
.prose p, .prose li{color:var(--muted)}
.prose b{color:var(--txt)}
.prose ul{padding-left:20px; display:grid; gap:6px}

/* ══ CHUYỂN ĐỘNG ════════════════════════════════════════════════════════
   [data-reveal] — phần tử hiện dần khi cuộn tới (app.js gắn .in).
   --d = độ trễ so le, app.js đặt cho từng thẻ trong danh sách.
   Trạng thái "ẩn ban đầu" CHỈ áp dụng khi <html> có .motion — class này do
   script trong <head> gắn. JS hỏng / bị chặn → nội dung hiện bình thường. */
.motion [data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.motion [data-reveal].in{opacity:1; transform:none}

/* Thẻ dịch vụ khi đổi bộ lọc */
.svc.filter-in{animation:cardIn .45s var(--ease-out) both; animation-delay:var(--d,0ms)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{
  from{opacity:0; transform:translateY(-8px) scale(.96)}
  to{opacity:1; transform:none}
}
@keyframes modalIn{
  from{opacity:0; transform:translateY(18px) scale(.97)}
  to{opacity:1; transform:none}
}
@keyframes tabIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}
@keyframes cardIn{
  from{opacity:0; transform:translateY(12px) scale(.985)}
  to{opacity:1; transform:none}
}
@keyframes sheen{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(200%)}
}
@keyframes breathe{
  0%,100%{opacity:.35}
  50%{opacity:.9}
}

/* Tôn trọng thiết lập "giảm chuyển động" của máy khách */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1; transform:none}
}

/* ── Điện thoại nhỏ: bảng đổi thành thẻ ─────────────────────────────────── */
@media (max-width:640px){
  .page{padding:16px 13px 34px}
  .topbar .wrap{height:58px; padding:0 13px}
  .hero{border-radius:20px}
  .hero-head{padding:22px 18px 20px}
  .block{padding:18px 16px; border-radius:20px}
  .hero-name h1{font-size:1.22rem}
  .hero .ava{width:52px; height:52px; font-size:1rem}
  .id-grid{gap:16px 22px; padding:18px 17px}
  .kpi{padding:14px; gap:11px}
  .kpi b{font-size:1.18rem}
  .kpi-ring{padding:20px 16px}
  .ring-wrap{width:136px; height:136px}
  .ring-txt b{font-size:1.75rem}
  .menu-btn .nm{display:none}
  .menu-btn{padding:5px}
  .block-head{align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:16px}
  /* .tight = đầu khối chỉ có tiêu đề + một liên kết ngắn → không cần xuống dòng */
  .block-head.tight{flex-direction:row; align-items:center; gap:10px}
  .topbar .wrap{padding:0 13px}
  .block-head h2{font-size:1.06rem}
  /* Bộ lọc/tab: xuống hàng 2 ô mỗi dòng thay vì cuộn ngang — cuộn ngang trên
     điện thoại hay giấu mất mục cuối, khách không biết là còn nữa. */
  .seg{width:100%; flex-wrap:wrap; gap:4px}
  .seg button{flex:1 1 calc(50% - 4px); min-width:0; padding:9px 10px; text-align:center}
  .svc{padding:15px 15px 14px 18px; border-radius:16px}
  .svc:hover{transform:none}                 /* mobile không có hover thật */
  .kpi:hover{transform:none}
  .svc-foot .amt{margin-left:0}

  .tbl thead{display:none}
  .tbl, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%}
  .tbl tr{
    border:1px solid var(--line); border-radius:12px; padding:6px 12px; margin-bottom:10px;
    background:var(--bg-2);
  }
  .tbl td{border:0; padding:7px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; text-align:right}
  /* Dòng phụ xuống hàng riêng, không chen ngang tên dịch vụ */
  .tbl td .sub{flex:0 0 100%; text-align:right; margin-top:0}
  .tbl td::before{
    content:attr(data-l); font-size:.78rem; font-weight:600; color:var(--muted);
    text-align:left; flex:0 0 auto;
  }
  .tbl td.r{text-align:right}
  .svc-top{flex-direction:column; gap:8px}
  .otp{height:50px; font-size:1.2rem}
}

/* In: ẩn thứ không cần */
@media print{
  .topbar, .page-foot, .seg, .theme-btn, .menu, .modal{display:none !important}
  body{background:#fff; background-image:none}
  .block, .hero{box-shadow:none; break-inside:avoid}
  .hero-head{background:#fff; color:#000}
  .motion [data-reveal]{opacity:1; transform:none}
}

/* Sản phẩm / thẻ tài khoản: không phải liệu trình → dải trạng thái trung tính */
.svc.goods::before{background:linear-gradient(180deg,var(--line),var(--soft))}

/* Màn hình rất hẹp: avatar căn theo dòng tên đầu, đừng dồn giữa */
@media (max-width:520px){
  .hero-id{align-items:flex-start}
  .hero-name h1{font-size:1.14rem}
  .kpi-tiles{gap:11px}
  .svc-top{gap:10px}
}

/* ══ CỤM LIÊN HỆ (kh_contact) — nút "Liên hệ" gọi hotline + icon Zalo/Messenger ══
 *  Icon bấm mở thẳng link, không in link ra ngoài. Hotline/link ở config['brand']. */
.contact-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.contact-row .c-call{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px;
  border-radius:100px; background:var(--accent); color:#fff;
  font-weight:700; text-decoration:none; transition:transform .15s, filter .15s;
}
.contact-row .c-call span, .contact-row .c-call i{color:inherit}
.contact-row .c-call:hover{filter:brightness(1.06); text-decoration:none; color:#fff}
.contact-row .c-ic{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  text-decoration:none; transition:transform .15s; flex:none;
}
.contact-row .c-call:active, .contact-row .c-ic:active{transform:scale(.93)}
.contact-row .c-ic:hover{transform:translateY(-2px)}
.contact-row .c-zalo svg{width:42px; height:42px; display:block}
.contact-row .c-fb{background:linear-gradient(135deg,#0099ff,#a033ff 60%,#ff5280); color:#fff; font-size:1.25rem}

/* Trang đăng nhập: trong thẻ (mobile) · cột ảnh trái (PC, nền tối) */
.auth-contact{justify-content:center; margin-top:14px}
.side-foot .contact-row{margin-top:14px}
.contact-row.on-dark .c-call, .contact-row.on-dark .c-call:hover{background:#fff; color:var(--accent)}
@media (min-width:900px){ .auth-contact{display:none} }

/* Trang hồ sơ: thẻ liên hệ dưới thẻ thành viên (mobile/tablet); PC dùng cột trái */
.contact-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:18px; padding:14px 16px; background:var(--panel);
  border:1px solid var(--line); border-radius:18px;
}
.contact-card .cc-txt span{display:block; font-size:.8rem; color:var(--muted)}
.contact-card .cc-txt b{font-size:1.05rem}
.side-contact{margin-top:12px; justify-content:center}
@media (min-width:1040px){ .contact-card{display:none} }