/* ============================================================
   training.css — Dao tao ky thuat (js/training.js): menu cap 2 trong "Ho tro",
   trang tong /dao-tao-ky-thuat, tai lieu /dao-tao, lam bai /lam-bai-test.
   Nen toi giong cac trang con khac (.page-view trong style.css): khung #111,
   vien trang mo, cam thuong hieu lam diem nhan.
   ============================================================ */

/* ---------- Menu cap 2: Ho tro > Dao tao ky thuat > (Dao tao | Lam bai test) ---------- */
.submenu li.has-sub-2{position:relative;}
.submenu li.has-sub-2 > a{display:flex; align-items:center; justify-content:space-between; gap:18px;}
.submenu .chev-r{width:9px; height:9px; stroke:currentColor; stroke-width:2; fill:none; flex:none; opacity:.6;}
.submenu-2{position:absolute; top:-9px; left:calc(100% + 6px); min-width:190px; background:#fff; border:1.5px solid rgba(0,0,0,.35); border-radius:12px;
  box-shadow:0 22px 46px -14px rgba(0,0,0,.34), 0 6px 14px -6px rgba(0,0,0,.14); list-style:none; padding:8px; opacity:0; visibility:hidden;
  transform:translateX(-6px); transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:61;}
/* Cau noi vo hinh giua 2 menu: re chuot qua khe 6px khong bi dong menu con. */
.submenu-2::before{content:""; position:absolute; top:0; bottom:0; left:-10px; width:10px;}
.submenu li.has-sub-2:hover > .submenu-2, .submenu li.has-sub-2:focus-within > .submenu-2{opacity:1; visibility:visible; transform:none;}
.submenu li.has-sub-2:hover > a{background:#FBE2E2; color:#D62828; border-left-color:#D62828;}
.submenu-2 li > a{display:block; padding:11px 16px; border-radius:8px; color:var(--navy-deep); white-space:nowrap; border-left:3px solid transparent; font-size:14px; font-weight:600; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.submenu-2 li > a:hover{background:#FBE2E2; color:#D62828; border-left-color:#D62828;}
@media (max-width:980px){
  .submenu li.has-sub-2 > a .chev-r{display:none;}
  .submenu-2{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid rgba(232,100,28,.45);
    border-radius:0; padding:0; margin:0 0 4px 18px; min-width:0; background:transparent;}
  .submenu-2::before{display:none;}
  .submenu-2 li > a{padding:9px 14px; font-size:13.5px;}
}

/* ---------- Chung ---------- */
.tr-view, .tr-modal-backdrop{--tr-card:#111; --tr-card-2:#161616; --tr-line:rgba(255,255,255,.12); --tr-line-2:rgba(255,255,255,.2); --tr-muted:rgba(255,255,255,.62); --tr-ok:#3DD68C; --tr-bad:#FF6B6B; --tr-warn:#F5B94A;}
.tr-view .wrap.tr-hub, .tr-view .wrap.tr-materials, .tr-view .wrap.tr-test{padding-top:44px;}
.tr-panel{background:var(--tr-card); border:1px solid var(--tr-line); border-radius:var(--radius-lg);}
.tr-sec-title{font-size:22px; margin:0 0 18px; color:#fff; letter-spacing:-.01em;}
.tr-muted{color:var(--tr-muted); font-size:14px;}
.tr-tag{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  color:#FFB27A; background:rgba(232,100,28,.14); border:1px solid rgba(232,100,28,.3); margin-bottom:12px;}
.tr-note{padding:12px 14px; border-radius:10px; background:rgba(91,155,255,.1); border:1px solid rgba(91,155,255,.25); color:#CFE0FF; font-size:14px; line-height:1.6;}
.tr-note.warn{background:rgba(245,185,74,.1); border-color:rgba(245,185,74,.3); color:#FBD98C;}
.tr-btn-ghost{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; border:1px solid var(--tr-line-2); background:transparent; color:#fff;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s; text-decoration:none;}
.tr-btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4);}
.tr-btn-link{background:none; border:0; padding:8px 4px; color:var(--tr-muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer;}
.tr-btn-link:hover{color:#fff; text-decoration:underline;}
.tr-btn-link.danger:hover{color:var(--tr-bad);}
.tr-view .cta-btn{border:0; cursor:pointer; font-family:inherit;}
.tr-view .cta-btn svg, .tr-btn-ghost svg{width:17px; height:17px; flex:none;}
.tr-view .cta-btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;}
.tr-btn-block{width:100%; justify-content:center;}
.tr-row-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px;}
.tr-row-actions.center{justify-content:center;}
.tr-row-actions.end{justify-content:flex-end;}
.tr-empty{padding:46px 24px; text-align:center; color:var(--tr-muted); border:1px dashed var(--tr-line-2); border-radius:var(--radius-lg); background:rgba(255,255,255,.02);}
.tr-empty p{max-width:520px; margin:0 auto 16px; line-height:1.65;}
.tr-empty-ico{display:inline-flex; width:56px; height:56px; border-radius:16px; align-items:center; justify-content:center; background:rgba(232,100,28,.12); color:var(--accent); margin-bottom:14px;}
.tr-empty-ico svg{width:28px; height:28px;}
.tr-empty-big h2{color:#fff; font-size:22px; margin-bottom:10px;}
.tr-empty-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.tr-loading{padding:60px 0; text-align:center; color:var(--tr-muted);}
.tr-skel{height:160px; border-radius:var(--radius-lg); background:linear-gradient(100deg, #111 30%, #1b1b1b 50%, #111 70%); background-size:300% 100%; animation:trSkel 1.4s ease infinite; border:1px solid var(--tr-line);}
.tr-skel-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px;}
@keyframes trSkel{from{background-position:100% 0;} to{background-position:0 0;}}
.tr-big-ico{display:inline-flex; width:68px; height:68px; border-radius:50%; align-items:center; justify-content:center; margin-bottom:16px;}
.tr-big-ico svg{width:32px; height:32px;}
.tr-big-ico.ok{background:rgba(61,214,140,.14); color:var(--tr-ok); box-shadow:0 0 0 8px rgba(61,214,140,.06);}
.tr-big-ico.warn{background:rgba(245,185,74,.14); color:var(--tr-warn); box-shadow:0 0 0 8px rgba(245,185,74,.06);}
.tr-center-card{max-width:620px; margin:0 auto; padding:40px 34px; text-align:center;}
.tr-center-card h2{color:#fff; font-size:24px; margin-bottom:10px;}
.tr-center-card p{line-height:1.65; margin-bottom:10px;}

/* ---------- Trang tong ---------- */
.tr-hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.tr-hub-card{position:relative; display:flex; flex-direction:column; padding:34px 32px 30px; border-radius:var(--radius-xl); background:linear-gradient(160deg, #161616, #0B0B0B);
  border:1px solid var(--tr-line); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; color:#fff;}
.tr-hub-card::after{content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(232,100,28,.22), transparent 70%); pointer-events:none; transition:opacity .2s; opacity:.6;}
.tr-hub-card:hover{border-color:rgba(232,100,28,.6); transform:translateY(-3px); box-shadow:0 26px 50px -28px rgba(232,100,28,.55);}
.tr-hub-card:hover::after{opacity:1;}
.tr-hub-num{position:absolute; top:26px; right:30px; font-size:44px; font-weight:900; color:rgba(255,255,255,.06); letter-spacing:-.02em;}
.tr-hub-ico{display:inline-flex; width:52px; height:52px; border-radius:14px; align-items:center; justify-content:center; background:var(--grad-accent); color:#fff; margin-bottom:22px; box-shadow:0 12px 24px -12px rgba(232,100,28,.8);}
.tr-hub-ico svg{width:26px; height:26px;}
.tr-hub-card h2{font-size:26px; margin-bottom:10px; color:#fff;}
.tr-hub-card > p{color:var(--tr-muted); font-size:15px; line-height:1.65; margin-bottom:18px; max-width:46ch;}
.tr-hub-feats{list-style:none; display:grid; gap:9px; margin-bottom:24px;}
.tr-hub-feats li{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.tr-hub-feats svg{width:16px; height:16px; color:var(--accent); flex:none;}
.tr-hub-meta{font-size:12.5px; font-weight:600; color:var(--tr-muted); margin-top:auto; margin-bottom:16px; min-height:18px;}
.tr-hub-cta{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:15px; color:#FF9A4D;}
.tr-hub-cta svg{width:18px; height:18px; transition:transform .2s;}
.tr-hub-card:hover .tr-hub-cta svg{transform:translateX(4px);}
.tr-steps{margin-top:64px;}
.tr-steps-list{list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; counter-reset:none;}
.tr-steps-list li{position:relative; padding:24px 22px; border-radius:var(--radius-lg); background:var(--tr-card); border:1px solid var(--tr-line);}
.tr-steps-list li:not(:last-child)::after{content:""; position:absolute; top:42px; right:-17px; width:18px; height:2px; background:linear-gradient(90deg, rgba(232,100,28,.7), rgba(232,100,28,0)); }
.tr-step-no{display:inline-flex; width:36px; height:36px; border-radius:50%; align-items:center; justify-content:center; font-weight:800; color:#fff; background:rgba(232,100,28,.18); border:1px solid rgba(232,100,28,.5); margin-bottom:14px;}
.tr-steps-list h3{font-size:16px; color:#fff; margin-bottom:8px;}
.tr-steps-list p{font-size:13.5px; line-height:1.6; color:var(--tr-muted);}
.tr-hub-bottom{display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:22px; margin-top:64px; align-items:start;}
.tr-faq-item{border-bottom:1px solid var(--tr-line);}
.tr-faq-item summary{cursor:pointer; list-style:none; padding:16px 36px 16px 0; font-weight:700; font-size:15px; position:relative; color:#fff;}
.tr-faq-item summary::-webkit-details-marker{display:none;}
.tr-faq-item summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--accent); transition:transform .2s;}
.tr-faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.tr-faq-item p{padding:0 0 16px; color:var(--tr-muted); line-height:1.7; font-size:14.5px;}
.tr-contact{padding:28px; border-radius:var(--radius-lg); background:linear-gradient(150deg, rgba(232,100,28,.16), rgba(17,17,17,.9) 60%); border:1px solid rgba(232,100,28,.3);}
.tr-contact .tr-hub-ico{width:44px; height:44px; margin-bottom:16px;}
.tr-contact .tr-hub-ico svg{width:22px; height:22px;}
.tr-contact h3{font-size:18px; color:#fff; margin-bottom:8px;}
.tr-contact p{color:var(--tr-muted); font-size:14px; line-height:1.6; margin-bottom:18px;}

/* ---------- Tai lieu ---------- */
.tr-mat-toolbar{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-bottom:30px;}
.tr-chips{display:flex; flex-wrap:wrap; gap:8px;}
.tr-chip{border:1px solid var(--tr-line-2); background:#111; color:#fff; border-radius:999px; padding:8px 16px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .15s;}
.tr-chip:hover{border-color:var(--accent);}
.tr-chip.active{background:#fff; color:#000; border-color:#fff;}
.tr-mat-right{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.tr-seg{display:inline-flex; padding:3px; border-radius:999px; background:#111; border:1px solid var(--tr-line-2);}
.tr-seg button{border:0; background:none; color:var(--tr-muted); padding:7px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;}
.tr-seg button.active{background:var(--accent); color:#fff;}
.tr-search{display:flex; align-items:center; gap:8px; padding:0 14px; height:40px; border-radius:999px; background:#161616; border:1px solid var(--tr-line-2); min-width:240px;}
.tr-search svg{width:16px; height:16px; color:var(--tr-muted); flex:none;}
.tr-search input{border:0; outline:0; background:none; color:#fff; font:inherit; font-size:14px; width:100%;}
.tr-search:focus-within{border-color:var(--accent);}
.tr-mat-group + .tr-mat-group{margin-top:44px;}
.tr-mat-group-title{display:flex; align-items:center; gap:10px; font-size:20px; color:#fff; margin-bottom:18px;}
.tr-mat-group-title small{font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--tr-muted);}
.tr-mat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px;}
.tr-mat-card{display:flex; flex-direction:column; border-radius:var(--radius-lg); background:var(--tr-card); border:1px solid var(--tr-line); overflow:hidden; transition:border-color .2s, box-shadow .2s, transform .2s;}
.tr-mat-card:hover{border-color:rgba(232,100,28,.55); box-shadow:0 18px 40px -22px rgba(232,100,28,.45); transform:translateY(-2px);}
.tr-mat-thumb{position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; background:#000; cursor:pointer; overflow:hidden;}
.tr-mat-thumb img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform .35s ease, opacity .2s;}
.tr-mat-card:hover .tr-mat-thumb img{transform:scale(1.04); opacity:1;}
.tr-mat-play{position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:rgba(232,100,28,.92); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -6px rgba(0,0,0,.7); transition:transform .2s;}
.tr-mat-play svg{width:24px; height:24px; margin-left:3px;}
.tr-mat-card:hover .tr-mat-play{transform:scale(1.08);}
.tr-mat-dur{position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.8); color:#fff; font-size:12px; font-weight:700;}
.tr-mat-docthumb{display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, rgba(232,100,28,.22), transparent 60%), #151515;}
.tr-doc-ico{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff;}
.tr-doc-ico svg{width:54px; height:54px; stroke-width:1.4;}
.tr-doc-ico b{font-size:11px; letter-spacing:.12em; padding:2px 8px; border-radius:4px; background:var(--accent);}
.tr-mat-body{display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; flex:1;}
.tr-mat-kind{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tr-muted);}
.tr-mat-kind svg{width:14px; height:14px;}
.tr-mat-body h3{font-size:16px; line-height:1.4; color:#fff;}
.tr-mat-desc{font-size:13.5px; line-height:1.6; color:var(--tr-muted); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.tr-mat-actions{display:flex; gap:16px; margin-top:auto;}
.tr-mat-action{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding:0; border:0; background:none; color:#FF9A4D; font:inherit; font-size:14px; font-weight:700; cursor:pointer; align-self:flex-start;}
.tr-mat-action svg{width:16px; height:16px; transition:transform .2s;}
.tr-mat-action:hover svg{transform:translateX(3px);}
.tr-mat-action.subtle{color:var(--tr-muted);}
.tr-mat-action.subtle:hover{color:#fff;}

/* ---------- Lam bai: chon bai + o nhap ma ---------- */
.tr-test-grid{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:26px; align-items:start;}
.tr-test-aside{position:sticky; top:120px;}
.tr-test-list{display:grid; gap:16px;}
.tr-test-card{padding:24px 26px; border-radius:var(--radius-lg); background:var(--tr-card); border:1px solid var(--tr-line); transition:border-color .2s;}
.tr-test-card:hover{border-color:rgba(232,100,28,.5);}
.tr-test-card h3{font-size:19px; color:#fff; margin-bottom:8px;}
.tr-test-card > p{font-size:14px; line-height:1.65; color:var(--tr-muted); margin-bottom:14px;}
.tr-test-meta{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:18px; font-size:13.5px; color:rgba(255,255,255,.85);}
.tr-test-meta li{display:inline-flex; align-items:center; gap:7px;}
.tr-test-meta svg{width:16px; height:16px; color:var(--accent);}
.tr-code-box{padding:28px 26px; background:linear-gradient(165deg, #191919, #0E0E0E); border-color:rgba(232,100,28,.35); box-shadow:0 30px 60px -40px rgba(232,100,28,.6);}
.tr-code-ico{display:inline-flex; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; background:rgba(232,100,28,.15); color:var(--accent); margin-bottom:14px;}
.tr-code-ico svg{width:22px; height:22px;}
.tr-code-box h2{font-size:19px; color:#fff; margin-bottom:6px;}
.tr-code-box > p{font-size:13.5px; color:var(--tr-muted); line-height:1.6; margin-bottom:16px;}
.tr-code-form{display:grid; gap:10px;}
.tr-code-input{width:100%; height:58px; border-radius:12px; border:1.5px solid var(--tr-line-2); background:#0A0A0A; color:#fff; text-align:center;
  font-family:Consolas, 'SFMono-Regular', Menlo, monospace; font-size:24px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; transition:border-color .15s, box-shadow .15s;}
.tr-code-input::placeholder{font-size:15px; letter-spacing:.06em; font-weight:500; color:rgba(255,255,255,.3); font-family:inherit;}
.tr-code-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(232,100,28,.18);}
.tr-code-input.has-error{border-color:var(--tr-bad); animation:reqShake .42s cubic-bezier(.36,.07,.19,.97);}
.tr-code-help{margin-top:14px; font-size:12.5px; line-height:1.6; color:var(--tr-muted);}
.tr-field-err{display:block; font-style:normal; font-size:12.5px; font-weight:600; color:var(--tr-bad);}
.tr-field-err:empty{display:none;}

/* Form dang ky */
.tr-back{background:none; border:0; color:var(--tr-muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:0; margin-bottom:16px;}
.tr-back:hover{color:#fff;}
.tr-reg{padding:28px 30px;}
.tr-reg-test{padding:18px 20px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--tr-line); margin-bottom:24px;}
.tr-reg-test h3{color:#fff; font-size:17px; margin-bottom:10px;}
.tr-reg-test .tr-test-meta{margin-bottom:0;}
.tr-reg h2{font-size:22px; color:#fff; margin-bottom:4px;}
.tr-reg > .tr-muted{margin-bottom:20px;}
.tr-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:16px;}
.tr-field{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:#fff;}
.tr-field small{font-weight:500; color:var(--tr-muted);}
.tr-field input{width:100%; border:1px solid var(--tr-line-2); border-radius:var(--radius); padding:12px 13px; font:inherit; font-size:14.5px; color:#fff; background:#161616; transition:border-color .15s;}
.tr-field input::placeholder{color:rgba(255,255,255,.35);}
.tr-field input:focus{outline:none; border-color:var(--accent);}
.tr-field.has-error input{border-color:var(--tr-bad);}
.tr-field.has-error{animation:reqShake .42s cubic-bezier(.36,.07,.19,.97);}
.tr-check{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.55; cursor:pointer; color:rgba(255,255,255,.9);}
.tr-check input{width:18px; height:18px; margin-top:1px; accent-color:var(--accent); flex:none; cursor:pointer;}
.tr-form-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px;}
.tr-form-msg{font-size:13.5px; font-weight:600; color:var(--tr-bad);}

/* Da gui ma */
.tr-sent{padding:36px 34px; text-align:center;}
.tr-sent h2{font-size:24px; color:#fff; margin-bottom:10px;}
.tr-sent > p{line-height:1.65; margin-bottom:10px;}
.tr-sent .tr-note{text-align:left; margin:12px 0;}
.tr-tips{list-style:none; display:grid; gap:8px; margin:20px auto; max-width:460px; text-align:left;}
.tr-tips li{display:flex; gap:10px; font-size:14px; color:var(--tr-muted); line-height:1.5;}
.tr-tips svg{width:16px; height:16px; color:var(--tr-ok); flex:none; margin-top:2px;}
.tr-sent .tr-row-actions{justify-content:center;}

/* Truoc khi bat dau */
.tr-preview{max-width:860px; margin:0 auto; padding:34px 36px;}
.tr-preview-head h2{font-size:26px; color:#fff; margin-bottom:6px;}
.tr-tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:24px 0;}
.tr-tile{display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--tr-line);}
.tr-tile svg{width:20px; height:20px; color:var(--accent); margin-bottom:6px;}
.tr-tile span{font-size:12px; color:var(--tr-muted); font-weight:600;}
.tr-tile b{font-size:20px; color:#fff;}
.tr-preview-desc{color:var(--tr-muted); line-height:1.7; margin-bottom:18px;}
.tr-instr{padding:18px 20px; border-radius:12px; border-left:3px solid var(--accent); background:rgba(232,100,28,.08); margin-bottom:18px; text-align:left;}
.tr-instr h3, .tr-rules h3{font-size:15px; color:#fff; margin-bottom:8px;}
.tr-instr p{font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.88);}
.tr-rules{padding:18px 20px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--tr-line); margin-bottom:20px;}
.tr-rules ul{list-style:none; display:grid; gap:10px;}
.tr-rules li{display:flex; gap:10px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.85);}
.tr-rules svg{width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px;}
.tr-ready{padding:14px 16px; border-radius:12px; border:1px dashed var(--tr-line-2);}

/* ---------- Che do lam bai (an header/footer web) ---------- */
body.tr-exam-mode header.main, body.tr-exam-mode footer, body.tr-exam-mode .back-to-top,
body.tr-exam-mode .showcase-marquee, body.tr-exam-mode .cta-banner{display:none !important;}
.tr-view.is-exam .page-hero{display:none;}
.tr-view.is-exam .wrap.tr-test{max-width:1240px; padding-top:0;}
.tr-view.is-exam{padding-bottom:40px;}
.tr-exam-bar{position:sticky; top:0; z-index:40; margin:0 -28px 26px; padding:0 28px; background:rgba(8,8,8,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--tr-line);}
.tr-exam-bar-in{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px;}
.tr-exam-title{display:flex; align-items:center; gap:12px; min-width:0;}
.tr-exam-brand{font-weight:900; font-size:15px; letter-spacing:.06em; padding:5px 10px; border-radius:7px; background:var(--grad-accent); color:#fff; flex:none;}
.tr-exam-title b{color:#fff; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tr-exam-title .tr-muted{font-size:13px; white-space:nowrap;}
.tr-exam-status{display:flex; align-items:center; gap:14px; flex:none;}
.tr-save{font-size:12.5px; color:var(--tr-muted); white-space:nowrap;}
.tr-save.busy{color:#CFE0FF;}
.tr-save.err{color:var(--tr-warn);}
.tr-clock{display:flex; flex-direction:column; align-items:center; padding:6px 16px; border-radius:12px; background:#161616; border:1px solid var(--tr-line-2); min-width:118px; transition:all .2s;}
.tr-clock span{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tr-muted);}
.tr-clock b{font-family:Consolas, 'SFMono-Regular', Menlo, monospace; font-size:24px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1.15;}
.tr-clock.warn{border-color:rgba(245,185,74,.6); background:rgba(245,185,74,.1);}
.tr-clock.warn b{color:var(--tr-warn);}
.tr-clock.danger{border-color:rgba(255,107,107,.7); background:rgba(255,107,107,.12); animation:trPulse 1s ease infinite;}
.tr-clock.danger b{color:var(--tr-bad);}
@keyframes trPulse{50%{box-shadow:0 0 0 6px rgba(255,107,107,.15);}}
.tr-exam-progress{height:3px; margin:0 -28px; background:rgba(255,255,255,.06);}
.tr-exam-progress span{display:block; height:100%; width:0; background:var(--grad-accent); transition:width .3s ease;}
.tr-exam-body{display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:24px; align-items:start;}
.tr-qlist{display:grid; gap:18px;}
.tr-q{padding:24px 26px; border-radius:var(--radius-lg); background:var(--tr-card); border:1px solid var(--tr-line); scroll-margin-top:100px; transition:border-color .2s;}
.tr-q.is-flagged{border-color:rgba(245,185,74,.55);}
.tr-q-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:14px;}
.tr-q-no{font-weight:800; font-size:14px; color:#FF9A4D;}
.tr-q-type, .tr-q-pts, .tr-q-req{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--tr-muted);}
.tr-q-req{background:rgba(255,107,107,.12); color:#FFB0B0;}
.tr-flag{margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--tr-line-2); background:none; color:var(--tr-muted); border-radius:999px; padding:5px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;}
.tr-flag svg{width:14px; height:14px;}
.tr-flag:hover{color:#fff;}
.tr-flag.on{color:var(--tr-warn); border-color:rgba(245,185,74,.55); background:rgba(245,185,74,.1);}
.tr-q-text{font-size:16px; line-height:1.7; color:#fff; margin-bottom:16px; font-weight:500;}
.tr-q-hint{font-size:12.5px; color:var(--tr-muted); margin:-6px 0 12px;}
.tr-opts{display:grid; gap:10px;}
.tr-opts-tf{grid-template-columns:1fr 1fr;}
.tr-opt{position:relative; display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-radius:12px; border:1.5px solid var(--tr-line-2); background:#141414; cursor:pointer; transition:border-color .15s, background .15s;}
.tr-opt:hover{border-color:rgba(255,255,255,.4);}
.tr-opt input{position:absolute; opacity:0; pointer-events:none;}
.tr-opt-key{display:inline-flex; width:28px; height:28px; border-radius:8px; align-items:center; justify-content:center; flex:none; font-weight:800; font-size:13px; background:rgba(255,255,255,.08); color:#fff; transition:all .15s;}
.tr-opt-key svg{width:15px; height:15px;}
.tr-opt input[type=radio] + .tr-opt-key{border-radius:50%;}
.tr-opt-text{font-size:15px; line-height:1.55; padding-top:3px; color:rgba(255,255,255,.92);}
.tr-opt.checked{border-color:var(--accent); background:rgba(232,100,28,.1);}
.tr-opt.checked .tr-opt-key{background:var(--accent); color:#fff;}
.tr-opt input:focus-visible + .tr-opt-key{outline:2px solid #fff; outline-offset:2px;}
.tr-textarea{width:100%; min-height:130px; resize:vertical; border-radius:12px; border:1.5px solid var(--tr-line-2); background:#0D0D0D; color:#fff; padding:14px 16px; font:inherit; font-size:15px; line-height:1.65;}
.tr-textarea:focus{outline:none; border-color:var(--accent);}
.tr-text-foot{display:flex; justify-content:flex-end; font-size:12px; color:var(--tr-muted); margin-top:6px;}
.tr-drop{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:28px 20px; border-radius:12px; border:1.5px dashed var(--tr-line-2); background:#0D0D0D; color:#fff; cursor:pointer; font:inherit; transition:all .15s;}
.tr-drop svg{width:30px; height:30px; color:var(--accent); margin-bottom:4px;}
.tr-drop b{font-size:14.5px;}
.tr-drop span{font-size:12.5px; color:var(--tr-muted);}
.tr-drop:hover, .tr-drop.over{border-color:var(--accent); background:rgba(232,100,28,.07);}
.tr-file .tr-field-err{margin-top:8px;}
.tr-file-progress{height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:8px;}
.tr-file-progress span{display:block; height:100%; background:var(--grad-accent); transition:width .2s;}
.tr-file-chip{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1.5px solid rgba(61,214,140,.45); background:rgba(61,214,140,.07); flex-wrap:wrap;}
.tr-file-chip > svg{width:26px; height:26px; color:var(--tr-ok); flex:none;}
.tr-file-chip div{display:flex; flex-direction:column; min-width:0; flex:1;}
.tr-file-chip b{color:#fff; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tr-file-chip span{font-size:12px; color:var(--tr-muted);}
.tr-file-chip .tr-btn-ghost{padding:7px 14px; font-size:13px;}
.tr-qnav{position:sticky; top:96px;}
.tr-qnav-in{padding:18px;}
.tr-qnav-head{font-size:14px; color:#fff; margin-bottom:12px;}
.tr-qnav-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; max-height:50vh; overflow:auto; padding:2px;}
.tr-qnav-btn{height:36px; border-radius:8px; border:1px solid var(--tr-line-2); background:#161616; color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:all .12s;}
.tr-qnav-btn:hover{border-color:#fff;}
.tr-qnav-btn.ans{background:rgba(61,214,140,.18); border-color:rgba(61,214,140,.55); color:#BFF5DA;}
.tr-qnav-btn.flag{box-shadow:inset 0 -3px 0 var(--tr-warn);}
.tr-qnav-btn.current{outline:2px solid var(--accent); outline-offset:1px;}
.tr-legend{display:flex; flex-wrap:wrap; gap:6px 12px; margin:14px 0 16px; font-size:11.5px; color:var(--tr-muted);}
.tr-legend span{display:inline-flex; align-items:center; gap:5px;}
.tr-legend i{width:12px; height:12px; border-radius:3px; border:1px solid var(--tr-line-2); background:#161616;}
.tr-legend i.ans{background:rgba(61,214,140,.35); border-color:rgba(61,214,140,.6);}
.tr-legend i.flag{box-shadow:inset 0 -3px 0 var(--tr-warn);}

/* Hop thoai (xac nhan nop, dang nop) */
.tr-modal-backdrop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:trFade .18s ease;}
.tr-modal{width:min(480px, 100%); padding:28px; border-radius:var(--radius-xl); background:#141414; border:1px solid var(--tr-line-2, rgba(255,255,255,.2)); color:#fff; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); animation:trPop .22s cubic-bezier(.2,.8,.3,1);}
.tr-modal h2{font-size:21px; margin-bottom:12px; color:#fff;}
.tr-modal p{font-size:14.5px; line-height:1.6; margin-bottom:10px;}
.tr-modal .tr-muted{color:rgba(255,255,255,.62);}
.tr-modal .tr-btn-ghost{color:#fff; border-color:rgba(255,255,255,.25);}
.tr-modal .cta-btn{border:0; cursor:pointer; font-family:inherit;}
.tr-modal.tr-center{text-align:center;}
.tr-modal.tr-center h2{margin:16px 0 0;}
.tr-cf-missing{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px;}
.tr-cf-missing .tr-qnav-btn{width:40px; color:#fff; border-color:rgba(255,255,255,.25); background:#1d1d1d;}
.tr-spinner{display:inline-block; width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.12); border-top-color:var(--accent); animation:trSpin .8s linear infinite;}
@keyframes trSpin{to{transform:rotate(360deg);}}
@keyframes trFade{from{opacity:0;}}
@keyframes trPop{from{opacity:0; transform:translateY(10px) scale(.98);}}

/* Thong bao nho */
.tr-toast{position:fixed; left:50%; bottom:28px; z-index:300; display:flex; align-items:center; gap:10px; max-width:min(560px, calc(100% - 32px)); padding:13px 18px; border-radius:14px;
  background:#1B1B1B; color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 40px -16px rgba(0,0,0,.8); font-size:14px; font-weight:600;
  transform:translate(-50%, 20px); opacity:0; visibility:hidden; transition:all .25s cubic-bezier(.2,.8,.3,1);}
.tr-toast.show{transform:translate(-50%, 0); opacity:1; visibility:visible;}
.tr-toast svg{width:18px; height:18px; flex:none; color:#3DD68C;}
.tr-toast.warn{border-color:rgba(245,185,74,.6);}
.tr-toast.warn svg{color:#F5B94A;}
.tr-toast.danger{border-color:rgba(255,107,107,.7); background:#2A1414;}
.tr-toast.danger svg{color:#FF6B6B;}

/* Ket qua */
.tr-done{max-width:640px; margin:0 auto; padding:40px 36px; text-align:center;}
.tr-done h2{font-size:26px; color:#fff; margin:6px 0 6px;}
.tr-done-test{font-weight:600; color:rgba(255,255,255,.9); margin-bottom:4px;}
.tr-done .tr-note{margin:14px 0; text-align:left;}
.tr-done .tr-instr{margin-top:16px;}
.tr-ring{position:relative; width:150px; height:150px; margin:0 auto 14px;}
.tr-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.tr-ring circle{fill:none; stroke-width:10;}
.tr-ring .bg{stroke:rgba(255,255,255,.08);}
.tr-ring .fg{stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.3,1);}
.tr-ring.ok .fg{stroke:#3DD68C;}
.tr-ring.bad .fg{stroke:#FF8A5B;}
.tr-ring > div{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.tr-ring b{font-size:32px; color:#fff; line-height:1.1;}
.tr-ring span{font-size:13px; color:var(--tr-muted);}
.tr-verdict{display:inline-block; padding:6px 18px; border-radius:999px; font-weight:800; letter-spacing:.08em; font-size:13px; margin-bottom:6px;}
.tr-verdict.ok{background:rgba(61,214,140,.16); color:#3DD68C; border:1px solid rgba(61,214,140,.4);}
.tr-verdict.bad{background:rgba(255,138,91,.14); color:#FF8A5B; border:1px solid rgba(255,138,91,.4);}

/* ---------- Man hinh nho ---------- */
@media (max-width:1080px){
  .tr-steps-list{grid-template-columns:1fr 1fr;}
  .tr-steps-list li::after{display:none;}
  .tr-test-grid{grid-template-columns:1fr;}
  .tr-test-aside{position:static; order:-1;}
  .tr-exam-body{grid-template-columns:1fr;}
  .tr-qnav{position:static; order:-1;}
  .tr-qnav-grid{grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); max-height:none;}
  .tr-qnav-in .js-tr-submit{display:none;}
}
@media (max-width:760px){
  .tr-hub-grid, .tr-hub-bottom{grid-template-columns:1fr;}
  .tr-hub-card{padding:28px 22px 24px;}
  .tr-hub-card h2{font-size:22px;}
  .tr-steps-list{grid-template-columns:1fr;}
  .tr-form-grid{grid-template-columns:1fr;}
  .tr-tiles{grid-template-columns:1fr 1fr;}
  .tr-preview, .tr-reg, .tr-sent, .tr-done{padding:24px 20px;}
  .tr-search{min-width:0; flex:1 1 100%;}
  .tr-mat-right{width:100%;}
  .tr-exam-bar{margin-bottom:18px;}
  .tr-exam-bar-in{min-height:62px; gap:10px;}
  .tr-exam-title .tr-muted, .tr-save, .tr-exam-brand{display:none;}
  .tr-exam-title b{font-size:14px;}
  .tr-clock{min-width:0; padding:4px 10px;}
  .tr-clock span{display:none;}
  .tr-clock b{font-size:20px;}
  .tr-exam-status .cta-btn{padding:9px 16px;}
  .tr-q{padding:18px 16px;}
  .tr-opts-tf{grid-template-columns:1fr;}
  .tr-flag span{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .tr-hub-card, .tr-mat-card, .tr-mat-thumb img, .tr-ring .fg{transition:none;}
  .tr-clock.danger{animation:none;}
}