/* =====================================================
   dethimontoan.net — dmx SHELL (header + footer thiết kế landing 2026)
   Dùng CHUNG toàn site: header.php + footer.php render markup,
   file này giữ mọi rule shell (đã tách từ front-page.php).
   Prefix dmx- để không đụng class cũ trong main.css; enqueue SAU
   main.css để override được các rule cũ (body padding tab bar…).
   ===================================================== */

.dmx{--accent:#2563eb;--accent-dark:#1d4ed8;font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;color:#334155;-webkit-font-smoothing:antialiased}
.dmx a{text-decoration:none}
.dmx h1,.dmx h2,.dmx h3,.dmx h4,.dmx p{margin:0}

/* main.css chừa 70px đáy cho tab bar cũ (biến thể này không render tab bar) → trả lại. */
body{padding-bottom:0}
/* Trang trong: nội dung cách footer tối một khoảng cho thoáng. */
.container.app-main{padding-bottom:30px}
/* Thanh làm bài (exam.css) bám top:62px theo header cũ → hạ xuống dưới header mới (66+46). */
.exam-bar{top:118px}

/* ---------- Hover (inline style cần !important để thắng) ---------- */
.dmx .dmx-hv-lift{transition:transform .18s,box-shadow .18s}
.dmx .dmx-hv-lift:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.1)}
.dmx a.dmx-hv-dark:hover,.dmx button.dmx-hv-dark:hover{background:var(--accent-dark,#1d4ed8) !important}
.dmx a.dmx-hv-gold:hover{background:#eaa800 !important}
.dmx a.dmx-hv-border:hover{border-color:var(--accent,#2563eb) !important;color:var(--accent,#2563eb) !important}
.dmx a.dmx-hv-soft:hover{background:#eff6ff !important}
.dmx a.dmx-hv-accent:hover{color:var(--accent,#2563eb) !important}
.dmx a.dmx-hv-fill:hover{background:var(--accent,#2563eb) !important;color:#fff !important}
.dmx a.dmx-hv-white:hover{color:#fff !important}
.dmx .dmx-hv-soc:hover{background:var(--accent,#2563eb) !important;color:#fff !important}
.dmx .dmx-hv-row:hover{background:#f8fafc !important}

/* ---------- Header ---------- */
.dmx-hdr{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 #e8edf3}
body.admin-bar .dmx-hdr{top:32px}
@media (max-width:782px){body.admin-bar .dmx-hdr{top:46px}}
.dmx .dmx-nav a{color:#475569;font-weight:500;height:46px;display:flex;align-items:center;flex-shrink:0;white-space:nowrap}
.dmx .dmx-nav a:hover{color:var(--accent,#2563eb)}
.dmx .dmx-nav a.is-home{color:var(--accent,#2563eb);font-weight:600;border-bottom:2px solid var(--accent,#2563eb)}

/* Ô tìm kiếm DESKTOP/TABLET (≥768px): thanh hiện LUÔN ở khoảng trống giữa header
   (logo · ô tìm · nút phải); flex:1 + max-width nên tự co giãn theo chỗ trống.
   Dưới 768px (header hết chỗ trống) mới dùng kính lúp + panel. */
.dmx-hdr-search{display:none;position:relative;flex:1 1 auto;max-width:440px;align-items:center}
.dmx-hdr-search svg{position:absolute;left:13px;color:#94a3b8;pointer-events:none}
.dmx-hdr-search input[type="search"]{width:100%;height:40px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;padding:0 14px 0 38px;font-family:inherit;font-size:14.5px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s}
.dmx-hdr-search input[type="search"]:focus{outline:none;background:#fff;border-color:var(--accent,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
@media (min-width:768px){
  .dmx-hdr-search{display:flex}
  #dmxSearchBtn{display:none !important} /* inline-flex nội tuyến trên nút → cần !important */
}
/* Tablet 768–999px: header chật → CTA rút gọn "Thi ngay" + gap nhỏ lại cho thanh tìm đủ rộng. */
@media (min-width:768px) and (max-width:999px){
  .dmx-hdr-top{gap:14px !important}
  .dmx-cta-full{display:none !important}
  .dmx-cta-short{display:inline !important}
}
/* Ô tìm kiếm MOBILE: panel cố định NGAY DƯỚI header (nút kính lúp bật/tắt) — không chen vào flex header
   nên không phá layout; input 16px để iOS không auto-zoom khi chạm. */
#dmxSearchBtn:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb)}
.dmx-search-pop{display:none;position:absolute;top:100%;left:0;right:0;z-index:49;background:#fff;box-shadow:0 14px 28px rgba(15,23,42,.10);border-top:1px solid #eef2f7;padding:10px 16px;gap:8px}
.dmx-hdr.dmx-search-on .dmx-search-pop{display:flex}
.dmx-hdr.dmx-search-on #dmxSearchBtn{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:#eff6ff}
@media (min-width:641px){
  .dmx-search-pop{left:auto;right:16px;top:calc(100% + 8px);width:380px;border:1px solid #eef2f7;border-radius:12px;padding:10px;box-shadow:0 18px 40px rgba(15,23,42,.16)}
}

/* ---------- Nút lên đầu trang: chỉ hiện sau khi cuộn ---------- */
#dmxTop{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
#dmxTop.is-on{opacity:1;visibility:visible;transform:none}

/* ---------- Responsive shell ---------- */
@media (max-width:1024px){
  .dmx-nav{overflow-x:auto;scrollbar-width:none}
  .dmx-nav::-webkit-scrollbar{display:none}
}
@media (max-width:900px){
  .dmx-footer-grid{grid-template-columns:1fr 1fr !important;gap:28px !important}
}
@media (max-width:640px){
  .dmx-sec{padding-left:16px !important;padding-right:16px !important}
  .dmx-hdr-top{padding-left:16px !important;padding-right:16px !important;height:58px !important;gap:10px !important}
  .dmx-hdr-top>a>span:first-child{width:34px !important;height:34px !important}
  .dmx-hdr-top>a>span:last-child>span:first-child{font-size:17px !important}
  #dmxSearchBtn{width:34px !important;height:34px !important}
  .dmx-hdr-cta{padding:8px 12px !important;font-size:13px !important}
  .dmx-nav{padding-left:16px !important;padding-right:16px !important;gap:16px !important;height:42px !important;font-size:13.5px !important}
  .dmx-nav a{height:42px !important}
  #dmxTop{width:40px;height:40px;right:16px;bottom:16px}
  .exam-bar{top:106px}
}
@media (max-width:520px){
  .dmx-hdr-tag{display:none !important}
  .dmx-hdr-login{display:none !important}
  .dmx-footer-grid{grid-template-columns:1fr !important}
}
@media (max-width:430px){
  .dmx-cta-full{display:none !important}
  .dmx-cta-short{display:inline !important}
}
@media (max-width:374px){
  .dmx-hdr-cta{padding:7px 9px !important;font-size:12.5px !important}
  .dmx-hdr-top>a>span:last-child>span:first-child{font-size:15.5px !important}
}