/* Trợ lý Slide Triway — khung ứng dụng. Tông «Bảng xanh – Nghệ vàng». Tệp của chuyên gia A. */
:root{
  --nen:#f6f4ec; --nen2:#fffdf7; --nen3:#ece8da;
  --chu:#1d2a25; --chu-phu:#53615a;
  --vien:#d9d3c0; --vien-dam:#7f8d85;
  --chinh:#0f5c47; --chinh-chu:#ffffff; --chinh-nhat:#e1efe9; --chinh-dam:#0a4535;
  --nhan:#e3a21a; --nhan-chu:#3a2800; --nhan-nhat:#fbf0d0;
  --loi:#b3261e; --ok:#1c7a3d; --canh-bao:#9a5b00;
  --bo-goc:18px; --bo-goc-nho:10px;
  --bong:0 2px 4px rgba(20,40,30,.06),0 10px 28px rgba(20,40,30,.10);
  --bong-nang:0 4px 8px rgba(20,40,30,.08),0 18px 40px rgba(20,40,30,.16);
  --phong:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cao-thanh:60px; --cao-nav:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nen:#0f1714; --nen2:#17221e; --nen3:#1e2c27;
    --chu:#e9efe9; --chu-phu:#a5b3ab;
    --vien:#2c3d36; --vien-dam:#5d7468;
    --chinh:#4fc9a2; --chinh-chu:#06241b; --chinh-nhat:#183429; --chinh-dam:#7fe0c0;
    --nhan:#f0b83a; --nhan-chu:#2a1c00; --nhan-nhat:#33290f;
    --loi:#ff8f85; --ok:#76d795; --canh-bao:#f0b95a;
    --bong:0 2px 4px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
    --bong-nang:0 4px 8px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --nen:#0f1714; --nen2:#17221e; --nen3:#1e2c27;
  --chu:#e9efe9; --chu-phu:#a5b3ab;
  --vien:#2c3d36; --vien-dam:#5d7468;
  --chinh:#4fc9a2; --chinh-chu:#06241b; --chinh-nhat:#183429; --chinh-dam:#7fe0c0;
  --nhan:#f0b83a; --nhan-chu:#2a1c00; --nhan-nhat:#33290f;
  --loi:#ff8f85; --ok:#76d795; --canh-bao:#f0b95a;
  --bong:0 2px 4px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  --bong-nang:0 4px 8px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cao-thanh) + 12px)}
body{margin:0;background:var(--nen);color:var(--chu);font-family:var(--phong);font-size:17px;line-height:1.55;min-height:100vh;
  background-image:radial-gradient(900px 380px at 100% -80px,color-mix(in srgb,var(--nhan) 16%,transparent),transparent 70%),radial-gradient(700px 360px at -10% 0,color-mix(in srgb,var(--chinh) 11%,transparent),transparent 70%);
  background-repeat:no-repeat}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.55rem,4.4vw,2.25rem)} h2{font-size:1.3rem} h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 .8em}
a{color:var(--chinh);text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--nhan);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.chi-doc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bo-qua{position:absolute;left:-999px;top:8px;background:var(--chinh);color:var(--chinh-chu);padding:10px 16px;border-radius:10px;z-index:100}
.bo-qua:focus{left:12px}

/* ---------- thanh trên ---------- */
.thanh{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--nen2) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--vien)}
.thanh-trong{max-width:1280px;margin:0 auto;padding:0 16px;height:var(--cao-thanh);display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--chu);font-weight:800;font-size:1.05rem;white-space:nowrap}
.logo svg{width:36px;height:36px;flex:none}
.logo small{display:block;font-weight:500;font-size:.72rem;color:var(--chu-phu);letter-spacing:0;margin-top:-3px}
.dieu-huong{display:flex;gap:2px;margin-left:12px;flex:1}
.dieu-huong a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--chu-phu);font-weight:600;font-size:.95rem;transition:background .2s,color .2s}
.dieu-huong a:hover{background:var(--chinh-nhat);color:var(--chinh)}
.dieu-huong a[aria-current="page"]{background:var(--chinh);color:var(--chinh-chu)}
.thanh-phai{display:flex;align-items:center;gap:8px;margin-left:auto}
.nut-tron{width:44px;height:44px;border-radius:50%;border:1px solid var(--vien);background:var(--nen2);color:var(--chu);cursor:pointer;font-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.nut-tron:hover{background:var(--chinh-nhat)}
.tk-nut{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--vien);background:var(--nen2);color:var(--chu);cursor:pointer;font:inherit;font-weight:600;font-size:.9rem;max-width:230px}
.tk-nut:hover{background:var(--chinh-nhat)}
.tk-nut .hinh{width:30px;height:30px;border-radius:50%;background:var(--chinh);color:var(--chinh-chu);display:inline-flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;flex:none}
.tk-nut .hinh img{width:100%;height:100%;object-fit:cover}
.tk-nut span.ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-menu{position:absolute;right:16px;top:calc(var(--cao-thanh) - 4px);width:min(320px,calc(100vw - 32px));background:var(--nen2);border:1px solid var(--vien);border-radius:var(--bo-goc);box-shadow:var(--bong-nang);padding:16px;z-index:60}
.tk-menu h3{margin-bottom:4px}
.tk-menu .nho{font-size:.88rem;color:var(--chu-phu);margin-bottom:12px}

