/* Mentor Tech · Giao diện mới (03/10) theo bản đặc tả "Buil app".
   Chỉ có hiệu lực khi <html class="gd-moi"> (bật bằng ?giaodien=moi, tắt bằng ?giaodien=cu).
   Không đổi API, không đổi router: chỉ lớp trình bày + vài khung mới do ui.js vẽ. */

/* ===== Giai đoạn 1 · Tokens ===== */
:root.gd-moi{
  --c-primary:#2E7D32; --c-primary-2:#1B5E20; --c-primary-soft:#E8F3E8; --c-on-primary:#fff;
  --c-bg:#F7FAF5; --c-surface:#FFFFFF; --c-surface-2:#F0F5EE; --c-text:#1F2A1F; --c-text-2:#667066; --c-line:#E3EBE1;
  --c-warn:#F59E0B; --c-warn-soft:#FEF3DC; --c-danger:#E53935; --c-danger-soft:#FDECEC; --c-pink:#E8754A; --c-pink-soft:#FDEFE8;
  --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-24:24px;
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px; --s-48:48px;
  --sh-1:0 1px 2px rgba(31,42,31,.05),0 4px 16px rgba(31,42,31,.06);
  /* ánh xạ biến cũ → token mới: toàn bộ trang cũ đổi màu theo, không phải sửa từng chỗ */
  --bg:var(--c-bg); --card:var(--c-surface); --ink:var(--c-text); --muted:var(--c-text-2); --line:var(--c-line);
  --brand:var(--c-primary); --brand-2:var(--c-primary-2); --brand-ink:var(--c-on-primary); --brand-soft:var(--c-primary-soft);
  --warn:#B45309; --warn-soft:var(--c-warn-soft);
}
@media (prefers-color-scheme:dark){:root.gd-moi:not([data-theme="light"]){
  --c-primary:#72C276; --c-primary-2:#2E7D32; --c-primary-soft:#1D321E; --c-on-primary:#0C180C;
  --c-bg:#160f0f; --c-surface:#211717; --c-surface-2:#202920; --c-text:#E8F0E7; --c-text-2:#A2B1A1; --c-line:#2B372A;
  --c-warn-soft:#3A2A1B; --c-danger-soft:#3A1E1E; --c-pink-soft:#3A2C26; --sh-1:none; --warn:#F0A660;
}}
:root.gd-moi[data-theme="dark"]{
  --c-primary:#72C276; --c-primary-2:#2E7D32; --c-primary-soft:#1D321E; --c-on-primary:#0C180C;
  --c-bg:#160f0f; --c-surface:#211717; --c-surface-2:#202920; --c-text:#E8F0E7; --c-text-2:#A2B1A1; --c-line:#2B372A;
  --c-warn-soft:#3A2A1B; --c-danger-soft:#3A1E1E; --c-pink-soft:#3A2C26; --sh-1:none; --warn:#F0A660;
}
.gd-moi body{font-size:16px;line-height:1.55;background:var(--c-bg)}
.gd-moi h1{font-size:28px;font-weight:700;line-height:1.25}
.gd-moi h2{font-size:22px;font-weight:700}
.gd-moi h3{font-size:18px;font-weight:600}
.gd-moi .card{border-radius:var(--r-20);box-shadow:var(--sh-1);border-color:var(--c-line)}
.gd-moi .btn{border-radius:var(--r-12);font-size:16px;font-weight:600;min-height:48px}

/* Ẩn bộ khung cũ khi dùng giao diện mới */
.gd-moi #botnav,.gd-moi .topbar .topnav,.gd-moi #dau{display:none!important}

