:root{
--bg:#f6f7fb; --card:#fff; --ink:#1d2433; --muted:#6b7280; --line:#e8eaf0;
--brand:#1d73ba; --brand2:#0cbddc; --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444;
--grad:linear-gradient(135deg,#1d73ba,#0cbddc);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{text-decoration:none;color:inherit}
.tv-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.tv-top .brand{display:flex;align-items:center;gap:10px;min-width:0}
.tv-top .brand img{width:42px;height:42px;flex:0 0 auto}
.tv-top .brand .t{line-height:1.15;min-width:0}
.tv-top .brand .t b{display:block;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-top .brand .t span{font-size:11px;color:var(--muted)}
.tv-top .back{font-weight:600;color:var(--brand);font-size:14px}
@media(max-width:600px){.tv-top .brand .t{display:none}}
.tv-wrap{max-width:920px;margin:0 auto;padding:24px 16px 60px}
.tv-hero{text-align:center;padding:24px 8px 12px}
.tv-hero .kk{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad);padding:5px 14px;border-radius:999px}
.tv-hero h1{font-size:clamp(26px,5vw,40px);font-weight:900;margin:14px 0 8px}
.tv-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tv-hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:15px}
.tv-alert{margin:16px 0;padding:13px 16px;border-radius:12px;font-weight:500;font-size:14px}
.tv-alert.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.tv-alert.warn{background:#fffaeb;color:#b54708;border:1px solid #fedf89}
.tv-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin:18px 0;box-shadow:0 6px 24px rgba(20,30,80,.05)}
.tv-card h2{font-size:18px;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.tv-card h2 small{font-weight:500;color:var(--muted);font-size:13px}
.tv-card h2 .num{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;font-size:14px;font-weight:800}
.muted{color:var(--muted)}
/* upload */
.tv-upload{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:stretch}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed #cbd0e0;border-radius:14px;padding:26px;text-align:center;cursor:pointer;transition:.2s}
.drop:hover{border-color:var(--brand);background:#eef6fc}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ic{font-size:34px}
.drop b{font-size:15px}
.drop small{color:var(--muted)}
.drop .picked{margin-top:6px;font-size:13px;font-weight:700;color:#1aa260}
.tv-hbnote{background:#eaf4fb;border:1px solid #cfe6f7;border-left:4px solid var(--brand);border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:13.5px;line-height:1.55;color:#0e3a5a}
.up-side{display:flex;flex-direction:column;gap:12px;justify-content:center}
.fld{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px;color:#374151}
.fld input,.fld select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:600;background:#fff;color:var(--ink)}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
.fld select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,115,186,.14)}
.btn-go{padding:13px 18px;border:0;border-radius:12px;background:var(--grad);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 20px rgba(29,115,186,.3);transition:.2s}
.btn-go:hover{transform:translateY(-2px)}
/* table nhập điểm */
.tv-tablewrap{overflow-x:auto;margin:0 -4px}
.tv-table{width:100%;border-collapse:collapse;min-width:0}
.tv-table th,.tv-table td{padding:6px 6px;text-align:center;border-bottom:1px solid var(--line)}
.tv-table thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.tv-table td.mon{text-align:left;font-weight:600;font-size:13.5px}
.tv-table input{width:100%;max-width:72px;padding:7px 4px;border:1.5px solid #c7cce0;border-radius:9px;font:inherit;font-weight:600;text-align:center;background:#fff;box-shadow:inset 0 1px 2px rgba(20,30,80,.05)}
/* ===== Lưới nhập điểm gọn 3 cột (THPT / V-SAT) — không kéo dài, đều trên PC & mobile ===== */
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 12px;margin:8px 0 2px}
.sc-cell{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#475569}
.sc-cell>span{line-height:1.1;text-align:center}
.sc-cell input{width:100%;max-width:130px;padding:9px 6px;border:1.5px solid #c7cce0;border-radius:10px;font:inherit;font-weight:600;text-align:center;background:#fff;box-shadow:inset 0 1px 2px rgba(20,30,80,.05)}
.sc-cell input:hover{border-color:#a9b0d4}
.sc-cell input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,115,186,.16)}
@media(max-width:560px){
.score-grid{gap:9px 8px}
.sc-cell{font-size:12px;gap:4px}
.sc-cell input{padding:8px 4px;max-width:none}
}
.tv-table input:hover{border-color:#a9b0d4}
.tv-table input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,115,186,.16)}
/* bảng điểm thi (2 cột) — full width, không cuộn ngang trên mobile */
.tv-table.t2{min-width:0}
.tv-table.t2 td,.tv-table.t2 th{padding:9px 8px}
.tv-table.t2 td.mon{width:auto}
.tv-table.t2 td:last-child,.tv-table.t2 th:last-child{width:120px;text-align:center}
.tv-table.t2 input{width:100%;max-width:130px}
@media(max-width:560px){
.tv-table.t2 input{max-width:100px}
.tv-table.t2 td.mon{font-size:14px}
}
.tv-actions{display:flex;align-items:flex-end;gap:16px;margin-top:18px;flex-wrap:wrap}
.formula{margin:14px 0 0;font-size:12.5px;color:var(--muted);background:#f8f9fc;border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
/* best */
.best{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#f4f2ff,#fff0f7);border:1px solid #ece9ff;border-radius:14px;padding:16px 18px;margin-bottom:16px}
.best .big{flex:0 0 auto;font-size:42px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;white-space:nowrap;padding:0 4px;line-height:1.12}
.best b{display:block;font-size:16px}
.best span{color:var(--muted);font-size:13.5px}
.th-res td.code{font-weight:800;color:var(--brand)}
.th-res td.hb{font-weight:800}
.th-res tr.top{background:#eef6fc}
/* gợi ý */
.goiy{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gy{display:block;border:1px solid var(--line);border-radius:14px;padding:15px;background:#fff;transition:.2s}
.gy:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,30,80,.1);border-color:#d8d4ff}
.gy.dat{border-color:#abefc6;background:#fbfffd}
.gy-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.gy-ma{font-weight:800;color:var(--brand);font-size:15px}
.gy-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.b-dat{background:#ecfdf3;color:#067647}
.b-thieu{background:#fff4ed;color:#b93815}
.b-moi{background:#eef2ff;color:#4f46e5}
.gy h3{font-size:15px;font-weight:700;margin:2px 0 2px;line-height:1.3}
.gy-khoa{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.gy-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-top:1px dashed var(--line)}
.gy-row span{color:var(--muted)}
.gy-status{margin-top:10px;font-size:12.5px;font-weight:600}
.gy.dat .gy-status{color:var(--ok)}
.gy:not(.dat) .gy-status{color:var(--warn)}
.note{margin:16px 0 0;font-size:12px;color:var(--muted);font-style:italic}
.tv-foot{text-align:center;padding:24px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);background:#fff}
@media(max-width:640px){
.tv-upload{grid-template-columns:1fr}
}
/* ===== Tabs chế độ (THPT / học bạ) ===== */
.tv-tabs{display:flex;gap:8px;background:#eceefb;border:1px solid var(--line);border-radius:14px;padding:5px;margin:0 0 4px}
.tv-tab{flex:1;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;color:var(--muted);background:transparent;padding:11px 12px;border-radius:10px;transition:.15s}
.tv-tab.on{background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(20,30,80,.08)}
/* Mobile: nút "Tư vấn ngành" LUÔN NỔI ở đáy khi cuộn bảng nhập điểm dài */
@media(max-width:640px){
.tv-go-sticky{position:sticky;bottom:14px;z-index:30;box-shadow:0 12px 30px rgba(29,115,186,.5)}
}
/* Thanh điều hướng giữa các trắc nghiệm/tư vấn — căn đều PC & mobile */
.tn-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 8px}
.tn-nav a{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-weight:700;font-size:14px;color:#fff;border-radius:12px;padding:13px 10px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:.15s}
.tn-nav a:hover{filter:brightness(1.06);transform:translateY(-2px)}
@media(max-width:560px){.tn-nav{grid-template-columns:repeat(2,1fr);gap:8px}.tn-nav a{font-size:13px;padding:11px 6px}}
/* ===== Form nhập tên + ngày sinh (bánh xe lăn) — DÙNG CHUNG Holland & Thần số học ===== */
.nds-name{width:100%;font-size:16px;padding:13px 15px;border:1.5px solid #e6e8f2;border-radius:12px;outline:none;transition:.15s;font-family:inherit}
.nds-name:focus{border-color:#0cbddc;box-shadow:0 0 0 3px rgba(139,92,255,.15)}
.nds-lbl{font-weight:600;font-size:13.5px;margin:14px 0 8px;display:block}
.wheel-row{display:flex;gap:10px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.wheel-col{display:flex;flex-direction:column;align-items:center}
.wheel-col .lbl{font-size:12px;color:#64748b;font-weight:700;margin-bottom:5px}
.wheel{position:relative;height:132px;width:88px;overflow-y:scroll;scroll-snap-type:y mandatory;border:1.5px solid #e6e8f2;border-radius:14px;background:#fff;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wheel::-webkit-scrollbar{display:none}
.wheel .witem{height:44px;line-height:44px;text-align:center;scroll-snap-align:center;font-size:18px;color:#aab0c4;transition:.12s}
.wheel .witem.on{color:#1d73ba;font-weight:800;font-size:23px}
.wheel .wpad{height:44px}
.wheel-band{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);height:44px;border:2px solid #bfe0f3;background:rgba(29,115,186,.06);border-radius:9px;pointer-events:none}
.gt-pills{display:flex;gap:8px;flex-wrap:wrap}
.gt-pills label{border:1.5px solid #e6e8f2;border-radius:20px;padding:8px 18px;cursor:pointer;font-size:14px;font-weight:600;color:#475569}
.gt-pills label:has(input:checked){border-color:#0cbddc;background:#eaf4fb;color:#0e4f86}
.gt-pills input{display:none}
/* ===== Chọn bộ/bản trắc nghiệm (MBTI 12/20/60, Holland ngắn/đầy đủ) — DÙNG CHUNG ===== */
.mb-choose{display:grid;gap:11px}
.mb-pick{display:flex;align-items:center;gap:14px;border:1.5px solid #e6e8f2;border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;transition:.15s}
.mb-pick:hover{border-color:#0cbddc;background:#f7f5ff;transform:translateY(-1px)}
.mb-pick .n{flex:none;min-width:48px;height:48px;padding:0 8px;border-radius:12px;background:linear-gradient(135deg,#0cbddc,#1d73ba);color:#fff;font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center}
.mb-pick .t{flex:1;display:flex;flex-direction:column}.mb-pick .t b{font-size:15.5px}.mb-pick .t small{color:#64748b;font-size:12.5px}
.mb-pick .ar{color:#0cbddc;font-size:20px;font-weight:800}
/* Khối "Tổ hợp cao nhất" trên mobile: thu nhỏ số, không che chữ */
@media(max-width:560px){
.best{gap:10px;padding:12px 13px}
.best .big{font-size:30px;padding:0 2px}
.best b{font-size:14px}
.best span{font-size:12px;line-height:1.5}
}
/* ===== GIÁP cho nội dung sửa từ Admin (TinyMCE chèn /):
ép đúng màu + không vỡ dòng ở badge, tiêu đề, mô tả hero của các trang công cụ ===== */
.tv-hero .kk p,.tv-hero h1 p,.tv-hero>p p,.hl-badge p,.ts-disc p{display:inline;margin:0}
.tv-hero .kk,.tv-hero .kk *{color:#fff!important}
.hl-badge,.hl-badge *{color:#fff!important}
.tv-hero h1 [style*="color"],.tv-hero>p [style*="color"],.hl-method [style*="color"],.ts-disc [style*="color"]{color:inherit!important}
/* Điều kiện riêng của ngành (điểm môn / học lực / hạnh kiểm) trong thẻ gợi ý */
.gy.thieumon{border-color:#fed7aa;background:#fffaf4}
.gy-dk{font-size:12px;margin-top:7px;padding:6px 9px;border-radius:8px;line-height:1.45}
.gy-dk.ok{background:#ecfdf3;color:#067647}
.gy-dk.bad{background:#fff4ed;color:#b93815;font-weight:600}
.gy-dk.note{background:#f4f6fb;color:#475569}