/* ---------- vùng nội dung ---------- */
.man{max-width:1160px;margin:0 auto;padding:28px 16px 56px;min-height:60vh;animation:vao .22s ease-out}
@keyframes vao{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.man:focus{outline:none}
.tieu-man{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.tieu-man p{color:var(--chu-phu);margin:0}
.chan{max-width:1160px;margin:0 auto;padding:20px 16px 96px;color:var(--chu-phu);font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--vien)}
.chan a{color:var(--chu-phu)}
.nav-duoi{display:none}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:14px;border:2px solid var(--chinh);background:transparent;color:var(--chinh);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;text-align:center}
.nut:hover{background:var(--chinh-nhat)}
.nut:active{transform:scale(.98)}
.nut-chinh{background:var(--chinh);color:var(--chinh-chu)}
.nut-chinh:hover{background:var(--chinh-dam);color:var(--chinh-chu)}
:root[data-theme="dark"] .nut-chinh:hover{background:color-mix(in srgb,var(--chinh) 85%,white)}
.nut-nhan{background:var(--nhan);border-color:var(--nhan);color:var(--nhan-chu)}
.nut-nhan:hover{background:color-mix(in srgb,var(--nhan) 88%,black)}
.nut-phu{border-color:var(--vien-dam);color:var(--chu)}
.nut-nguy{border-color:var(--loi);color:var(--loi)}
.nut-nguy:hover{background:color-mix(in srgb,var(--loi) 12%,transparent)}
.nut-nguy.dac{background:var(--loi);color:#fff}
.nut-nho{min-height:44px;padding:0 14px;font-size:.92rem;border-radius:12px}
.nut-lien{background:none;border:0;color:var(--chinh);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;min-height:44px;padding:0 6px}
.nut[disabled],.nut[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.hang-nut{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- thẻ, trường ---------- */
.the{background:var(--nen2);border:1px solid var(--vien);border-radius:var(--bo-goc);box-shadow:var(--bong);padding:20px}
.the h2,.the h3{margin-top:0}
.luoi{display:grid;gap:16px}
.luoi-the{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.truong{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.truong>label,.truong>.nhan-truong{font-weight:700;font-size:.98rem}
.truong .goi-y{font-size:.9rem;color:var(--chu-phu)}
input[type=text],input[type=search],input[type=number],input[type=password],select,textarea{font:inherit;width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--vien-dam);background:var(--nen2);color:var(--chu)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:3px solid var(--nhan);outline-offset:1px;border-color:var(--chinh)}
.hang-truong{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--vien-dam);background:var(--nen2);color:var(--chu);font:inherit;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{border-color:var(--chinh)}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu)}
.nhan-nho{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--chinh-nhat);color:var(--chinh);font-size:.82rem;font-weight:700}
.nhan-nho.vang{background:var(--nhan-nhat);color:var(--canh-bao)}
.canh-bao{border-left:5px solid var(--nhan);background:var(--nhan-nhat);color:var(--chu);padding:12px 16px;border-radius:12px;margin:0 0 14px}
.canh-bao strong{color:var(--canh-bao)}
.bao-loi{border-left:5px solid var(--loi);background:color-mix(in srgb,var(--loi) 10%,var(--nen2));padding:12px 16px;border-radius:12px;margin:0 0 14px}
.bao-ok{border-left:5px solid var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--nen2));padding:12px 16px;border-radius:12px;margin:0 0 14px}
.nho{font-size:.9rem;color:var(--chu-phu)}

