/* v7: mẫu dàn ý + tinh chỉnh đa nền tảng (điện thoại, máy tính bảng, màn hình lớn) */
.dy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.dy-card{display:block;padding:16px 18px;border-radius:18px;background:var(--card,#fff);border:1px solid var(--line,#0001);border-top:5px solid #7a5af0;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.dy-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px #0002}.dy-card.k-ke{border-top-color:#e5604a}.dy-card.k-mt{border-top-color:#2faa68}.dy-card.k-bc{border-top-color:#c93a5e}.dy-card.k-nl{border-top-color:#4b5bb0}.dy-card.k-vb{border-top-color:#e0901a}
.dy-card small{font-weight:800;opacity:.6;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.dy-card h3{margin:4px 0 6px;font:800 17px/1.3 'Baloo 2',sans-serif}.dy-card p{margin:0;font-size:13px;opacity:.75}
.dy-saved{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:#2faa6826;color:#2faa68}
.dy-parts{display:grid;gap:14px;margin:14px 0 22px}.dy-part{padding:16px 20px;border-radius:18px;background:var(--card,#fff);border:1px solid var(--line,#0001);border-left:8px solid #2c9ad8}.dy-part.p1{border-left-color:#f5a623}.dy-part.p2{border-left-color:#2faa68}
.dy-part h2{margin:0 0 6px;font:800 19px 'Baloo 2',sans-serif}.dy-part ul{margin:0;padding-left:20px;line-height:1.75}.dy-tip{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:#f5a62320;font-size:14px}
.dy-edit .ta{width:100%;font:15px/1.7 'Be Vietnam Pro',system-ui,sans-serif;resize:vertical}.dy-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---- điện thoại ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,.btn,a.mod,.tile,.rv,.dy-card,.oly-opt{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px}                       /* chống iOS tự phóng to khi chạm vào ô nhập */
.main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.tabbar{padding-bottom:env(safe-area-inset-bottom)}
img,svg{max-width:100%}
.tbl-wrap,.tw{-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .topbar{gap:8px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .page-t{font-size:26px}
  .ucard-grid{grid-template-columns:1fr 1fr}
  .btn,.icon-btn,.seg button,.oly-help button,.q-act .btn{min-height:44px}.chips button{min-height:38px}
  .gsw button{min-width:40px}
  .ex-actions .btn{flex:1}
}
@media(max-width:600px){
  .brand-mark{width:38px;height:38px}
  .gsw{gap:2px;padding:2px}.gsw button{width:38px;min-width:38px;min-height:38px;font-size:15px}
  .me-chip{display:none}
  .topbar .search{display:block;position:static;flex:none;width:42px;margin-left:auto}.search input{width:42px;height:42px;padding:0;color:transparent;caret-color:transparent;cursor:pointer;border-radius:12px;border:0;background:#ffffff26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center no-repeat}.search input::placeholder{color:transparent}
  .search input:focus{position:fixed;left:10px;right:10px;top:8px;width:auto;height:44px;padding:0 14px;color:#1f2340;caret-color:auto;background:#fff;z-index:60;box-shadow:0 8px 24px #0004}
  .search #sr{position:fixed;left:10px;right:10px;top:58px;max-height:60vh;overflow:auto;z-index:60}
  .ucard-grid{grid-template-columns:1fr}
  .hero{border-radius:22px}.hero-cta .btn{flex:1;text-align:center}
  .game{gap:10px}.game>div,.game .g-bd{padding:12px 14px}
  .qcard{padding:18px 16px 14px}.qcard blockquote{font-size:18px}
  .oly-top{flex-wrap:wrap;border-radius:18px;gap:8px 14px}.oly-q h2{font-size:18px}.oly-opt{padding:12px}
  .oly-stat{gap:16px}.oly-end{gap:14px}
  .lb li{grid-template-columns:30px 1fr auto;}.lb small{display:none}
  .dy-parts .dy-part{padding:14px}
  .strands{grid-template-columns:1fr}
  .pager{flex-direction:column;gap:8px}.pager a{text-align:center}
}
@media(max-width:380px){.gsw button{width:34px;min-width:34px}.topbar .icon-btn{width:40px;min-width:40px}.tabbar a span{font-size:10px}}
@media(hover:none){.tile:hover,.rv:hover,.dy-card:hover,.oly-opt:hover:not(:disabled){transform:none}}
/* màn hình ngang thấp (điện thoại xoay ngang) */
@media(max-height:480px) and (orientation:landscape){.tabbar{display:none}.shell{padding-bottom:16px}.hero{padding:14px}}
/* màn hình lớn */
@media(min-width:1400px){.main{max-width:1180px}.ucard-grid{grid-template-columns:repeat(3,1fr)}.tiles{gap:18px}}
@media(min-width:900px) and (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}.rv-grid{grid-template-columns:repeat(2,1fr)}}
:focus-visible{outline:3px solid #f5a623;outline-offset:2px}
@media print{.tile,.rv{break-inside:avoid}.dy-act,.q-act,.oly-help{display:none}}

/* khách / mở khoá */
.lockcard{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:14px 0;padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,#4b5bb01a,#f5a62324);border:2px dashed #8a93c9}
.lockcard h3{margin:0;font:800 18px 'Baloo 2',sans-serif}.lockcard p{margin:2px 0 0;font-size:14px;opacity:.85;max-width:560px}.lockcard>div:nth-child(2){flex:1;min-width:200px}
.lock-ic{font-size:34px;filter:drop-shadow(0 3px 5px #0003)}.lockcard.sm{padding:12px 16px;margin:8px 0}.lockcard.sm h3{font-size:15px}.lockcard.sm .lock-ic{font-size:26px}
.ex-card.locked{border-style:dashed;background:transparent;box-shadow:none}
.lockb{position:absolute;right:10px;top:10px;z-index:2;font-size:20px;background:#0006;border-radius:99px;padding:2px 8px}
.ucard{position:relative}.read-card.is-lock{opacity:.7}.read-card.is-lock::after{content:'🔒';float:right}
.login-btn{background:#f5a623!important;color:#3a2600!important;border-color:#f5a623!important;font-weight:800;white-space:nowrap}
.auth-card{position:relative}.auth-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:#8a93c922;color:inherit;font-size:16px;cursor:pointer}
@media(max-width:600px){.login-btn{padding:0 10px;min-height:40px;font-size:13px}.lockcard{padding:14px}.lockcard .btn{width:100%}}

/* bảng tên trường */
.school{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:center;margin:18px 0;padding:18px;border-radius:26px;background:var(--card,#fff);border:1px solid var(--line,#0001);box-shadow:0 8px 24px #0001;overflow:hidden}
.school-photo{border-radius:18px;overflow:hidden;min-height:150px;background:linear-gradient(135deg,#3b4a9c,#6f7fe0);display:grid}
.school-photo img{width:100%;height:100%;object-fit:cover;display:block}
.school-photo.nophoto{background:linear-gradient(135deg,#3b4a9c,#6f7fe0 60%,#e5604a)}.school-photo.nophoto::after{content:'🏫';font-size:72px;display:grid;place-items:center;filter:drop-shadow(0 6px 10px #0004)}
.sign{margin:8px 0 10px;padding:12px 16px 10px;border-radius:12px;background:#2a3a9c;color:#fff;border:3px solid #1c2766;box-shadow:0 6px 14px #1c276655}
.sign small{display:block;font:700 11px 'Be Vietnam Pro',sans-serif;letter-spacing:.06em;opacity:.9}
.sign b{display:block;font:800 clamp(17px,2.6vw,26px)/1.15 'Baloo 2',sans-serif;color:#e9f24a;text-shadow:2px 2px 0 #1c2766;text-transform:uppercase;margin:2px 0 6px}
.sign-f{display:flex;gap:6px 18px;flex-wrap:wrap;font:700 11.5px 'Be Vietnam Pro',sans-serif;color:#f5d34a}
.school-tx p{margin:0;font-size:14.5px;opacity:.85}
.auth-school{margin:-6px 0 0;text-align:center;font-weight:700;color:#4b5bb0;font-size:13px}
.foot{line-height:1.7}
@media(max-width:700px){.school{grid-template-columns:1fr;padding:14px}.school-photo{min-height:130px;max-height:200px}}

/* ô chọn khối nổi bật */
.gsw{align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:#ffffff1f;border:1px solid #ffffff40;box-shadow:inset 0 1px 0 #ffffff30}
.gsw-l{font:800 11px 'Be Vietnam Pro',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.85;padding:0 4px 0 6px}
.gsw button{position:relative;width:42px;height:42px;border-radius:14px;border:2px solid transparent;background:#ffffff26;color:#fff;font:800 20px 'Baloo 2',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s;display:grid;place-items:center;padding:0}
.gsw button b{font-weight:800}.gsw button i{position:absolute;right:-4px;top:-6px;font-style:normal;font-size:12px}
.gsw button.g6{--g:#12c2cf}.gsw button.g7{--g:#3ed17f}.gsw button.g8{--g:#f5a623}.gsw button.g9{--g:#a98bff}
.gsw button:not(.on):not(.locked):hover{background:var(--g);color:#102;transform:translateY(-2px) rotate(-3deg)}
.gsw button.on{background:var(--g);color:#102a;color:#12163a;border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 3px #ffffff55,0 6px 16px #0006;z-index:1}
.gsw button.locked{opacity:.45;cursor:not-allowed;background:#0003}
.gsw button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.course.is-locked{opacity:.65}.lock-note{font-weight:700;opacity:.8;padding:8px 0}
@media(max-width:600px){.gsw-l{display:none}.gsw{gap:3px;padding:3px}.gsw button{width:38px;height:38px;font-size:17px;border-radius:12px}}
@media(max-width:380px){.gsw button{width:34px;height:34px;min-width:34px}}