/* Font hệ thống: Udemy-like (Open Sans + headings đậm) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..800;1,14..32,400..700&display=swap');
html,body,.app,.w,.wrap,button,input,select,textarea,table{font-family:'Inter','Segoe UI',system-ui,sans-serif!important;}
h1,h2,h3,h4,.btn,.tnav,.mtab-b{font-family:'Inter','Segoe UI',system-ui,sans-serif!important;letter-spacing:-.01em;}
h1,h2,h3{font-weight:700!important;}
body{-webkit-font-smoothing:antialiased;}
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
/* Kiểu chung cho nút và ô nhập dùng trong Lớp học, Lộ trình, SOP (theo Modernist: góc vuông, viền 2px). */
.cm-inp,.sel{font:inherit;font-size:14px;color:#201e1d;background:#fff;border:2px solid #201e1d;border-radius:0;padding:9px 12px;min-height:40px;box-sizing:border-box;outline:none;min-width:0}
.cm-inp::placeholder{color:#6b6661}
.cm-inp:focus,.sel:focus{outline:2px solid #ec3013;outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;min-height:40px;padding:0 16px;font:inherit;font-size:14px;font-weight:700;color:#201e1d;background:#fff;border:2px solid #201e1d;border-radius:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:#f3f2f2}
.btn:active{background:#e6e4e3}
.btn:focus-visible{outline:2px solid #ec3013;outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:#ec3013;border-color:#ec3013;color:#fff}
.btn-primary:hover{background:#c4280f;border-color:#c4280f}
.btn-primary:active{background:#9e200c;border-color:#9e200c}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:#eeeceb}

/* Bo tròn đồng bộ toàn hệ thống (theo yêu cầu, thay góc vuông Modernist) */
:root{--r-sm:10px;--r-md:16px;--r-lg:22px;--r-pill:999px}
[id^="pg-"]:not(#pg-ThuVien) .btn,[id^="pg-"]:not(#pg-ThuVien) .cm-inp,[id^="pg-"]:not(#pg-ThuVien) .sel,[id^="pg-"]:not(#pg-ThuVien) select,[id^="pg-"]:not(#pg-ThuVien) input[type="text"],[id^="pg-"]:not(#pg-ThuVien) input[type="number"],[id^="pg-"]:not(#pg-ThuVien) input[type="date"],[id^="pg-"]:not(#pg-ThuVien) input[type="time"],[id^="pg-"]:not(#pg-ThuVien) input[type="email"],[id^="pg-"]:not(#pg-ThuVien) input[type="password"],[id^="pg-"]:not(#pg-ThuVien) textarea{border-radius:var(--r-pill)!important}
textarea{border-radius:var(--r-sm)!important}
.btn{justify-content:center;border-width:1.5px}
.cm-inp,.sel{border-width:1.5px;border-color:#d9d6d4}
.cm-inp:focus,.sel:focus{border-color:#201e1d;outline:2px solid #fbd5cd;outline-offset:0}
.card,.tag,[class*="card"]{border-radius:var(--r-md)!important}
.tag{border-radius:var(--r-pill)!important}
[id^="pg-"]:not(#pg-ThuVien) [style*="background: #fff"],[id^="pg-"]:not(#pg-ThuVien) [style*="background: #fff"],[id^="pg-"]:not(#pg-ThuVien) [style*="background: var(--card)"],[id^="pg-"]:not(#pg-ThuVien) [style*="border: 2px dashed"],[id^="pg-"]:not(#pg-ThuVien) [style*="border: 1px dashed"],[id^="pg-"]:not(#pg-ThuVien) [style*="border: 2px solid #201e1d"],[id^="pg-"]:not(#pg-ThuVien) [style*="border-top: 2px solid #201e1d"]{border-radius:var(--r-md);overflow:hidden}
body table [style*="background: #fff"],body tr,body td,body th{border-radius:0;overflow:visible}
[id^="pg-"]:not(#pg-ThuVien) [style*="width: 40px; height: 40px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 32px; height: 32px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 28px; height: 28px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 64px; height: 64px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 72px; height: 72px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 44px; height: 44px"]{border-radius:var(--r-sm)!important}
[id^="pg-"]:not(#pg-ThuVien) [style*="height: 4px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 6px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 10px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 12px"]{border-radius:var(--r-pill)!important}
[id^="pg-"]:not(#pg-ThuVien) [style*="width: 6px; height: 6px"],[id^="pg-"]:not(#pg-ThuVien) [style*="width: 10px; height: 10px"]{border-radius:50%!important}
[id^="pg-"]:not(#pg-ThuVien) [style*="border-top: 2px solid #201e1d"]{border-top:0!important;box-shadow:0 1px 2px rgba(32,30,29,.06),0 4px 16px rgba(32,30,29,.06)}
[id^="pg-"]:not(#pg-ThuVien) [style*="box-shadow: 4px 4px 0 #201e1d"]{border-radius:var(--r-lg)!important}

/* Bo tròn theo style thật đã render (React ghi "prop: value") */
[id^="pg-"]:not(#pg-ThuVien) div[style*="background"][style*="padding"],[id^="pg-"]:not(#pg-ThuVien) section[style*="background"],[id^="pg-"]:not(#pg-ThuVien) a[style*="background"][style*="padding"]{border-radius:16px}
[id^="pg-"]:not(#pg-ThuVien) span[style*="background"][style*="padding"],[id^="pg-"]:not(#pg-ThuVien) button[style*="padding"]{border-radius:999px}
[id^="pg-"]:not(#pg-ThuVien) [style*="height: 4px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 6px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 8px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 10px"],[id^="pg-"]:not(#pg-ThuVien) [style*="height: 12px"]{border-radius:999px}
[id^="pg-"]:not(#pg-ThuVien) [style*="border: 2px solid"],[id^="pg-"]:not(#pg-ThuVien) [style*="border: 1px solid"],[id^="pg-"]:not(#pg-ThuVien) [style*="dashed"]{border-radius:16px}
[id^="pg-"]:not(#pg-ThuVien) td,[id^="pg-"]:not(#pg-ThuVien) th,[id^="pg-"]:not(#pg-ThuVien) tr{border-radius:0!important}
[id^="pg-"]:not(#pg-ThuVien) input,[id^="pg-"]:not(#pg-ThuVien) select{border-radius:999px}
[id^="pg-"]:not(#pg-ThuVien) textarea{border-radius:12px}

[id^="pg-"]:not(#pg-ThuVien) div[style*="border-radius: 999px"][style*="padding"]{border-radius:16px!important}

/* Tránh mất chữ khi bo góc */
textarea,[id^="pg-"] textarea,body textarea{border-radius:14px!important;padding:12px 16px!important}
input.cm-inp,select.sel,[id^="pg-"] input:not([type=checkbox]):not([type=radio]):not([type=file]),[id^="pg-"] select{padding-left:16px!important;padding-right:16px!important}
[id^="pg-"] [contenteditable]{border-radius:14px!important;padding-left:16px!important}

/* giãn dòng tiêu đề trang */
[id^="pg-"] h1{line-height:1.2!important;margin-top:3px!important;margin-bottom:5px!important}
[id^="pg-"] h1+p,[id^="pg-"] h1+div{line-height:1.5!important;margin-top:0!important}
[id^="pg-"] h2{line-height:1.25!important;margin-bottom:5px!important}
[id^="pg-"] h3{line-height:1.35!important}
[id^="pg-"] p{line-height:1.5}

/* textarea: bo góc vừa, không cắt chữ (thắng rule viên thuốc) */
html body [id^="pg-"]:not(#pg-ThuVien) textarea,html body textarea{border-radius:14px!important;padding:14px 18px!important;line-height:1.75!important;background:#fbfaf9!important;border:1.5px solid #e4e1df!important;min-height:110px}
html body [id^="pg-"]:not(#pg-ThuVien) textarea:focus{background:#fff!important;border-color:#201e1d!important;outline:none}
#pg-QuanLyNoiDung .cm-lbl{display:block;margin:18px 0 8px;font-size:13px;font-weight:700;color:#201e1d}

[style*="overflow: auto"][style*="radius: 999px"],[style*="overflow-y: auto"][style*="radius: 999px"],[style*="max-height"][style*="radius: 999px"],textarea{border-radius:14px!important}

.btn-block{width:100%!important}

.el-search{border:0!important;box-shadow:none!important;padding-left:4px!important;border-radius:0!important;background:transparent!important}

/* ==== Màu kiểu Udemy: nền trắng, viền mảnh xám, đỏ 3D chỉ ở điểm nhấn ==== */
html,body,.appbody{background:#fff!important}
.btn{border:1.5px solid #d9d6d4!important;color:#201e1d}
.btn:hover{background:#f6f5f5!important;border-color:#b9b5b2!important}
.btn-primary{background:#ec3013!important;border-color:#ec3013!important;color:#fff!important}
.btn-primary:hover{background:#c92a10!important;border-color:#c92a10!important}
.btn-ghost{background:#fff}
.cm-inp,.sel,select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=time],textarea{border:1.5px solid #d9d6d4!important}
.cm-inp:focus,.sel:focus,select:focus,input:focus,textarea:focus{border-color:#201e1d!important;outline:none!important}
.card{border:1px solid #e4e1df!important;box-shadow:none!important;background:#fff}
[id^="pg-"] [style*="border: 2px solid #201e1d"]{border:1px solid #e4e1df!important}
[id^="pg-"] [style*="border-top: 2px solid #201e1d"],[id^="pg-"] [style*="border-bottom: 2px solid #201e1d"]{border-color:#e4e1df!important;border-width:1px!important}
.table th{background:#f8f7f7!important;color:#4a4643!important;border-bottom:1px solid #e4e1df!important}
.table td{border-bottom:1px solid #f0eeed!important}
.table tbody tr:hover td{background:#fbfafa!important}

/* ==== Font gần với Udemy Sans, hỗ trợ tiếng Việt đầy đủ ==== */
:root{--font-heading:system-ui,sans-serif;--font-body:system-ui,sans-serif}
html,body,button,input,select,textarea,.btn,.appbody,.appbody *,[id^="pg-"],[id^="pg-"] *{font-family:system-ui,-apple-system,'Segoe UI',sans-serif!important}
h1,h2,h3{letter-spacing:-.01em}

/* ==== Udemy-style pass 2 ==== */
.qopt{border:1.5px solid #d9d6d4!important;border-radius:12px!important;background:#fff!important;display:flex!important;align-items:center;gap:14px;padding:14px 18px!important}
.qopt:hover{border-color:#201e1d!important;background:#fbfafa!important}
#pg-KhaoSat button[style*="border"]:not(.btn){border-radius:999px!important;border:1.5px solid #d9d6d4!important}
#pg-KhaoSat button[style*="border"]:not(.btn):hover{border-color:#201e1d!important}
#pg-BangXepHang [style*="border-radius: 50%"][style*="gradient"],#pg-HoSo [style*="border-radius: 50%"][style*="gradient"]{background:#201e1d!important}
#pg-BangXepHang [style*="background: #fdece9"],#pg-BangXepHang [style*="background: var(--red-tint)"]{background:#fff!important;border:1px solid #e4e1df!important}
#pg-DangKySeminar [style*="background: #f1f2f4"],#pg-DangKySeminar [style*="background: var(--soft)"]{background:#fff!important;border:1px solid #e4e1df!important}
#pg-HoSo [style*="background: #000"],#pg-HoSo [style*="background: #111"],#pg-HoSo [style*="background: var(--ink)"]{border-radius:999px!important}
[id^="pg-"] .card,[id^="pg-"] [style*="border-radius: 16px"],[id^="pg-"] [style*="border-radius: 18px"],[id^="pg-"] [style*="border-radius: 20px"]{box-shadow:none!important}

/* ==== Udemy-style pass 3: toàn bộ trang ==== */
/* khối lớn nền đỏ/đen -> thẻ trắng */
[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 2"],[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 2"],[id^="pg-"] div[style*="background: #ec3013"][style*="padding: 2"],[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 1"]{background:#fff!important;color:#201e1d!important;border:1px solid #e4e1df!important;box-shadow:none!important}
[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 2"] *,[id^="pg-"] div[style*="background: #ec3013"][style*="padding: 2"] *,[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 1"] *{color:inherit}
[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 2"] [style*="font-size: 4"],[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 1"] [style*="font-size: 4"],[id^="pg-"] div[style*="background: var(--red)"][style*="padding: 2"] [style*="font-size: 3"]{color:#ec3013!important}
/* hero nền xám -> trắng có viền */
[id^="pg-"] [style*="background: #f4f5f7"],[id^="pg-"] [style*="background: #f1f2f4"],[id^="pg-"] [style*="background: #eef0f3"]{background:#fff!important;border:1px solid #e4e1df!important}
/* viền màu trên thẻ -> viền xám mảnh */
[id^="pg-"] [style*="border-top: 3px solid"],[id^="pg-"] [style*="border-top: 4px solid"]{border-top:1px solid #e4e1df!important}
/* tab chọn nền đen -> nền xám nhạt chữ đen */
#pg-LopHoc button[style*="background: #201e1d"],#pg-LopHoc div[style*="background: #201e1d"][style*="cursor"]{background:#f3f2f2!important;color:#201e1d!important}
#pg-LopHoc button[style*="background: #201e1d"] *,#pg-LopHoc div[style*="background: #201e1d"][style*="cursor"] *{color:inherit!important}
/* stat card chữ số */
[id^="pg-"] [style*="font-size: 40px"],[id^="pg-"] [style*="font-size: 44px"],[id^="pg-"] [style*="font-size: 48px"]{letter-spacing:-.02em}
/* bảng & thẻ quản lý */
[id^="pg-Quan"] .table,[id^="pg-Workspace"] .table,#pg-QuanTri .table{border:1px solid #e4e1df;border-radius:14px;overflow:hidden}
[id^="pg-"] [style*="border: 1.5px solid #201e1d"],[id^="pg-"] [style*="border: 2px solid var(--ink)"],[id^="pg-"] [style*="border: 2px solid #111"]{border:1px solid #e4e1df!important}



/* ==== Font hệ thống giống Udemy (SF Pro / Segoe UI / Roboto), áp cho mọi phần tử ==== */
:root{--font-heading:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.app,.app *,body,body *{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important}
.app{--bg:#ffffff!important;background:#fff!important}

/* ==== Font Inter cho toàn app ==== */
:root{--font-heading:'Inter',system-ui,sans-serif!important;--font-body:'Inter',system-ui,sans-serif!important}
.app,.app *,body,body *{font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important}

h1,h2,h3,[style*="font-weight: 700"],[style*="font-weight: 800"],[style*="font-weight: 900"]{text-wrap:balance}
p,[style*="line-height: 1.5"],[style*="line-height: 1.55"]{text-wrap:pretty}

/* ==== Dùng lại Archivo cho toàn app ==== */
:root{--font-heading:'Archivo',system-ui,sans-serif!important;--font-body:'Archivo',system-ui,sans-serif!important}
.app,.app *,body,body *{font-family:'Archivo',-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important}

/* ==== Nền động màn hình đăng nhập: vòng tròn lan toả, dấu cộng 3D bay lên, cột tăng trưởng ==== */
.lgfx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lg-dots{position:absolute;inset:-20px;background-image:radial-gradient(#d9d6d4 1.2px,transparent 1.3px);background-size:22px 22px;opacity:.55;animation:lgPan 40s linear infinite}
.lg-ring{position:absolute;left:50%;top:44%;border:1.5px solid rgba(236,48,19,.28);border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;animation:lgRing 9s ease-out infinite}
.lg-r1{width:520px;height:520px}.lg-r2{width:520px;height:520px;animation-delay:3s}.lg-r3{width:520px;height:520px;animation-delay:6s}
.lg-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35}
.lg-b1{width:260px;height:260px;background:#fbc4b8;left:-60px;top:8%;animation:lgFloat 14s ease-in-out infinite}
.lg-b2{width:220px;height:220px;background:#e4e1df;right:-40px;bottom:6%;animation:lgFloat 17s ease-in-out infinite reverse}
.lg-plus{position:absolute;bottom:-40px;font-weight:900;color:#ec3013;opacity:0;animation:lgRise 12s linear infinite;line-height:1}
.lg-p1{left:14%;font-size:28px}.lg-p2{left:38%;font-size:18px;animation-delay:3s;color:#201e1d}.lg-p3{left:66%;font-size:34px;animation-delay:6s}.lg-p4{left:84%;font-size:20px;animation-delay:9s;color:#201e1d}
.lg-bar{position:absolute;bottom:0;width:22px;border-radius:8px 8px 0 0;background:#201e1d;opacity:.08;transform-origin:bottom;animation:lgGrow 6s ease-in-out infinite}
.lg-k1{left:10%;height:90px}.lg-k2{left:calc(10% + 30px);height:140px;animation-delay:.4s}.lg-k3{left:calc(10% + 60px);height:190px;animation-delay:.8s;background:#ec3013;opacity:.18}.lg-k4{left:calc(10% + 90px);height:250px;animation-delay:1.2s}
@keyframes lgRing{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
@keyframes lgFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
@keyframes lgRise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(-110vh) rotate(180deg);opacity:0}}
@keyframes lgGrow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes lgPan{to{transform:translate(22px,22px)}}
@media (prefers-reduced-motion:reduce){.lgfx *{animation:none!important}.lg-ring{opacity:.4;transform:translate(-50%,-50%) scale(.8)}}

/* ==== Minh hoạ Open Peeps (CC0) màn đăng nhập ==== */
.lg-ill{position:relative;width:min(440px,80vw);height:340px;margin:4px auto 0}
.lg-disc{position:absolute;left:50%;top:50%;width:290px;height:290px;margin:-145px 0 0 -145px;border-radius:50%;background:#fff;border:2px solid #201e1d}
.lg-orbit{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;border:2px dashed #ec3013;opacity:.55;animation:lgSpin 30s linear infinite}
.lg-pa,.lg-pb{position:absolute;bottom:0;height:300px;width:auto}
.lg-pa{left:4%;animation:lgBob 5s ease-in-out infinite}
.lg-pb{right:2%;height:320px;animation:lgBob 6s ease-in-out infinite .8s}
.lg-chip{position:absolute;width:46px;height:46px;border-radius:12px;background:#fff;border:2px solid #201e1d;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:3px 3px 0 #201e1d;animation:lgBob 4s ease-in-out infinite}
.lg-c1{left:calc(50% - 23px);top:4%;animation-delay:.3s}.lg-c2{right:34%;top:30%;animation-delay:1.1s}.lg-c3{left:36%;top:58%;animation-delay:1.8s}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.lg-ill *{animation:none!important}}

.lgfx{filter:blur(3px);opacity:.6}
.lg-ill{margin-top:18px}

/* minh hoạ chìm làm nền, lớp phủ nhẹ, logo ở giữa */
.lg-ill{position:absolute!important;left:50%;top:50%;margin:0!important;transform:translate(-50%,-50%) scale(1.35);opacity:.22;filter:blur(1.5px);pointer-events:none}
.lg-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85) 0,rgba(255,255,255,.55) 45%,rgba(247,246,245,.35) 100%);pointer-events:none}

.lg-ill{opacity:.42!important;filter:blur(.6px)!important}
.lg-veil{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.72) 0,rgba(255,255,255,.38) 45%,rgba(247,246,245,.18) 100%)!important}
.lgfx{opacity:.8!important;filter:blur(2px)!important}

.lg-ill{opacity:.7!important;filter:none!important;transform:translate(-50%,-50%) scale(1.05)!important}
.lg-veil{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6) 0,rgba(255,255,255,.25) 40%,rgba(247,246,245,0) 75%)!important}


.lg-ill{opacity:.5!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) scale(.85)!important}

/* logo nửa trên, minh hoạ nửa dưới, đối xứng qua tâm */
.lg-head{position:absolute!important;left:50%;top:27%;transform:translate(-50%,-50%);width:max-content;max-width:90%}
.lg-ill{top:71%!important}
.lg-veil{background:radial-gradient(ellipse at 50% 27%,rgba(255,255,255,.7) 0,rgba(255,255,255,.3) 35%,rgba(247,246,245,0) 65%)!important}

.lg-veil{display:none!important}
.lg-head img{mix-blend-mode:multiply!important;background:transparent!important}

.fb-act>button,.fb-act>sc-if>button,.fb-act button{height:34px!important;display:inline-flex!important;align-items:center!important;gap:4px;padding:0 12px!important;margin:0!important;line-height:1!important;vertical-align:middle!important;box-sizing:border-box!important;white-space:nowrap}
.fb-act>sc-if{display:contents}

.fb-menu button{justify-content:flex-start!important;padding:9px 12px!important;height:auto!important;margin:0!important}

textarea.fb-ta,textarea.fb-ta:focus{border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;padding:8px 0!important;border-radius:0!important}

/* ===== Smartphone (<=640px) ===== */
@media (max-width:640px){
  html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;}
  input,select,textarea{font-size:16px!important;}
  img,video,iframe{max-width:100%;}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  [style*="grid-template-columns: repeat(auto-fit"],[style*="grid-template-columns: repeat(auto-fill"]{grid-template-columns:minmax(0,1fr)!important;}
  [style*="min-width: 280px"],[style*="min-width: 300px"],[style*="min-width: 320px"],[style*="min-width: 340px"]{min-width:0!important;}
  [role=dialog]{max-width:100vw!important;}
  .lg-grid{display:block!important;min-height:100svh!important;}
  .lg-hero{min-height:0!important;padding:28px 20px 8px!important;background:#fff!important;}
  .lgfx,.lg-ill,.lg-veil{display:none!important;}
  .lg-head img{width:120px!important;}
  .lg-form{padding:12px 20px 32px!important;align-items:flex-start!important;}
  .lg-form-h1{font-size:22px!important;margin:8px 0 20px!important;text-align:left!important;}
  .authwrap{padding:16px!important;align-items:flex-start!important;}
  .authcard{padding:22px 18px!important;border-radius:18px!important;width:100%!important;box-sizing:border-box;}
  .apphdr{flex-wrap:wrap!important;gap:8px 10px!important;padding:8px 12px!important;}
  .apphdr > div:first-child img{height:32px!important;}
  .apphdr .faqlink{margin-left:auto;padding:6px 10px!important;font-size:0!important;min-height:40px;}
  .apphdr .faqlink svg{width:20px;height:20px;}
  .apphdr > .grp > .tnav > span:nth-child(2){display:none!important;}
  .apphdr > .grp > .tnav{padding:4px!important;min-height:40px;}
  .appnav{order:10;flex:1 0 100%!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -12px!important;padding:2px 12px 4px;}
  .appnav::-webkit-scrollbar{display:none;}
  .appnav .tnav{font-size:13px!important;padding:8px 14px!important;white-space:nowrap;min-height:38px;}
  .appnav .menu,.apphdr .menu{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;max-height:70vh;overflow:auto;min-width:0!important;border-radius:20px!important;z-index:200;}
  .mi{min-height:46px;font-size:15px!important;}
  .wc-avatar{width:52px!important;height:52px!important;font-size:18px!important;}
  .wc-title{font-size:20px!important;}
  .quest-card{flex:1 1 100%!important;}
}
*{-webkit-tap-highlight-color:transparent;}

/* ===== Mobile v3: chống tràn ngang toàn hệ thống ===== */
@media (max-width:640px){
  .app, .app *{box-sizing:border-box;}
  .app *:not(svg):not(path):not(circle):not(line):not(polyline):not(rect):not(.menu){max-width:100%;}
  .app [style*="display: flex"] > *{min-width:0;}
  .app [style*="display: flex"]:not(.appnav):not([style*="nowrap"]){flex-wrap:wrap;}
  .app [style*="white-space: nowrap"]:not(.tnav):not(button){white-space:normal!important;}
  .app [style*="width: "][style*="px"]:not(img):not(svg):not(span):not(button):not(input){width:auto;}
  .app [style*="grid-template-columns"][style*="px "],.app [style*="grid-template-columns"][style*="px)"]:not([style*="repeat(auto"]){grid-template-columns:minmax(0,1fr)!important;}
  .app [style*="grid-template-columns: repeat(3"],.app [style*="grid-template-columns: repeat(4"],.app [style*="grid-template-columns: repeat(5"],.app [style*="grid-template-columns: repeat(6"],.app [style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .app [style*="grid-template-columns: 2fr"],.app [style*="grid-template-columns: 3fr"],.app [style*="grid-template-columns: 1fr 2fr"],.app [style*="grid-template-columns: 1fr 3fr"]{grid-template-columns:minmax(0,1fr)!important;}
  .app [style*="grid-column: span"]{grid-column:auto!important;}
  .app [style*="position: absolute"][style*="right: -"],.app [style*="position: absolute"][style*="left: -"]{display:none;}
  .app table{display:block;overflow-x:auto;max-width:100%;white-space:nowrap;}
  .app pre,.app code{white-space:pre-wrap;word-break:break-word;}
  .app p,.app h1,.app h2,.app h3,.app div,.app span,.app a{overflow-wrap:anywhere;}
  .app [style*="padding: 40px"],.app [style*="padding: 48px"],.app [style*="padding: 56px"]{padding-left:16px!important;padding-right:16px!important;}
  .app [style*="margin-left: 2"],.app [style*="margin-left: 3"],.app [style*="margin-left: 4"]{margin-left:0!important;}
}

/* ===== Mobile v4: chuẩn web app điện thoại — thanh điều hướng đáy, vùng an toàn ===== */
@media (max-width:640px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))!important;}
  .apphdr{padding-top:calc(8px + env(safe-area-inset-top))!important;border-top-width:3px!important;}
  .appnav{position:fixed!important;left:0;right:0;bottom:0;top:auto;z-index:150;margin:0!important;padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;background:#fff;box-shadow:0 -4px 20px rgba(32,30,29,.08);display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:visible!important;gap:2px!important;}
  .appnav > .grp{min-width:0;display:flex;}
  .appnav .tnav{flex:1;flex-direction:column;justify-content:center;gap:2px;font-size:11px!important;font-weight:700;letter-spacing:0;padding:6px 2px!important;min-height:52px;border-radius:14px!important;white-space:normal!important;text-align:center;line-height:1.15;text-transform:none;}
  .appnav .tnav .caret{display:none!important;}
  .appnav .menu{bottom:calc(76px + env(safe-area-inset-bottom))!important;}
  .apphdr{position:sticky!important;top:0;}
  .app button,.app a,.app [role=button]{touch-action:manipulation;}
  .app input:not([type=checkbox]):not([type=radio]),.app select{min-height:46px;}
  .app [style*="position: fixed"][style*="bottom: 2"],.app [style*="position: fixed"][style*="bottom: 3"]{bottom:calc(84px + env(safe-area-inset-bottom))!important;}
}

/* ===== Mobile v5: thanh tab đáy riêng + sheet Cá nhân ===== */
.mtab,.msheet,.msheet-bg{display:none;}
@media (max-width:640px){
  .appnav,.apphdr > .grp{display:none!important;}
  .apphdr{position:sticky!important;top:0;z-index:120;padding:calc(8px + env(safe-area-inset-top)) 16px 8px!important;border-bottom:0!important;box-shadow:0 1px 0 rgba(32,30,29,.06)!important;}
  .mtab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:300;background:#fff;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 rgba(32,30,29,.08),0 -8px 24px rgba(32,30,29,.06);}
  .mtab-b{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font:600 11px/1.1 Archivo,sans-serif;color:#8a847c;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent;}
  .mtab-i{width:22px;height:22px;stroke-width:2;}
  .mtab-on{color:#ec3013;}
  .mtab-on .mtab-i{stroke-width:2.4;}
  .msheet-bg{display:block;position:fixed;inset:0;background:rgba(32,30,29,.35);z-index:250;}
  .msheet{display:block;position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top) + 40px);z-index:260;background:#f4f2ef;border-radius:24px 24px 0 0;padding:20px 16px calc(84px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .msheet-i{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;font:500 16px/1.3 Archivo,sans-serif;color:#201e1d;cursor:pointer;border-bottom:1px solid #f0ece7;}
  .msheet-i:last-child{border-bottom:0;}
  .msheet-i.mi-on{color:#ec3013;font-weight:700;}
  .mtab-x{all:unset;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;cursor:pointer;}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;}
  .app [id^="pg-"] > div,.app .lt-wrap,.app .gd-wrap,.app .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}
}

@media (max-width:640px){
  .app .lb-tabs{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;margin-left:-14px!important;margin-right:-14px!important;padding:2px 14px 6px;}
  .app .lb-tabs::-webkit-scrollbar{display:none;}
  .app .lb-tabs > *{flex:0 0 auto;white-space:nowrap!important;}
  .app .lb-podium{flex-wrap:nowrap!important;gap:8px!important;}
  .app .lb-podium > *{flex:1 1 0;width:auto!important;min-width:0;}
  .app .tnav,.app .chip,.app button{white-space:nowrap;}
  .app [style*="flex-wrap: wrap"] > button,.app [style*="flex-wrap: wrap"] > a{flex:0 0 auto;}
}

@media (max-width:640px){
  .app .lv-name{white-space:nowrap!important;flex:0 0 auto!important;}
  .app .lv-bar{flex:1 1 60px!important;min-width:60px!important;}
  .app .lv-meta{flex:1 0 100%!important;white-space:normal!important;}
  .app .lt-meta{white-space:nowrap!important;flex:0 0 auto!important;}
  .app .lt-cta{flex:1 0 100%!important;width:100%!important;justify-content:center;}
  .apphdr .hdr-title{display:none!important;}
}

@media (max-width:640px){ .app .lv-pill{display:flex!important;flex-wrap:wrap!important;border-radius:18px!important;row-gap:6px!important;padding:8px 12px!important;} }

/* Lĩnh vực: lưới 2 cột gọn trong 1 màn hình */
@media (max-width:640px){
  .app .dm-hero{padding:14px 16px!important;border-radius:16px!important;}
  .app .dm-hero h1{font-size:20px!important;margin-top:4px!important;}
  .app .dm-hero p{display:none;}
  .app .dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important;}
  .app .dm-grid > a{flex:none!important;border-radius:16px;overflow:hidden;}
  .app .dm-top{padding:12px!important;min-height:112px;display:flex;flex-direction:column;}
  .app .dm-top > div:first-child > div{width:34px!important;height:34px!important;font-size:18px!important;}
  .app .dm-top > div:first-child > span{font-size:10px!important;padding:3px 8px!important;}
  .app .dm-name{font-size:14px!important;line-height:1.25;margin-top:auto!important;padding-top:10px;}
  .app .dm-bot{display:none!important;}
}

/* Lĩnh vực: lưới 2 cột gọn 1 màn hình */
@media (max-width:640px){
  .app .dm-hero{padding:14px 16px!important;}
  .app .dm-hero h1{font-size:20px!important;margin-top:4px!important;}
  .app .dm-hero p{display:none;}
  .app .dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important;}
  .app .dm-grid > a{flex:none!important;border-radius:16px;overflow:hidden;}
  .app .dm-top{padding:12px!important;min-height:112px;display:flex;flex-direction:column;}
  .app .dm-top > div:first-child > div{width:34px!important;height:34px!important;font-size:18px!important;}
  .app .dm-top > div:first-child > span{font-size:10px!important;padding:3px 8px!important;}
  .app .dm-name{font-size:14px!important;line-height:1.25;margin-top:auto!important;padding-top:10px;}
  .app .dm-bot{display:none!important;}
}

/* Trang chủ điện thoại: gọn */
@media (max-width:640px){
  .app .wc-avatar{width:44px!important;height:44px!important;}
  .app .wc-title{font-size:18px!important;line-height:1.3!important;}
  .app .lv-pill{margin-top:8px!important;box-shadow:none!important;padding:8px 10px!important;}
  .app .hm-path{margin-top:14px!important;padding:14px!important;gap:10px!important;border-radius:16px!important;}
  .app .hm-path > div:first-child{min-width:0!important;}
  .app .hm-path .quest-card{padding:10px 12px 12px!important;border-radius:12px!important;}
  .app .lt-cta{padding:11px 16px!important;}
  .app .hm-filter{margin-top:16px!important;padding-top:14px!important;gap:8px!important;}
  .app .hm-filter > div[style*="flex: 1"]{display:none;}
  .app .hm-filter button{padding:8px 12px!important;font-size:13px!important;}
  .app .hm-search{flex:1 0 100%!important;min-width:0!important;order:-1;}
  .app .hm-search input{padding:10px 14px 10px 16px!important;}
  .app .hm-search > span{height:44px!important;}
  .app .hm-sort{margin:10px 0 8px!important;}
  .app .hm-sort > div:last-child{overflow-x:auto;flex-wrap:nowrap;}
  .app .uc{display:grid!important;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:2px;padding:10px!important;border-radius:14px!important;}
  .app [style*="grid-template-columns"]:has(> .uc){grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  .app .uc-cv{grid-row:1 / span 3;aspect-ratio:1/1!important;border-radius:10px!important;align-self:start;}
  .app .uc-cv > span{top:4px!important;left:4px!important;font-size:10px!important;padding:2px 6px!important;}
  .app .uc-cv > span[title]{display:none!important;}
  .app .uc-cv div[style*="font-size: 40px"]{font-size:30px!important;}
  .app .uc-t{font-size:15px!important;margin-top:0!important;-webkit-line-clamp:2!important;line-height:1.3!important;}
  .app .uc-g{font-size:12px!important;margin-top:0!important;}
  .app .uc-x{display:none!important;}
  .app .uc-m{display:none!important;}
  .app .uc-f{padding-top:6px!important;margin-top:auto!important;}
  .app .uc-f > div{font-size:12px!important;color:#6b6661!important;font-weight:600!important;}
  .app .uc-f > span{padding:6px 12px!important;font-size:13px!important;border-radius:999px!important;}
}

/* Chi tiết khoá học — điện thoại */
@media (max-width:640px){
  .app .cd-wrap{display:flex!important;flex-direction:column;gap:14px!important;padding:12px 14px 24px!important;}
  .app .cd-side{order:-1;position:static!important;width:100%;}
  .app .cd-side .card{border-radius:18px!important;}
  .app .cd-cover{aspect-ratio:16/9!important;}
  .app .cd-side .card > div:last-child{padding:14px!important;}
  .app .cd-side .card > div:last-child > div:first-child{margin-bottom:10px!important;}
  .app .cd-go{width:100%!important;min-height:50px;justify-content:center!important;}
  .app .cd-share{min-height:44px;}
  .app .cd-incl{display:none!important;}
  .app .cd-h1{font-size:22px!important;line-height:1.25!important;margin-top:8px!important;}
  .app .cd-facts{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-top:12px!important;}
  .app .cd-facts > div{padding:10px 6px!important;border-radius:12px!important;text-align:center;}
  .app .cd-facts > div > div:first-child{font-size:15px!important;}
  .app .cd-facts > div > div:last-child{font-size:11px!important;}
  .app .cd-warn{font-size:12px!important;padding:10px 12px!important;margin-top:12px!important;border-radius:12px!important;}
  .app .cd-wrap h2{font-size:17px!important;margin:18px 0 10px!important;}
  .app .cd-wrap .chap{border-radius:14px;overflow:hidden;margin-bottom:10px;}
  .app .cd-wrap .chap-h{padding:12px 14px!important;font-size:14px!important;flex-wrap:wrap;gap:4px;}
  .app .cd-wrap .lrow{padding:12px 14px!important;gap:10px!important;min-height:52px;}
  .app .cd-wrap section{padding-bottom:70px;}
}

/* Lộ trình của tôi — điện thoại */
@media (max-width:640px){
  .app .lt-wrap{padding:14px 14px 24px!important;}
  .app .lt-wrap h1{font-size:22px!important;}
  .app .lt-sub{font-size:12px!important;margin:4px 0 12px!important;line-height:1.5;}
  .app .lt-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin:0 0 14px!important;}
  .app .lt-stats > div{padding:10px!important;border-radius:14px!important;margin:0!important;}
  .app .lt-stats > div > div:first-child{font-size:9px!important;letter-spacing:.02em!important;line-height:1.25;min-height:23px;}
  .app .lt-stats > div > div:last-child{font-size:24px!important;margin-top:4px!important;line-height:1!important;}
  .app .rm-box{padding:14px 0 4px!important;border-radius:18px!important;margin-left:0!important;margin-right:0!important;}
  .app .rm-box > div:first-child{padding:0 14px!important;margin-bottom:10px!important;}
  .app .rm-box > div:first-child > div:first-child{font-size:17px!important;}
  .app .rm-hint{font-size:11px!important;flex:1 0 100%;}
  .app .rm-list{padding:0 10px 8px!important;}
  .app .rm-st{grid-template-columns:24px minmax(0,1fr)!important;column-gap:8px!important;margin-bottom:8px!important;}
  .app .rm-st > div:first-child > div:first-child{width:24px!important;height:24px!important;font-size:11px!important;border-width:2px!important;}
  .app .rm-card{padding:12px!important;border-radius:14px!important;border-left-width:3px!important;}
  .app .rm-card > div:first-child > div:first-child > div:last-child{font-size:15px!important;}
  .app .rm-card > div:first-child > div:last-child{font-size:12px!important;}
  .app .rm-card > div:nth-child(2){margin:8px 0!important;}
  .app .rm-items{grid-template-columns:minmax(0,1fr)!important;gap:6px!important;}
  .app .rm-items > div{padding:10px!important;min-height:48px;}
  .app .rm-items > div div[style*="font-size: 14px"]{font-size:13px!important;}
  .app .rm-items em{font-size:11px;}
}

@media (max-width:640px){
  .app .qt-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:14px!important;}
  .app .qt-stats > div{padding:10px 8px!important;border-radius:14px!important;}
  .app .qt-stats > div > div:first-child{font-size:9px!important;letter-spacing:.02em!important;}
  .app .qt-stats > div > div:last-child{font-size:22px!important;}
}

/* Hồ sơ — điện thoại: gọn 1 màn */
@media (max-width:640px){
  .app .pf-head{display:grid!important;grid-template-columns:56px minmax(0,1fr);gap:4px 12px!important;padding:14px!important;border-radius:18px!important;}
  .app .pf-av{width:56px!important;height:56px!important;font-size:20px!important;}
  .app .pf-info{display:contents;}
  .app .pf-info h1{font-size:18px!important;line-height:1.25;align-self:end;}
  .app .pf-info > div:nth-child(2){grid-column:2;font-size:12px!important;margin-top:0!important;}
  .app .pf-head .pf-av{grid-row:1 / span 2;}
  .app .pf-stats{grid-column:1 / -1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important;margin-top:10px!important;}
  .app .pf-stats > div{padding:8px 4px!important;border-radius:12px!important;text-align:center;}
  .app .pf-stats > div > div:first-child{font-size:16px!important;}
  .app .pf-stats > div > div:last-child{font-size:10px!important;line-height:1.2;}
  .app .pf-lv{grid-column:1 / -1;text-align:left!important;min-width:0!important;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;margin-top:6px;}
  .app .pf-lv > div:nth-child(1){display:none;}
  .app .pf-lv > div:nth-child(2){font-size:14px!important;}
  .app .pf-lv > div:nth-child(3){width:auto!important;margin:0!important;}
  .app .pf-lv > div:nth-child(4){grid-column:1 / -1;margin-top:0!important;}
  .app .pf-cols{gap:10px!important;margin-top:10px!important;}
  .app .pf-cols > .card{padding:14px!important;border-radius:18px!important;}
  .app .pf-cols > .card > div:first-child{font-size:15px!important;}
  .app .pf-cols [style*="gap: 14px"]{gap:10px!important;margin-top:10px!important;}
  .app .pf-badges{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-top:10px!important;}
  .app .pf-badges > div{padding:8px 4px!important;border-radius:12px!important;text-align:center;border-width:1px!important;}
  .app .pf-badges > div > div:first-child{font-size:22px!important;}
  .app .pf-badges > div > div:nth-child(2){font-size:10px!important;line-height:1.2;margin-top:4px!important;}
  .app .pf-badges > div > div:nth-child(3),.app .pf-badges > div > .pill{display:none!important;}
}

/* Thử thách: màu đáp án thắng rule .qopt !important */
.qopt.qopt-wrong,.qopt.qopt-wrong:hover{border:2px solid #ec3013!important;background:#fdeae6!important;}
.qopt.qopt-right,.qopt.qopt-right:hover{border:2px solid #2e9e4f!important;background:#eff9f1!important;}
#pg-ThuThach .qopt:active{border-color:#ec3013!important;background:#fdeae6!important;}
@media (max-width:640px){
  #pg-ThuThach .card,#pg-ThuThach > div > div{border-radius:18px;}
  #pg-ThuThach h1,#pg-ThuThach h2{font-size:18px!important;}
  #pg-ThuThach [style*="font-size: 19px"]{font-size:16px!important;margin-bottom:10px!important;line-height:1.35;}
  #pg-ThuThach [style*="font-size: 30px"],#pg-ThuThach [style*="font-size: 32px"],#pg-ThuThach [style*="font-size: 28px"]{font-size:20px!important;}
  #pg-ThuThach [style*="flex-direction: column; gap: 12px"]{gap:6px!important;}
  #pg-ThuThach .qopt{padding:10px 12px!important;gap:10px!important;font-size:14px!important;min-height:48px;border-radius:12px!important;}
  #pg-ThuThach .qopt > span{width:24px!important;height:24px!important;font-size:12px!important;}
  #pg-ThuThach [style*="margin-top: 20px; background"]{margin-top:10px!important;padding:10px 12px!important;font-size:13px!important;border-radius:12px!important;}
  #pg-ThuThach [style*="margin-top: 20px; background"] > div{font-size:14px!important;}
  #pg-ThuThach [style*="background: rgb(32, 30, 29)"][style*="margin-top: 12px"]{margin-top:6px!important;padding:10px 12px!important;font-size:12px!important;border-radius:12px!important;}
  #pg-ThuThach [style*="padding: 28px"],#pg-ThuThach [style*="padding: 24px"],#pg-ThuThach [style*="padding: 32px"]{padding:14px!important;}
}

/* Lớp học & Seminar — điện thoại: gọn */
@media (max-width:640px){
  
  #pg-LopHoc h1{font-size:20px!important;}
  #pg-LopHoc h1 + p,#pg-LopHoc h1 + div{font-size:12px!important;margin-bottom:10px!important;}
  #pg-LopHoc [style*="grid-template-columns"]:has(> button),#pg-LopHoc [style*="grid-template-columns"]:has(> div[onclick]){grid-template-columns:1fr 1fr!important;gap:8px!important;}
  #pg-LopHoc button[style*="border-radius: 16px"],#pg-LopHoc button[style*="border-radius: 18px"]{padding:10px 12px!important;border-radius:14px!important;}
  #pg-LopHoc button[style*="border-radius: 16px"] div,#pg-LopHoc button[style*="border-radius: 18px"] div{font-size:11px!important;}
  #pg-LopHoc button[style*="border-radius: 16px"] div:first-child,#pg-LopHoc button[style*="border-radius: 18px"] div:first-child{font-size:14px!important;}
  #pg-LopHoc [style*="border-bottom: 2px solid"]{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:14px!important;margin-top:10px!important;}
  #pg-LopHoc [style*="border-bottom: 2px solid"] > *{flex:0 0 auto;white-space:nowrap;font-size:13px!important;}
  #pg-LopHoc [style*="dashed"]{padding:12px 14px!important;margin-top:10px!important;border-radius:14px!important;}
  #pg-LopHoc [style*="dashed"] div:first-child{font-size:14px!important;}
  #pg-GhiDanh .w > div{padding:4px 14px 24px!important;}
  #pg-GhiDanh .w > div > div:first-child{padding:12px 14px!important;border-radius:14px!important;}
  #pg-GhiDanh .w > div > div:first-child h1{font-size:18px!important;margin-top:2px!important;}
  #pg-GhiDanh .w > div > div:first-child p,#pg-GhiDanh .w > div > div:first-child h1 + div{display:none;}
  #pg-GhiDanh .w > div > div:first-child > div:first-child{font-size:11px!important;}
  #pg-GhiDanh .w > div > div:not(:first-child):not(.sd-bg) > div:not(.sd-box),#pg-GhiDanh [style*="border-top: 1px solid"]{padding:10px 4px!important;}
  #pg-GhiDanh [style*="font-size: 18px"],#pg-GhiDanh [style*="font-size: 17px"],#pg-GhiDanh [style*="font-size: 16px"]{font-size:14px!important;}
  #pg-GhiDanh [style*="font-size: 14px"]{font-size:12px!important;}
  #pg-GhiDanh div:has(> button + button){display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px!important;margin-top:8px!important;}
  #pg-GhiDanh div:has(> button + button) > button{margin:0!important;padding:8px 10px!important;min-height:40px;font-size:12px!important;width:auto!important;}
}

/* Chi tiết seminar — bottom sheet trên điện thoại */
@media (max-width:640px){
  .sd-bg{align-items:flex-end!important;padding:0!important;z-index:400!important;}
  .sd-box{max-width:none!important;border-radius:24px 24px 0 0!important;padding:10px 18px calc(18px + env(safe-area-inset-bottom))!important;max-height:85vh!important;box-shadow:0 -10px 40px rgba(0,0,0,.2);}
  .sd-box::before{content:"";display:block;width:40px;height:4px;border-radius:999px;background:#d9d6d4;margin:0 auto 12px;}
  .sd-box > div:nth-child(2){font-size:19px!important;line-height:1.3;margin-top:10px!important;}
  .sd-box > div:nth-child(3){gap:10px 14px!important;margin-top:12px!important;padding:12px;border-radius:14px;background:#f6f5f4;}
  .sd-box > div:nth-child(3) > div > div:last-child{font-size:14px;}
  .sd-box [style*="background: var(--soft)"],.sd-box [style*="background: rgb(24"]{border-radius:14px!important;padding:12px!important;margin-top:10px!important;}
  .sd-box button:not([aria-label="Đóng"]){min-height:50px;width:100%;margin-top:12px!important;justify-content:center;}
  .sd-box button[aria-label="Đóng"]{width:40px!important;height:40px!important;}
}

/* Chi tiết seminar: popup giữa màn hình, nền mờ */
@media (max-width:640px){
  #pg-GhiDanh .sd-bg,.sd-bg{align-items:center!important;justify-content:center!important;padding:16px!important;background:rgba(32,30,29,.45)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
  #pg-GhiDanh .sd-box,.sd-box{border-radius:22px!important;padding:18px!important;max-height:80vh!important;width:100%!important;box-shadow:0 20px 60px rgba(0,0,0,.3)!important;}
  .sd-box::before{display:none!important;}
}

@media (max-width:640px){
  .app .cd-card{padding:12px 14px!important;border-radius:14px!important;margin:0 0 12px!important;}
  #pg-GhiDanh .w > div{padding-top:0!important;}
  #pg-GhiDanh .w > div > div:first-child{margin:12px 0 0!important;}
}

/* Lớp học & Seminar: canh lề đều 14px */
@media (max-width:640px){
  
  
  #pg-LopHoc [style*="dashed"]{padding:12px 14px!important;}
  #pg-LopHoc [style*="margin-top: 3"],#pg-LopHoc [style*="margin-top: 4"],#pg-LopHoc [style*="margin-bottom: 3"],#pg-LopHoc [style*="margin-bottom: 4"]{margin-top:10px!important;margin-bottom:0!important;}
  #pg-GhiDanh .w > div{padding:0 14px 24px!important;}
  #pg-GhiDanh .w > div > div:first-child{margin:14px 0 4px!important;}
  .app .cd-card{background:#f4f5f7!important;color:#201e1d!important;flex-direction:column;align-items:stretch!important;gap:10px!important;}
  .app .cd-card > div{flex:none!important;}
  .app .cd-card > div:last-child{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .app .cd-card > div:first-child > div:last-child{color:#6b6661!important;}
}

@media (max-width:640px){
  .app .cd-card{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;}
  .app .cd-card > div:first-child{flex:1 1 auto!important;min-width:0;}
  .app .cd-card > div:first-child > div:nth-child(2){font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app .cd-card > div:first-child > div:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app .cd-card > div:last-child{flex:0 0 auto!important;display:flex!important;gap:4px!important;}
  .app .cd-card > div:last-child > div{width:38px;padding:5px 0!important;border-radius:10px!important;}
  .app .cd-card > div:last-child > div > div:first-child{font-size:15px!important;}
  .app .cd-card > div:last-child > div > div:last-child{font-size:9px!important;}
}

/* Lề chuẩn như trang chủ: 14px */
@media (max-width:640px){
  #pg-LopHoc .lh-wrap{padding:16px 14px 0!important;max-width:none!important;}
  #pg-GhiDanh .gd-wrap{padding:0 14px 24px!important;max-width:none!important;}
  #pg-GhiDanh .gd-wrap > div{margin-left:0!important;margin-right:0!important;}
  #pg-GhiDanh .gd-wrap > div:not(:first-child):not(.sd-bg) > div:not(.sd-box){padding-left:0!important;padding-right:0!important;}
}

/* Lề an toàn toàn hệ thống: 20px + vùng tai thỏ */
@media (max-width:640px){
  .app [id^="pg-"] [style*="margin: 0px auto"],
  .app [id^="pg-"] [style*="margin:0 auto"],
  #pg-LopHoc .lh-wrap,#pg-GhiDanh .gd-wrap,.app .cd-wrap,.app .lt-wrap{padding-left:max(30px, env(safe-area-inset-left))!important;padding-right:max(30px, env(safe-area-inset-right))!important;box-sizing:border-box;}
  .app [id^="pg-"] [style*="margin: 0px auto"] [style*="margin: 0px auto"]{padding-left:0!important;padding-right:0!important;}
  .apphdr{padding-left:max(30px, env(safe-area-inset-left))!important;padding-right:max(30px, env(safe-area-inset-right))!important;}
  .app .hm-sort > div:last-child,.app .lb-tabs{margin-left:-30px!important;margin-right:-30px!important;padding-left:30px!important;padding-right:30px!important;}
  .msheet{padding-left:30px!important;padding-right:30px!important;}
}

@media (max-width:640px){
  #pg-LoTrinhDb .lt-stats.lt-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 14px!important;}
  #pg-LoTrinhDb .lt-stats > div{padding:10px 10px!important;border-radius:14px!important;min-width:0!important;}
  #pg-LoTrinhDb .lt-stats > div > div:first-child{font-size:9px!important;letter-spacing:.02em!important;line-height:1.2!important;}
  #pg-LoTrinhDb .lt-stats > div > div:last-child{font-size:22px!important;margin-top:4px!important;line-height:1!important;}
}

/* Hồ sơ: giãn ra */
@media (max-width:640px){
  .app .pf-head{padding:20px!important;gap:8px 14px!important;grid-template-columns:64px minmax(0,1fr)!important;}
  .app .pf-av{width:64px!important;height:64px!important;}
  .app .pf-info h1{font-size:20px!important;}
  .app .pf-info > div:nth-child(2){font-size:13px!important;}
  .app .pf-stats{gap:8px!important;margin-top:16px!important;}
  .app .pf-stats > div{padding:12px 4px!important;border-radius:14px!important;}
  .app .pf-stats > div > div:first-child{font-size:18px!important;}
  .app .pf-stats > div > div:last-child{font-size:11px!important;margin-top:2px;}
  .app .pf-lv{margin-top:12px!important;gap:6px 12px!important;}
  .app .pf-cols{gap:16px!important;margin-top:16px!important;}
  .app .pf-cols > .card{padding:20px!important;}
  .app .pf-cols [style*="gap: 14px"]{gap:16px!important;margin-top:14px!important;}
  .app .pf-badges{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:14px!important;}
  .app .pf-badges > div{padding:12px 6px!important;border-radius:14px!important;}
  .app .pf-badges > div > div:first-child{font-size:26px!important;}
  .app .pf-badges > div > div:nth-child(2){font-size:11px!important;margin-top:6px!important;}
}

/* Quản lý seminar — điện thoại: thẻ thay bảng */
@media (max-width:640px){
  #pg-DangKySeminar h1{font-size:20px!important;}
  #pg-DangKySeminar .dk-filter{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin-top:12px!important;}
  #pg-DangKySeminar .dk-filter > select{min-width:0!important;width:100%;min-height:44px;}
  #pg-DangKySeminar .dk-filter > select:nth-child(3){grid-column:1 / -1;}
  #pg-DangKySeminar .dk-filter > div{grid-column:1 / -1;margin-left:0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;}
  #pg-DangKySeminar .dk-filter > div > .btn-primary{grid-column:1 / -1;min-height:46px;justify-content:center;}
  #pg-DangKySeminar .dk-filter > div > .btn-ghost{min-height:42px;justify-content:center;}
  #pg-DangKySeminar .dk-scroll{overflow:visible!important;}
  #pg-DangKySeminar .dk-tbl{min-width:0!important;}
  #pg-DangKySeminar .dk-head{display:none!important;}
  #pg-DangKySeminar .dk-row{grid-template-columns:28px minmax(0,1fr) auto!important;grid-template-areas:"ck t n" "ck d x" "ck s x";gap:2px 10px!important;padding:12px 14px!important;}
  #pg-DangKySeminar .dk-row > div:nth-child(1){grid-area:ck;align-self:start;padding-top:2px;}
  #pg-DangKySeminar .dk-row > div:nth-child(2){grid-area:t;font-size:14px;line-height:1.3;}
  #pg-DangKySeminar .dk-row > div:nth-child(3){grid-area:d;font-size:12px;color:#6b6661;}
  #pg-DangKySeminar .dk-row > div:nth-child(4){grid-area:s;font-size:12px;}
  #pg-DangKySeminar .dk-row > div:nth-child(5){grid-area:n;font-size:18px;}
  #pg-DangKySeminar .dk-row > div:nth-child(6){grid-area:x;align-self:end;}
  #pg-DangKySeminar .dk-row > div:nth-child(6) a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1.5px solid #ec3013;border-radius:999px;}
  #pg-DangKySeminar .dk-row input[type=checkbox],#pg-DangKySeminar .dk-p input[type=checkbox]{width:20px;height:20px;}
  #pg-DangKySeminar .dk-p{grid-template-columns:minmax(0,1fr) auto!important;gap:2px 10px!important;padding:12px 14px!important;}
  #pg-DangKySeminar .dk-p > div:nth-child(2),#pg-DangKySeminar .dk-p > div:nth-child(3){grid-column:1;font-size:12px;color:#6b6661;}
  #pg-DangKySeminar .dk-p > label{grid-column:2;grid-row:1 / span 3;align-self:center;min-height:44px;}
}

/* Báo cáo học tập — điện thoại */
@media (max-width:640px){
  #pg-Workspace .wrap{padding:16px max(30px,env(safe-area-inset-left)) 24px!important;max-width:100vw!important;overflow-x:hidden;box-sizing:border-box;}
  #pg-Workspace .wrap h1{font-size:20px!important;}
  #pg-Workspace .noprint{gap:8px!important;}
  #pg-Workspace .noprint > div{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;width:100%;}
  #pg-Workspace .noprint > div > div{min-width:0;}
  #pg-Workspace .noprint > div > div:last-child{grid-column:1 / -1;}
  #pg-Workspace .noprint select{width:100%!important;min-width:0!important;min-height:44px;}
  #pg-Workspace .noprint > .btn{width:100%;justify-content:center;min-height:46px;height:auto!important;}
  #pg-Workspace .kpi{flex:1 1 calc(33.33% - 8px)!important;min-width:0!important;padding:10px!important;border-radius:14px!important;}
  #pg-Workspace .kpi > div:first-child{font-size:10px!important;line-height:1.2;}
  #pg-Workspace .kpi > div:nth-child(2){font-size:18px!important;}
  #pg-Workspace .kpi > div:nth-child(3){font-size:10px!important;}
  #pg-Workspace [style*="gap: 12px"][style*="flex-wrap: wrap"]:has(> .kpi){gap:8px!important;margin-top:12px!important;}
  #pg-Workspace .card{margin-top:16px!important;max-width:100%;overflow:hidden;border-radius:16px!important;}
  #pg-Workspace .card > div:first-child{padding:12px 14px!important;}
  #pg-Workspace .card > div:first-child .btn{width:100%;justify-content:center;}
  #pg-Workspace .card [style*="overflow-x: auto"]{overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%;}
  #pg-Workspace table{display:table!important;max-width:none!important;width:max-content!important;min-width:100%;font-size:13px!important;}
  #pg-Workspace th,#pg-Workspace td{white-space:nowrap!important;padding:10px 12px!important;text-align:left!important;overflow-wrap:normal!important;}
  #pg-Workspace td:first-child,#pg-Workspace th:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 #eceae9;}
}

/* Báo cáo tương tác — điện thoại */
@media (max-width:640px){
  #pg-BaoCaoTuongTac .wrap,#pg-BaoCaoTuongTac > div > div{padding-left:max(30px,env(safe-area-inset-left))!important;padding-right:max(30px,env(safe-area-inset-right))!important;box-sizing:border-box;max-width:100vw!important;}
  #pg-BaoCaoTuongTac h1{font-size:20px!important;}
  #pg-BaoCaoTuongTac h1 + p{font-size:12px!important;}
  .app .ir-filter{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;width:100%;}
  .app .ir-filter select{width:100%;min-height:44px;font-size:14px!important;}
  .app .ir-filter .btn{grid-column:1 / -1;width:100%;justify-content:center;min-height:46px;}
  .app .ir-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:14px!important;}
  .app .ir-stats > div{padding:12px!important;border-radius:14px!important;}
  .app .ir-stats > div > div:first-child{font-size:10px!important;line-height:1.25;}
  .app .ir-stats > div > div:last-child{font-size:22px!important;}
  #pg-BaoCaoTuongTac table{display:table!important;width:max-content!important;min-width:100%;font-size:13px!important;}
  #pg-BaoCaoTuongTac th,#pg-BaoCaoTuongTac td{white-space:nowrap!important;padding:10px 12px!important;overflow-wrap:normal!important;}
  #pg-BaoCaoTuongTac td:first-child,#pg-BaoCaoTuongTac th:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 #eceae9;}
}

@media (max-width:640px){
  #pg-Workspace .noprint > div > div:last-child{grid-column:auto!important;}
  #pg-Workspace .noprint > div{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:end;}
  #pg-Workspace .noprint > div > div > div:first-child{font-size:10px!important;margin-bottom:3px!important;white-space:nowrap;}
  #pg-Workspace .noprint select,#pg-Workspace .sel{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box;font-size:13px!important;padding-left:14px!important;padding-right:30px!important;}
  #pg-Workspace .kpi{flex:1 1 calc(50% - 8px)!important;}
  #pg-Workspace .wrap > div:first-child{display:block!important;}
}

@media (max-width:640px){
  .app .ng-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .app .ng-stats > button{padding:12px!important;border-radius:14px!important;}
  .app .ng-stats > button > div:first-child{font-size:10px!important;line-height:1.2;}
  .app .ng-stats > button > div:last-child{font-size:24px!important;margin-top:2px!important;}
}

/* Bản đồ hệ thống — gọn */
.app .bd-grid .grp{padding:12px!important;}
.app .bd-grid .mod{font-size:12px!important;padding:6px 10px!important;}
@media (max-width:640px){
  .app .bd-wrap{padding:14px max(30px,env(safe-area-inset-left)) 24px!important;}
  .app .bd-wrap h1{font-size:20px!important;}
  .app .bd-wrap > div:first-child p{font-size:12px!important;}
  .app .bd-h{font-size:15px!important;margin:16px 0 8px!important;}
  .app .bd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .app .bd-grid .grp > div:first-child > div:first-child{width:28px!important;height:28px!important;font-size:15px!important;}
  .app .bd-grid .grp > div:first-child > div:last-child{font-size:13px!important;}
  .app .bd-grid .mod{font-size:11px!important;padding:5px 8px!important;}
  .app .bd-rules{grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;gap:8px!important;}
  .app .bd-rules .card{padding:10px!important;}
  #pg-BanDoHeThong table{font-size:12px!important;}
  #pg-BanDoHeThong th,#pg-BanDoHeThong td{padding:8px 10px!important;white-space:nowrap;}
  .app .bd-flow .step{min-width:150px;padding:10px!important;}
}

@media (max-width:640px){
  .app .ir-stats.ir-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
  .app .ir-stats > div{padding:10px 8px!important;}
  .app .ir-stats > div > div:first-child{font-size:9px!important;}
  .app .ir-stats > div > div:last-child{font-size:19px!important;}
}

@media (max-width:640px){
  .app .rc-nosv{gap:10px!important;padding:14px!important;flex-wrap:nowrap!important;}
  .app .rc-nosv > div:nth-child(2){min-width:0!important;flex:1 1 auto!important;}
  .app .rc-nosv > div:nth-child(2) > div:first-child{font-size:13px!important;}
  .app .rc-nosv > div:nth-child(2) > div:last-child{display:none!important;}
  .app .rc-nosv > div:first-child{width:36px!important;height:36px!important;font-size:16px!important;}
  .app .rc-nosv > button{padding:8px 14px!important;font-size:12px!important;white-space:nowrap;}
}

/* Font cuối cùng: Open Sans (giống Udemy) — đặt cuối file để thắng mọi rule trước */
.app,.app *,body,body *,[id^="pg-"] *,button,input,select,textarea,table{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif!important;}
h1,h2,h3{font-weight:700!important;letter-spacing:-.01em;}

@media (max-width:640px){
  .apphdr .vmbtn{margin-left:auto;padding:6px 10px!important;min-height:40px;}
  .apphdr .vmbtn .vmtxt{display:inline;font-size:12px;}
  .apphdr .faqlink{margin-left:0!important;}
}

@media (max-width:640px){
  .apphdr .vmbtn{padding:6px 12px!important;}
  .apphdr .vmbtn .vmtxt{display:inline!important;font-size:12px!important;white-space:nowrap;}
}

/* Đăng nhập — gọn trong 1 màn hình điện thoại */
@media (max-width:640px){
  .app .lg-grid{min-height:100svh!important;display:flex!important;flex-direction:column;justify-content:center;}
  .app .lg-hero{padding:0 20px!important;min-height:0!important;flex:none!important;}
  .app .lg-head img{width:min(170px,44vw)!important;}
  .app .lg-head > div:last-child{margin-top:2px!important;}
  .app .lg-head > div:last-child > div:first-child{font-size:18px!important;}
  .app .lg-head > div:last-child > div:last-child{display:none!important;}
  .app .lg-form{padding:10px 20px 20px!important;flex:none!important;align-items:flex-start!important;}
  .app .lg-form-h1{font-size:17px!important;margin:4px 0 14px!important;line-height:1.3!important;}
  .app .lg-form label{font-size:12px!important;margin-bottom:4px!important;}
  .app .lg-form label + input{padding:12px 14px!important;font-size:16px!important;}
  .app .lg-form label[style*="margin-top: 14px"]{margin-top:10px!important;}
  .app .lg-form > div > div[style*="flex-end"]{margin-top:4px!important;}
  .app .lg-form > div > button{margin-top:10px!important;padding:13px!important;font-size:15px!important;}
  .app .lg-form > div > div[style*="text-align: center"]:not(.lg-form-hint){font-size:11px!important;margin-top:8px!important;}
  .app .lg-form > div > div[style*="margin-top: 36px"]{margin-top:12px!important;}
  .app .lg-form > div > div[style*="margin-top: 36px"] > div{padding:10px!important;font-size:13px!important;}
  .app .lg-form > div > div[style*="margin-top: 36px"] button{font-size:13px!important;}
}

@media (max-width:640px){
  .app .lg-grid > .lg-hero{display:flex!important;visibility:visible!important;padding:8px 20px 0!important;}
  .app .lg-head{display:flex!important;visibility:visible!important;opacity:1!important;}
  .app .lg-head img{display:block!important;visibility:visible!important;opacity:1!important;width:min(190px,48vw)!important;height:auto!important;margin:0 auto;}
  .app .lg-head > div:last-child > div:first-child{display:block!important;}
}

@media (max-width:640px){
  .app .lg-head{position:static!important;}
  .app .lg-hero{overflow:visible!important;min-height:auto!important;}
}

@media (max-width:640px){
  .app .lg-hero{align-items:center!important;text-align:center;}
  .app .lg-head{align-items:center!important;margin:0 auto!important;left:auto!important;right:auto!important;width:100%!important;max-width:100%!important;}
  .app .lg-head img{margin-left:auto!important;margin-right:auto!important;}
  .app .lg-head > div:last-child{margin-left:auto!important;margin-right:auto!important;text-align:center!important;}
}

@media (max-width:640px){
  .app .lg-head{transform:none!important;position:static!important;inset:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box;}
  .app .lg-hero{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;box-sizing:border-box;}
  .app .lg-head img{width:min(190px,48vw)!important;max-width:190px!important;margin-left:auto!important;margin-right:auto!important;}
}

/* Nền minh hoạ học tập, mờ nhẹ phía dưới màn đăng nhập (điện thoại) */
@media (max-width:640px){
  .app .lg-grid{position:relative;isolation:isolate;}
  .app .lg-grid::before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(22vh,120px);z-index:-1;pointer-events:none;}
  .app .lg-grid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(22vh,120px);z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.55) 60%,rgba(255,255,255,.15) 100%);}
}

/* Đăng nhập: thu gọn chiều dọc */
@media (max-width:640px){
  .app .lg-hero{padding:0 20px!important;}
  .app .lg-head img{width:min(140px,36vw)!important;max-width:140px!important;}
  .app .lg-head > div:last-child > div:first-child{font-size:16px!important;}
  .app .lg-form{padding:6px 20px 14px!important;}
  .app .lg-form-h1{font-size:15px!important;margin:2px 0 10px!important;}
  .app .lg-form label{margin-bottom:3px!important;}
  .app .lg-form label + input{padding:13px 16px!important;}
  .app .lg-form label[style*="margin-top: 14px"]{margin-top:8px!important;}
  .app .lg-form > div > button{margin-top:12px!important;padding:15px!important;font-size:16px!important;}
  .app .lg-form > div > div[style*="margin-top: 36px"]{margin-top:8px!important;}
  .app .lg-grid::before,.app .lg-grid::after{height:min(15vh,86px)!important;}
}

@media (max-width:640px){
  .app .lg-grid::before,.app .lg-grid::after{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:0!important;}
  .app .lg-grid::before{opacity:.16!important;}
  .app .lg-hero,.app .lg-form{position:relative;z-index:1;}
}

/* Nền minh hoạ mờ phủ toàn màn hình đăng nhập */
@media (max-width:640px){
  .app .lg-grid::before{position:fixed!important;inset:0!important;height:auto!important;width:auto!important;z-index:0!important;
    }
  .app .lg-grid::after{display:none!important;}
}

/* Nền ảnh thật, mờ, phủ toàn màn đăng nhập */
@media (max-width:640px){
  .app .lg-grid::before{background:url('img/login-bg.jpg') center center / cover no-repeat!important;opacity:.16!important;filter:grayscale(1) blur(1.5px)!important;}
}

@media (max-width:640px){
  .app .lg-grid{background:transparent!important;}
  .app .lg-hero{background:transparent!important;}
  .app .lg-form{background:transparent!important;}
}

/* Nền ảnh mờ trên nền trắng, chữ mực đậm (điện thoại) */
@media (max-width:640px){
  .app .lg-grid::before{opacity:.5!important;filter:grayscale(1) blur(.8px)!important;}
  .app .lg-grid::after{display:block!important;content:""!important;position:fixed!important;inset:0!important;height:auto!important;z-index:0!important;pointer-events:none!important;
    background:linear-gradient(to bottom,rgba(255,255,255,.52),rgba(255,255,255,.66))!important;}
  .app .lg-head > div:last-child > div{color:#201e1d!important;}
  .app .lg-form-h1,.app .lg-form label{color:#201e1d!important;}
  .app .lg-form input{background:#fff!important;border-color:#dcd9d6!important;color:#201e1d!important;}
  .app .lg-form input::placeholder{color:#9b958f!important;}
  .app .lg-form-hint{color:#6b6661!important;}
  .app .lg-form a,.app .lg-form button[style*="background: none"]{color:#b8240d!important;}
  .app .lg-form button[style*="background: rgb(236"]{color:#fff!important;}
  .app .lg-form-hint{color:#3d3936!important;}
}

/* Phóng to màn đăng nhập 120% (điện thoại) */
@media (max-width:640px){
  .app .lg-head img{width:min(168px,44vw)!important;max-width:168px!important;}
  .app .lg-head > div:last-child > div:first-child{font-size:19px!important;}
  .app .lg-form-h1{font-size:18px!important;}
  .app .lg-form label{font-size:14px!important;}
  .app .lg-form input{padding:12px 16px!important;font-size:16px!important;}
  .app .lg-form button{font-size:16px!important;padding:14px!important;}
  .app .lg-form-hint{font-size:13px!important;}
}

/* Giãn khoảng cách giữa các cụm trên màn đăng nhập */
@media (max-width:640px){
  .app .lg-form .lg-form-hint{font-size:13px!important;color:#3d3936!important;margin-top:16px!important;}
  .app .lg-form label[style*="margin-top: 14px"]{margin-top:14px!important;}
  .app .lg-form > div > div[style*="margin-top: 36px"]{margin-top:22px!important;}
  .app .lg-form > div > div[style*="background"] button{font-size:15px!important;}
  .app .lg-head{margin-bottom:6px!important;}
  .app .lg-form-h1{margin:8px 0 14px!important;}
}

@media (max-width:640px){
  .app .lg-form > div > div.lg-form-hint{font-size:13px!important;margin-top:16px!important;color:#3d3936!important;}
  .app .lg-form button[style*="background: none"]{font-size:15px!important;padding:14px!important;}
}

/* Đăng nhập máy tính: khung form canh giữa trên nền ảnh tối */
@media (min-width:641px){
  .app .lg-head{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;max-width:440px!important;}
  .app .lg-head img{mix-blend-mode:normal!important;}
  .app .lg-grid{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;}
}

/* Bảng người dùng: ô gọn, thanh cuộn ngang luôn hiện */
.qt-scroll{scrollbar-color:#b8b4b1 #f0eeed;}
.qt-scroll::-webkit-scrollbar{height:12px;}
.qt-scroll::-webkit-scrollbar-track{background:#f0eeed;}
.qt-scroll::-webkit-scrollbar-thumb{background:#b8b4b1;border-radius:999px;border:3px solid #f0eeed;}
.qt-scroll::-webkit-scrollbar-thumb:hover{background:#8a8684;}
.qt-scroll table td,.qt-scroll table th{padding:7px 10px!important;}


/* ===== Mobile v6: rớt chữ, chồng chữ, lề đều, thanh tab ===== */
@media (max-width:640px){
  /* 1. Không cắt chữ giữa từ (ghi đè overflow-wrap:anywhere của v3) */
  .app p,.app h1,.app h2,.app h3,.app h4,.app div,.app span,.app a,.app td,.app th,.app button,.app label,.app li{
    overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important;}
  .app h1,.app h2,.app h3,.app p{text-wrap:pretty;}

  /* 2. Đáp án quiz: chữ không chồng lên nhau */
  .app .qopt{display:block!important;line-height:1.5;padding:14px 16px!important;}
  .app .qopt > span:first-child{float:left;margin:1px 10px 0 0;}

  /* 3. Hàng nút nhanh ở Bảng tin: xếp đều, chữ không đè */
  .app .fb-quick{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px!important;}
  .app .fb-quick > button{flex:none!important;flex-direction:column!important;gap:4px!important;
    font-size:12px!important;line-height:1.25;text-align:center;min-width:0;padding:8px 4px!important;}

  /* 4. Bảng: cuộn ngang, cột không bị bóp vỡ chữ */
  .app table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .app table td,.app table th{white-space:nowrap!important;}
  .app table td > div,.app table td > span{white-space:nowrap!important;}

  /* 5. Lề trái/phải đều nhau ở mọi trang */
  .app [id^="pg-"] > div,.app .lt-wrap,.app .gd-wrap,.app .wrap{
    padding-left:16px!important;padding-right:16px!important;}

  /* 6. Thẻ số liệu: nhãn đủ chỗ, không rớt chữ lẻ */
  .app [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* 7. Nút trong hàng ngang luôn co được */
  .app [style*="display:flex"] > button,.app [style*="display: flex"] > button{min-width:0;}
}

/* ===== Mobile v7: thanh đầu bài học + tab bài học ===== */
@media (max-width:640px){
  .app .hb-title{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    flex:1 1 100%!important;order:3;font-size:14px!important;}
  .app .hb-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px 18px!important;padding:0 16px;}
  .app .hb-tabs::-webkit-scrollbar{display:none;}
  .app .hb-tabs > button{white-space:nowrap!important;flex:none!important;}
}

/* ===== Mobile v8: màn đăng nhập gọn hơn + khối trắng mờ 80% ===== */
@media (max-width:640px){
  .app .lg-grid::after{background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,.5))!important;}
  .app .lg-head img{width:min(112px,30vw)!important;max-width:112px!important;}
  .app .lg-head > div:last-child > div:first-child{font-size:14px!important;}
  .app .lg-hero{padding:0 18px!important;}
  .app .lg-form{padding:8px 18px 18px!important;}
  .app .lg-form > div{width:100%!important;max-width:340px!important;margin:0 auto!important;box-sizing:border-box;
    background:rgba(255,255,255,.7)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.65)!important;border-radius:18px!important;
    padding:18px 16px 16px!important;box-shadow:0 10px 30px rgba(32,30,29,.12)!important;}
  .app .lg-form-h1{font-size:14px!important;margin:0 0 12px!important;}
  .app .lg-form label{font-size:11.5px!important;}
  .app .lg-form label + input{padding:11px 14px!important;}
  .app .lg-form > div > button{margin-top:12px!important;padding:13px!important;font-size:15px!important;}
  .app .lg-form-hint{font-size:11px!important;}
}

/* Đăng nhập điện thoại: ảnh nền riêng (dọc) */
@media (max-width:640px){
  .app .lg-bg{background-image:url('img/login-hero-mobile.jpg')!important;background-position:center center!important;}
}

/* Avatar luôn tròn, không bị quy tắc bo góc chung ép thành vuông */
.el-avatar,[id^="pg-"] .el-avatar{border-radius:50%!important;overflow:hidden!important}