/* ---------- trang chủ ---------- */
.anh-hung{display:grid;gap:20px;margin-bottom:26px}
.anh-hung h1{margin-bottom:6px}
.anh-hung h1 em{font-style:normal;color:var(--chinh);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--nhan) 55%,transparent) 62%)}
.anh-hung p{font-size:1.05rem;color:var(--chu-phu);max-width:62ch}
.bon-nut{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.nut-lon{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;padding:22px 20px;border-radius:22px;border:1px solid var(--vien);background:var(--nen2);color:var(--chu);text-decoration:none;box-shadow:var(--bong);cursor:pointer;font:inherit;min-height:176px;transition:transform .2s,box-shadow .2s,border-color .2s}
.nut-lon:hover{transform:translateY(-3px);box-shadow:var(--bong-nang);border-color:var(--chinh)}
.nut-lon .bieu{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:var(--chinh-nhat)}
.nut-lon b{font-size:1.2rem;font-weight:800;line-height:1.2}
.nut-lon span.mo{color:var(--chu-phu);font-size:.95rem;line-height:1.4}
.nut-lon.noi-bat{background:linear-gradient(150deg,var(--chinh),color-mix(in srgb,var(--chinh) 70%,#000));color:var(--chinh-chu);border-color:transparent}
.nut-lon.noi-bat .bieu{background:var(--nhan)}
.nut-lon.noi-bat span.mo{color:color-mix(in srgb,var(--chinh-chu) 85%,transparent)}
:root[data-theme="dark"] .nut-lon.noi-bat{background:linear-gradient(150deg,#1d6b57,#12493b);color:#eafff7}
:root[data-theme="dark"] .nut-lon.noi-bat span.mo{color:#cfeee3}
.nut-lon:nth-child(3) .bieu{background:var(--nhan-nhat)}
.nut-lon .chu-nut{display:flex;flex-direction:column;gap:6px}
.nut-lon .mui{position:absolute;right:16px;top:18px;font-size:1.3rem;opacity:.5;transition:transform .2s}
.nut-lon:hover .mui{transform:translateX(4px);opacity:1}
.khoi{margin-top:30px}
.khoi>.tieu{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.khoi>.tieu h2{margin:0}
.dai-tin{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:var(--nhan-nhat);border:1px solid color-mix(in srgb,var(--nhan) 50%,transparent);margin-top:16px}
.dai-tin .chu{flex:1;min-width:220px}
.dai-tin.xanh{background:var(--chinh-nhat);border-color:color-mix(in srgb,var(--chinh) 30%,transparent)}

/* thẻ bài */
.the-bai{display:flex;flex-direction:column;background:var(--nen2);border:1px solid var(--vien);border-radius:var(--bo-goc);box-shadow:var(--bong);overflow:hidden;transition:transform .2s,box-shadow .2s}
.the-bai:hover{transform:translateY(-2px);box-shadow:var(--bong-nang)}
.the-bai .than{padding:14px 16px 6px;flex:1}
.the-bai h3{margin:0 0 6px;font-size:1.02rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the-bai .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.86rem;color:var(--chu-phu)}
.the-bai .hanh-dong{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 16px}
.xt{position:relative;width:100%;aspect-ratio:16/9;background:var(--nen3);overflow:hidden;border-bottom:1px solid var(--vien)}
.xt-trong{position:absolute;inset:0}
.xt-du{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px;color:#fff;font-weight:800;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.xt-du::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.6))}
.xt-du span{position:relative;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem}
.xt-so{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:1px 10px;font-size:.78rem;font-weight:700;z-index:2}

/* trạng thái */
.rong,.dang-tai,.loi-man{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 20px;border:2px dashed var(--vien-dam);border-radius:var(--bo-goc);background:color-mix(in srgb,var(--nen2) 70%,transparent)}
.rong .bieu,.loi-man .bieu{font-size:2.6rem}
.rong h3,.loi-man h3{margin:0}
.rong p,.loi-man p{margin:0;color:var(--chu-phu);max-width:46ch}
.loi-man{border-color:var(--loi)}
.quay{width:38px;height:38px;border-radius:50%;border:4px solid var(--vien);border-top-color:var(--chinh);animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
.khung-xuong{height:150px;border-radius:var(--bo-goc);background:linear-gradient(90deg,var(--nen3),var(--nen2),var(--nen3));background-size:200% 100%;animation:xuong 1.3s linear infinite}
@keyframes xuong{to{background-position:-200% 0}}

/* thư viện */
.thanh-loc{display:grid;gap:10px;grid-template-columns:2fr 1fr 1fr 1fr;align-items:end;margin-bottom:16px}
.thanh-loc .truong{margin:0}
.thong-ke{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-bottom:18px}
.thong-ke .so-to{font-size:2.6rem;font-weight:800;color:var(--chinh);line-height:1}
.bieu-do{width:100%;height:auto;display:block}
.bieu-do text{font-family:var(--phong);fill:var(--chu)}
.bieu-do .cot{fill:var(--chinh)}
.bieu-do .cot.vang{fill:var(--nhan)}
.bieu-do .nen-cot{fill:var(--nen3)}
.bieu-do .so{font-weight:700}
.dai-sao-luu{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* hộp thoại + thông báo */
dialog.tw-hop{border:1px solid var(--vien);border-radius:22px;background:var(--nen2);color:var(--chu);box-shadow:var(--bong-nang);padding:24px;width:min(480px,calc(100vw - 32px));font-family:var(--phong)}
dialog.tw-hop::backdrop{background:rgba(10,20,15,.55);backdrop-filter:blur(2px)}
dialog.tw-hop h3{font-size:1.2rem}
dialog.tw-hop .hang-nut{justify-content:flex-end;margin-top:18px}
#tw-thong-bao{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;background:var(--chu);color:var(--nen);padding:12px 14px;border-radius:14px;box-shadow:var(--bong-nang);animation:vao .2s ease-out;line-height:1.45}
.toast.loi{background:var(--loi);color:#fff}
.toast.ok{background:var(--ok);color:#fff}
:root[data-theme="dark"] .toast.ok,:root[data-theme="dark"] .toast.loi{color:#10201a}
.toast .noi{flex:1}
.toast button{background:transparent;border:1px solid currentColor;color:inherit;border-radius:10px;min-height:36px;min-width:44px;padding:0 10px;font:inherit;font-weight:700;cursor:pointer}

/* các bước tạo bài */
.tien-do{display:flex;gap:6px;margin:0 0 22px;padding:0;list-style:none;counter-reset:b}
.tien-do li{flex:1;min-width:0;text-align:center;font-size:.85rem;font-weight:600;color:var(--chu-phu);position:relative;padding-top:42px}
.tien-do li::before{counter-increment:b;content:counter(b);position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;border:2px solid var(--vien-dam);background:var(--nen2);display:flex;align-items:center;justify-content:center;font-weight:800;z-index:1}
.tien-do li::after{content:"";position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:3px;background:var(--vien)}
.tien-do li:last-child::after{display:none}
.tien-do li.xong::before{background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu);content:"✓"}
.tien-do li.xong::after{background:var(--chinh)}
.tien-do li.nay{color:var(--chu)}
.tien-do li.nay::before{border-color:var(--nhan);background:var(--nhan);color:var(--nhan-chu)}
.tien-do li button{all:unset;cursor:pointer;display:block;width:100%;min-height:44px;margin-top:-42px;padding-top:42px;position:relative;z-index:2}
.tien-do .ten-buoc{display:block}
.thanh-tien-mobile{display:none}
.buoc{max-width:820px;margin:0 auto}
.buoc .the{padding:24px}
.thanh-duoi-buoc{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.the-chon{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.dem-trang{display:flex;align-items:center;gap:12px}
.dem-trang output{font-size:2rem;font-weight:800;min-width:2.4em;text-align:center}
.dem-trang .nut{min-width:52px;padding:0;font-size:1.5rem}
.phan-bo{display:flex;height:34px;border-radius:12px;overflow:hidden;margin:8px 0}
.phan-bo span{display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap}
.phan-bo span:nth-child(1){background:#0f5c47}.phan-bo span:nth-child(2){background:#1d7d9c}.phan-bo span:nth-child(3){background:#8a5a12}.phan-bo span:nth-child(4){background:#6a3f8e}
.luoi-gd{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:340px;overflow:auto;padding:4px}
.the-gd{border:3px solid transparent;border-radius:14px;background:var(--nen2);padding:0;cursor:pointer;overflow:hidden;font:inherit;text-align:left;color:var(--chu);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.the-gd img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--nen3)}
.the-gd span{display:block;padding:6px 8px;font-size:.84rem;font-weight:600;line-height:1.25}
.the-gd[aria-pressed="true"]{border-color:var(--nhan);box-shadow:0 0 0 2px var(--chinh)}
.tom-tat{display:grid;gap:0;margin:0;padding:0;list-style:none}
.tom-tat li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--vien)}
.tom-tat li:last-child{border:0}
.tom-tat .k{width:120px;flex:none;color:var(--chu-phu);font-size:.9rem}
.tom-tat .v{flex:1;font-weight:600;overflow-wrap:anywhere}
.thu-nho-sach{display:flex;gap:10px;flex-wrap:wrap}
.thu-nho-sach figure{margin:0;position:relative;width:104px}
.thu-nho-sach img{width:104px;height:104px;object-fit:cover;border-radius:12px;border:1px solid var(--vien)}
.thu-nho-sach button{position:absolute;top:-8px;right:-8px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thu-nho-sach button::before{content:"✕";width:28px;height:28px;border-radius:50%;background:var(--loi);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.tab-nho{display:inline-flex;border:2px solid var(--vien-dam);border-radius:999px;padding:3px;gap:2px;margin-bottom:14px}
.tab-nho button{border:0;background:none;color:var(--chu);font:inherit;font-weight:700;min-height:42px;padding:0 16px;border-radius:999px;cursor:pointer}
.tab-nho button[aria-selected="true"]{background:var(--chinh);color:var(--chinh-chu)}

/* trang hướng dẫn */
.van-ban{max-width:760px}
.van-ban h2{margin-top:1.6em}
.van-ban ol.buoc-lam{padding:0;list-style:none;counter-reset:s;display:grid;gap:12px;margin:0 0 18px}
.van-ban ol.buoc-lam li{counter-increment:s;position:relative;padding:14px 16px 14px 62px;background:var(--nen2);border:1px solid var(--vien);border-radius:16px;min-height:60px}
.van-ban ol.buoc-lam li::before{content:counter(s);position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--nhan);color:var(--nhan-chu);font-weight:800;display:flex;align-items:center;justify-content:center}
.o-khoa{display:flex;gap:8px;flex-wrap:wrap}
.o-khoa input{flex:1;min-width:220px}
.the-mau{display:flex;flex-direction:column;gap:8px}
.the-mau .nhom-nut{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.the-mau p{margin:0;color:var(--chu-phu);font-size:.93rem}

/* ---------- điện thoại ---------- */
@media (max-width:1300px){
  .dieu-huong{margin-left:4px}.dieu-huong a{padding:0 10px;font-size:.9rem}.dieu-huong a span{display:none}.logo small{display:none}
}
@media (max-width:1000px){
  .tk-nut span.ten{display:none}.tk-nut{padding:0 8px}
  .bon-nut{grid-template-columns:repeat(2,1fr)}
  .thanh-loc{grid-template-columns:1fr 1fr}
  .thanh-loc .truong:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .dieu-huong{display:none}
  .logo small{display:none}
  .man{padding:20px 16px 40px}
  .bon-nut{grid-template-columns:1fr;gap:12px}
  .nut-lon{flex-direction:row;align-items:center;min-height:92px;padding:16px;gap:14px}
  .nut-lon .bieu{flex:none}
  .nut-lon .mui{top:50%;transform:translateY(-50%)}
  .nut-lon:hover .mui{transform:translateY(-50%) translateX(4px)}
  .nut-lon .chu-nut{flex:1;display:flex;flex-direction:column;gap:2px;padding-right:22px}
  .thong-ke{grid-template-columns:1fr}
  .tk-nut span.ten{display:none}
  .tk-nut{padding:0 8px}
  .nav-duoi{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);background:var(--nen2);border-top:1px solid var(--vien);padding-bottom:env(safe-area-inset-bottom)}
  .nav-duoi a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:var(--cao-nav);text-decoration:none;color:var(--chu-phu);font-size:.875rem;font-weight:600;line-height:1.15}
  .nav-duoi a span.ic{font-size:1.35rem}
  .nav-duoi a[aria-current="page"]{color:var(--chinh);background:var(--chinh-nhat)}
  .chan{padding-bottom:calc(var(--cao-nav) + 40px)}
  #tw-thong-bao{bottom:calc(var(--cao-nav) + 10px)}
  .tien-do{display:none}
  .thanh-tien-mobile{display:block;margin-bottom:16px}
  .thanh-tien-mobile .vach{height:8px;background:var(--vien);border-radius:99px;overflow:hidden;margin-top:6px}
  .thanh-tien-mobile .vach i{display:block;height:100%;background:var(--chinh);transition:width .25s}
  .tom-tat li{flex-wrap:wrap}.tom-tat .k{width:100%}
  .the-chon{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .thanh-loc{grid-template-columns:1fr}
  .the{padding:16px}
  .luoi-the{grid-template-columns:1fr}
  .toast{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{.thanh,.nav-duoi,.chan,#tw-thong-bao{display:none}}

/* ---------- Tạo bài gọn + trang chủ dễ dùng (13–14/11/2026) ---------- */
.khung-tao{max-width:820px;margin:0 auto;padding:24px}
.khung-tao #o-ten{min-height:56px;font-size:1.15rem}
.khung-tao .truong>label{font-size:1.1rem}
.khung-tao .chip{min-height:48px;font-size:1rem}
.nang-cao{margin:0 0 16px;border:1px solid var(--vien);border-radius:14px;background:var(--nen);padding:0 14px}
.nang-cao>summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;color:var(--chinh);list-style-position:inside}
.nang-cao[open]{padding-bottom:12px}
.nang-cao>summary:focus-visible{outline:3px solid var(--nhan);outline-offset:2px;border-radius:8px}
.dong-tom{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--chinh-nhat);color:var(--chu);font-size:.98rem;line-height:1.5}
.hai-nut-to{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:6px}
.nut-to{min-height:72px;justify-content:flex-start;gap:14px;padding:12px 18px;border-radius:18px;text-align:left}
.nut-to>span[aria-hidden]{font-size:1.9rem;flex:none}
.nut-to .chu-nut-to{display:flex;flex-direction:column;gap:2px}
.nut-to b{font-size:1.2rem;font-weight:800}
.nut-to small{font-size:.88rem;font-weight:500;opacity:.9}
.nut-phu-to{border-color:var(--vien-dam);color:var(--chu)}
.vung-tien-do{margin-top:16px}
.vung-tien-do:empty{display:none}
.khung-tien-do{border:2px solid var(--chinh);border-radius:16px;background:var(--chinh-nhat);padding:16px;display:grid;gap:12px}
.khung-tien-do .chu-tien{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.tien-ai{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.tien-ai li{padding:6px 12px;border-radius:999px;background:var(--nen2);border:1px solid var(--vien);font-size:.9rem;font-weight:600;color:var(--chu-phu)}
.tien-ai li.xong{background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu)}
.tien-ai li.xong::before{content:"✓ "}
.tien-ai li.nay{border-color:var(--nhan);background:var(--nhan);color:var(--nhan-chu)}
.cach-sua{margin:8px 0 6px}
.hop-khoa{border:2px solid var(--nhan);border-radius:16px;background:var(--nhan-nhat);padding:16px 18px;color:var(--chu)}
.hop-khoa h3{margin:0 0 6px}
.hop-khoa .nho{color:var(--chu-phu)}
.hop-khoa ol.buoc-lam li{background:var(--nen2);padding:10px 12px 10px 56px;min-height:52px}
.hop-khoa ol.buoc-lam li::before{top:9px}
.hop-khoa .o-khoa input{min-height:52px}
.nhanh-bat-dau{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;max-width:640px}
.nhanh-bat-dau input{flex:1;min-width:220px;min-height:56px;font-size:1.1rem}
.nhanh-bat-dau .nut{min-height:56px;font-size:1.05rem}
.mau-nhanh{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.the-mau-nhanh{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:16px;min-height:112px;border-radius:16px;border:1px solid var(--vien);background:var(--nen2);color:var(--chu);font:inherit;cursor:pointer;box-shadow:var(--bong);transition:transform .2s,border-color .2s}
.the-mau-nhanh:hover{transform:translateY(-2px);border-color:var(--chinh)}
.the-mau-nhanh:focus-visible,.nut-lon:focus-visible,.nut:focus-visible,.chip:focus-visible,.the-gd:focus-visible{outline:3px solid var(--nhan);outline-offset:2px}
.the-mau-nhanh .ten-mau{font-weight:800;font-size:1.05rem;line-height:1.3}
.the-mau-nhanh .xem-mau{margin-top:auto;color:var(--chinh);font-weight:700}
.nut-lon b{font-size:1.3rem}
.nut-lon span.mo{font-size:1.02rem}
.anh-hung p{font-size:1.12rem}
@media (max-width:760px){
  .khung-tao{padding:16px}
  .hai-nut-to{grid-template-columns:1fr}
  .nut-to{min-height:76px}
  .nhanh-bat-dau .nut{width:100%}
}
.vach-ai{height:10px;border-radius:99px;background:var(--vien);overflow:hidden}
.vach-ai i{display:block;height:100%;background:var(--chinh);transition:width .25s}
.hop-khoa ol.buoc-lam{padding:0;list-style:none;counter-reset:s;display:grid;gap:10px;margin:0 0 14px}
.hop-khoa ol.buoc-lam li{counter-increment:s;position:relative;border:1px solid var(--vien);border-radius:14px;line-height:1.5;overflow-wrap:anywhere}
.hop-khoa ol.buoc-lam li::before{content:counter(s);position:absolute;left:12px;width:32px;height:32px;border-radius:50%;background:var(--nhan);color:var(--nhan-chu);font-weight:800;display:flex;align-items:center;justify-content:center}
.hop-khoa ol.buoc-lam li{padding:10px 12px 10px 54px}

/* ---------- v2: đối tượng và lối vào theo mục đích (chuyên gia E) ---------- */
.bon-nut.nam-nut{grid-template-columns:repeat(5,1fr);gap:14px}
.bon-nut.nam-nut .nut-lon{padding:20px 16px;min-height:168px}
.bon-nut.nam-nut .nut-lon:nth-child(3) .bieu{background:var(--chinh-nhat)}
.bon-nut.nam-nut .nut-lon:nth-child(2) .bieu,.bon-nut.nam-nut .nut-lon:nth-child(4) .bieu{background:var(--nhan-nhat)}
.khoi-dt{margin-top:22px}
.khoi-dt .tieu{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.khoi-dt .tieu h2{margin:0}
.luoi-dt{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.the-dt{display:flex;align-items:center;gap:14px;text-align:left;min-height:92px;padding:16px;border-radius:20px;border:2px solid var(--vien);background:var(--nen2);color:var(--chu);font:inherit;cursor:pointer;box-shadow:var(--bong);transition:transform .2s,border-color .2s,box-shadow .2s}
.the-dt:hover{transform:translateY(-2px);border-color:var(--chinh);box-shadow:var(--bong-nang)}
.the-dt:focus-visible{outline:3px solid var(--nhan);outline-offset:2px}
.the-dt[aria-pressed="true"]{border-color:var(--chinh);background:var(--chinh-nhat)}
.the-dt .bieu{flex:none;width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:var(--chinh-nhat)}
.the-dt[aria-pressed="true"] .bieu{background:var(--nhan)}
.the-dt .chu-the{display:flex;flex-direction:column;gap:3px;min-width:0}
.the-dt b{font-size:1.1rem;font-weight:800;line-height:1.2}
.the-dt .mo{color:var(--chu-phu);font-size:.92rem;line-height:1.35}
.dt-dang{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:10px 12px;border-radius:16px;background:var(--chinh-nhat)}
.dt-dang .bieu{flex:none;width:44px;height:44px;border-radius:14px;background:var(--nen2);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.dt-dang .chu-dt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dt-dang .nho{font-size:.88rem;color:var(--chu-phu)}
@media (max-width:1250px){.bon-nut.nam-nut{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.bon-nut.nam-nut{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .bon-nut.nam-nut{grid-template-columns:1fr;gap:12px}
  .bon-nut.nam-nut .nut-lon{min-height:92px;padding:16px}
  .luoi-dt{grid-template-columns:1fr}
  .the-dt{min-height:84px}
  .dt-dang{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.the-dt{transition:none}.the-dt:hover{transform:none}}