/* ===== Giai đoạn 2 · Thành phần ===== */
.ui-ic{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-sec{margin:var(--s-24) 0 0}
.ui-sec-dau{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-12);margin:0 0 var(--s-12)}
.ui-sec-dau h2{margin:0;font-size:18px;font-weight:700}
.ui-link{border:0;background:none;color:var(--c-primary);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:2px}
.ui-link .ui-ic{width:16px;height:16px}
.ui-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-20);padding:var(--s-16);box-shadow:var(--sh-1)}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);min-height:48px;padding:0 var(--s-20);border-radius:var(--r-12);border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ui-btn-1{background:var(--c-primary);color:var(--c-on-primary)}
.ui-btn-2{background:var(--c-primary-soft);color:var(--c-primary)}
.ui-btn-3{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-line)}
.ui-btn.full{width:100%}
.ui-btn:active,.ui-o:active,.ui-dong:active{transform:scale(.98)}
.ui-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--c-primary-soft);color:var(--c-primary)}
.ui-chip.warn{background:var(--c-warn-soft);color:var(--warn)}
.ui-chip.danger{background:var(--c-danger-soft);color:var(--c-danger)}
.ui-chip.pink{background:var(--c-pink-soft);color:var(--c-pink)}
/* Hàng danh sách (List row) */
.ui-ds{display:grid;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-20);overflow:hidden;box-shadow:var(--sh-1)}
.ui-dong{display:flex;align-items:center;gap:var(--s-12);width:100%;min-height:60px;padding:var(--s-12) var(--s-16);border:0;border-top:1px solid var(--c-line);background:transparent;color:var(--c-text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ui-ds>.ui-dong:first-child{border-top:0}
.ui-dong .ui-nen{width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary);flex:none}
.ui-dong .ui-nd{flex:1;min-width:0;display:grid;gap:1px}
.ui-dong .ui-nd b{font-size:16px;font-weight:600}
.ui-dong .ui-nd small{font-size:13.5px;color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-dong>.ui-ic:last-child{color:var(--c-text-2);width:18px;height:18px}
.ui-dem{min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--c-danger);color:#fff;font-size:12px;font-weight:700;display:inline-grid;place-items:center;font-style:normal}
/* Ô thao tác nhanh (Quick action) */
.ui-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-8)}
.ui-o{display:flex;flex-direction:column;align-items:center;gap:var(--s-8);padding:var(--s-12) 2px;border:0;background:transparent;color:var(--c-text);font:inherit;font-size:13px;font-weight:600;text-align:center;cursor:pointer;line-height:1.3;-webkit-tap-highlight-color:transparent}
.ui-o .ui-nen{width:52px;height:52px;border-radius:var(--r-16);display:grid;place-items:center;background:var(--c-surface);color:var(--c-primary);border:1px solid var(--c-line);box-shadow:var(--sh-1)}
.ui-o .ui-nen .ui-ic{width:24px;height:24px}
/* Thanh tiến độ */
.ui-thanh{height:8px;border-radius:99px;background:var(--c-surface-2);overflow:hidden}
.ui-thanh i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F7A072,var(--c-pink))}
/* Trạng thái rỗng */
.ui-rong{text-align:center;padding:var(--s-24) var(--s-16);color:var(--c-text-2);font-size:14px}
.ui-rong .ui-ic{width:32px;height:32px;color:var(--c-primary);margin-bottom:var(--s-8)}
/* Khung xương khi đang tải */
.ui-xuong{border-radius:var(--r-12);background:linear-gradient(90deg,var(--c-surface-2),var(--c-line),var(--c-surface-2));background-size:200% 100%;animation:uiXuong 1.2s infinite linear;min-height:16px}
@keyframes uiXuong{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ui-xuong{animation:none}}

