:root{ --navy:#0F3A5C; --text:#1A4A6E; --deep:#1B7DB8; --mid:#2E96D0; --light:#5BAFDD; --pale:#B8DCEF; --bg:#EEF7FC; --kbg:#EEF7FC; --gold:#CDA85F; --gold2:#E4C58A; --hot:#F5C843; --tx2:#4A6A82; --ln:#D7E6F1; --white:#fff; --on-toi:#A8CFE6; --on-toi2:#CFE6F4; --g-btn:linear-gradient(135deg,#1B7DB8 0%,#2E96D0 100%); --g-deep:linear-gradient(135deg,#0F3A5C 0%,#1A4A6E 50%,#1B7DB8 100%); --g-soft:linear-gradient(135deg,#EEF7FC 0%,#D6E9F5 100%); --g-gold:linear-gradient(135deg,#F5C843 0%,#E4C58A 100%); --g-cta:linear-gradient(135deg,#1B7DB8 0%,#2E96D0 50%,#5BAFDD 100%); --rail:linear-gradient(90deg,#1B7DB8,#2E96D0,#5BAFDD,#F5C843,#CDA85F); } *{box-sizing:border-box} [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:#FBFDFE;color:#12283A;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased; /* chạm không loé ô xám, không kéo giãn mép như trang web */ -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none; /* Tắt "chạm hai lần để phóng to". Trình duyệt phải chờ khoảng 300ms sau mỗi cú chạm để xem có cú thứ hai không — đó chính là chỗ bấm nhanh thấy khựng. Vẫn giữ chụm hai ngón để phóng to, nên người mắt kém không bị thiệt. */ touch-action:manipulation} a,button,label,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation} /* Nút và mục menu không phải chữ để đọc: chạm nhiều lần không bôi đen, giữ lâu không bật bảng chọn của hệ điều hành. */ .tabitem,.btn,.aprow,.segbar a,.chip,.navcta,.cd-dong,.mback,.mico, button,[role=button]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* Phản hồi tức thì khi chạm. Trang tải xong mất ~150ms; không có dấu hiệu nào trong khoảng đó thì người dùng tưởng nút không ăn và bấm lại. */ a:active,.btn:active,.ccta:active,button:active{transform:scale(.97)} .tabitem:active{background:var(--bg);transform:none} .tabitem:active svg{transform:scale(.9)} .btn,.ccta,.navcta{transition:transform .08s,filter .15s} .tabitem,.tabitem svg{transition:background .08s,transform .08s,color .08s} /* đang chuyển trang thì làm mờ nhẹ để biết máy đã nhận lệnh */ body.dangdi{opacity:.72;transition:opacity .12s .05s} a{color:var(--deep);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:3px} .wrap{max-width:1080px;margin:0 auto;padding:0 20px} .rail{height:3px;background:var(--rail)} /* nav */ nav.top{background:#fff;border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:50} nav.top .in{display:flex;align-items:center;gap:14px;padding:11px 20px} .brand{display:flex;align-items:center;gap:9px;color:var(--navy);flex-shrink:0} .brand .mk{width:30px;height:30px;border-radius:7px;flex-shrink:0;display:block; object-fit:cover;background:var(--g-btn)} .brand b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} /* ẩn checkbox đúng chuẩn: không chiếm chỗ, vẫn dùng được bằng bàn phím */ .navtog{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0; clip-path:inset(50%);overflow:hidden;white-space:nowrap} .navtog:focus-visible ~ .burger{outline:2px solid var(--deep);outline-offset:2px} .burger{display:none;margin-left:auto;font-size:21px;line-height:1;color:var(--navy); cursor:pointer;padding:5px 9px;border-radius:5px;user-select:none} .burger:hover{background:var(--bg)} .navmenu{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:nowrap} .navmenu a{font-size:14.5px;font-weight:600;color:var(--navy);white-space:nowrap;letter-spacing:-.005em} .navmenu a:hover{color:var(--deep);text-decoration:none} .navmenu a.cur{color:var(--deep)} /* menu cấp 2: mở khi rê chuột hoặc khi con trỏ bàn phím vào bên trong */ .navdrop{position:relative;display:inline-flex} .dropmenu{display:none;position:absolute;top:100%;right:0;min-width:186px;z-index:70; background:#fff;border:1px solid var(--ln);border-radius:7px;padding:5px; box-shadow:0 10px 26px -10px rgba(15,58,92,.28)} .navdrop:hover .dropmenu, .navdrop:focus-within .dropmenu{display:block} /* vùng đệm để chuột đi từ chữ xuống menu không bị rơi */ .navdrop::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px} .dropmenu a{display:block;padding:9px 12px;border-radius:5px;font-size:14px;font-weight:500; color:var(--navy);white-space:nowrap} .dropmenu a:hover{background:var(--kbg);color:var(--deep);text-decoration:none} .dropmenu a.thoat{color:#B4453C;border-top:1px solid var(--ln);border-radius:0 0 5px 5px;margin-top:4px;padding-top:11px} .dropmenu a.thoat:hover{background:#FBEAE8;color:#A33F36} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.navdrop,.dropmenu{display:none}} .navtim{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%; background:var(--kbg);color:var(--navy);flex:none} .navtim:hover{background:var(--pale)} .navtim svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .navsep{width:1px;height:20px;background:var(--ln);flex-shrink:0} .navcta{display:inline-block;background:var(--g-btn);color:#fff!important; padding:8px 16px;border-radius:5px;font-size:12.5px;font-weight:600;white-space:nowrap} .navcta:hover{filter:brightness(1.06)} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .burger{display:block} .navmenu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff; border-bottom:1px solid var(--ln);box-shadow:0 8px 20px -12px rgba(15,58,92,.3); flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0} .navtog:checked ~ .navmenu{display:flex} .navmenu a{padding:12px 20px;font-size:15px;border-bottom:1px solid var(--bg)} .navmenu a:last-child{border-bottom:none} .navsep{display:none} .navcta{display:none} } /* ── Trang tìm kiếm ── */ .timo{display:flex;gap:9px;margin:2px 0 22px} .timo input{flex:1;min-width:0;padding:12px 15px;font-size:15.5px;font-family:inherit; border:1px solid var(--ln);border-radius:7px;background:#fff;color:var(--navy)} .timo input::placeholder{color:var(--tx2)} .timo input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px var(--pale)} .kqnhom{margin-bottom:22px;padding-bottom:0} /* là thẻ section nên phải gỡ padding chung */ .kqnhom > h3{font-size:13.5px;font-weight:700;color:var(--navy);margin:0 0 9px; display:flex;align-items:center;gap:8px;letter-spacing:-.01em} .kqnhom > h3 span{font-size:11.5px;font-weight:500;color:var(--tx2)} .kqds{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:8px; background:#fff;overflow:hidden} .kq{display:block;padding:13px 16px;border-top:1px solid var(--bg);color:inherit} .kq:first-child{border-top:none} .kq:hover{background:var(--kbg);text-decoration:none} .kq b{display:block;font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.01em} .kq span{display:block;font-size:13.5px;color:var(--tx2);margin-top:3px;line-height:1.5} .kq span:empty{display:none} /* buttons */ .btn{display:inline-block;background:var(--g-btn);color:#fff;padding:11px 22px;border-radius:5px;font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:inherit;text-align:center} .btn:hover{text-decoration:none;filter:brightness(1.06)} .btn.gold{background:var(--g-gold);color:var(--navy)} .btn.ghost{background:none;border:1px solid var(--deep);color:var(--deep)} .btn.wide{display:block;width:100%} .btn.lg{padding:14px 30px;font-size:15px} .btn:disabled{opacity:.5;cursor:not-allowed} /* hero */ .hero{background:var(--g-deep);color:#fff;padding:46px 0} .hero .kick{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);margin-bottom:12px} .hero h1{font-size:clamp(26px,4.4vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 13px;max-width:20ch;text-wrap:balance} .hero p{font-size:15.5px;line-height:1.7;color:#C6E1F2;max-width:none;margin:0 0 14px} .hero p:last-of-type{margin-bottom:20px} .stats{display:flex;gap:28px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(184,220,239,.28);flex-wrap:wrap} .stats div{display:flex;flex-direction:column} .stats b{font-family:"IBM Plex Mono",monospace;font-size:23px;color:var(--hot);font-weight:500} .stats span{font-size:11px;color:var(--on-toi)} /* sections */ section{padding:40px 0;border-top:1px solid var(--ln)} .slabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:7px} h1.st,h2.st{font-size:21px;font-weight:600;margin:0 0 18px;letter-spacing:-.015em;color:var(--navy);text-wrap:balance} h3{font-size:16px;font-weight:600;margin:0;color:var(--navy)} p{margin:0 0 12px;max-width:68ch} p:last-child{margin-bottom:0} /* tags */ .tags{display:flex;flex-wrap:wrap;gap:8px} .tag{font-size:12.5px;padding:6px 13px;background:var(--bg);border:1px solid var(--pale);border-radius:5px;color:var(--deep);font-weight:500} /* cards */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px} /* trang Gói tập: 4 gói một hàng trên máy tính, 2 ở màn vừa */ .grid-goi{grid-template-columns:minmax(0,1fr)} @media(min-width:641px){.grid-goi{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1101px){.grid-goi{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}} /* 1024: 2×2 cho thoáng, giá + giá gạch còn chung dòng */ /* thẻ gói: giá · giá gạch · % giảm luôn trên MỘT dòng, các thẻ cao bằng nhau, nút thẳng hàng */ .goi-card{height:100%} .goi-card .cexc{min-height:2.9em} .goi-card .cprice{flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-height:34px} @media(min-width:1201px){.goi-card .cprice{flex-wrap:nowrap;white-space:nowrap}} .goi-card .pnew{font-size:21px} .goi-card .pold{font-size:12.5px} .goi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px} .cgia-buoi{font-size:12.5px;color:var(--tx2);margin:-2px 0 6px} .goi-top .clv{margin:0} /* ── trang /goi-tap: thẻ đầy đủ (gc-day), gói nổi bật (gc-nb) ── */ .gc-day .cbody{gap:6px} .gc-day .ctitle{font-size:16.5px} .gc-day .cexc{min-height:0} .gc-tk{font-size:11px;font-weight:700;color:#8E2A1E;background:#FDECEA;padding:2px 8px;border-radius:4px;white-space:nowrap} .gc-nb .gc-tk{background:var(--hot);color:var(--navy)} .gc-loi{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .gc-loi li{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.45;color:var(--tx2)} .gc-loi svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;color:#1E7A4D} .gc-day .cprice{padding-top:10px;min-height:0} .gc-day .cgia-buoi{margin:-3px 0 4px} .gc-day form{margin:0} .gc-day .ccta{margin-top:6px} .gc-xem{display:block;text-align:center;font-size:12.5px;color:var(--tx2);margin-top:2px;text-decoration:underline;text-underline-offset:2px} .gc-xem:hover{color:var(--deep)} /* gói nổi bật: dải vàng trên đỉnh, viền ấm, bóng đậm hơn — nhận ra ngay kể cả khi xếp một cột */ .gc-nb{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot),0 10px 28px rgba(15,23,42,.14)} .gc-nb:hover{box-shadow:0 0 0 1px var(--hot),0 14px 32px rgba(15,23,42,.18)} .gc-rb{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--g-gold);color:var(--navy); font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;line-height:1.3} .gc-rb svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round} .gc-nb .pnew{color:var(--navy);font-size:23px} .gc-nb .ccta.vang{box-shadow:0 4px 12px rgba(15,23,42,.14)} /* dải tin cậy dưới lưới */ .gc-tin{list-style:none;margin:22px 0 0;padding:16px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px; background:var(--bg);border:1px solid var(--pale);border-radius:12px} .gc-tin li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--deep)} .gc-tin svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;color:var(--deep);opacity:.85} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){.gc-tin{grid-template-columns:minmax(0,1fr);padding:14px 16px;gap:10px}} .card{border:1px solid var(--ln);border-radius:6px;background:#fff;overflow:hidden;display:flex;flex-direction:column} .card .thumb{aspect-ratio:16/10;background:var(--g-soft);display:grid;place-items:center; .thumb img{width:100%;height:100%;object-fit:cover;display:block} font-size:30px;color:var(--light);border-bottom:1px solid var(--ln);overflow:hidden} .card .thumb img{width:100%;height:100%;object-fit:cover} .card .cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1} .card .lvl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;color:var(--gold);text-transform:uppercase} .card .nm{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--navy);letter-spacing:-.01em} .card .han{display:block;margin:2px 0 3px} .card .mt{font-size:12px;color:var(--tx2)} .card .pr{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--deep);font-weight:500;margin-top:auto;padding-top:9px} /* thẻ khoá học — theo chuẩn kimbayoga.com */ .ccard{background:#fff;border:1px solid #E5E7EB;border-radius:14px;overflow:hidden; box-shadow:0 2px 10px rgba(15,23,42,.05);display:flex;flex-direction:column; transition:box-shadow .18s,transform .18s} .ccard:hover{box-shadow:0 6px 22px rgba(15,23,42,.1);transform:translateY(-2px)} .cmedia{display:block;aspect-ratio:16/9;background:var(--g-soft);overflow:hidden} .cmedia img{width:100%;height:100%;object-fit:cover;display:block} .cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1} .clv{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--gold)} .ctitle{font-size:17px;font-weight:700;line-height:1.4;margin:0;letter-spacing:-.01em} .ctitle a{color:var(--navy)} .ctitle a:hover{text-decoration:none;color:var(--deep)} .cexc{font-size:14px;color:#6B7280;line-height:1.6;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cprice{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:9px} .pnew{font-size:19px;font-weight:600;color:var(--deep)} .pold{font-size:13.5px;color:#9CA3AF;text-decoration:line-through} .ccta{display:block;text-align:center;background:var(--g-cta);color:#fff; border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;margin-top:11px} .ccta:hover{text-decoration:none;filter:brightness(1.06)} button.ccta{width:100%;border:none;cursor:pointer;font-family:inherit;line-height:inherit} .ccta.vang{background:var(--g-gold);color:var(--navy)} /* đã có quyền học → Vào học */ /* Khoá miễn phí: vàng cam như nút Vào học — vàng = không mất tiền, bấm là vào; màu chủ đạo đặc = cần mua */ .ccta.free{background:var(--g-gold);color:var(--navy)} .cprice{flex-wrap:wrap}.cprice .badge{margin-left:auto} /* nhãn trọn đời / có hạn dồn sang mép phải */ .cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px; font-size:12.5px;color:var(--tx2);margin-top:2px} .cmeta span{display:inline-flex;align-items:center;gap:5px;min-width:0} .cmeta svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:.65} .pnote{font-size:12.5px;color:var(--tx2)} .pnew.free{color:#1E7A4D} /* bảng thông tin lớp */ .dl{border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#fff} .dr{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:11px 15px; border-bottom:1px solid var(--ln);font-size:14px} .dr:last-child{border-bottom:none} .dk{color:var(--tx2)} .dv{color:var(--navy);font-weight:500} /* bảng dữ liệu */ .tbl{overflow-x:auto;border:1px solid var(--ln);border-radius:8px;background:#fff} .tbl table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px} .tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; font-weight:600;color:var(--tx2);padding:11px 14px;background:var(--bg); border-bottom:1px solid var(--ln);white-space:nowrap} .tbl td{padding:10px 14px;border-bottom:1px solid var(--ln);vertical-align:middle;color:var(--navy)} .tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tbl th.act,.tbl td.act{text-align:right;width:1%;white-space:nowrap} .tbl td.act form{display:inline-block} .tbl .pill{min-width:136px;text-align:center} /* cột đầu (tên) không bị bóp thành 4 dòng khi bảng chật — thà cuộn ngang */ .tbl td:first-child,.tbl th:first-child{min-width:190px} .tbl td .han{white-space:nowrap} .tbl tbody tr:last-child td{border-bottom:none} .tbl tbody tr:hover{background:#FAFCFE} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ /* Bảng cuộn ngang trên điện thoại là trải nghiệm tệ — đổi sang thẻ xếp dọc */ .tbl{border:none;background:none;overflow:visible} .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto;min-width:0} .tbl thead{display:none} .tbl tr{background:#fff;border:1px solid var(--ln);border-radius:10px; padding:13px 15px;margin-bottom:10px} .tbl td{border:none;padding:0;display:flex;justify-content:space-between; gap:14px;align-items:baseline;font-size:13.5px;padding-top:5px} .tbl td:first-child{padding-top:0;padding-bottom:7px;margin-bottom:6px; border-bottom:1px solid var(--ln);font-size:15px} .tbl td:not(:first-child)::before{content:attr(data-k);color:var(--tx2); font-size:12px;font-weight:500;flex-shrink:0} .tbl td br{display:none} } /* Tên riêng, không dùng lại ".warn" của khối cảnh báo lớn — tránh đụng style */ .badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px; border-radius:4px;white-space:nowrap;line-height:1.5;border:0} .badge.alert{background:#FDF6E4;color:#7A5C14} /* ── Định dạng bài viết: dùng chung cho Giới thiệu và blog ── */ .art{max-width:none;padding:0} /* cột bên của trang bài viết — dùng chung lưới .split với trang khoá học, nhờ vậy hai mép trang thẳng hàng với đầu trang và chân trang */ .canh{display:flex;flex-direction:column;gap:16px;position:sticky;top:78px} .canh-o{border:1px solid var(--ln);border-radius:7px;background:#fff;padding:16px 17px} .canh-o h4{margin:0 0 11px;font-size:13.5px;font-weight:700;color:var(--navy); letter-spacing:.02em} .canh-o .llist{border:none;border-radius:0} .canh-o .li{padding:9px 0;font-size:13.5px;line-height:1.45;align-items:flex-start} .canh-o .morelink{margin-top:10px;display:inline-block} .canh-o .li .d{font-family:"IBM Plex Mono",monospace;font-size:11px;padding-top:2px} /* thẻ khoá học gợi ý: ảnh bìa nhỏ 16:9 bên trái, tên + giá bên phải */ .canh-kh{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:6px; background:var(--g-soft)} .canh-kh:hover{text-decoration:none} .canh-kh .th{flex:0 0 96px;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--bg)} .canh-kh .th img{width:100%;height:100%;object-fit:cover;display:block} .canh-kh .tt{display:flex;flex-direction:column;gap:4px;min-width:0} .canh-kh .nm{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35} .canh-kh .pr{font-size:13.5px;color:var(--deep);font-weight:500;line-height:1.3} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.canh{position:static}} .art-date{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em; color:var(--gold);margin-bottom:10px} .art h1{font-size:clamp(26px,3.6vw,34px);font-weight:700;line-height:1.25; letter-spacing:-.02em;color:var(--navy);margin:0 0 14px;text-wrap:balance} .art-sub{font-size:13px;color:var(--tx2);margin:0 0 22px} .art-lead{font-size:18px;line-height:1.65;color:var(--tx2);margin:0 0 24px} /* ảnh bìa đầu bài: 16:9, đầy bề rộng cột bài */ .art-bia{margin:0 0 28px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--g-soft)} .art-bia img{width:100%;height:100%;object-fit:cover;display:block} .art-avatar{width:92px;height:92px;border-radius:50%;background:var(--g-soft); display:grid;place-items:center;font-size:42px;margin-bottom:18px;overflow:hidden; box-shadow:0 0 0 3px rgba(205,168,95,.35)} .art-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%} /* Ảnh giáo viên thật: giữ khung DỌC 4:5 y như trang chủ, chữ chảy quanh. Cắt tròn thì cùng một tấm không thể vừa đẹp ở cả hai nơi. */ .art-anh{float:right;width:180px;aspect-ratio:4/5;border-radius:11px;overflow:hidden; margin:2px 0 12px 22px;background:var(--g-soft);shape-outside:inset(0 round 11px)} .art-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block} .art .art-end{clear:both} @media(max-width:640px){.art-anh{width:132px;margin:2px 0 10px 15px}} .art-body{font-size:17px;line-height:1.75;color:#33506B;max-width:68ch} .art-body > *:first-child{margin-top:0} .art-body p{margin:0 0 20px;max-width:none} .art-body h2,.art-body h3{font-size:21px;font-weight:700;color:var(--navy); margin:28px 0 10px;line-height:1.35;letter-spacing:-.01em} .art-body a{color:var(--deep);text-decoration:underline;text-decoration-color:var(--light); text-underline-offset:3px;text-decoration-thickness:1px} .art-body a:hover{text-decoration-color:var(--deep)} .art-body ul,.art-body ol{margin:0 0 20px;padding-left:24px} .art-body li{margin-bottom:8px} .art-body li::marker{color:var(--light)} .art-body strong,.art-body b{color:var(--navy);font-weight:600} .art-body em{color:var(--navy);font-style:normal;font-weight:600} /* ảnh và video chèn trong bài viết */ .nhung{margin:0 0 22px;display:flex;flex-direction:column;gap:7px} .nhung img{width:100%;height:auto;border-radius:9px;display:block;margin:0} .nhung-vid{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#0F1B24} .nhung-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .nhung figcaption{font-size:13px;color:var(--tx2);line-height:1.5;text-align:center} /* thanh nút chèn media trong ô soạn bài */ .soan{display:flex;flex-direction:column;gap:9px} .soan-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .soan-nut .btn{cursor:pointer} .soan-nut .fhint{flex:1;min-width:190px} /* ảnh chèn trong bài: rộng đúng 600px, cao theo tỉ lệ, căn giữa; màn hẹp thì co theo cột. Bài cũ trong D1 còn trần hoặc figure.nhung — lo cả ba dạng. */ .art-body img{display:block;width:600px;max-width:100%;height:auto;border-radius:8px;margin:24px auto} .art-body figure.art-img{margin:24px auto;width:600px;max-width:100%;display:flex;flex-direction:column;gap:8px} .art-body figure.art-img img,.art-body .nhung img{margin:0 auto} .art-body figure.art-img figcaption{font-size:13px;color:var(--tx2);line-height:1.5;text-align:center} .art-body .nhung{margin:24px 0} .art-body hr{border:none;border-top:1px solid var(--ln);margin:32px 0} .art-body blockquote{margin:0 0 20px;padding:2px 0 2px 18px; border-left:3px solid var(--gold);color:var(--text)} /* cuối bài: dải chia sẻ + dòng ngày/tác giả */ .art-chia{margin-top:30px;padding-top:18px;border-top:1px solid var(--ln); display:flex;gap:8px;flex-wrap:wrap;align-items:center} .art-chia .k{font-size:12.5px;font-weight:600;color:var(--tx2);margin-right:4px} .art-meta{margin-top:12px;font-size:13px;color:var(--tx2)} .art-end{margin-top:28px;padding-top:22px;border-top:1px solid var(--ln); display:flex;gap:11px;flex-wrap:wrap;align-items:center} .art-end span{font-size:15px;color:var(--tx2);margin-right:4px} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .art{padding:26px 0 34px} .art-body{font-size:16px;line-height:1.7} .art-body h2,.art-body h3{font-size:19px;margin:26px 0 10px} .art-body img,.art-body figure.art-img{margin-top:18px;margin-bottom:18px} .art-body .nhung{margin:18px 0} .art-bia{margin-bottom:20px;border-radius:8px} .art-lead{font-size:16.5px} .art-avatar{width:76px;height:76px;font-size:34px} } /* Khung hẹp căn giữa — dùng cho form và nội dung ngắn, thay vì để dính lề trái trong khung 1080px. */ .narrow{max-width:440px;margin:0 auto;padding:40px 20px 52px} .narrow > h1.st,.narrow > h2.st{margin-bottom:20px} .narrow form.f{max-width:none} /* dòng thông tin gọn thay cho hộp màu */ .metaline{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--tx2); padding:13px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)} .metaline b{color:var(--navy);font-weight:600} .metaline .ct{color:#7A5C14} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .narrow{padding:26px 20px 34px} } /* ── Thẻ kết quả một bước (.xn) ────────────────────────────────────── Dùng cho trang báo kết quả trong khung .narrow (hiện dùng ở trang "Đã ghi nhận yêu cầu" sau khi gửi yêu cầu quên mật khẩu). Ràng buộc: đọc đủ trong một màn hình — cả thẻ phải cao dưới 550px ở 1024×800, nên đầu thẻ gộp một hàng (biểu tượng 28px + tiêu đề), mỗi bước đúng một dòng, khối "Cần gấp" nằm chung hàng với hai nút nhỏ. Chỉ dùng token màu sẵn có, không thêm font hay thư viện. */ .xn{border:1px solid var(--ln);border-radius:12px;background:#fff;overflow:hidden; box-shadow:0 2px 10px rgba(15,23,42,.05)} .xn-top{padding:13px 20px 12px;text-align:center;background:var(--bg); border-bottom:1px solid var(--ln)} .xn-hd{display:flex;align-items:center;justify-content:center;gap:9px} .xn-ic{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--ln); display:grid;place-items:center;color:var(--deep);flex-shrink:0} .xn-ic svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .xn-top h1.st,.xn-top h2.st{margin:0;font-size:18px;line-height:1.25} .xn-sub{font-size:12.5px;line-height:1.45;color:var(--tx2);margin:6px 0 0;max-width:none} .xn-buoc{list-style:none;margin:0;padding:0} .xn-buoc .li{gap:10px;padding:9px 22px;font-size:13.5px;line-height:1.45;color:var(--navy)} .xn-buoc .li:last-child{border-bottom:none} .xn-buoc .n{width:21px;height:21px;font-size:10.5px} .xn-gap{display:flex;align-items:center;gap:9px;padding:11px 22px;border-top:1px solid var(--ln)} .xn-gap-lb{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--tx2);margin:0;flex-shrink:0} .xn-nut{display:flex;gap:8px;margin-left:auto;min-width:0} .xn-nut .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .xn-nut .btn.ghost{background:#fff} .xn-di{padding:13px 22px 15px;border-top:1px solid var(--ln)} .xn-di .btn{display:block;width:100%} .xn-chan{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:9px 0 0;font-size:12px;line-height:1.4;color:var(--tx2)} .xn-chan a{font-weight:600;white-space:nowrap} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .xn-top{padding:13px 16px 12px} .xn-buoc .li{padding:9px 16px} .xn-gap{padding:11px 16px;flex-wrap:wrap} .xn-nut{margin-left:0;width:100%;flex-wrap:wrap} /* chia phần dư theo bề ngang chữ để số điện thoại không bị cắt; máy quá hẹp thì nút thứ hai tự xuống hàng và chiếm trọn hàng */ .xn-nut .btn{flex:1 1 auto;min-width:0} .xn-di{padding:12px 16px 14px} .xn-chan{flex-direction:column;gap:5px;text-align:center} } /* ── Slider trượt ngang: tối đa 6 thẻ, không xuống dòng ── */ .shead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} .shead-r{display:flex;align-items:center;gap:16px;flex-shrink:0} .smore-link{font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap} .smore-link:hover{text-decoration:underline} .shead h1.st,.shead h2.st{margin:0} .sarrows{display:flex;gap:8px;flex-shrink:0} .sarrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--ln);background:#fff; color:var(--deep);cursor:pointer;display:grid;place-items:center;font-size:15px; font-family:inherit;line-height:1;transition:background .15s,opacity .15s;flex-shrink:0} .sarrow:hover:not(:disabled){background:var(--bg)} .sarrow:disabled{opacity:.35;cursor:default} .strack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity; scroll-behavior:smooth;padding-bottom:4px; scrollbar-width:none;-ms-overflow-style:none} .strack::-webkit-scrollbar{display:none} .strack > *{flex:0 0 clamp(260px,31%,340px);scroll-snap-align:start;min-width:0} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .sarrows{display:none} /* điện thoại vuốt, không cần mũi tên */ .strack{gap:12px;scroll-padding-left:20px;align-items:flex-start} /* thẻ cao theo nội dung — không kéo giãn làm giá xa mô tả */ .strack > *{flex:0 0 82%} @media(min-width:600px){.strack > *{flex:0 0 46%}} /* máy tính bảng: 2 thẻ một màn */ /* Trang chủ trên điện thoại: bài viết xếp dọc 5 bài, ảnh nhỏ bên trái + tiêu đề, thay cho dải cuộn ngang. Chỉ ăn vào #sl-bai, trang /tin-tuc không đổi. */ #sl-bai{flex-direction:column;gap:10px;overflow:visible;scroll-snap-type:none} #sl-bai > .po{flex:0 0 auto;width:100%;flex-direction:row;align-items:center;border-radius:10px} #sl-bai > .po:nth-child(n+6){display:none} #sl-bai .th{width:112px;aspect-ratio:16/9;flex:0 0 auto} #sl-bai .po-txt{padding:8px 12px;gap:0} #sl-bai .dt{display:none} #sl-bai .tt{font-size:13.5px;-webkit-line-clamp:2;line-height:1.35} /* Khối học thử: ẩn trên điện thoại — trang chủ app chỉ giữ khối nổi bật + danh sách */ #hoc-thu{display:none} } /* ── Hộp giá ── */ .buybox{border:1px solid var(--ln);border-radius:12px;background:#fff;overflow:hidden; box-shadow:0 2px 10px rgba(15,23,42,.05)} .bb-top{padding:18px 20px 16px;background:var(--g-soft);border-bottom:1px solid var(--ln)} .bb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .bb-new{font-size:28px;font-weight:700;color:var(--deep);letter-spacing:-.02em} .bb-new.free{color:#1E7A4D} .bb-old{font-size:15px;color:#9CA3AF;text-decoration:line-through} .bb-save{font-size:11.5px;font-weight:700;color:#fff;background:#C0392B; padding:3px 8px;border-radius:4px;white-space:nowrap} .bb-promo{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px; color:#7A5C14;font-weight:600} .bb-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:14px} .bb-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none} .bb-list li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px; font-size:13.5px;color:var(--tx2);line-height:1.5;align-items:start} .bb-list i{font-style:normal;color:#1E7A4D;font-weight:700} .bb-note{font-size:12px;color:var(--tx2);text-align:center} /* ── Đánh giá ── */ .rv{display:flex;flex-direction:column;gap:12px} .rv-item{border:1px solid var(--ln);border-radius:10px;background:#fff;padding:15px 17px; display:flex;flex-direction:column;gap:7px} .rv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rv-name{font-weight:600;color:var(--navy);font-size:14.5px} .rv-stars{color:var(--hot);font-size:13px;letter-spacing:1px} .rv-date{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2);margin-left:auto} .rv-body{font-size:14.5px;color:var(--tx2);line-height:1.6;margin:0} .rv-avg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx2);margin-bottom:14px} .rv-avg b{font-size:22px;color:var(--navy);font-weight:700} .rv-form{border:1px dashed var(--pale);border-radius:10px;background:var(--bg); padding:16px 18px;display:flex;flex-direction:column;gap:12px} .rv-form h4{margin:0;font-size:14.5px;font-weight:600;color:var(--navy)} .rv-stars-in{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px} .rv-stars-in input{position:absolute;width:1px;height:1px;clip-path:inset(50%)} .rv-stars-in label{font-size:23px;color:var(--ln);cursor:pointer;line-height:1;padding:0} .rv-stars-in input:checked ~ label, .rv-stars-in label:hover, .rv-stars-in label:hover ~ label{color:var(--hot)} .rv-form .two{gap:10px} /* ── quản trị: gọn, dạng bảng ── */ .anav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--ln)} .anav a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--tx2); border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .anav a:hover{color:var(--deep);text-decoration:none} .anav a.on{color:var(--deep);border-bottom-color:var(--deep)} /* Ô số liệu: nén còn một dòng số + nhãn, phụ chú xuống dòng nhỏ. Viền trái đổi màu theo ý nghĩa để quét mắt nhanh, không cần đọc nhãn. */ .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .tile{border:1px solid var(--ln);border-left:3px solid var(--deep);border-radius:5px; background:#fff;padding:8px 11px;display:flex;flex-direction:column;gap:1px;min-height:0} .tile .hang{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap} .t-v{font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:600; color:var(--deep);line-height:1.15;letter-spacing:-.02em;white-space:nowrap} /* nhãn cho xuống dòng chứ không cắt cụt — ô tiền có số dài vẫn đọc đủ chữ */ .t-lb{font-size:12px;color:var(--tx2);font-weight:500;line-height:1.2;min-width:0} .t-sub{font-size:10.5px;color:#93A9B8;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* màu theo ý nghĩa, không theo vị trí */ .tile.warn{border-left-color:var(--hot);background:#FFFDF7} .tile.warn .t-v{color:#9A7318} .tile.ok{border-left-color:#2F9E6B} .tile.ok .t-v{color:#1E7A4D} .tile.tien{border-left-color:var(--gold)} .tile.tien .t-v{color:#8A6B2E} .tile.nhat{border-left-color:var(--pale)} .tile.nhat .t-v{color:var(--tx2)} /* Cùng quy ước màu với ô chọn: vàng là đang bật chế độ mở bài theo ngày, xám là tắt */ .tile.vang{border-left-color:#D1A62A;background:#FFFDF6} .tile.vang .t-v{color:#7A5C14} .tile.tat{border-left-color:#C3CEDA;background:#FAFCFE} .tile.tat .t-v{color:#6B7F90} @media(max-width:520px){.tiles{grid-template-columns:1fr 1fr;gap:7px}} a.chip{text-decoration:none} a.chip.on{background:var(--g-btn);border-color:transparent;color:#fff} .btn.sm{padding:6px 12px;font-size:12.5px;border-radius:5px} .tbl tr.hi{background:#FFFDF7} .badge.paid{background:#E8F6ED;color:#1E5E3A} .badge.free{background:var(--bg);color:var(--deep)} .badge.cls{background:#F3EEFB;color:#5B3E8E} .pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:5px; white-space:nowrap;display:inline-block;line-height:1.5} .pill.pending{background:var(--bg);color:var(--deep)} .pill.claimed{background:#FDF6E4;color:#7A5C14} .pill.activated{background:#E8F6ED;color:#1E5E3A} .pill.rejected{background:#FDECEA;color:#8E2A1E} .prof-head{display:flex;align-items:center;gap:14px;padding-bottom:18px; margin-bottom:22px;border-bottom:1px solid var(--ln)} .prof-av{width:54px;height:54px;border-radius:50%;background:var(--g-btn);color:#fff; display:grid;place-items:center;font-size:22px;font-weight:700;flex-shrink:0} .prof-name{font-size:17px;font-weight:600;color:var(--navy)} /* warn */ .warn{background:#FDF6E4;border-left:3px solid var(--gold);color:#7A5C14;padding:13px 16px;border-radius:0 5px 5px 0;font-size:13.5px;line-height:1.5} .warn b{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;margin-bottom:4px} .info{background:var(--bg);border-left:3px solid var(--deep);padding:13px 16px;border-radius:0 5px 5px 0;font-size:13.5px;color:var(--text)} .err{background:#FDECEA;border-left:3px solid #C0392B;padding:12px 15px;border-radius:0 5px 5px 0;font-size:13.5px;color:#8E2A1E} .ok{background:#E8F6ED;border-left:3px solid #2E8B57;padding:12px 15px;border-radius:0 5px 5px 0;font-size:13.5px;color:#1E5E3A} /* forms */ form.f{display:flex;flex-direction:column;gap:14px;max-width:440px} form.f.wide{max-width:100%} label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--text); min-width:0} input,select,textarea{font-family:inherit;font-size:15px;padding:10px 12px; border:1px solid var(--ln);border-radius:5px;background:#fff;color:#12283A; width:100%;min-width:0;max-width:100%;box-sizing:border-box} /* Safari trên iPhone cho ô ngày tháng một bề rộng tự nhiên rất lớn, không ép thì nó đẩy tràn cả lưới hai cột. */ input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-height:41px} /* Ô chọn (select) cao bằng ô nhập, mũi tên vẽ tay để mọi trình duyệt giống nhau */ select{min-height:41px;-webkit-appearance:none;appearance:none;padding-right:36px;background-color:#fff; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;line-height:1.3} select.sm,.mokhoa select{min-height:0} input:focus,select:focus,textarea:focus{border-color:var(--deep)} textarea{min-height:70px;resize:vertical} .hint{font-size:12px;color:var(--tx2);font-weight:400} /* ô tích đồng ý — hộp giữ nguyên kích thước, chữ xuống dòng quanh nó */ .tick{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start; font-size:13.5px;line-height:1.55;color:var(--tx2);font-weight:400;cursor:pointer} .tick input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:none; accent-color:var(--deep);cursor:pointer} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .two > *{min-width:0} /* khối biểu mẫu quản trị */ .panel{border:1px solid var(--ln);border-radius:7px;background:#fff;padding:18px 20px 20px; display:flex;flex-direction:column;gap:14px} .panel > h4{margin:0;font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.01em; padding-bottom:11px;border-bottom:1px solid var(--ln)} .panel > h4 span{display:block;font-size:12px;font-weight:400;color:var(--tx2);margin-top:3px;letter-spacing:0} /* Viền màu bên trái phân nhóm các bảng cấu hình: nhìn lướt là biết đang ở nhóm nào mà chưa cần đọc tiêu đề. Sáu nhóm dùng chung cho mọi trang sửa. */ .panel[class*="pc-"]{border-left-width:3px;border-left-color:var(--pc);padding-left:18px} .panel[class*="pc-"] > h4::before{content:"";display:inline-block;width:7px;height:7px; border-radius:2px;background:var(--pc);margin-right:8px;vertical-align:1px} .pc-nhan{--pc:#6C4FB6} /* nhận diện: tên, màu, biểu tượng */ .pc-lienhe{--pc:#0F7A8A} /* liên hệ, mạng xã hội */ .pc-tien{--pc:#1B6B44} /* học phí, tài khoản nhận tiền */ .pc-noidung{--pc:#B07D12} /* chữ nghĩa khách đọc */ .pc-lich{--pc:#B4552F} /* lịch học, địa điểm */ .pc-seo{--pc:#1F5C93} /* Google, đường dẫn */ .pc-hienthi{--pc:#5B6B7C} /* bật tắt, thứ tự, ảnh bìa */ .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} /* Đúng hai cột: dùng khi nhóm có 4 ô, để không bao giờ rơi thành 3 + 1 ô lẻ */ .pgrid.p2{grid-template-columns:repeat(2,minmax(0,1fr))} /* Một ô ngắn đứng riêng (số ngày, số thứ tự): giữ bề ngang vừa phải thay vì kéo dài hết bảng cho trống trải. */ .pgrid.ongan{grid-template-columns:minmax(0,300px)} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){.pgrid.p2{grid-template-columns:1fr}} .fhint{font-size:11.5px;color:var(--tx2);font-weight:400;line-height:1.45} .abar{display:flex;align-items:center;justify-content:flex-end;gap:12px; padding:14px 0 2px;border-top:1px solid var(--ln);margin-top:4px;flex-wrap:wrap} .abar .hint{margin-right:auto} /* Nút phá huỷ đứng hẳn bên trái, nút chính bên phải — tay không trượt nhầm. Có nút nguy hiểm thì dòng gợi ý thôi đẩy, để khoảng trống nằm giữa hai nút. */ .abar .btn.nguy{margin-right:auto} .abar .btn.nguy ~ .hint{margin-right:0} /* Nhãn kèm bộ đếm ký tự ở góc phải */ .lbr{display:flex;align-items:baseline;justify-content:space-between;gap:10px} /* dấu * đỏ: ô bắt buộc */ .bb{color:#C0392B;font-style:normal;font-weight:700;margin-left:3px} .batbuoc{margin:-4px 0 2px;font-size:12.5px} .dem{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500; color:var(--tx2);flex-shrink:0;letter-spacing:.01em} .dem.gan{color:#9A7318} .dem.het{color:#8E2A1E;font-weight:700} /* Ô chọn mang màu của lựa chọn: nhìn lướt là biết đang bật hay tắt. Chấm tròn bên trái vẽ bằng ảnh nền, xếp cùng lớp với mũi tên. */ select.smau{font-weight:600;padding-left:30px;background-repeat:no-repeat,no-repeat; background-position:right 12px center,left 11px center} select.mau-xanh{color:#1E5E3A;background-color:#E8F6ED;border-color:#A8D8BC; background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,")} select.mau-xam{color:#6B7F90;background-color:#F1F5F9;border-color:var(--ln); background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,")} select.mau-vang{color:#7A5C14;background-color:#FDF6E4;border-color:#E8D3A0; background-image:url("data:image/svg+xml;utf8,"),url("data:image/svg+xml;utf8,")} select.smau:disabled{background-color:#F1F5F9;color:#6B7F90;border-color:var(--ln)} /* Nút phá huỷ: viền đỏ, chỉ đầy màu khi rê chuột vào */ .btn.nguy{background:#fff;border:1px solid #E6B7AE;color:#8E2A1E;font-weight:600} .btn.nguy:hover{background:#FDECEA;border-color:#C96A5B;filter:none} /* Dòng nhắc nền vàng nhạt gắn ngay dưới ô nhập */ .nhacvang{display:block;font-size:11.5px;font-weight:500;line-height:1.5; background:#FDF6E4;color:#7A5C14;border:1px solid #EFE0B6;border-radius:5px; padding:6px 9px;margin-top:2px} .nhacvang[hidden]{display:none} .nhacvang a{color:#6A4F0F;text-decoration:underline;text-underline-offset:2px} @media(max-width:640px){.panel{padding:15px 15px 17px}.two{grid-template-columns:1fr}} /* ── tra cứu danh sách dài ── */ .thanhtim{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px} .otim{display:flex;gap:8px;align-items:center;flex:1;min-width:240px} .otim input[type=search]{flex:1;min-width:0;font-size:14px;padding:9px 12px} .osap{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:11px; font-size:12.5px;color:var(--tx2)} .osap > span{font-weight:600;margin-right:4px} .osap a{padding:5px 10px;border-radius:100px;border:1px solid var(--ln); color:var(--tx2);font-weight:500;background:#fff} .osap a:hover{border-color:var(--deep);color:var(--deep);text-decoration:none} .osap a.on{background:var(--kbg);border-color:var(--pale);color:var(--deep);font-weight:600} .ptrang{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--tx2)} .pt-n{font-family:"IBM Plex Mono",monospace;font-size:12.5px} .pt-s{display:flex;gap:4px} .pt-s a,.pt-s .no{min-width:32px;height:32px;display:grid;place-items:center; border:1px solid var(--ln);border-radius:6px;background:#fff;font-size:13px; color:var(--tx2);font-weight:500;padding:0 7px} .pt-s a:hover{border-color:var(--deep);color:var(--deep);text-decoration:none} .pt-s a.on{background:var(--g-btn);border-color:transparent;color:#fff;font-weight:600} .pt-s .no{opacity:.35} /* Bản công khai: căn giữa, nút to hơn cho ngón tay bấm trên điện thoại. Bảng quản trị vẫn giữ nút nhỏ vì thao tác bằng chuột. */ .ptrang.ck{justify-content:center;flex-direction:column;gap:14px; margin:34px 0 6px;padding-top:24px;border-top:1px solid var(--ln)} .ptrang.ck .pt-n{order:2;font-size:12px;opacity:.75} .ptrang.ck .pt-s{order:1;gap:6px} .ptrang.ck .pt-s a,.ptrang.ck .pt-s .no{min-width:42px;height:42px;font-size:14px;border-radius:8px} @media (max-width:520px){ /* Màn hẹp: bỏ các số ở giữa, chỉ chừa lùi – trang hiện tại – tiến */ .ptrang.ck .pt-s a:not(.on):not(:first-child):not(:last-child), .ptrang.ck .pt-s .no:not(:first-child):not(:last-child){display:none} } /* ô thao tác trong hồ sơ học viên */ .thaotac{display:flex;flex-direction:column;gap:9px;padding:13px 14px; border:1px solid var(--ln);border-radius:6px;background:#FAFCFE} .thaotac button{align-self:flex-start} .mkmoi{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600; background:#fff;border:1px solid var(--gold2);border-radius:5px;padding:3px 9px; color:var(--navy);letter-spacing:.04em} /* ── hồ sơ học viên: gom thao tác vào đúng chỗ nó thuộc về ── */ .mucdau{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:10px} .mucdau h3{margin:0} .mokhoa{display:flex;gap:7px;align-items:center} .mokhoa select{font-size:13px;padding:6px 9px;width:auto;min-width:190px;max-width:260px} /* nút trông như liên kết, dùng cho thao tác phụ nằm trong dòng */ .lienket{background:none;border:none;padding:0;font-family:inherit;font-size:12.5px; color:var(--tx2);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .lienket:hover{color:#B4453C} .hoso{position:sticky;top:76px;display:flex;flex-direction:column;gap:13px} .hoso h3{margin:0} .hoso .dl{border:none} .hoso .dr{grid-template-columns:88px minmax(0,1fr);gap:10px;padding:8px 0;font-size:13.5px} .hoso-f{display:flex;flex-direction:column;gap:9px;padding:12px 13px; border:1px solid var(--ln);border-radius:6px;background:#FAFCFE} .hoso-f button{align-self:flex-start} /* ô không sửa được: mờ đi, con trỏ báo cấm — nhìn là biết không phải chỗ gõ */ input:disabled,select:disabled,textarea:disabled{background:#F1F5F9;color:#6B7F90;border-color:var(--ln); cursor:not-allowed;-webkit-text-fill-color:#6B7F90;opacity:1} .hoso-f .two{display:grid;grid-template-columns:1fr 1fr;gap:9px} .hoso-f label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tx2)} .hoso-f input,.hoso-f select,.hoso-f textarea{font-size:13.5px} .hoso-f input:not([type=checkbox]),.hoso-f select{min-height:41px;height:41px;padding-top:0;padding-bottom:0} /* ô ngày, ô chọn, ô chữ cao bằng nhau */ .hoso-f .fhint{font-size:11.5px;color:var(--tx2)} .nhan-chon{display:flex;flex-wrap:wrap;gap:6px 12px;margin:2px 0 6px} .tick.nho{font-size:13px;color:var(--navy);flex-direction:row;align-items:center;gap:6px} .hv-ma{font-size:13px;font-weight:500;color:var(--tx2);margin-left:6px} .hv-phu{font-size:11.5px;color:var(--tx2);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px;align-items:center} .badge.het{background:#FDECEA;color:#8E2A1E} .badge.trondoi{background:#E8F6ED;color:#1E5E3A} /* quyền học trọn đời */ .rv-moi{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .buybox.dahoc .bb-top{background:linear-gradient(135deg,#E8F6ED,#F3FAF5)} .buybox.dahoc .bb-new{color:#1E5E3A;font-size:22px} .rv-moi .btn{align-self:flex-start} .badge.con{background:#E8F6ED;color:#1E5E3A} /* còn hạn */ .tbl td .badge{white-space:nowrap} .badge.han{background:#FDF6E4;color:#7A5C14} /* quyền học có hạn: 30 ngày / đến dd/mm */ .ccard .badge{align-self:center} .badge.nhan{background:#EEF7FC;color:var(--deep);font-weight:600} /* hạn học: màu theo tình trạng */ .han{font-size:12.5px;font-weight:600} .h-trondoi{color:var(--tx2);font-weight:500} .h-con{color:#1E5E3A} .h-sap{color:#7A5C14} .h-het,.h-khoa{color:#8E2A1E} .lienket.nguy{color:#8E2A1E} .nky{list-style:none;margin:0;padding:0;border:1px solid var(--ln);border-radius:8px;background:#fff} .nky li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px 13px;border-bottom:1px solid var(--ln);font-size:13px} .nky li:last-child{border-bottom:none} .nky-ngay{color:var(--tx2);font-size:12px;padding-top:1px} .nky-nd i{color:var(--tx2);font-style:normal} /* Nhật ký dạng dòng thời gian: chấm tròn nối bằng vạch dọc; 5 dòng đầu mở sẵn, còn lại gập */ .nky-box{border:1px solid var(--ln);border-radius:8px;background:#fff;overflow:hidden} .nky-box .nky{border:none;border-radius:0} .nky-box .nky li{grid-template-columns:14px 124px minmax(0,1fr);gap:8px;padding:8px 14px 8px 12px;position:relative;line-height:1.45} .nky-box .nky li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pale);border:2px solid #fff; box-shadow:0 0 0 1px var(--pale);margin-top:5px} .nky-box .nky li::after{content:"";position:absolute;left:17px;top:22px;bottom:-4px;width:1px;background:var(--ln)} .nky-box .nky li:last-child::after{display:none} .nky-box > .nky > li:first-child::before{background:var(--deep);box-shadow:0 0 0 1px var(--deep)} /* chỉ dòng mới nhất tô đậm */ .nky-them summary{cursor:pointer;list-style:none;padding:8px 14px 8px 34px;font-size:12.5px;font-weight:600;color:var(--deep); border-top:1px solid var(--ln);background:#FAFCFE;user-select:none} .nky-them summary::-webkit-details-marker{display:none} .nky-them summary::before{content:"+ "} .nky-them[open] summary::before{content:"− "} .nky-them[open] summary{border-bottom:1px solid var(--ln)} @media(max-width:640px){.hoso-f .two{grid-template-columns:1fr}.nky li{grid-template-columns:1fr;gap:2px}} /* ── Bảng điều khiển học viên (/trangquanly/hoc-vien/:id) ── Thẻ danh tính: avatar chữ cái | tên + liên hệ + nhãn | cụm nút. Ghi chú riêng và mật khẩu mới (nếu có) nằm hàng dưới, trải hết bề ngang thẻ. */ .hvdash{display:flex;flex-direction:column;gap:16px} .hvdash > .slabel{margin-bottom:-6px} .hvdash > .ok,.hvdash > .err{margin:0} .hv-id{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 16px;align-items:start; border:1px solid var(--ln);border-radius:8px;background:#fff;padding:16px 18px} .hv-id.khoa{border-color:#E8D3A0;background:#FFFDF7} .hv-av{width:52px;height:52px;border-radius:50%;background:var(--g-btn);color:#fff;display:flex;align-items:center; justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:600;letter-spacing:.02em;grid-row:1} .hv-tt{display:flex;flex-direction:column;gap:5px;min-width:0;grid-row:1} .hv-tt h2.st{margin:0;font-size:20px;line-height:1.3} .hv-tt h2.st .badge{vertical-align:middle;margin-left:4px} .hv-lh{display:flex;flex-wrap:wrap;gap:3px 7px;align-items:baseline;font-size:13.5px;color:var(--navy);line-height:1.4} .hv-lh a{color:var(--deep)} .hv-lh .mono{font-weight:500;letter-spacing:.01em} .hv-lh .sep,.hv-meta .sep{font-style:normal;color:#9CB0C0} /* dấu chấm ngăn cách, xuống dòng theo mục */ .trong{color:#93A9B8} .hv-chips{display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center;min-height:20px} .hv-chips .badge.nhan{font-size:11px;padding:2px 8px} .hv-nguon{font-size:12px;color:var(--tx2);margin-left:4px} .hv-meta{display:flex;flex-wrap:wrap;gap:2px 7px;font-size:12px;color:var(--tx2)} .hv-nut{grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:7px;width:236px;flex:none} .hv-nut.ba{grid-template-columns:1fr 1fr 1fr;width:262px} .hv-nut .btn{white-space:nowrap;padding:8px 10px;line-height:1.25;font-size:13px} .hv-nut form{display:contents} .hv-nut form > .btn{grid-column:1 / -1} .hv-note{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-top:6px; background:#FFF8E6;border:1px solid var(--gold2);border-radius:6px;padding:9px 13px;font-size:13.5px;line-height:1.5;color:#5A4712} .hv-note b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8A6A22;padding-top:4px} .hv-note span{white-space:pre-line} .hv-mk{grid-column:1 / -1;margin-top:6px} /* dải số: đúng bốn ô một hàng, thấp hơn ô số liệu thường */ .hv-tiles .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} .hv-tiles .tile{padding:7px 12px} .hv-tiles .t-v{font-size:17px} /* hai cột: nội dung rộng | hồ sơ 340px sticky (dưới 1181px đổ về một cột theo luật main.qt .split) */ .split.hv-split{grid-template-columns:minmax(0,1fr) 340px;gap:24px} .hv-trai{gap:20px} /* bảng đơn / lớp trong cột này hẹp hơn trang danh sách: bỏ bề rộng tối thiểu cột đầu, thu nhãn trạng thái */ .hv-trai .tbl td:first-child,.hv-trai .tbl th:first-child{min-width:0} .hv-trai .tbl .pill{min-width:112px} .hv-trai .tbl td{padding:9px 12px} .hv-trai .tbl th{padding:9px 12px} .hv-so{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--tx2);background:var(--bg); border-radius:10px;padding:1px 8px;margin-left:4px;vertical-align:middle} .hv-h3{margin-bottom:10px} .hv-trong{border:1px dashed var(--ln);border-radius:8px;padding:12px 15px;font-size:13px;color:var(--tx2);background:#fff} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* bảng khoá: mỗi khoá một hàng ~60px, menu ⋯ ở cuối hàng — không cuộn ngang để menu không bị cắt */ .khtbl{overflow:visible} .khtbl table{min-width:0} .khtbl td{padding:9px 11px;height:58px} /* mọi hàng cao bằng nhau dù tên khoá một hay hai dòng */ .khtbl th{padding:9px 11px} .khtbl td:first-child,.khtbl th:first-child{min-width:180px} .khtbl td.kh-ten{font-size:13.5px;line-height:1.4} .khtbl td.kh-ten .badge{margin-left:4px;vertical-align:1px} .khtbl td.nho,.tbl td.nho{font-size:12.5px;color:var(--tx2);white-space:nowrap} .khtbl td.nowrap{white-space:nowrap;line-height:1.35} .khtbl .tdo{width:56px} .khtbl .kh-phu{display:block;font-size:11.5px;color:var(--tx2);margin-top:2px} .khtbl tr.qh-het td,.khtbl tr.qh-khoa td{opacity:.62} .khtbl tr.qh-het td.act,.khtbl tr.qh-khoa td.act{opacity:1} .khtbl tr.qh-het:hover td,.khtbl tr.qh-khoa:hover td{opacity:1} .khtbl tr.qh-sap td:first-child{box-shadow:inset 3px 0 0 var(--hot)} .khtbl tr.qh-het td:first-child{box-shadow:inset 3px 0 0 #E6B7AE} .khtbl td.act{position:relative;overflow:visible} .hv-menu{position:relative;display:inline-block} .hv-menu summary{list-style:none;cursor:pointer;width:30px;height:30px;border-radius:6px;border:1px solid var(--ln); display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--tx2);background:#fff;user-select:none} .hv-menu summary::-webkit-details-marker{display:none} .hv-menu summary:hover,.hv-menu[open] summary{border-color:var(--deep);color:var(--deep);background:var(--bg)} .hv-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:236px;background:#fff;border:1px solid var(--ln); border-radius:8px;box-shadow:0 8px 24px rgba(15,58,92,.14);padding:6px;display:flex;flex-direction:column;gap:2px;text-align:left} .tbl td.act .hv-pop form{display:block;margin:0} .hv-pop .mi{display:block;width:100%;text-align:left;background:none;border:none;border-radius:5px;padding:8px 10px; font-family:inherit;font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;white-space:nowrap} .hv-pop .mi:hover{background:var(--bg);color:var(--deep)} .hv-pop .mi.nguy{color:#8E2A1E} .hv-pop .mi.nguy:hover{background:#FDECEA} .hv-pop .giahan{padding:6px 10px 9px;border-bottom:1px solid var(--ln);margin-bottom:4px;display:flex;flex-direction:column;gap:6px} .hv-pop .gh-t{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)} .hv-pop .gh-o{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tx2)} .hv-pop .gh-o input{width:60px;padding:6px 8px;font-size:13.5px;text-align:center} .hv-pop .gh-o .btn{margin-left:auto} /* nhắc trong menu thẻ: học viên chưa bấm "đã chuyển khoản" nhưng vẫn kích hoạt được */ .hv-pop .gh-nhac{margin:2px 4px 6px;padding:8px 10px;border-radius:6px;background:#FDF6E4;border-left:3px solid var(--gold); font-size:12px;line-height:1.45;color:#7A5C14;white-space:normal;max-width:300px} /* form hồ sơ: nhóm trường có tiêu đề nhỏ */ .hoso-h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2); font-weight:600;padding-top:6px;margin-top:2px;border-top:1px solid var(--ln)} .hoso-h:first-child{border-top:none;padding-top:0;margin-top:0} .mkbox{display:flex;flex-direction:column;gap:5px;align-items:flex-start; background:#FFF8E6;border:1px solid var(--gold2);border-radius:6px;padding:11px 13px} .mkbox .lb{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:#8A6A22;font-weight:600} .mkbox .hint{font-size:11.5px;line-height:1.45} /* ── chọn màu giao diện ── */ .maupick{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px} .mau-o{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer; border:1px solid var(--ln);border-radius:8px;background:#fff;overflow:hidden; padding-bottom:11px;transition:.13s} .mau-o:hover{border-color:var(--light)} .mau-o.on{border-color:var(--deep);box-shadow:0 0 0 1px var(--deep) inset} .mau-o input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .mau-dai{height:46px;display:block} .mau-cham{display:flex;gap:5px;padding:0 12px;margin-top:-13px} .mau-cham i{width:17px;height:17px;border-radius:50%;border:2px solid #fff; box-shadow:0 1px 3px rgba(15,58,92,.18)} .mau-t{font-size:13.5px;font-weight:600;color:var(--navy);padding:0 12px;margin-top:3px} .mau-ta{font-size:11.5px;color:var(--tx2);line-height:1.4;padding:0 12px} .mau-o.on .mau-t{color:var(--deep)} /* ── chọn biểu tượng ứng dụng ── */ .iconpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px} .ico-o{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer; padding:12px 8px;border:1px solid var(--ln);border-radius:8px;background:#fff; font-size:12px;font-weight:500;color:var(--tx2);text-align:center;transition:.13s} .ico-o:hover{border-color:var(--light)} .ico-o.on{border-color:var(--deep);background:var(--kbg);color:var(--deep); box-shadow:0 0 0 1px var(--deep) inset} .ico-o input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .ico-h svg{width:52px;height:52px;display:block;border-radius:12px} .ico-t{line-height:1.25} .ico-tai{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px} .ico-tai .btn{cursor:pointer;flex-shrink:0} .ico-hien{display:flex;align-items:center;gap:8px} .ico-hien img{width:38px;height:38px;border-radius:9px;border:1px solid var(--ln)} .ico-tai .fhint{flex:1;min-width:180px} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.hoso{position:static}} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .osap{display:none} .thanhtim .dk{display:none} .otim{width:100%} } /* phần soạn nội dung: chỉ mở trên máy tính cho dễ thao tác */ .mobnote{display:none} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .deskonly{display:none !important} .mobnote{display:flex;flex-direction:column;gap:9px;align-items:flex-start; border:1px solid var(--ln);border-radius:7px;background:var(--kbg);padding:20px} .mobnote b{font-size:15px;color:var(--navy)} .mobnote p{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.6} .mobnote.qt-mob{margin:28px 0} .anav a.dk{display:none} } /* quản lý chương và bài học */ .chuong{border:1px solid var(--ln);border-radius:7px;background:#fff;margin-bottom:14px;overflow:hidden} .chuong > .ch-h{display:flex;align-items:center;gap:10px;padding:12px 15px; background:var(--kbg);border-bottom:1px solid var(--ln)} .chuong > .ch-h .ch-t{font-size:14px;font-weight:700;color:var(--navy);flex:1;min-width:0} .chuong > .ch-h .ch-n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2)} .bl{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--ln);font-size:14px} .bl:last-child{border-bottom:none} .bl .b-n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--tx2); width:22px;flex-shrink:0;text-align:right} .bl .b-t{flex:1;min-width:0;color:var(--navy);font-weight:500; display:flex;align-items:center;gap:6px;flex-wrap:wrap} /* Hai cột số cùng bề rộng, canh phải: đọc dọc một mạch là thấy bài nào đang đuối */ .bl .b-tk{margin-left:0;flex:0 0 92px;text-align:right} .bl .b-tk.mo{opacity:.45} .bl .b-m{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--tx2); flex:0 0 46px;text-align:right} .bl.trong{color:var(--tx2);font-style:italic;font-size:13px;justify-content:center;padding:14px} .dich{display:flex;gap:3px;flex-shrink:0} .dich button, .dich .no{width:24px;height:24px;border:1px solid var(--ln);border-radius:5px; background:#fff;color:var(--tx2);font-size:11px;line-height:1;cursor:pointer;padding:0; display:grid;place-items:center;font-family:inherit;opacity:.55;transition:opacity .12s} /* Đổi thứ tự là việc thỉnh thoảng mới làm — để mờ cho tên bài nổi lên, rê chuột vào mới đậm. */ .dich button:hover{border-color:var(--deep);background:var(--kbg);color:var(--deep);opacity:1} .dich .no{opacity:.32;cursor:default} .themform{display:flex;gap:12px;align-items:flex-end;padding:12px 15px;background:#FAFCFE; border-top:1px solid var(--ln);flex-wrap:wrap} .themform label{flex:1;min-width:150px} /* bộ đếm lùi vào một chút cho khỏi dính nhãn của ô bên cạnh */ .themform .lbr .dem{font-size:10px;padding-right:3px} .themform input{font-size:14px;padding:8px 10px} .themform .w{flex:0 0 96px;min-width:96px} .themform .w2{flex:0 0 168px;min-width:168px} @media(max-width:640px){.themform{flex-direction:column;align-items:stretch} .themform label,.themform .w,.themform .w2{flex:1 1 auto;min-width:0}} /* ô chọn ảnh bìa */ .anhbox{display:flex;flex-direction:column;gap:5px} .ab-lb{font-size:13px;font-weight:600;color:var(--text)} .ab-in{display:flex;gap:14px;align-items:flex-start} /* Khung xem trước để ĐÚNG tỉ lệ nơi ảnh sẽ hiện, để giáo viên thấy ngay phần nào của ảnh bị cắt mất. */ .ab-xem{flex:0 0 176px;aspect-ratio:16/9;border:1px solid var(--ln);border-radius:6px; background:var(--g-soft);overflow:hidden;display:grid;place-items:center} .ab-xem.doc{flex:0 0 132px;aspect-ratio:4/5} .ab-lb{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ab-ti{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px; letter-spacing:.06em;text-transform:uppercase;font-weight:600; background:var(--bg);color:var(--deep);border:1px solid var(--pale); border-radius:100px;padding:2px 8px} .ab-xem img{width:100%;height:100%;object-fit:cover;display:block} .ab-trong{font-size:12px;color:var(--tx2);text-align:center;line-height:1.5} .ab-trong small{font-size:10.5px;opacity:.75} .ab-dk{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .ab-nut{display:flex;gap:8px;flex-wrap:wrap} .ab-nut .btn{cursor:pointer} @media(max-width:640px){.ab-in{flex-direction:column}.ab-xem{flex:0 0 auto;width:100%}} /* hộp xác nhận (thay confirm) */ .hxn-nen{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);backdrop-filter:blur(2px); display:flex;align-items:center;justify-content:center;padding:20px} .hxn-nen[hidden]{display:none} body.hxn-mo{overflow:hidden} .hxn-hop{background:#fff;border-radius:14px;width:min(440px,100%);padding:26px 26px 22px; box-shadow:0 24px 60px rgba(15,23,42,.28);animation:hxn-len .16s ease-out} @keyframes hxn-len{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .hxn-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin-bottom:14px;position:relative} .hxn-ic::before{content:"?";font-size:22px;font-weight:700;color:var(--deep)} .hxn-hop.nguy .hxn-ic{background:#FEF3F2} .hxn-hop.nguy .hxn-ic::before{content:"!";color:#B42318} .hxn-hop h3{margin:0 0 6px;font-size:17px;line-height:1.35;color:var(--navy);letter-spacing:-.01em} .hxn-p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx2)} .hxn-nut{display:flex;justify-content:flex-end;gap:10px;margin-top:22px} .hxn-nut .btn{min-width:96px} .hxn-ok.nguy{background:#B42318;color:#fff} .hxn-ok.nguy:hover{background:#9A1F14} .hxn-ok:focus-visible{outline:2px solid var(--deep);outline-offset:2px} @media(prefers-reduced-motion:reduce){.hxn-hop{animation:none}} /* ── thẻ tập (quản trị): bảng .khtbl.thet — mỗi thẻ một hàng ~60px, thao tác gom vào menu ⋯ ── */ .giahan{display:inline-flex;align-items:center;gap:6px} .giahan input[type=date],.giahan select{height:32px;padding:0 8px;font-size:12.5px;width:auto;min-width:0} .giahan .o-so{width:52px;height:32px;padding:0 6px} .tbl tr.mo td{opacity:.62} .tbl tr.mo td.act{opacity:1} .tbl tr.mo:hover td{opacity:1} .thet-bar{margin-top:-4px;margin-bottom:14px} .khtbl.thet td:first-child,.khtbl.thet th:first-child{min-width:0} .khtbl.thet td{padding:9px 10px;height:60px} .khtbl.thet th{padding:9px 10px} .khtbl.thet .pill{min-width:0;white-space:nowrap;padding:3px 10px} .thet-ma{white-space:nowrap;font-size:13px} .thet-hv{width:18%;min-width:180px} .thet-hv b{font-weight:600} .thet-goi{width:34%;min-width:160px;max-width:0} /* cột co giãn: lấy phần còn lại, dòng phụ dài thì cắt bằng … */ .khtbl.thet td.num{font-size:13px} .khtbl .thet-tien-phu,.thet-han-phu{display:none} /* cùng specificity với .khtbl .kh-phu để đè được */ .thet-goi .thet-ten{font-weight:600} .thet-goi .badge{margin-left:4px;vertical-align:1px} .thet-khung{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thet-tg{line-height:1.35} .thet-tg .mono{white-space:nowrap} .thet-cho_duyet td:first-child{box-shadow:inset 3px 0 0 var(--hot)} /* chờ duyệt: cần làm ngay */ .thet-tam_dung td:first-child{box-shadow:inset 3px 0 0 #C9D6E0} .thet-pop{min-width:272px} .hv-pop .gh-o input[type=date]{width:auto;flex:1;min-height:0;height:32px;padding:0 8px;font-size:13px;text-align:left} .hv-pop .gh-o select{width:auto;flex:1;min-height:0;height:32px;padding:0 30px 0 9px;font-size:13px;background-position:right 9px center} .thet-pop .gh-o .btn{height:32px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;flex:none} /* nút cao bằng ô bên cạnh */ /* máy tính hẹp (≤1180): bỏ cột Buổi và Số tiền (tiền dời xuống dưới mã thay ngày tạo), ngày bắt đầu → hết hạn xuống hai dòng — bảng không cuộn ngang, menu ⋯ không bị cắt */ @media(max-width:1180px){ .thet-buoi,.thet-tien,.khtbl .thet-tao,.thet-goi .badge,.khtbl .thet-tg .kh-phu{display:none} .khtbl .thet-tien-phu{display:block} .thet-han-phu{display:inline} .khtbl td.thet-tg{white-space:normal} .thet-ht{display:none} } /* cột trái trang học viên chỉ ~750px kể cả màn rộng → luôn dùng dạng gọn */ .hv-trai .thet-buoi,.hv-trai .thet-tien,.hv-trai .khtbl .thet-tao,.hv-trai .thet-goi .badge{display:none} .hv-trai .khtbl .thet-tien-phu{display:block} .hv-trai .thet-han-phu{display:inline} .hv-trai .khtbl td.thet-tg{white-space:normal} /* bảng khung giờ (quản trị): lịch và hình thức không gãy dòng, địa điểm là dòng phụ */ .kgtbl .kg-ht-td{white-space:nowrap;font-size:12.5px} .kgtbl .kg-lich-td{color:var(--tx2);font-size:12.5px;line-height:1.45} /* các thứ được gãy dòng ở 1024, giờ giữ nguyên một cụm */ .kgtbl .kg-lich-td .kg-gio{white-space:nowrap} .kgtbl td:first-child,.kgtbl th:first-child{min-width:150px} .kgtbl .kh-ten b{font-weight:600} .kgtbl .pill{min-width:0;white-space:nowrap;padding:3px 10px} .kgtbl .kg-sc{color:var(--tx2)} /* ô ngày/giờ trong lưới quản trị cao đúng bằng ô chữ và ô chọn (Chrome vẽ ô ngày cao hơn 2px) */ .pgrid input[type=date],.pgrid input[type=time]{height:42px;padding-top:0;padding-bottom:0} /* form cấp thẻ tay: ô Khung giờ nổi bật khi gói cố định */ .canchon > span{color:var(--deep)} .canchon select,.canchon input{border-color:var(--deep);box-shadow:0 0 0 3px var(--kbg)} /* ── trang gói tập (công khai): danh sách khung giờ ── */ .khung-ds .li{align-items:center;gap:13px;padding:11px 15px} .kg-ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--deep)} .kg-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kg-ic.truc-tiep{background:#E8F6ED;color:#1E5E3A} .kg-ic.ca-hai{background:#F3EEFB;color:#5B3E8E} .khung-ds .t{display:flex;flex-direction:column;gap:2px;line-height:1.35} .khung-ds .t b{font-weight:600;color:var(--navy);font-size:14px} .kg-lich,.kg-ghi{font-size:12px;color:var(--tx2)} .kg-noi{font-size:12px;color:var(--tx2);text-align:right;white-space:normal;max-width:120px} /* ── tài khoản học viên: thẻ tập của tôi ── */ .the-hv{gap:9px;padding:15px 18px 16px} .the-hv.mo{opacity:.62} .the-hv .orow{align-items:flex-start;flex-wrap:nowrap;gap:8px 12px} /* pill luôn bên phải, tên dài thì tự xuống dòng */ .the-hv .orow .pill{flex:none;margin-top:2px} .thv-meta .mono,.thv-han > span{white-space:nowrap} /* giờ 06:00–07:00 và "đến hết dd/mm" không gãy giữa chừng */ .thv-ten{font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.01em;flex:1;min-width:0;line-height:1.35} .thv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--tx2);line-height:1.45} .thv-meta .mono{font-size:12.5px} .thv-han{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--navy); padding:9px 12px;background:var(--bg);border-radius:6px;line-height:1.4} .thv-han b{font-weight:600;color:var(--deep)} .thv-con{font-size:12px;font-weight:600;color:#1E5E3A;background:#E8F6ED;border-radius:4px;padding:2px 8px} .thv-cho{color:var(--tx2);font-size:13px} .thv-nut{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .the-hv.thv-dang_tap{box-shadow:inset 3px 0 0 #1E5E3A} .the-hv.thv-cho_tt,.the-hv.thv-cho_duyet{box-shadow:inset 3px 0 0 var(--hot)} /* thẻ tập của học viên: các ca được xếp, mỗi ca một dòng có nút Vào Zoom */ .thv-ca{display:flex;flex-direction:column;gap:6px;margin-top:4px} .thv-ca-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:8px;background:var(--bg);font-size:13px} .thv-ca-r .mono{font-size:12px;color:var(--tx2)} .thv-ca-r .btn{flex:none} /* hộp ⋯ của thẻ: danh sách ô tích ca */ .ca-chon{flex-direction:column;gap:6px;margin:4px 0 8px} .ca-chon .tick.nho{font-size:12.5px} /* trang gói: điều khoản ngắn */ .goi-dk{max-width:520px} /* form lớp: khối theo loại lớp ẩn bằng thuộc tính hidden; khối tuỳ chọn gập */ .panel[hidden]{display:none} details.panel.tuychon summary{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap} details.panel.tuychon summary::-webkit-details-marker{display:none} details.panel.tuychon summary::before{content:"▸";margin-right:8px;color:var(--tx2);font-size:12px} details.panel.tuychon[open] summary::before{content:"▾"} /* Lịch học theo tuần (quản trị): 7 cột, mỗi buổi là một
bấm ra hộp sửa */ .tuan-dau{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin-bottom:12px} .tuan-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tuan-ten{margin-left:6px;font-size:14px;color:var(--navy)} .them-buoi{position:relative} .them-buoi summary{list-style:none;cursor:pointer;display:inline-block} .them-buoi summary::-webkit-details-marker{display:none} .them-buoi-f{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(680px,90vw);background:#fff;border:1px solid var(--ln);border-radius:12px;padding:16px;box-shadow:0 18px 48px rgba(15,23,42,.18);gap:10px} .tuan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} /* các cột cùng hàng cao bằng nhau */ .tuan-cot{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:8px;min-height:160px;display:flex;flex-direction:column;gap:6px} .tuan-cot.homnay{border-color:var(--deep);box-shadow:0 0 0 3px var(--kbg)} .tuan-cot.qua{opacity:.72} .tuan-th{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 6px;border-bottom:1px solid var(--ln);margin-bottom:2px} .tuan-th b{font-size:13px;color:var(--navy)} .tuan-th span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2)} .tuan-cot.homnay .tuan-th b{color:var(--deep)} .tuan-trong{color:var(--tx2);font-size:12px;text-align:center;padding:10px 0} .tuan-rong{margin:-2px 0 10px} .bh{position:relative;border-radius:8px;border:1px solid var(--ln);background:var(--bg)} .bh summary{list-style:none;cursor:pointer;padding:7px 9px;display:flex;flex-direction:column;gap:2px} .bh summary::-webkit-details-marker{display:none} .bh-gio{font-size:11.5px;color:var(--deep);font-weight:600} .bh-ten{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3} .bh-phu{font-size:11px;color:var(--tx2)} .bh-cong_dong{border-left:3px solid #4F86C6} .bh-pt{border-left:3px solid #D9A441;background:#FFF9EC} .bh-dang{border-color:#1E7A4D;background:#EAF7EE} .bh-huy{opacity:.55} .bh-huy .bh-ten{text-decoration:line-through} .bh-qua{opacity:.6} .bh[open]{z-index:25;border-color:var(--deep);box-shadow:0 0 0 2px var(--kbg)} /* buổi đang mở hộp sửa: viền nổi để biết đang sửa buổi nào */ .bh-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:26;width:300px;background:#fff;border:1px solid var(--ln);border-radius:12px;padding:12px; box-shadow:0 18px 48px rgba(15,23,42,.18);display:flex;flex-direction:column;gap:10px} .tuan-cot:nth-child(n+5) .bh-pop{left:auto;right:0} .bh-pop label{font-size:12.5px} .bh-pop input,.bh-pop .pgrid input[type=time]{height:36px;min-height:0;padding-top:0;padding-bottom:0;font-size:13px} /* ô giờ cao bằng ô chữ (đè rule .pgrid 42px) */ .bh-nut{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .bh-pop > .bh-nut{border-top:1px solid var(--ln);padding-top:9px} /* hàng Huỷ / Xoá tách khỏi hàng Lưu */ @media(max-width:1180px){.tuan{grid-template-columns:repeat(4,minmax(0,1fr))}.tuan-cot:nth-child(n+5) .bh-pop{left:0;right:auto}.tuan-cot:nth-child(4n) .bh-pop,.tuan-cot:nth-child(7) .bh-pop{left:auto;right:0}} /* bảng gói tập (quản trị): hàng nhóm và hàng gói gọn */ .goitbl tr.goi-nhom td{background:var(--bg);padding:8px 14px;border-top:1px solid var(--ln)} .goitbl tr.goi-nhom .badge{margin-right:6px} .goitbl td{vertical-align:middle} .goitbl tr.mo td{opacity:.6} .goitbl .kh-phu{display:block;font-size:11.5px;color:var(--tx2);font-family:"IBM Plex Sans",sans-serif;font-weight:400} /* bảng tin tức (quản trị): ảnh bìa nhỏ 16:9 bên trái tiêu đề */ .tb-bai{display:flex;align-items:center;gap:12px;min-width:0} .tb-anh{flex:none;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--g-soft);display:block} .tb-anh img{width:100%;height:100%;object-fit:cover;display:block} .tb-tx{min-width:0} /* kho ảnh — 5 cột × 3 hàng = 15 ảnh/trang trên máy tính, thẻ nhỏ gọn */ .kho{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media(min-width:1181px){.kho{grid-template-columns:repeat(5,minmax(0,1fr))}} .anh{margin:0;border:1px solid var(--ln);border-radius:7px;background:#fff;overflow:hidden; display:flex;flex-direction:column;min-width:0} .anh > a{display:block;background:var(--g-soft)} .anh img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} .anh figcaption{padding:7px 9px 8px;display:flex;flex-direction:column;gap:3px;min-width:0} .an-t{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .an-m{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .an-m b{color:#1B6B44;font-weight:600} .an-d{display:flex;gap:5px;align-items:center;margin-top:3px;min-width:0} .an-u{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:4px 6px;flex:1;min-width:0;height:auto;border-radius:5px} .an-x{background:none;border:1px solid var(--ln);color:#B42318;font-family:inherit;font-size:11px;font-weight:600; padding:4px 8px;border-radius:5px;cursor:pointer;flex:none} .an-x:hover{border-color:#B42318;background:#FEF3F2} /* lesson list */ .llist{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:6px;overflow:hidden;background:#fff} .li{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--ln);font-size:14px} .li:last-child{border-bottom:none} .li .n{width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--tx2);display:grid;place-items:center;font-size:11px;font-family:"IBM Plex Mono",monospace;flex-shrink:0} .li .n.done{background:var(--g-btn);color:#fff} .li .t{flex:1;min-width:0} .li .d{font-size:12px;color:var(--tx2);white-space:nowrap} .li .free{font-size:10px;background:var(--g-gold);color:var(--navy);padding:2px 7px;border-radius:3px;font-weight:700} a.li-thu{color:inherit;text-decoration:none;cursor:pointer} a.li-thu:hover{background:var(--bg)} a.li-thu .d{color:var(--deep);font-weight:600} /* progress */ .pbar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden} .pbar i{display:block;height:100%;background:var(--g-btn)} /* player */ .player{position:relative;background:#000;aspect-ratio:16/9;border-radius:6px;overflow:hidden} /* Cắt khung: iframe cao hơn khung 120px và dịch lên 60px, nên thanh tiêu đề (trên) và logo "Xem trên YouTube" (dưới) của YouTube nằm ngoài vùng nhìn thấy. Chuột không tới iframe. */ .pl-khung{position:absolute;inset:0;overflow:hidden} .pl-khung iframe,.player iframe{position:absolute;top:-60px;left:0;width:100%;height:calc(100% + 120px);border:0;pointer-events:none} .player:fullscreen{border-radius:0;aspect-ratio:auto} #ytB{z-index:0}#yt{z-index:1} /* Toàn màn hình thật (Fullscreen API) và giả (.fs-gia, khi trình duyệt không cho): khung video 16:9 canh giữa, nền đen */ .player:fullscreen .pl-khung,.player.fs-gia .pl-khung{inset:0 auto;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:16/9;max-width:100%} body.fs-gia{overflow:hidden} .player.fs-gia{position:fixed;top:0;left:0;z-index:9999;border-radius:0;aspect-ratio:auto;width:100vw;height:var(--appvh,100vh);box-shadow:none;background:#000} @media(orientation:portrait){.player.fs-gia{width:var(--appvh,100vh);height:100vw;transform:translateX(100vw) rotate(90deg);transform-origin:left top}} .player.fs-gia .ctrl,.player:fullscreen .ctrl{padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))} .player.fs-gia .ctrl button,.player:fullscreen .ctrl button{min-width:44px;height:44px;font-size:18px} /* Chế độ "chạm tay": mở iframe cho chạm trực tiếp (Safari/iPhone), ẩn shield và thanh điều khiển */ .pl-goi{display:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:18;background:rgba(15,23,42,.8);color:#fff; font-size:13px;padding:7px 12px;border-radius:999px;pointer-events:none;white-space:nowrap} .player.tu-tay .pl-khung iframe{pointer-events:auto} .player.tu-tay .shield,.player.tu-tay .ctrl{display:none} .player.tu-tay .pl-goi{display:block} /* phủ kín mặt video: click không bao giờ tới iframe, nên YouTube không bung overlay */ .shield{position:absolute;inset:0;z-index:10;cursor:pointer} .endcard{position:absolute;inset:0;background:var(--g-deep);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20;text-align:center;padding:20px} .endcard.on{display:flex} .poster{position:absolute;inset:0;background:var(--g-deep);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:15;text-align:center;padding:20px} .poster.on{display:flex} .po-t{color:#fff;font-size:19px;font-weight:600;max-width:24ch;line-height:1.3} .po-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--hot)} /* nút phát giữa poster — trước đây trùng tên lớp .po-txt của thẻ bài viết nên bị kéo thành hình chữ nhật cao */ .po-play{width:66px;height:66px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.14); color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 0 4px;font-family:inherit} .po-play:hover{background:rgba(255,255,255,.28)} .po-b{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:var(--g-gold);color:var(--navy);font-size:20px;padding-left:4px} .po-d{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--on-toi)} .endcard h4{margin:0;font-size:20px;font-weight:600} .endcard p{color:#C6E1F2;font-size:14px;margin:0} /* Thanh điều khiển nổi dưới mặt video, tự ẩn khi đang phát và không động chuột */ .ctrl{position:absolute;left:0;right:0;bottom:0;z-index:16;display:flex;flex-direction:column;gap:8px;padding:10px 12px 10px; background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.85));color:#fff;opacity:0;transition:opacity .2s} .player.hien .ctrl,.player:not(.dangphat) .ctrl{opacity:1} .ctrl-r{display:flex;align-items:center;gap:4px} .ctrl button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:5px 8px;border-radius:7px;font-family:inherit;display:inline-flex;align-items:center} .ctrl button:hover{background:rgba(255,255,255,.15)} .ctrl-sp{flex:1} .seek{position:relative;height:6px;background:rgba(255,255,255,.28);border-radius:99px;cursor:pointer} .seek:hover{height:8px} .seek i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:0} .seek .sk-dem{background:rgba(255,255,255,.35)} .seek #sf{background:var(--g-gold)} .sk-nut{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#F3D27A;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(243,210,122,.3)} .tcode{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#fff;white-space:nowrap;margin-left:4px;font-variant-numeric:tabular-nums} .vol{width:80px;accent-color:#F3D27A} .rate{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:7px;padding:4px 6px;font-size:12.5px;height:auto;width:auto;min-width:0;background-image:none} .rate option{color:#000} .ec-auto{font-size:14px;color:#C6E1F2} .ec-auto button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:7px;padding:3px 10px;cursor:pointer;margin-left:4px;font-family:inherit} @media(max-width:600px){.vol,.rate{display:none}} /* qr */ .qrbox{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start} .ck-mot{max-width:560px} /* chưa có QR: một cột, không để dòng chữ dài quá */ .ck-lh{display:flex;gap:10px;flex-wrap:wrap} .ck-lh .btn{flex:1 1 200px;text-align:center} .qrcard{border:1px solid var(--ln);border-radius:8px;padding:16px;background:#fff;text-align:center} .qrcard svg{width:100%;height:auto;display:block} .kv{display:flex;flex-direction:column;gap:11px} .kv .r{display:flex;justify-content:space-between;gap:16px;padding-bottom:9px;border-bottom:1px solid var(--ln);font-size:14px} .kv .r:last-child{border-bottom:none} .kv .k{color:var(--tx2)} .kv .v{font-weight:600;color:var(--navy);text-align:right;font-family:"IBM Plex Mono",monospace} .kv .v .chep{margin-left:8px;font-family:inherit;font-size:11px;font-weight:600;color:var(--deep);background:var(--bg); border:1px solid var(--ln);border-radius:4px;padding:2px 7px;cursor:pointer;vertical-align:middle} .kv .v .chep:hover{border-color:var(--deep)} .buoc-ck{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.5;color:var(--tx2)} .buoc-ck b{color:var(--navy)} .qr-dt{display:none;margin-top:8px;text-align:left;line-height:1.5} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.qr-dt{display:block}} .note-hi{background:#FDF6E4;border:1px dashed var(--gold);border-radius:5px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px} .note-hi code{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;color:#7A5C14;letter-spacing:.04em} /* admin */ .ocard{border:1px solid var(--ln);border-radius:6px;background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:12px} .orow{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline} .pill{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:4px} .pill.pending{background:var(--bg);color:var(--deep)} .pill.claimed{background:#FDF6E4;color:#7A5C14} .pill.activated{background:#E8F6ED;color:#1E5E3A} .actions{display:flex;gap:9px;flex-wrap:wrap} .mono{font-family:"IBM Plex Mono",monospace} /* footer */ footer{background:var(--g-deep);color:var(--on-toi);font-size:13.5px;margin-top:44px} footer a{color:var(--on-toi2)} footer a:hover{color:#fff;text-decoration:none} .frail{height:3px;background:var(--rail)} /* hàng trên: thương hiệu | liên hệ */ .fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;padding:26px 20px 18px;align-items:start} .fcol{display:flex;flex-direction:column;gap:8px;min-width:0} .fname{color:#fff;font-weight:600;font-size:15.5px} .ftag{color:#8FBBD6;font-size:12.5px;line-height:1.5} .frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px} /* vòng tròn kênh — nhỏ lại */ .fsoc{display:flex;gap:7px} .fsoc a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.09);border:1px solid rgba(184,220,239,.26);color:#DCEBF6} .fsoc a:hover{background:rgba(255,255,255,.18);border-color:rgba(184,220,239,.55)} .fsoc svg{width:15px;height:15px;fill:currentColor;display:block} .fsoc .zalo{font-size:10px;font-weight:700;letter-spacing:-.02em} .fban{font-size:11.5px;color:var(--tx2);opacity:.75;padding:10px 20px 14px;border-top:1px solid var(--ln);margin-top:4px;text-align:center} .fzalo{display:inline-flex;align-items:center;background:var(--g-gold);color:var(--navy)!important; padding:8px 15px;border-radius:7px;font-size:12.5px;font-weight:700;white-space:nowrap} .fzalo:hover{filter:brightness(1.05)} /* Liên hệ: một cột dọc. Chia đôi làm địa chỉ xuống dòng lẻ loi, để nguyên cột rộng thì mỗi mục gọn trong một dòng. */ .fmeta{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right} .fmeta div{display:flex;gap:9px;align-items:baseline;line-height:1.5;font-size:13px} .fmeta i{font-style:normal;opacity:.65;font-size:11px} /* hàng link ngang — thay cho cột dọc 6 dòng */ .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 18px;padding:14px 20px 16px; border-top:1px solid rgba(184,220,239,.14);font-size:12.5px} .fnav a{white-space:nowrap} /* ── hero có ảnh giáo viên ── */ /* Ảnh cố định hẹp, chữ chiếm phần còn lại — không để hở khoảng giữa. */ .hero .in{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:44px;align-items:center} /* ảnh đứng trước trong mã để trên điện thoại chữ chảy quanh được; trên máy tính đẩy sang cột phải bằng order */ .hero .hphoto{order:2} .hero .hchu{order:1;min-width:0} .hero .cred{font-size:12.5px;color:#8FBBD6;margin:0 0 14px} .hbtns{display:flex;gap:11px;flex-wrap:wrap} .hphoto{aspect-ratio:4/5;width:240px;border-radius:11px; background:linear-gradient(150deg,var(--mid),var(--light) 60%,var(--pale)); display:grid;place-items:center;font-size:52px;overflow:hidden;align-self:center} .hphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* ── hero khối nổi bật: ảnh 16:9 bên phải, chữ bên trái ── */ .hero.nbat .in{grid-template-columns:minmax(0,1fr) minmax(300px,46%);gap:40px} .nb-anh{order:2;display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden; background:linear-gradient(150deg,var(--mid),var(--light) 60%,var(--pale));box-shadow:0 12px 32px rgba(0,0,0,.25)} .nb-anh img{width:100%;height:100%;object-fit:cover;display:block} .hero.nbat h1{max-width:24ch} .hero.nbat h1 a{color:inherit} .hero.nbat h1 a:hover{text-decoration:underline} .hero.nbat p:last-of-type{margin-bottom:22px} .nb-nut{background:var(--hot);color:var(--navy)} .nb-nut:hover{filter:brightness(1.05)} .morelink{display:inline-block;color:var(--hot);font-size:13.5px;font-weight:600;margin-bottom:4px} .morelink:hover{text-decoration:underline} /* ── số đỏ "việc chờ" trên menu quản trị, thanh tab, chuông ── */ .qts-so,.nav-so,.tab-so,.mico-so{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px; border-radius:9px;background:#E5484D;color:#fff;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;line-height:1; box-shadow:0 0 0 2px #fff} .nav-qt{position:relative} .nav-so{position:absolute;top:-9px;right:-14px;min-width:17px;height:17px;font-size:10.5px} .tabitem{position:relative} .tab-so{position:absolute;top:4px;left:calc(50% + 4px);min-width:17px;height:17px;font-size:10.5px} .mico{position:relative} .mico-so{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;font-size:10.5px} /* ── Khoá của tôi: bảng tiến độ + mục lục theo chương ── */ .tiendo{display:flex;flex-direction:column;gap:12px} .td-dau{display:flex;gap:14px;align-items:center} .td-so{font-size:15px} .vong{--pt:0;width:72px;height:72px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:conic-gradient(var(--deep) calc(var(--pt) * 1%),#E3ECF3 0);position:relative} .vong::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff} .vong b{position:relative;font-size:15px;color:var(--navy);font-family:"IBM Plex Mono",monospace} .td-dong{border-top:1px solid var(--ln);padding-top:6px} .td-dong .dr{grid-template-columns:104px minmax(0,1fr);padding:7px 0;font-size:13px;border:none} .td-dong .dr.canh .dv{color:#7A5C14} .chuong-hoc{margin-top:14px} .chuong-hoc summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none; font-weight:600;font-size:15.5px;color:var(--navy);padding:6px 0;margin-bottom:6px} .chuong-hoc summary::-webkit-details-marker{display:none} .chuong-hoc summary::before{content:"▾";font-size:12px;color:var(--tx2);margin-right:8px} .chuong-hoc:not([open]) summary::before{content:"▸"} .ch-ten{flex:1} .ch-dem{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tx2);font-weight:500} .ch-dem.xong{color:#1E5E3A} .li.tiep{background:#FFFBEE;box-shadow:inset 3px 0 0 var(--hot)} .badge.tiep{background:var(--hot);color:var(--navy);margin-left:8px;vertical-align:middle} .li-ic{font-size:12px;color:var(--tx2);margin-left:6px} .li-do{display:block;height:3px;background:#E3ECF3;border-radius:2px;margin-top:5px;max-width:200px;overflow:hidden} .li-do i{display:block;height:100%;background:var(--deep)} /* ── Trang xem bài học: meta dưới tên bài, nút trước/sau, nút đã xong, cột phải ── */ .bai-ten.st{margin-bottom:8px} .bai-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--tx2);margin:0 0 18px} .bai-meta .badge{font-size:11px;padding:3px 9px} .bm-tg{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--navy)} .bm-ic{color:var(--deep);text-decoration:none;border-bottom:1px dotted var(--deep)} .bai-nav{display:flex;justify-content:space-between;gap:10px} .bai-nav{min-width:0;max-width:100%} .bai-nav .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:0 1 48%;max-width:48%;min-width:0;padding:8px 14px;background:#fff;overflow:hidden;white-space:normal} .bai-nav .btn b{white-space:nowrap} .bai-nav .btn .bn-t{display:block;width:100%} .bai-nav .btn.sau{align-items:flex-end;text-align:right;margin-left:auto} .bai-nav .btn b{font-weight:600} .bn-t{font-weight:400;font-size:12px;color:var(--tx2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bai-nd-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);margin-bottom:8px} .player{scroll-margin-top:84px} /* nút Tập lại cuộn lên không bị thanh trên che */ .xong-hang{display:flex;gap:10px;align-items:stretch} .xong-hang .btn.wide{flex:1;width:auto} .xong-hang .btn.ghost{flex:0 0 auto;background:#fff} .xong-hang #doneBtn:disabled{opacity:1;cursor:default;background:#E8F6ED;color:#1E5E3A;border:1px solid #BFE3CC} .bai-ben{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto;gap:8px} .ben-td{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--ln)} .ben-td-hang{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .bai-muc .chuong-hoc{margin-top:6px} .bai-muc .chuong-hoc summary{font-size:14px;padding:5px 0;margin-bottom:4px} .bai-muc .li{padding:9px 11px;font-size:13.5px;gap:10px} .bai-muc .li .t{line-height:1.4} .bai-muc .li .d{font-size:11.5px} .li.hien{background:var(--bg);box-shadow:inset 3px 0 0 var(--deep);font-weight:600} .badge.hien{background:var(--deep);color:#fff;margin-left:8px;vertical-align:middle;font-weight:600} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .split .bai-ben{position:static;max-height:none;overflow:visible} .bai-nav .btn{flex:1 1 0} .xong-hang{flex-direction:column} .xong-hang .btn.ghost{width:100%} .bai-meta{margin-bottom:14px} } /* ── bài học: dặn dò, tài liệu, bài khoá theo ngày ── */ .bai-nd{background:#fff;border:1px solid var(--ln);border-radius:8px;padding:16px 20px;font-size:15px;line-height:1.7} .bai-nd h2,.bai-nd h3{font-size:16px;margin:14px 0 6px} .bai-nd p{margin:0 0 10px} .bai-nd ul{margin:0 0 10px;padding-left:20px} .bai-nd img{max-width:100%;border-radius:6px} /* mô tả dài của khoá / gói: cùng luật văn bản thường như dặn dò */ .mota-dai{color:#4A6A82;font-size:16px;line-height:1.7} .mota-dai p{margin:0 0 10px} .mota-dai ul{margin:0 0 12px;padding-left:22px} .mota-dai li{margin:2px 0} .mota-dai h2,.mota-dai h3{font-size:17px;color:var(--navy);margin:14px 0 6px} .mota-dai strong{color:var(--navy)} .tailieu{background:var(--bg);border-radius:8px;padding:12px 16px;font-size:14px} .tailieu b{display:block;margin-bottom:6px} .tailieu ul{margin:0;padding-left:18px} .tailieu li{margin:3px 0} .li.khoa{color:var(--tx2);background:#FAFCFE;cursor:not-allowed} .li.khoa .n{background:#E9EFF4;color:#8A9BAA} .li.khoa .t{color:#7A8B99} .badge.ngay{background:#FDF6E4;color:#7A5C14} .badge.thu{background:#EAF1FD;color:#2A4E8E} /* học thử — xem được không cần mua */ .badge.loi{background:#FDECEA;color:#8E2A1E} /* cảnh báo thật: bài chưa phát được */ .badge.xam{background:#EEF2F6;color:#61748A} /* ghi chú nhẹ, không phải việc phải làm */ .b-tk{font-size:11.5px;color:var(--tx2);margin-left:6px;font-family:"IBM Plex Mono",monospace} /* ── dải học thử ── */ .trial{background:var(--g-gold);border-radius:9px;padding:20px 24px;display:flex; justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} /* Nhãn phân loại tách riêng: tiêu đề khỏi dài dòng mà người đọc vẫn biết ngay đây là khoá video tự học, không phải lớp có huấn luyện viên. */ .trial .t-nhan{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:#7A5C14;font-weight:600;margin-bottom:4px} .trial h3{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px} .trial p{font-size:13.5px;line-height:1.55;color:#5C4712;margin:0;max-width:54ch} .trial p a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px} .trial .btn{background:var(--navy);color:#fff;white-space:nowrap} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .trial{padding:16px 17px;gap:13px} .trial h3{font-size:17.5px} .trial p{font-size:12.5px} .trial .btn{width:100%;padding:11px} } /* ── chip lọc triệu chứng ── */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .chip{font-size:12.5px;padding:6px 13px;background:var(--bg);border:1px solid var(--pale); border-radius:20px;color:var(--deep);font-weight:500;white-space:nowrap} .chip.on{background:var(--g-btn);border-color:transparent;color:#fff} /* ── thẻ bài viết: cùng ngôn ngữ với thẻ khoá học ── */ .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .po{display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB; border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.05); color:inherit;transition:box-shadow .18s,transform .18s} .po:hover{box-shadow:0 6px 22px rgba(15,23,42,.1);transform:translateY(-2px);text-decoration:none} .po .th{aspect-ratio:16/9;flex:0 0 auto;background:var(--g-soft);display:grid; place-items:center;font-size:22px;color:var(--light);overflow:hidden} .po .th img{width:100%;height:100%;object-fit:cover;display:block} .po-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1} .po .dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--tx2)} .po .tt{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.4; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* ── Trang /tin-tuc: lưới cố định để 12 bài luôn chia hàng tròn — máy tính 4 cột, màn vừa 3, tablet 2, điện thoại 1. Trang chủ vẫn dùng .po thường trong dải cuộn ngang nên mọi thứ dưới đây chỉ ăn theo .tt-luoi. */ .posts.tt-luoi{grid-template-columns:1fr;gap:14px} .tt-luoi .po .th img{transition:transform .35s ease} .tt-luoi .po:hover .th img{transform:scale(1.04)} @media(min-width:641px){.posts.tt-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}} @media (min-width:861px) and (pointer:fine){.posts.tt-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1101px){.posts.tt-luoi{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Hộp trống dùng chung: biểu tượng nét, tiêu đề, một câu giải thích, nút đi tiếp */ .hop-trong{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; padding:44px 24px;border:1px dashed var(--pale);border-radius:14px;background:#fff} .hop-trong svg{width:34px;height:34px;fill:none;stroke:var(--deep);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:.8;margin-bottom:4px} .hop-trong strong{font-size:15.5px;color:var(--navy)} .hop-trong p{margin:0;max-width:420px;font-size:13.5px;line-height:1.55;color:var(--tx2)} .hop-trong .btn{margin-top:8px} /* ── Bản app trên điện thoại ── Dưới 860px: bỏ menu xổ và chân trang, điều hướng dồn hết vào thanh tab dưới đáy. Trên 860px: giữ nguyên website bình thường. */ .tabbar{display:none} .caidat{display:none} .mhead,.mback,.mtitle{display:none} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .deskonly-ib{display:none} nav.top .navmenu, nav.top .burger, nav.top .navtog{display:none} nav.top .in{padding:8px 16px;gap:10px} nav.top .brand b{font-size:16px} footer, .frail{display:none} .mhead{display:flex;align-items:center;gap:9px;margin-left:auto} .mback{display:flex;align-items:center;justify-content:center;width:32px;height:32px; flex-shrink:0;color:var(--navy);margin-left:-4px} .mtitle{display:block;font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.012em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .mico{width:32px;height:32px;border-radius:50%;background:var(--kbg);display:grid; place-items:center;color:var(--deep);flex-shrink:0} .mback svg,.mico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* ── dải gợi ý lưu ra màn hình chính, nằm ngay trên thanh tab ── */ .caidat[hidden]{display:none !important} .caidat{position:fixed;left:0;right:0;z-index:59;display:flex !important;align-items:center;gap:11px; bottom:calc(64px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid var(--ln);padding:11px 14px; box-shadow:0 -6px 18px -8px rgba(15,58,92,.22); animation:cdlen .22s ease-out} @keyframes cdlen{from{transform:translateY(100%)}to{transform:none}} .cd-ic{width:38px;height:38px;border-radius:9px;flex-shrink:0;object-fit:cover; background:var(--g-btn)} .cd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .cd-tx b{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3} .cd-tx span{font-size:11.5px;color:var(--tx2);line-height:1.4} .cd-tx b, .cd-tx span{overflow-wrap:anywhere} .cd-sh{width:13px;height:13px;vertical-align:-2px;color:var(--deep)} .caidat .btn{flex-shrink:0;padding:8px 15px} .cd-dong{background:none;border:none;color:var(--tx2);font-size:15px;line-height:1; padding:6px;cursor:pointer;flex-shrink:0} body.cocaidat{padding-bottom:calc(140px + env(safe-area-inset-bottom))} /* bảng hướng dẫn ba bước cho iPhone */ .cdhd{position:fixed;inset:0;z-index:80;background:rgba(15,40,58,.55); display:flex;align-items:flex-end;justify-content:center;padding:16px; animation:cdmo .18s ease-out} .cdhd[hidden]{display:none} @keyframes cdmo{from{opacity:0}to{opacity:1}} .cdhd-hop{position:relative;background:#fff;border-radius:14px;padding:20px 18px 16px; width:100%;max-width:420px;max-height:82vh;overflow:auto; margin-bottom:calc(56px + env(safe-area-inset-bottom)); box-shadow:0 18px 44px -14px rgba(15,40,58,.5);animation:cdlen .24s ease-out} .cdhd-x{position:absolute;top:10px;right:10px;background:none;border:none; color:var(--tx2);font-size:16px;padding:7px;cursor:pointer;line-height:1} .cdhd-ic{width:52px;height:52px;border-radius:12px;display:block;margin-bottom:11px; object-fit:cover;background:var(--g-btn)} .cdhd-hop > b{display:block;font-size:16.5px;color:var(--navy);line-height:1.3} .cdhd-p{margin:6px 0 15px;font-size:13px;color:var(--tx2);line-height:1.55} .cdhd-b{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .cdhd-b li{display:flex;gap:11px;align-items:flex-start;font-size:14px; color:var(--text);line-height:1.5} .cdhd-b .n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--g-btn); color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700; font-family:"IBM Plex Mono",monospace} .cdhd-b b{color:var(--navy);font-weight:600} .cdhd-b em{font-style:normal;color:var(--tx2);font-size:12.5px} .cdhd-mui{text-align:center;font-size:22px;color:var(--deep);margin-top:14px; animation:cdnhay 1.1s ease-in-out infinite} @keyframes cdnhay{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}} @media(prefers-reduced-motion:reduce){ .cdhd-mui,.cdhd,.cdhd-hop,.caidat{animation:none}} .tabbar{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:60; grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--ln); padding-top:8px; padding-left:max(2px, env(safe-area-inset-left)); padding-right:max(2px, env(safe-area-inset-right)); padding-bottom:max(15px, calc(8px + env(safe-area-inset-bottom))); box-shadow:0 -2px 12px rgba(15,58,92,.07)} .tabitem{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center; font-size:10.5px;line-height:1.2;color:#6B8598;padding:2px 1px;font-weight:600} .tabitem svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .tabitem.on{color:var(--deep)} @media(min-width:600px){.tabbar{padding-left:calc(50% - 300px);padding-right:calc(50% - 300px)}.tabitem{font-size:11.5px}.tabitem svg{width:24px;height:24px}} .tabitem.on svg{stroke-width:2.3} .tabitem:hover{text-decoration:none} body{padding-top:env(safe-area-inset-top); padding-bottom:max(76px, calc(69px + env(safe-area-inset-bottom)))} /* máy có khuyết đỉnh: khi xoay ngang, chừa hai mép cho nội dung */ .wrap{padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right))} main{padding-bottom:6px} /* thanh chuyển mục trong tab Tin tức và Cần duyệt */ .segbar{display:flex;background:var(--kbg);border-radius:10px;padding:3px;gap:3px; margin:0 0 18px} .segbar a{flex:1;text-align:center;font-size:13px;font-weight:600;padding:8px 4px; border-radius:8px;color:var(--tx2)} .segbar a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,58,92,.13)} .segbar a:hover{text-decoration:none} } /* trên máy tính thanh chuyển mục thành hàng liên kết gọn */ @media (min-width:861px) and (pointer:fine){ /* ── khu quản trị: menu dọc bên trái, nội dung bên phải ── */ main.qt{max-width:1400px;display:grid;grid-template-columns:216px minmax(0,1fr);gap:0 34px;align-items:start} main.qt .anav{display:none} /* dải ngang cũ chỉ còn cho điện thoại */ main.qt .qtbody{min-width:0} main.qt .qtbody > section:first-child{border-top:none} .qtside{position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto; padding:26px 14px 26px 0;border-right:1px solid var(--ln);display:flex;flex-direction:column;gap:2px} .qts-nhom{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--tx2);margin:16px 0 5px 12px} .qts-nhom:first-child{margin-top:0} .qts-a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;font-size:13.5px; font-weight:600;color:var(--tx2);line-height:1.3} .qts-a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85} .qts-a:hover{background:var(--bg);color:var(--deep);text-decoration:none} .qts-a.on{background:var(--bg);color:var(--deep);box-shadow:inset 3px 0 0 var(--deep)} .qts-a.ra{color:#8E2A1E;margin-top:4px} .qts-so{margin-left:auto} } /* Máy tính hẹp (861–1180px): có cột menu thì hai cột nội dung + hồ sơ không đủ chỗ, ô nhập bị cắt chữ — xếp hồ sơ xuống dưới, bảng rộng ra hết cỡ. */ @media (min-width:861px) and (max-width:1180px) and (pointer:fine){ main.qt{grid-template-columns:196px minmax(0,1fr);gap:0 22px} main.qt .split{grid-template-columns:minmax(0,1fr)} main.qt .hoso{position:static} main.qt .tbl .pill{min-width:0} } @media (min-width:861px) and (pointer:fine){ .segbar{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--ln)} .segbar a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--tx2); border-bottom:2px solid transparent;margin-bottom:-1px} .segbar a.on{color:var(--deep);border-bottom-color:var(--deep)} .segbar a:hover{text-decoration:none;color:var(--deep)} } @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .dr{grid-template-columns:100px minmax(0,1fr);gap:10px;font-size:13.5px} /* Thẻ khoá học: ảnh bìa lớn là ô trống vô nghĩa trên điện thoại. Đổi sang hàng ngang — cao 96px thay vì 300px. */ .grid{grid-template-columns:1fr;gap:10px} .cbody{padding:14px 16px 16px;gap:6px} .ctitle{font-size:16px} .cexc{font-size:13.5px} .pnew{font-size:18px} /* Khối gọn lại */ section{padding:26px 0} h1.st,h2.st{font-size:19px;margin-bottom:13px} .trial{padding:18px 20px;gap:14px} .trial h3{font-size:17px} footer{margin-top:30px} .fgrid{grid-template-columns:1fr;gap:20px;padding:22px 20px 16px} .fmeta{align-items:flex-start;text-align:left} .fzalo{flex:1;justify-content:center} /* Điện thoại: giữ ảnh DỌC như trên máy tính, thu nhỏ và cho chữ chảy quanh. Cắt tròn thì cùng một tấm ảnh không thể vừa đẹp ở hai khung. */ .hero{padding:24px 0} .hero .in{display:block} .hero .hchu{display:contents} /* bỏ khối bọc để chữ chảy quanh ảnh nổi */ .hphoto{float:right;width:126px;aspect-ratio:4/5;height:auto;border-radius:10px; margin:4px 0 10px 15px;font-size:40px;shape-outside:inset(0 round 10px)} .hero h1{font-size:25px;margin-bottom:10px;max-width:none} .hero p{font-size:14.5px;line-height:1.65;margin-bottom:11px} .hero .cred{clear:none} .hero .morelink{clear:both;display:block;padding-top:4px} /* Khối nổi bật: nút không chiếm riêng một dòng — nằm cùng hàng với nhãn nhỏ (nhãn trái, nút phải), tiêu đề và mô tả trải đủ hai cột bên dưới. */ .hero.nbat .hchu{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center} .hero.nbat .kick{grid-column:1;grid-row:1;margin:0} .hero.nbat .nb-nut{grid-column:2;grid-row:1;padding:9px 16px;font-size:13.5px;border-radius:7px} .hero.nbat h1,.hero.nbat p{grid-column:1/-1} .hero.nbat h1{margin-top:10px} .hero.nbat p:last-of-type{margin-bottom:0} .nb-anh{float:none;width:100%;margin:0 0 16px;border-radius:9px} .hero.nbat h1{max-width:none} .stats{gap:20px} .stats b{font-size:19px} } .stack{display:flex;flex-direction:column;gap:16px} /* Hàng liên kết mảnh ở cuối trang Tài khoản. Thay cho khung menu bốn dòng cũ: ba mục Thông tin · Lớp học · Bảo mật đã nằm ở thanh chuyển mục ngay trên, ở đây chỉ còn những lối đi không có chỗ nào khác dẫn tới. */ .cuoitk{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center; margin-top:28px;padding-top:15px;border-top:1px solid var(--ln);font-size:13.5px} .cuoitk a{color:var(--deep);font-weight:500} .cuoitk a.ra{margin-left:auto;color:#B4453C} /* thanh tiến độ nhỏ trong bảng học viên */ .tdo{display:inline-block;vertical-align:middle;width:52px;height:5px;border-radius:3px; background:var(--bg);overflow:hidden;margin-right:7px} .tdo i{display:block;height:100%;background:var(--g-btn)} .tdo-s{font-size:12px;color:var(--tx2)} /* nhãn phân loại lớp: học ở đâu · nhóm hay kèm riêng */ .nlop{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px} .nlop.nho{margin:2px 0 8px} .nl{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap; border:1px solid transparent} .nlop.nho .nl{font-size:10.5px;padding:2px 7px} .nl.online{background:#E8F1FB;color:#1F5C93;border-color:#C4DCF2} .nl.truc-tiep{background:#EAF6EF;color:#1B6B44;border-color:#BFE3CE} .nl.ca-hai{background:#F2ECFB;color:#5A3E96;border-color:#DCCFF2} .nl.k-nhom{background:var(--bg);color:var(--deep);border-color:var(--pale)} .nl.k-rieng{background:#FFF3D6;color:#8A6A22;border-color:#EBD9A6} /* Khoá/lớp đã gỡ khỏi trang bán — người đã mua vẫn giữ quyền dùng */ .nl-an{font-style:normal;display:inline-block;vertical-align:middle; background:#F3F0EC;color:#7A6A57;border-color:#E2DAD0} /* ── Trang Tài khoản kiểu app ── Trên điện thoại dùng danh sách nhóm có biểu tượng thay cho thanh tab ngang: số lượng nằm gọn bên phải nên nhãn không bao giờ bị bẻ dòng. */ .mobonly{display:none} .qtside{display:none} @media (min-width:861px) and (pointer:fine){.qtside{display:flex}} .hsthe{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:20px; border-bottom:1px solid var(--ln)} .hs-av{width:52px;height:52px;border-radius:50%;background:var(--g-btn);color:#fff; display:grid;place-items:center;font-size:21px;font-weight:700;flex-shrink:0} .hs-tx{min-width:0;display:flex;flex-direction:column;gap:2px} .hs-tx b{font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-.01em} .hs-tx span{font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .apnhom{margin-bottom:18px} .ap-td{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--tx2);margin:0 4px 7px} .apds{border:1px solid var(--ln);border-radius:11px;background:#fff;overflow:hidden} .aprow{display:flex;align-items:center;gap:12px;padding:13px 15px; border-bottom:1px solid var(--ln);font-size:15px;font-weight:500;color:var(--navy)} .aprow:last-child{border-bottom:none} .aprow:hover,.aprow:active{text-decoration:none;background:var(--bg)} .aprow svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--deep); stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .ap-nhan{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ap-so{flex-shrink:0;min-width:22px;height:22px;padding:0 7px;border-radius:11px; background:var(--bg);color:var(--deep);font-family:"IBM Plex Mono",monospace; font-size:12px;font-weight:600;display:grid;place-items:center} .ap-mt{flex-shrink:0;color:#C3D3DF;font-size:19px;line-height:1} .aprow.ra{color:#B4453C} .aprow.ra svg{stroke:#B4453C} .aprow.ra .ap-mt{display:none} .quaylai{display:inline-block;font-size:14px;font-weight:600;color:var(--deep);margin-bottom:14px} .quaylai.mobonly{display:none} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .mobonly{display:block} .quaylai.mobonly{display:inline-block} .hsthe{padding-bottom:15px;margin-bottom:18px} } /* ô đã khoá — điền sẵn từ tài khoản, không cho sửa */ .dakhoa{background:var(--bg);color:var(--tx2);cursor:default} .dakhoa:focus{border-color:var(--ln)} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ /* trên app, thanh tab dưới đáy đã ghi "Tài khoản" nên không cần tiêu đề nữa; thẻ hồ sơ rút gọn còn một dòng */ .prof-head{margin-bottom:16px;padding-bottom:14px} .prof-av{width:44px;height:44px;font-size:17px} .prof-name{font-size:16px} } @media(max-width:520px){.cuoitk a.ra{margin-left:0}} /* ô chỉ đọc — email đăng nhập */ .tinhkhoa{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:11px 13px;border:1px solid var(--ln);border-radius:5px;background:var(--kbg); font-size:15px;color:var(--tx2)} .tinhkhoa b{color:var(--navy);font-weight:600;word-break:break-all} .tinhkhoa i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx2)} @media(max-width:520px){.tinhkhoa i{margin-left:0;flex-basis:100%}} .split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start} .split-art{grid-template-columns:minmax(0,1fr) 320px} /* trang bài viết: cột bài ≈ 68ch ở 1080px, cột phải cố định */ .demo-flag{background:var(--hot);color:var(--navy);font-size:11.5px;font-weight:700;text-align:center;padding:5px 12px} @media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .split,.qrbox,.two{grid-template-columns:minmax(0,1fr)} /* minmax(0,…): cột không nở theo nội dung rộng (nút, iframe) → không tràn ngang */ /* trang bài viết: ảnh 600px trong bài không được kéo rộng cột (1fr = minmax(auto,1fr) sẽ nở theo ảnh) */ .split-art{grid-template-columns:minmax(0,1fr)} /* điện thoại: hộp mua / Vào học lên TRÊN mục lục bài, không bắt kéo hết 12 bài mới thấy nút */ .split .ben-mua{order:-1;position:static !important} .hero{padding:36px 0} .navlinks{gap:12px;font-size:12.5px} nav.top .in{flex-wrap:wrap;gap:8px} } /* ── Khối đầu trang dùng chung cho /khoa-hoc và /goi-tap ── Hàng 1: tên trang + phụ đề bên trái, thanh lọc bên phải (đáy thẳng hàng h1). Hàng 2: hai ý ngắn có biểu tượng + nút sang trang chéo. */ .phead{display:flex;flex-direction:column;gap:13px;margin:0 0 22px} .phead-top{display:flex;flex-direction:column;gap:6px} .phead h1.st{margin:0} .phead-sub{color:var(--tx2);font-size:13.5px;line-height:1.5;margin:0} .phead-dem{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tx2);white-space:nowrap} .phead-y{display:flex;flex-direction:column;gap:12px;align-items:flex-start; border-top:1px solid var(--ln);padding-top:12px} .pmeo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0} .pmeo li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--tx2)} .pmeo svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--deep);opacity:.85} .phead-y .btn{flex:0 0 auto;white-space:nowrap} .phead .segbar{margin:0;border:none;background:var(--kbg);border-radius:9px;padding:3px;gap:2px} .phead .segbar a{border-bottom:none;margin-bottom:0;border-radius:7px;padding:7px 12px; font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap;text-align:center} .phead .segbar a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,58,92,.13)} @media (min-width:861px) and (pointer:fine){ /* thanh lọc nằm cùng hàng với h1, chạm cùng đường đáy */ .phead-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end; row-gap:6px;column-gap:24px} .phead-top > h1.st{grid-column:1;grid-row:1} .phead-top > .phead-sub{grid-column:1;grid-row:2} .phead-top > .segbar{grid-column:2;grid-row:1;justify-self:end} .phead-top > .phead-dem{grid-column:2;grid-row:1;justify-self:end;padding-bottom:4px} .phead-y{flex-direction:row;align-items:center;justify-content:space-between;gap:24px} } @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){ .phead .segbar{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;margin-top:3px} .phead .segbar::-webkit-scrollbar{display:none} .phead .segbar a{flex:1 0 auto;padding:8px 11px} } /* Máy tính hẹp (861–1000px): đủ chỗ cho menu ngang nhưng không dư — với tài khoản giáo viên (thêm "Quản trị" + số đỏ) thanh bị đẩy tràn làm cả trang cuộn ngang. Thu khoảng cách, cỡ chữ và rút bớt phần đuôi của nhãn — không ẩn liên kết nào. */ @media (min-width:861px) and (max-width:1000px) and (pointer:fine){ nav.top .in{gap:10px;min-width:0} .brand{min-width:0;flex-shrink:1} .brand b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis} .navmenu{gap:10px;min-width:0;flex-wrap:nowrap} .navmenu a{font-size:13.5px;white-space:nowrap} /* số đỏ tròi ra phải 14px — gap hẹp thì nó đè lên chữ mục kế bên */ .navmenu .nav-qt{margin-right:9px} .nav-dai{display:none} .navtim{width:29px;height:29px} .navtim svg{width:15px;height:15px} .navcta{padding:7px 12px;font-size:12px} .navsep{height:18px} } /* ── Lịch học phía học viên (mô hình Kinafit: dải ngày, dải trạng thái gói, thẻ buổi) ── */ .lh-dau{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} .lh-loai{display:flex;gap:8px;flex-wrap:wrap} .lh-loai a{padding:8px 16px;border-radius:999px;background:var(--bg);color:var(--navy);font-weight:700;font-size:13px;text-decoration:none;border:1px solid var(--ln)} .lh-loai a.on{background:var(--g-gold);border-color:transparent;color:var(--navy);box-shadow:0 6px 16px -8px rgba(205,168,95,.9)} .lh-thang{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:8px} .lh-pick{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--ln);background:#fff;display:grid;place-items:center;font-size:15px;cursor:pointer} .lh-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} .lh-homnay{margin-left:auto;font-size:13px;color:var(--deep);text-decoration:none;font-weight:600} .lh-tuan{display:flex;align-items:center;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .lh-tuan::-webkit-scrollbar{display:none} .lh-nav{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--navy);font-size:24px;text-decoration:none;border-radius:50%} .lh-nav:hover{background:var(--bg)} .lh-ngay{flex:1 0 46px;max-width:64px;height:60px;border-radius:12px;background:#fff;border:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--navy);text-decoration:none} .lh-ngay b{font-size:16px;font-variant-numeric:tabular-nums} .lh-ngay span{font-size:11px;color:var(--tx2)} .lh-ngay.nay{border-color:var(--gold)} .lh-ngay.on{background:var(--g-gold);border-color:transparent;color:var(--navy)} .lh-ngay.on span{color:var(--navy);font-weight:700} .lh-goi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-radius:10px;border:1px solid var(--ln);background:var(--bg);margin-bottom:16px;font-size:14px} .lh-goi-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:700;flex:none;background:#fff;color:var(--navy)} .lh-goi-tx{flex:1;min-width:200px} .lh-goi-tx b{display:block;font-weight:700} .lh-goi-tx small{display:block;color:var(--tx2);font-size:12.5px;margin-top:1px} .lh-goi.ok{background:#F1FAF3;border-color:#BFE6CB}.lh-goi.ok .lh-goi-ic{background:#DDF3E3;color:#15803d} .lh-goi.over{background:#FFF5F5;border-color:#F3C4C4}.lh-goi.over .lh-goi-ic{background:#FBE1E1;color:#b91c1c} .lh-goi.hold{background:#FFF9E8;border-color:#F3DFA3}.lh-goi.hold .lh-goi-ic{background:#FBEFC7;color:#a16207} .lh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .lhc{background:#fff;border:1px solid var(--ln);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(15,58,92,.04)} .lhc h3{margin:0;font-size:15px;line-height:1.35;text-wrap:pretty} .lhc-gv{display:flex;align-items:center;gap:11px} .lhc-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--g-btn);color:#fff;display:inline-grid;place-items:center;font-size:14px;font-weight:700;font-style:normal} .lhc-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .lhc-tx b{font-size:13.5px;font-weight:600} .lhc-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);flex-wrap:wrap} .lhc-st{margin-left:auto;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .lhc-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .lhc-st.dang{color:#15803d}.lhc-st.sap{color:#e08a00}.lhc-st.qua{color:var(--tx2)}.lhc-st.huy{color:#b91c1c} .lhc-nut{width:100%;padding:10px 14px;font-size:14px} .lhc-cd{display:flex;align-items:center;gap:8px;font-size:13px;padding-top:8px;border-top:1px solid var(--ln);color:var(--tx2)} .lhc-cdn{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);font-size:13px} .lhc-cdn b{font-weight:700} .lhc-dang{background:linear-gradient(180deg,#F3FBF5 0%,#E6F6EA 100%);border-color:#9AD6AC;box-shadow:0 10px 26px -14px rgba(21,128,61,.4)} .lhc-dang h3{color:#14532d} .lhc-qua{background:#F6F8FA;opacity:.62;filter:saturate(.35)} .lhc-huy{background:#FFF5F5;border-color:#F3C4C4;opacity:.85} .lhc-huy h3{color:#991b1b;text-decoration:line-through;text-decoration-thickness:1px} .lh-trong{text-align:center;padding:40px 16px 30px;color:var(--tx2);display:flex;flex-direction:column;align-items:center;gap:12px} .lh-trong-ic{width:84px;height:84px;border-radius:50%;background:#fff;border:1px solid var(--ln);display:grid;place-items:center;font-size:36px} .lh-trong p{max-width:48ch;font-size:14.5px;margin:0} .lh-trong-nut{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .lh-khong{padding:24px 0} .kg-hv-td .kh-phu{white-space:normal} .kg-canh{color:#b45309} @media(max-width:1000px){.lh-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.lh-grid{grid-template-columns:1fr}.lh-tuan{gap:4px}.lh-ngay{height:56px;flex-basis:38px}.lh-nav{width:22px;font-size:20px}.lh-goi{padding:10px 12px;gap:10px}.lh-goi-tx{min-width:200px}.lh-goi .btn{margin-left:42px}} /* ── Điểm danh ── */ .dd-dau{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} .dd-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px} .dd-tong{font-size:14px;color:var(--tx2)}.dd-tong b{font-size:20px;color:var(--navy)} .dd-chon{display:inline-flex;border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#fff} .dd-chon label{position:relative;cursor:pointer;margin:0} .dd-chon input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .dd-chon span{display:block;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--tx2);border-right:1px solid var(--ln)} .dd-chon label:last-child span{border-right:none} .dd-chon input:checked+span{color:#fff} .dd-chon .dd-co_mat input:checked+span{background:#2E8B57} .dd-chon .dd-vang input:checked+span{background:#B23B3B} .dd-chon .dd-bao_nghi input:checked+span{background:#B58A1E} .dd-chon input:focus-visible+span{outline:2px solid var(--deep);outline-offset:-2px} .ddtbl tr.dd-co_mat td:first-child{box-shadow:inset 3px 0 0 #2E8B57} .ddtbl tr.dd-vang td:first-child{box-shadow:inset 3px 0 0 #B23B3B} .ddtbl tr.dd-bao_nghi td:first-child{box-shadow:inset 3px 0 0 #B58A1E} .bh-dd{color:#1E5E3A} /* ── form lớp: chọn loại lớp rồi tích gói ── Bộ chọn loại: segmented control (nền xám, ô đang chọn nổi trắng), kèm số gói mỗi loại. Danh sách gói: lưới thẻ 4 cột, ô đang tích đổi viền + nền màu chủ đạo. */ .loai-chon{display:inline-flex;align-self:flex-start;background:var(--kbg);border-radius:9px;padding:3px;gap:3px;margin:0} .loai-o{position:relative;flex:none;display:block;padding:0;margin:0;border-radius:7px;cursor:pointer;color:var(--tx2)} .loai-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .loai-o > span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap} .loai-o > span em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(15,58,92,.10);color:var(--tx2);display:inline-grid;place-items:center;line-height:1} .loai-o:hover{color:var(--navy)} .loai-o.on{color:var(--navy)} .loai-o.on > span{background:#fff;box-shadow:0 1px 3px rgba(15,58,92,.13)} .loai-o.on > span em{background:var(--deep);color:#fff} .loai-o input:focus-visible+span{outline:2px solid var(--deep);outline-offset:-2px} div.goi-nhom{display:flex;flex-direction:column;gap:14px} div.goi-nhom[hidden]{display:none} .goi-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} @media(max-width:1180px){.goi-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.goi-luoi{grid-template-columns:minmax(0,1fr)}} .goi-o{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0; padding:11px 13px;border:1px solid var(--ln);border-radius:8px;background:#fff;cursor:pointer; transition:border-color .12s,background-color .12s,box-shadow .12s} .goi-o input[type=checkbox]{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--deep);cursor:pointer} .goi-o-tx{display:flex;flex-direction:column;gap:3px;min-width:0} .goi-o-tx b{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35;overflow-wrap:anywhere} .goi-o-tx small{font-size:12px;font-weight:400;color:var(--tx2);line-height:1.35} .goi-o:hover{border-color:var(--pale);background:var(--bg)} .goi-o.on{border-color:var(--deep);background:var(--kbg);box-shadow:inset 0 0 0 1px var(--deep)} .goi-o.on .goi-o-tx b{color:var(--deep)} .goi-o:has(input:focus-visible){outline:2px solid var(--deep);outline-offset:2px} .goi-trong{margin:0;max-width:none;padding:14px 16px;border:1px dashed var(--ln);border-radius:8px;background:var(--bg);font-size:13px;color:var(--tx2);line-height:1.5} /* Gán riêng học viên (lớp PT): hàng riêng dưới lưới, bề ngang vừa phải */ .gan-hv{padding-top:14px;border-top:1px dashed var(--ln)} .gan-hv label{max-width:520px;gap:5px} /* Không xoá được lớp: hộp lý do bên trái hàng nút, không tràn */ .abar .xoa-khong{flex:1 1 200px;max-width:max-content;min-width:0;font-size:12.5px;line-height:1.5;color:var(--tx2); padding:8px 12px;border:1px solid var(--ln);border-radius:6px;background:var(--bg)} .abar .xoa-khong b{color:var(--navy);font-weight:600;white-space:nowrap} /* ── Khoá combo ── Nhãn tím nhạt để phân biệt với khoá video; danh sách khoá bên trong là hàng có số thứ tự, ảnh bìa nhỏ, tên + số buổi, giá lẻ (trang bán) hoặc nút vào học (trang học). */ .badge.combo{background:#F2ECFB;color:#5A3E96} .clv .clv-combo{font-weight:700;color:#5A3E96} .nl-combo{font-style:normal;display:inline-block;vertical-align:middle;background:#F2ECFB;color:#5A3E96;border-color:#DCCFF2} .bb-combo{margin-top:8px;font-size:13px;color:var(--tx2);line-height:1.5} .bb-combo s{color:var(--tx2)}.bb-combo b{color:#1E5E3A} .combo-ds{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#fff} .combo-o{display:grid;grid-template-columns:26px 72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px; border-bottom:1px solid var(--ln);color:inherit;text-decoration:none;transition:background-color .12s} .combo-o:last-child{border-bottom:none} .combo-o:hover{background:var(--bg)} .combo-o.tiep{background:#FFFBEE;box-shadow:inset 3px 0 0 var(--hot)} .combo-n{width:26px;height:26px;border-radius:50%;background:var(--bg);color:var(--tx2);display:grid;place-items:center;font-size:11.5px;font-family:"IBM Plex Mono",monospace} .combo-o img,.combo-anh{width:72px;height:44px;border-radius:5px;object-fit:cover;background:var(--kbg);display:grid;place-items:center;color:var(--pale);font-size:18px} .combo-tx{display:flex;flex-direction:column;gap:3px;min-width:0} .combo-tx b{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.3} .combo-tx small{font-size:12px;color:var(--tx2);line-height:1.4} .combo-tx small em{font-style:normal;color:#1E5E3A;font-weight:600} .combo-tx .pbar{margin-top:4px;max-width:220px} .combo-gia{font-size:13px;font-weight:600;color:var(--deep);white-space:nowrap} @media(max-width:560px){.combo-o{grid-template-columns:22px 56px minmax(0,1fr);gap:10px;padding:11px 12px} .combo-o img,.combo-anh{width:56px;height:36px}.combo-gia{grid-column:3;justify-self:start;font-size:12.5px}} /* ── Giáo viên ── ảnh tròn nhỏ + tên, dùng ở bảng quản trị, thẻ khoá, trang bán */ .gv-o{display:flex;align-items:center;gap:10px} .gv-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--kbg);color:var(--deep);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center} .cgv{display:flex;align-items:center;gap:7px;margin:-2px 0 8px;font-size:12.5px;color:var(--tx2)} .cgv .gv-av{width:22px;height:22px;font-size:9px} .gv-dong{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx2)} .gv-dong a{color:var(--navy);font-weight:600;text-decoration:none}.gv-dong a:hover{text-decoration:underline} .gv-dong .gv-av{width:28px;height:28px;font-size:10px} .gv-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px} .gv-the{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:inherit;text-decoration:none} .gv-the:hover{border-color:var(--pale);background:var(--bg)} .gv-the .gv-av{width:52px;height:52px;font-size:15px} .gv-the b{display:block;font-size:14.5px;color:var(--navy)}.gv-the small{font-size:12px;color:var(--tx2);line-height:1.4} /* ── Khung lọc dùng chung (bl) ── ô tóm tắt trên cùng luôn hiện, hàng tìm + sắp xếp, lọc chi tiết gập/mở */ .bl{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:6px} .bl>*{width:100%;max-width:none;margin-left:0;margin-right:0} .bl-o{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .bl-chip{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:8px 12px;border:1px solid var(--ln);border-radius:9px;background:#fff;color:var(--tx2);text-decoration:none;line-height:1.2;transition:border-color .12s,background-color .12s} .bl-chip b{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;color:var(--navy)} .bl-chip span{font-size:11.5px;margin-top:3px;white-space:nowrap} .bl-chip:hover{border-color:var(--pale);background:var(--bg);text-decoration:none} .bl-chip.on{border-color:var(--deep);background:var(--kbg);box-shadow:inset 0 0 0 1px var(--deep)} .bl-chip.on b,.bl-chip.on span{color:var(--deep)} .bl-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center} form.bl-f .bl-q{flex:1 1 240px;width:auto;min-width:0;height:36px;padding:0 12px;border:1px solid var(--ln);border-radius:7px;font:inherit;font-size:14px;margin:0} form.bl-f .bl-sx{width:auto;height:36px;padding:0 28px 0 10px;border:1px solid var(--ln);border-radius:7px;font:inherit;font-size:13px;background:#fff;margin:0} .bl-nut{margin-left:auto;display:flex;gap:8px} .bl-mo[aria-expanded=true]{background:var(--kbg);border-color:var(--deep);color:var(--deep)} .bl-ct{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-items:end;padding:12px;border:1px dashed var(--ln);border-radius:8px;background:var(--bg)} .bl-ct-o{display:flex;flex-direction:column;gap:4px;margin:0} .bl-ct-o span{font-size:11.5px;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em} .bl-ct-o select,.bl-ct-o input{height:34px;padding:0 9px;border:1px solid var(--ln);border-radius:6px;font:inherit;font-size:13px;background:#fff} .bl-tt{font-size:12.5px;color:var(--tx2)} @media(max-width:640px){.bl-nut{margin-left:0;flex-basis:100%}.bl-chip{min-width:80px;padding:7px 10px}.bl-chip b{font-size:15px}} /* ── Hồ sơ học viên 360: dải việc cần làm, tab, khối tổng quan, sổ chăm sóc ── */ .hv-viec{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px} .hv-viec-o{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px;background:var(--bg);border:1px solid var(--ln)} .hv-viec-cham{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pale)} .hv-viec-o.do{background:#FDECEA;border-color:#F5C6C0}.hv-viec-o.do .hv-viec-cham{background:#C0392B} .hv-viec-o.cam{background:#FFF3D6;border-color:#EBD9A6}.hv-viec-o.cam .hv-viec-cham{background:#D8830F} .hv-viec-o.vang{background:#FFFBEE;border-color:#EFE3B0}.hv-viec-o.vang .hv-viec-cham{background:#B58A1E} .hv-viec-o.xanh{background:#E8F1FB;border-color:#C4DCF2}.hv-viec-o.xanh .hv-viec-cham{background:#1F5C93} .hv-viec-o.hong{background:#FCE8F1;border-color:#F3C4D8}.hv-viec-o.hong .hv-viec-cham{background:#C2418A} .hv-viec-o.ok{background:#E8F6ED;border-color:#BFE3CE}.hv-viec-o.ok .hv-viec-cham{background:#1E5E3A} .hv-viec-tx{flex:1;min-width:0} .hv-viec-goi{flex:none;font:inherit;font-size:12px;padding:4px 10px;border:1px solid var(--pale);border-radius:6px;background:#fff;color:var(--deep);cursor:pointer} .hv-viec-goi:hover{background:var(--kbg)} .hv-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--ln);margin-bottom:4px} .hv-tabs a{flex:none;padding:9px 11px;margin-bottom:-2px;font-size:13.5px;font-weight:600;color:var(--tx2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap} .hv-tabs a:hover{color:var(--navy)} .hv-tabs a.on{color:var(--deep);border-bottom-color:var(--deep)} .hv-tabs .hv-so{margin-left:4px} .hv-pane{display:flex;flex-direction:column;gap:18px} .hv-tq{display:flex;flex-direction:column;gap:8px} .hv-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px} .hv-ul li{padding:8px 12px;border:1px solid var(--ln);border-radius:7px;background:#fff;line-height:1.45} .hv-ul li.qua-hen{border-color:#F5C6C0;background:#FFF7F6} .hv-ul .lienket{margin-left:8px} .cham-f{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--ln);border-radius:10px;background:var(--bg)} .cham-f textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--ln);border-radius:7px;resize:vertical;background:#fff} .cham-hang{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:12px;align-items:end} .cham-hang label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tx2);margin:0} .cham-hang select,.cham-hang input{height:36px;padding:0 9px;border:1px solid var(--ln);border-radius:6px;font:inherit;font-size:13.5px;background:#fff} @media(max-width:760px){.cham-hang{grid-template-columns:1fr}} .dn-goi{margin-bottom:16px;padding:12px 14px;border:1px solid #EBD9A6;border-radius:9px;background:#FFF8E6;font-size:14px;line-height:1.5} .dn-goi b{color:var(--navy)}.dn-goi p{margin:6px 0 0}.dn-goi .hint{margin-top:8px} .dn-goi-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* iPhone không khoá xoay được bằng manifest → điện thoại cầm ngang thì phủ lời nhắc xoay dọc, trừ màn xem video (body.cho-xoay) và lúc đang toàn màn hình giả. */ .xoay-doc{display:none;position:fixed;inset:0;z-index:99990;background:var(--g-deep);color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px} .xoay-doc .xoay-ic{font-size:40px;transform:rotate(90deg);margin-bottom:6px} .xoay-doc b{font-size:18px}.xoay-doc span{font-size:13.5px;opacity:.85;max-width:34ch} @media(orientation:landscape) and (max-height:500px) and (pointer:coarse){body:not(.cho-xoay):not(.fs-gia) .xoay-doc{display:flex}} /* ── Kéo từ đỉnh xuống để tải lại (chỉ máy cảm ứng) ── */ .ptr{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;z-index:1150;pointer-events:none;transition:height .2s} .ptr i{width:28px;height:28px;border-radius:50%;border:3px solid var(--pale);border-top-color:var(--deep);background:#fff;margin-bottom:8px;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(15,58,92,.2)} .ptr.keo i{opacity:1} .ptr.chay i{animation:ptrxoay .7s linear infinite} @keyframes ptrxoay{to{transform:rotate(360deg)}} /* ── App: lời chào theo tên ở góc trái màn gốc khi đã đăng nhập ── */ .chao{display:none;align-items:center;gap:9px;min-width:0;color:var(--navy);text-decoration:none} .chao-av{width:34px;height:34px;border-radius:50%;background:var(--g-btn);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none} .chao-tx{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2)} .chao-tx b{color:var(--navy);font-weight:700} @media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.chao{display:flex}} /* ── Chân trang neo đáy khi nội dung ngắn ── */ body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} body > main{flex:1 0 auto;width:100%} /* ── Safari 14 (2020) chưa có aspect-ratio / inset: khung video giữ tỷ lệ 16:9 bằng padding ── */ @supports not (aspect-ratio:16/9){ .player{height:0;padding-bottom:56.25%} .player.fs-gia,.player:fullscreen{height:var(--appvh,100vh);padding-bottom:0} .ccard .cmedia img,.th img{height:auto} } @supports not (inset:0){ .pl-khung,.shield,.poster,.endcard,.xoay-doc,.hxn-nen,.lh-pick input,.dd-chon input,.loai-o input{top:0;left:0;right:0;bottom:0} } /* ── Điện thoại / máy tính bảng: chạm và đọc ── */ @media(pointer:coarse){ /* iOS Safari tự phóng to trang khi chạm vào ô chữ < 16px */ input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px} /* trình phát: nút đủ to để chạm, thanh tua dày hơn, giữ chọn tốc độ */ .ctrl button{min-width:40px;height:40px;font-size:16px;justify-content:center} .seek{height:10px} .ctrl .rate{display:inline-block} /* trang thanh toán: nút chép, lưu QR đủ cao */ .kv .v .chep{font-size:13px;padding:7px 12px;min-height:36px} #luu-qr{min-height:44px;font-size:14.5px} /* lịch học: ô ngày đủ rộng, dải cuộn ngang; mũi tên tuần to hơn */ .lh-ngay{flex:0 0 46px;max-width:none} .lh-nav{width:34px;height:34px;font-size:22px} .lh-tuan{gap:6px} /* dl thông tin liên hệ: email dài xuống dòng */ .dl .dr .dv,.dl .dr a{overflow-wrap:anywhere;min-width:0} /* mờ hover không "dính" sau khi chạm */ a:hover,.btn:hover{text-decoration:none} } /* Điện thoại cầm ngang ở màn xem video: bỏ thanh trên/thanh tab, video chiếm trọn */ @media (orientation:landscape) and (max-height:500px) and (pointer:coarse){ body.cho-xoay nav.top,body.cho-xoay .tabbar,body.cho-xoay .ptr{display:none} body.cho-xoay{padding:0} body.cho-xoay main{padding:0} body.cho-xoay .player{border-radius:0;max-height:100vh;aspect-ratio:auto;height:100vh} body.cho-xoay .split > .stack > div:first-child{margin:0} } @media(prefers-reduced-motion:reduce){*{transition:none!important}}