/* ===== Điều hướng 5 tab ===== */
#uiNav{position:fixed;left:0;right:0;bottom:0;z-index:62;display:flex;background:color-mix(in srgb,var(--c-surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--c-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
#uiNav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--c-text-2);font:inherit;font-size:11.5px;font-weight:600;padding:4px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:52px}
#uiNav button .ui-ic{width:24px;height:24px;padding:3px 16px;box-sizing:content-box;border-radius:99px;transition:background .2s}
#uiNav button.on{color:var(--c-primary)}
#uiNav button.on .ui-ic{background:var(--c-primary-soft)}
.gd-moi .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#uiTop{display:none}
@media (min-width:821px){
  #uiNav{display:none}
  #uiTop{display:flex;gap:4px}
  #uiTop button{border:0;background:transparent;color:var(--c-text-2);font:inherit;font-size:14.5px;font-weight:600;padding:8px 14px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  #uiTop button .ui-ic{width:18px;height:18px}
  #uiTop button.on{background:var(--c-primary-soft);color:var(--c-primary)}
  #uiTop button{white-space:nowrap;padding:8px 10px}
  .gd-moi .topbar .logo{flex:none}
  .gd-moi .topbar .in{max-width:1080px}
  .gd-moi .topbar .hot span{display:none}
  .gd-moi .topbar .hot{padding:9px 11px}
  .gd-moi .wrap{padding-bottom:40px}
}
/* Nút chat nổi (FAB) */
.gd-moi #hc-nut{width:56px!important;height:56px!important;padding:0!important;border-radius:50%!important;justify-content:center;font-size:0!important;box-shadow:0 6px 20px rgba(46,125,50,.35)}
.gd-moi #hc-nut::before{content:"";width:26px;height:26px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E") center/contain no-repeat}
.gd-moi #hc-nut .so{font-size:11px!important;position:absolute;top:-2px;right:-2px}
@media (max-width:820px){.gd-moi #hc-nut{bottom:calc(84px + env(safe-area-inset-bottom))!important;right:16px!important}}

/* ===== Hiện/ẩn các khung mới theo trang ===== */
#uiHome,#uiLK,#uiMB{display:none}
.gd-moi body[data-xem="home"] #uiHome,.gd-moi body[data-xem="lk"] #uiLK,.gd-moi body[data-xem="mb"] #uiMB{display:block}
.gd-moi body[data-xem="lk"] #gioiThieu,.gd-moi body[data-xem="mb"] #gioiThieu,.gd-moi body[data-xem="lk"] #kienThuc,.gd-moi body[data-xem="mb"] #kienThuc{display:none!important}
.gd-moi body[data-xem="home"] #gioiThieu{margin-top:var(--s-32)}

/* ===== Trang chủ ===== */
#uiHome{padding-top:var(--s-16)}
.ui-chao{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.ui-chao small{display:block;color:var(--c-text-2);font-size:14px}
.ui-chao b{display:block;font-size:22px;font-weight:700;line-height:1.3}
.ui-chuong{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);display:grid;place-items:center;cursor:pointer;flex:none}
.ui-chuong .ui-dem{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;font-size:11px;padding:0 5px}
/* Thẻ trạng thái lộ trình 40 tuần */
.ui-tt{margin-top:var(--s-16);border-radius:var(--r-24);padding:var(--s-20);color:#fff;background:linear-gradient(140deg,#2E7D32 0%,#1B5E20 60%,#174d1b 100%);position:relative;overflow:hidden}
.ui-tt::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.07)}
.ui-tt .nhan{font-size:13px;opacity:.85}
.ui-tt .lon{font-size:28px;font-weight:700;line-height:1.2;margin:2px 0 var(--s-4)}
.ui-tt .phu{font-size:14px;opacity:.9}
.ui-tt .ui-thanh{background:rgba(255,255,255,.22);margin:var(--s-16) 0 var(--s-8)}
.ui-tt .ui-thanh i{background:linear-gradient(90deg,#FFD08A,#fabd00)}
.ui-tt .moc{display:flex;justify-content:space-between;font-size:12px;opacity:.85}
.ui-tt .ui-btn{margin-top:var(--s-16);background:rgba(255,255,255,.16);color:#fff;min-height:44px;font-size:15px}
.ui-tt.khach{background:linear-gradient(140deg,#2E7D32,#1B5E20)}
.ui-tt.khach .ui-hang{display:flex;gap:var(--s-8);margin-top:var(--s-16);flex-wrap:wrap}
.ui-tt.khach .ui-btn{margin-top:0;flex:1;min-width:140px}
.ui-tt.khach .ui-btn.trang{background:#fff;color:var(--c-primary-2)}
/* Việc hôm nay */
.ui-viec{display:grid;gap:var(--s-8)}
.ui-viec .muc{display:flex;gap:var(--s-12);align-items:flex-start;padding:var(--s-12) var(--s-16);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-16)}
.ui-viec .muc .ui-nen{width:36px;height:36px;border-radius:var(--r-10);display:grid;place-items:center;flex:none;background:var(--c-primary-soft);color:var(--c-primary)}
.ui-viec .muc.hen .ui-nen{background:var(--c-pink-soft);color:var(--c-pink)}
.ui-viec .muc.nhac .ui-nen{background:var(--c-warn-soft);color:var(--warn)}
.ui-viec .muc .ui-ic{width:20px;height:20px}
.ui-viec .muc div{flex:1;min-width:0}
.ui-viec .muc b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.ui-viec .muc small{display:block;font-size:13.5px;color:var(--c-text-2);margin-top:2px}
.ui-viec .muc button{border:0;background:none;color:var(--c-primary);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:6px 0;white-space:nowrap;align-self:center}
/* Hành trình (dải giai đoạn) */
.ui-gd{display:flex;gap:var(--s-8);overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-snap-type:x mandatory}
.ui-gd::-webkit-scrollbar{display:none}
.ui-gd button{flex:0 0 auto;scroll-snap-align:start;min-width:112px;text-align:left;padding:var(--s-12);border-radius:var(--r-16);border:1.5px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer}
.ui-gd button small{display:block;font-size:12px;color:var(--c-text-2)}
.ui-gd button b{display:block;font-size:14.5px;font-weight:600}
.ui-gd button.on{border-color:var(--c-primary);background:var(--c-primary-soft)}
.ui-gd button.qua{opacity:.6}
/* Gợi ý cho bạn */
.ui-goi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}
.ui-goi button{display:flex;flex-direction:column;gap:var(--s-8);text-align:left;padding:var(--s-16);border-radius:var(--r-20);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer;box-shadow:var(--sh-1)}
.ui-goi button .ui-nen{width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary)}
.ui-goi button b{font-size:15px;font-weight:600;line-height:1.35}
.ui-goi button small{font-size:13px;color:var(--c-text-2);line-height:1.4}
.ui-goi button.mau2 .ui-nen{background:var(--c-pink-soft);color:var(--c-pink)}
.ui-goi button.mau3 .ui-nen{background:var(--c-warn-soft);color:var(--warn)}

/* ===== Trang trung tâm: Lịch tư vấn / Doanh nhân ===== */
#uiLK,#uiMB{padding-top:var(--s-16)}
.ui-tieude{font-size:28px;font-weight:700;margin:0 0 var(--s-4)}
.ui-mota{margin:0 0 var(--s-16);color:var(--c-text-2);font-size:15px}
.ui-hen{display:flex;gap:var(--s-16);align-items:center}
.ui-hen .lich{width:64px;flex:none;text-align:center;border-radius:var(--r-16);background:var(--c-primary-soft);color:var(--c-primary);padding:var(--s-8) 0}
.ui-hen .lich small{display:block;font-size:12px;font-weight:600}
.ui-hen .lich b{display:block;font-size:26px;font-weight:700;line-height:1.1}
.ui-hen .nd{flex:1;min-width:0}
.ui-hen .nd b{display:block;font-size:17px;font-weight:600}
.ui-hen .nd small{display:block;color:var(--c-text-2);font-size:14px}
.ui-ke{display:grid;gap:var(--s-12);margin-top:var(--s-16)}
/* Cửa hàng chung: thanh chuyển Việc cần làm & công cụ số ⇄ Đồ doanh nhân */
.ui-cua{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--r-16);background:var(--c-surface-2);margin:0 0 var(--s-16)}
.ui-cua button{border:0;border-radius:var(--r-12);min-height:44px;font:inherit;font-size:14.5px;font-weight:600;background:transparent;color:var(--c-text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ui-cua button .ui-ic{width:18px;height:18px}
.ui-cua button.on{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-1)}
/* Kiến thức: thêm Cẩm nang + Nhạc tập trung vào thanh chọn */
.gd-moi #kienThuc .seg{display:none!important}   /* thay bằng thanh 4 mục của ui.js */
.gd-moi body[data-xem="pod"] #pgBack,.gd-moi body[data-xem="khoa"] #pgBack{display:none!important}   /* đã là tab gốc, không cần nút quay lại */
.ui-cua button span{white-space:nowrap}
@media (max-width:430px){.ui-cua[style*="repeat(4"] button .ui-ic{display:none}.ui-cua[style*="repeat(4"] button{font-size:14px;padding:0 2px}}
#uiKT1{margin-top:var(--s-16)}

/* Tài khoản: biểu tượng Lucide thay emoji */
.gd-moi #tkMenu .o-ic{width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary);font-size:0}
.gd-moi #tkMenu .o-ic .ui-ic{width:20px;height:20px}
.gd-moi #tkMenu button{min-height:60px}

@media (min-width:821px){
  .ui-luoi{grid-template-columns:repeat(4,minmax(0,140px));justify-content:start;gap:var(--s-16)}
  .ui-goi{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ui-home-cot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-24);align-items:start}
  .ui-home-cot .ui-sec:first-child{margin-top:var(--s-16)}
}
@media (min-width:1100px){.gd-moi .topbar .hot span{display:inline}.gd-moi .topbar .hot{padding:9px 14px}}
@media (min-width:821px) and (max-width:980px){#uiTop button .ui-ic{display:none}}

/* ===== ĐỢT 1 (03/10): KHUNG TRANG CHUẨN ===== */
/* Điện thoại: bỏ thanh logo web, mỗi trang chỉ còn 1 đầu trang */
@media (max-width:820px){
  .gd-moi .topbar{display:none!important}
  .gd-moi .wrap{padding-top:env(safe-area-inset-top)}
  .gd-moi footer{display:none!important}
}
/* Bỏ các kiểu đầu trang cũ */
.gd-moi #pgBack,.gd-moi #tkBack{display:none!important}
.gd-moi #mods>.card>h2{display:none!important}
.gd-moi #app-bar{display:none!important}
/* Thanh trang con: ‹ · tên · icon */
#uiBar{display:none}
.gd-moi body.ui-con #uiBar{display:flex;position:sticky;top:var(--ui-dau,0px);z-index:30;align-items:center;gap:4px;min-height:56px;padding:env(safe-area-inset-top) 6px 0;background:color-mix(in srgb,var(--c-surface) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)}
#uiBar b{flex:1;text-align:center;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#uiBar button,#uiBar a{width:44px;height:44px;border:0;background:transparent;color:var(--c-text);display:grid;place-items:center;border-radius:50%;cursor:pointer;position:relative;text-decoration:none;flex:none}
#uiBar button:active,#uiBar a:active{background:var(--c-surface-2)}
#uiBar #uiBarPhai{width:88px;display:flex;justify-content:flex-end}
#uiBar #uiVe{margin-right:44px}
#uiBar .ui-dem{position:absolute;top:4px;right:2px;min-width:18px;height:18px;font-size:11px;padding:0 5px}
@media (min-width:821px){.gd-moi body.ui-con #uiBar{max-width:820px;margin:0 auto;border-radius:0 0 16px 16px;border:1px solid var(--c-line);border-top:0}}
/* Trang con: nội dung bắt đầu ngay dưới thanh */
.gd-moi body.ui-con .wrap>section:first-of-type{margin-top:0}
/* Tiêu đề lớn của trang gốc */
.ui-goc-td{display:none}
.gd-moi body[data-xem="pod"] #uiKTTieuDe,.gd-moi body[data-xem="khoa"] #uiKTTieuDe,.gd-moi body[data-xem="hs"][data-mod="menu"] #uiTkTieuDe{display:block;padding-top:16px;margin-bottom:12px}
.gd-moi body[data-xem="pod"] #kienThuc .sec-title,.gd-moi body[data-xem="khoa"] #kienThuc .sec-title{font-size:18px!important;margin-top:20px!important}
/* Cửa hàng trong giao diện mới: dùng thanh chung, bỏ thanh xanh riêng */
.gd-moi .ch-dau{display:none!important}
.gd-moi .ch-tab{top:var(--ui-top,56px)!important}

/* ===== ĐỢT 2 (03/10): KHU TÀI KHOẢN ===== */
/* Bỏ bố cục 2 cột cũ, dùng 1 cột như mọi trang */
.gd-moi body.xem-hs .wrap{max-width:820px}
.gd-moi body.xem-hs #app:not([hidden]){display:block!important}
/* Thẻ hồ sơ: gọn, bỏ hàng 4 nút (đã chuyển xuống danh sách Khác) */
.gd-moi #app>.card:first-child{padding:16px}
.gd-moi #app>.card:first-child .bar>span:last-child{display:none!important}
.gd-moi #app>.card:first-child .bar{margin-top:10px;padding-top:0;border:0}
.gd-moi .avatar{width:56px;height:56px;font-size:20px;background:var(--c-primary-soft);color:var(--c-primary)}
.gd-moi #bnTen{font-size:18px;font-weight:700;margin:0}
.gd-moi .chip{font-size:12.5px;padding:3px 10px;border-radius:99px;background:var(--c-primary-soft);border:0;color:var(--c-primary);font-weight:600}
/* Thẻ cũ thay bằng thẻ chuẩn của #uiTk */
.gd-moi #nextBox>.card.next,.gd-moi #thaiBox,.gd-moi #tkMenu,.gd-moi nav.tabs{display:none!important}
.gd-moi body[data-xem="hs"]:not([data-mod="menu"]) #uiTk{display:none}
#uiTk>.ui-card{margin-top:12px}
.ui-thai{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ui-thai-so b{display:block;font-size:22px;font-weight:700}.ui-thai-so small{color:var(--c-text-2);font-size:14px}
.ui-so{font-style:normal;min-width:24px;height:24px;padding:0 8px;border-radius:99px;background:var(--c-surface-2);color:var(--c-text-2);font-size:13px;font-weight:600;display:inline-grid;place-items:center}
/* Thẻ Hạng & tiền giới thiệu: cùng kiểu hàng danh sách */
.gd-moi #nextBox{display:block!important;margin-top:12px}
.gd-moi #nextBox:empty{display:none!important}
.gd-moi #nextBox .card.tom{padding:0;gap:0;overflow:hidden;margin-top:0;border-radius:var(--r-20)}
.gd-moi .tom-dong{border-radius:0;background:transparent;padding:12px 16px;min-height:64px;border-top:1px solid var(--c-line)}
.gd-moi .tom-dong:first-child{border-top:0}
.gd-moi .tom-hang{background:transparent!important;color:var(--c-text)!important}
.gd-moi .tom-hang small{opacity:1;color:var(--c-text-2)}
.gd-moi .tom-ic{width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--c-warn-soft);color:#B45309;font-size:0}
.gd-moi .tom-aff .tom-ic{background:var(--c-primary-soft);color:var(--c-primary)}
.gd-moi .tom-ic .ui-ic{width:20px;height:20px}
.gd-moi .tom-nd b{font-size:16px;font-weight:600}
.gd-moi .tom-bar{background:var(--c-surface-2)}.gd-moi .tom-bar i{background:#F59E0B}
.gd-moi .tom-dong em{color:var(--c-text-2)}
/* Trang con của Tài khoản: mỗi mục là một thẻ chuẩn */
.gd-moi body[data-xem="hs"]:not([data-mod="menu"]) #mods{margin-top:16px!important}
.gd-moi #mods>.card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.gd-moi #mods>.card:not(#s-mua) .item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-16);padding:14px 16px;margin:0 0 10px;box-shadow:var(--sh-1)}
.gd-moi #mods .item b{font-size:16px;font-weight:600}
.gd-moi #mods .item .s{font-size:14px;color:var(--c-text-2)}
.gd-moi #mods .tl{padding-left:0!important}
.gd-moi #mods .tl .item:before{display:none}
.gd-moi #mods .empty{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-16);padding:28px 16px;text-align:center;color:var(--c-text-2)}
.ui-dem[hidden]{display:none!important}

/* ===== ĐỢT 3 (03/10): MỘT CỬA HÀNG, MỘT GIỎ ===== */
#uiShop{display:none}
.gd-moi body[data-xem="cho"] #uiShop{display:block;margin:0 -16px}
.gd-moi #pCho,.gd-moi #mbGio{display:none!important}
.gd-moi body[data-xem="cho"] #gioiThieu,.gd-moi body[data-xem="cho"] #kienThuc{display:none!important}
@media (min-width:821px){.gd-moi body[data-xem="cho"] #uiShop{margin:16px 0 0}}
/* Thông báo nhanh (toast) */
#uiBao{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:95;max-width:480px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:14px;background:#1F2A1F;color:#fff;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s}
#uiBao.hien{transform:none;opacity:1;pointer-events:auto}
#uiBao span{flex:1}#uiBao button{border:0;background:transparent;color:#9ED89F;font:inherit;font-weight:600;cursor:pointer;padding:6px}

/* ===== ĐỢT 4 (03/10): CÁC TRANG NỘI DUNG DÙNG THẺ CHUẨN ===== */
/* Ô icon emoji đã bị xoá → ẩn ô trống */
.gd-moi .ht-truc button>span,.gd-moi .ht-toi button>span,.gd-moi .mb-anh>span:empty,.gd-moi .o-ic:empty{display:none!important}
/* Hành trình làm chủ */
.gd-moi .ht-khoi{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-20);box-shadow:var(--sh-1);padding:16px}
.gd-moi .ht-khoi h3{font-size:18px;font-weight:700;margin:0 0 10px}
.gd-moi .ht-truc button{border-radius:var(--r-16)!important;border:1.5px solid var(--c-line)!important;background:var(--c-surface)!important;color:var(--c-text)!important;min-height:52px;padding:8px 12px!important}
.gd-moi .ht-truc button.on{border-color:var(--c-primary)!important;background:var(--c-primary-soft)!important;color:var(--c-primary)!important}
.gd-moi .ht-nut{border-radius:var(--r-12)!important;min-height:48px;font-weight:600}
.gd-moi .ht-mua button,.gd-moi .ht-toi button{border-radius:var(--r-12)!important;border:1px solid var(--c-line)!important;background:var(--c-surface)!important}
.gd-moi .ht-viec input[type=checkbox]{accent-color:var(--c-primary);width:20px;height:20px}
/* Kiến thức: tiêu đề khối 18px, bỏ vạch màu trang trí */
.gd-moi #kienThuc .sec-title{font-size:18px!important;font-weight:700}
.gd-moi #kienThuc .sec-title::before{display:none!important}
.gd-moi .pod,.gd-moi .khoa{border-radius:var(--r-16)!important;border:1px solid var(--c-line)!important;box-shadow:var(--sh-1)}
/* Các trang có khối .card cũ: cùng bo góc, viền, bóng */
.gd-moi #pDat .card,.gd-moi #pCamNang .card,.gd-moi #pViec .card,.gd-moi #pTsh .card,.gd-moi #pNhac .card{border-radius:var(--r-20)!important;border:1px solid var(--c-line)!important;box-shadow:var(--sh-1)!important}
/* Ô nhập, nút chính toàn app */
.gd-moi input:not([type=radio]):not([type=checkbox]):not([type=range]),.gd-moi select,.gd-moi textarea{border-radius:var(--r-12)!important}
.gd-moi .btn,.gd-moi button.btn{border-radius:var(--r-12)!important;min-height:48px;font-weight:600}
/* Chip chọn (nhạc tập trung, chợ, thần số học) */
.gd-moi #pNhac button[class*="chip"],.gd-moi #pTsh button[class*="chip"]{border-radius:99px}
.gd-moi .sec-title::before{display:none!important}
.gd-moi #svcBlock>.sec-title{display:none}
.gd-moi .svc-ic{width:44px;height:44px;border-radius:var(--r-12)!important;display:grid;place-items:center;background:var(--c-primary-soft)!important;color:var(--c-primary);font-size:0}
.gd-moi .svc-ic .ui-ic{width:22px;height:22px}
.gd-moi .svc-card{border-radius:var(--r-16)!important;border:1px solid var(--c-line)!important;box-shadow:var(--sh-1)}
.gd-moi .ht-ic{display:grid!important;place-items:center;font-size:0;color:#fff}
.gd-moi .ht-ic .ui-ic{width:30px;height:30px}

/* ===== 03/10 SỬA LỖI ===== */
/* (1) iPhone: html có overflow-x:hidden làm thanh tab (fixed) trôi lên giữa trang khi vuốt.
   Bỏ overflow trên html, chỉ chặn tràn ngang ở body bằng clip (không tạo khung cuộn riêng); đẩy thanh tab lên lớp riêng. */
html.gd-moi{overflow-x:visible!important;overflow-y:visible!important}
.gd-moi body{overflow-x:clip!important;overflow-y:visible!important}
#uiNav,#uiDonCho,#chThanhGio{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform}
/* (6) Podcast: trình phát nằm trên thanh tab, nút chat nhường chỗ */
@media (max-width:820px){
  .gd-moi #podPlayer{bottom:calc(80px + env(safe-area-inset-bottom))!important;z-index:63}
  .gd-moi body:has(#podPlayer:not([hidden])) #hc-nut{bottom:calc(168px + env(safe-area-inset-bottom))!important}
}
.gd-moi .pod .nghe{font-size:15px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:#fff;flex:none}

/* ===== KHU TRANG CHỦ MỚI: mentor · video · sản phẩm mới · cảm nhận · tin tức ===== */
.ui-keo{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:2px 16px 8px;-webkit-overflow-scrolling:touch}
.ui-keo::-webkit-scrollbar{display:none}
.ui-keo>*{scroll-snap-align:start;flex:none}
.ui-bs{width:150px;display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--c-line);border-radius:var(--r-16);background:var(--c-surface);padding:8px 8px 12px;font:inherit;color:inherit;cursor:pointer;box-shadow:var(--sh-1)}
.ui-bs .anh{display:block;aspect-ratio:3/4;border-radius:var(--r-12);overflow:hidden;background:var(--c-primary-soft);margin-bottom:8px}
.ui-bs .anh img{width:100%;height:100%;object-fit:cover;object-position:top}
.ui-bs .anh i{display:grid;place-items:center;width:100%;height:100%;font-style:normal;font-size:40px;font-weight:700;color:var(--c-primary)}
.ui-bs b{font-size:14.5px;font-weight:600;line-height:1.3}.ui-bs small{font-size:12.5px;color:var(--c-text-2);line-height:1.35}.ui-bs em{font-style:normal;font-size:12px;color:var(--c-primary);font-weight:600}
.ui-vd{width:240px;display:flex;flex-direction:column;gap:8px;text-align:left;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:0}
.ui-vd .anh{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-12);overflow:hidden;background:#000}
.ui-vd .anh img{width:100%;height:100%;object-fit:cover}
.ui-vd .anh i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.ui-vd .anh i .ui-ic{width:22px;height:22px;margin-left:3px}
.ui-vd b{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-sp{width:140px;display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--c-line);border-radius:var(--r-16);background:var(--c-surface);padding:8px 8px 10px;font:inherit;color:inherit;cursor:pointer;box-shadow:var(--sh-1)}
.ui-sp .anh{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-10);overflow:hidden;background:#fff}
.ui-sp .anh img{width:100%;height:100%;object-fit:contain}
.ui-sp .anh i{position:absolute;right:0;top:0;background:var(--c-danger);color:#fff;font-style:normal;font-size:12px;font-weight:700;padding:2px 7px;border-radius:0 0 0 10px}
.ui-sp b{font-size:13.5px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ui-sp .gia{font-size:14px;font-weight:700;color:var(--c-primary)}.ui-sp .gia s{font-weight:400;color:var(--c-text-2);font-size:12px}
.ui-cn{width:280px;border:1px solid var(--c-line);border-radius:var(--r-16);background:var(--c-surface);padding:14px 16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:6px}
.ui-cn .sao{color:#F59E0B;letter-spacing:2px}
.ui-cn p{margin:0;font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ui-cn b{font-size:14px}.ui-cn small{color:var(--c-text-2);font-size:12.5px}
.ui-cn-moi{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ui-cn-moi>span:nth-child(2){flex:1;display:grid}.ui-cn-moi small{color:var(--c-text-2)}
.ui-cn-moi .ui-nen{width:40px;height:40px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary)}
.ui-tin{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--c-line);text-decoration:none;color:inherit}
.ui-ds>.ui-tin:first-child{border-top:0}
.ui-tin img{width:84px;height:60px;object-fit:cover;border-radius:var(--r-10);flex:none;background:var(--c-surface-2)}
.ui-tin span{display:grid;gap:2px;min-width:0}.ui-tin b{font-size:14.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ui-tin small{color:var(--c-text-2);font-size:12.5px}
/* Hộp trượt chung (video, mentor, cảm nhận, QR) */
.ui-hop{position:fixed;inset:0;z-index:92;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.ui-tam{background:var(--c-surface);color:var(--c-text);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto}
.ui-hop.vd{align-items:center}.ui-hop.vd .ui-tam{border-radius:16px;margin:0 8px;padding:12px}
.ui-tam-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.ui-tam-dau b{font-size:17px}
.ui-x{width:40px;height:40px;border:0;border-radius:50%;background:var(--c-surface-2);color:var(--c-text);display:grid;place-items:center;cursor:pointer;flex:none}
.ui-vd-khung{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.ui-vd-khung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ui-bs-ct{display:flex;gap:14px;align-items:center;margin-bottom:10px}.ui-bs-ct img{width:96px;height:128px;object-fit:cover;object-position:top;border-radius:12px}
.ui-bs-ct div{display:grid;gap:4px}.ui-bs-ct small{color:var(--c-text-2)}
.ui-form{display:grid;gap:12px}.ui-form label{display:grid;gap:6px;font-size:14px;font-weight:600}
.ui-form input,.ui-form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-surface);color:var(--c-text)}
.ui-sao{display:flex;gap:6px;justify-content:center}.ui-sao button{border:0;background:none;font-size:34px;color:var(--c-line);cursor:pointer;line-height:1;padding:0 2px}.ui-sao button.on{color:#F59E0B}
.ui-bay{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ui-loi{margin:0;color:var(--c-danger);font-size:14px}.ui-ghi{color:var(--c-text-2);font-size:13px}
.ui-qr{display:block;width:min(260px,80%);margin:8px auto 12px;border-radius:12px;background:#fff}
.ui-ck{display:grid;gap:6px;background:var(--c-surface-2);border-radius:12px;padding:12px;font-size:14px;margin-bottom:12px}
.ui-ck button{border:0;background:var(--c-primary-soft);color:var(--c-primary);border-radius:8px;padding:2px 8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ui-hang2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Chip "Đơn chờ thanh toán" */
#uiDonCho{position:fixed;left:12px;right:84px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:57;max-width:440px;display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;border-radius:16px;background:var(--c-surface);border:1.5px solid #F59E0B;box-shadow:0 8px 24px rgba(0,0,0,.18);cursor:pointer}
#uiDonCho .ui-nen{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--c-warn-soft);color:#B45309;flex:none}
#uiDonCho .nd{flex:1;min-width:0;display:grid}#uiDonCho b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#uiDonCho small{font-size:12.5px;color:var(--c-text-2)}
#uiDonCho button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--c-text-2);display:grid;place-items:center;cursor:pointer;flex:none}
body[data-xem="cho"] #uiDonCho{bottom:calc(150px + env(safe-area-inset-bottom))}
@media (min-width:821px){#uiDonCho{bottom:20px;left:20px;right:auto;width:400px}.ui-hop{align-items:center}.ui-tam{border-radius:20px}}
.ui-keo{scroll-padding-inline:16px}

/* 03/10 tối: khoá trang khi mở hộp chat. Rule ".gd-moi body{overflow-y:visible!important}" (sửa thanh tab iPhone) đã đè mất overflow:hidden của body.hc-mo,
   iPhone kéo trôi cả trang dưới hộp chat → hộp chat "không cố định". Trả lại khoá CHỈ khi đang mở chat. */
html:has(body.hc-mo),html.gd-moi:has(body.hc-mo){overflow:hidden!important;height:100%;overscroll-behavior:none}
.gd-moi body.hc-mo,body.hc-mo{overflow:hidden!important;overscroll-behavior:none}
@media (max-width:560px){.gd-moi body.hc-mo{position:fixed!important;left:0;right:0;width:100%;height:100%}}
#hc-ds{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#hc-khung{overscroll-behavior:contain}
/* 03/10 tối: nút Tin nhắn nằm trong thanh tab → bỏ nút chat nổi */
.gd-moi #hc-nut{display:none!important}
#uiNav button,#uiTop button{position:relative}
.ui-dem-tab{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px;padding:0 5px}
#uiTop .ui-dem-tab{top:-2px;left:auto;right:-4px}
#uiNav button .ui-ic{padding:3px 12px}
#uiNav button span{white-space:nowrap;font-size:11px}
#uiDonCho{right:12px}
@media (max-width:560px){#hc-khung{height:var(--hc-vh,100vh);height:var(--hc-vh,100dvh)}}

/* 03/10 khuya: thẻ "Số chủ đạo của con" (thần số học) — nền vàng nhạt nhưng chữ theo màu chế độ tối nên mất chữ */
.tsh-kq{color:#1F2A1F}.tsh-kq small{color:#7A6A55!important}.tsh-kq p{color:#3D4A3D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tsh-kq{background:linear-gradient(135deg,#3B3018,#38202C);border-color:#6B5426;color:#F5EBDD}:root:not([data-theme="light"]) .tsh-kq small{color:#D9C7A8!important}:root:not([data-theme="light"]) .tsh-kq p{color:#E8DCCB}}
:root[data-theme="dark"] .tsh-kq{background:linear-gradient(135deg,#3B3018,#38202C);border-color:#6B5426;color:#F5EBDD}:root[data-theme="dark"] .tsh-kq small{color:#D9C7A8!important}:root[data-theme="dark"] .tsh-kq p{color:#E8DCCB}

/* 03/10 khuya: web app trên màn hình chính iPhone — sau khi bàn phím đóng, iPhone giữ khung trang thấp hơn màn hình thật nên thanh tab "lơ lửng" giữa màn hình.
   ui.js đo đáy màn hình thật (visualViewport) rồi kéo các thanh đáy xuống đúng chỗ qua biến --vv-lech. */
#uiNav,#uiDonCho,#chThanhGio{-webkit-transform:translate3d(0,var(--vv-lech,0px),0);transform:translate3d(0,var(--vv-lech,0px),0)}
/* Che dải thanh giờ / pin khi chạy toàn màn hình (nội dung không chạy bên dưới chữ giờ) */
@media (display-mode:standalone){html.gd-moi::after{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:var(--c-bg);z-index:66;pointer-events:none}}
