/* ============================================================================
   THU VIEN DE THI TOAN — modern styling
   Bang mau ke thua tu thuong hieu san co cua site (style.css):
   #232323 (than chu dao), #ae1f2b (do), #f96511 (cam), #ffd304 (vang),
   #23527C (xanh). Bo sung nen sang + do bong mem cho cam giac hien dai.
   ============================================================================ */

.dt-scope{
  --dt-ink:#20242b;
  --dt-ink-soft:#5b6472;
  --dt-line:#e7e9ee;
  --dt-bg:#f5f6f9;
  --dt-card:#ffffff;
  --dt-red:#ae1f2b;
  --dt-red-dark:#7d1620;
  --dt-orange:#f96511;
  --dt-gold:#ffd304;
  --dt-dark:#20242b;
  --dt-radius:16px;
  --dt-shadow:0 6px 24px rgba(20,24,34,.08);
  --dt-shadow-lg:0 18px 40px rgba(20,24,34,.14);
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--dt-ink);
  background:var(--dt-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.dt-scope h1, .dt-scope h2, .dt-scope h3, .dt-scope h4, .dt-scope .dt-card-go, .dt-scope .dt-btn{
  font-family:'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

.dt-scope *{ box-sizing:border-box; }
.dt-scope a{ text-decoration:none; }
.dt-scope .dt-container{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* Vo hieu hoa moi hieu ung text-shadow / chu bong mo phia sau tieu de ma theme
   cua site (mh-magazine) gan san cho the h1/h2/h3/h4 — gay ra chu bi "nhoe/le"
   nhu 2 lop chong nhau tren banner va hero cua trang de thi. */
.dt-scope h1, .dt-scope h2, .dt-scope h3, .dt-scope h4,
.dt-scope h1 *, .dt-scope h2 *, .dt-scope h3 *, .dt-scope h4 *{
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}
.dt-scope h1::before, .dt-scope h1::after,
.dt-scope h2::before, .dt-scope h2::after,
.dt-scope h3::before, .dt-scope h3::after,
.dt-scope h4::before, .dt-scope h4::after{
  content:none !important;
  display:none !important;
}

/* ---------- HERO ---------- */
.dt-hero{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:52px 0 46px;
  margin:4px 0 40px;
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(255,211,4,.18), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgba(249,101,17,.25), transparent 55%),
    linear-gradient(120deg,#20242b 0%,#33202a 55%,var(--dt-red-dark) 100%);
  color:#fff;
}
.dt-hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 14px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.3px;
  margin-bottom:16px;
}
.dt-hero-eyebrow i{ color:var(--dt-gold); }
.dt-hero h1{
  font-size:34px; font-weight:800; margin:0 0 12px; line-height:1.25;
  color:#ffffff !important;
}
.dt-hero h1 span{ color:var(--dt-gold) !important; }
.dt-hero p{
  font-size:16px; color:rgba(255,255,255,.82); max-width:640px; margin:0 0 22px;
}
.dt-hero-stats{ display:flex; flex-wrap:wrap; gap:28px; margin-top:18px; }
.dt-hero-stat b{ display:block; font-size:24px; font-weight:800; color:#fff; }
.dt-hero-stat span{ font-size:13px; color:rgba(255,255,255,.72); }
.dt-hero-search{
  margin-top:26px; display:flex; max-width:460px; background:#fff; border-radius:14px;
  padding:6px; box-shadow:var(--dt-shadow-lg);
}
.dt-hero-search input{
  flex:1; border:0; outline:0; padding:10px 14px; font-size:14px; border-radius:10px; color:#20242b;
}
.dt-hero-search button{
  border:0; background:linear-gradient(120deg,var(--dt-red),var(--dt-red-dark)); color:#fff;
  padding:0 20px; border-radius:10px; font-weight:700; cursor:pointer; transition:transform .15s ease;
}
.dt-hero-search button:hover{ transform:translateY(-1px); }

/* ---------- BREADCRUMB (nhe, dung tren dsdethi) ---------- */
.dt-crumb{ font-size:13px; color:var(--dt-ink-soft); margin:0 0 12px; display:block; }
.dt-crumb a{ color:var(--dt-red); font-weight:600; }
.dt-crumb i{ margin:0 6px; font-size:10px; }

/* ---------- CARD GRID (trang hub) - gon, xem duoc nhieu the tren 1 man hinh ---------- */
.dt-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-bottom:30px;
}
.dt-card{
  position:relative;
  background:var(--dt-card);
  border-radius:12px;
  padding:14px 16px 12px;
  box-shadow:var(--dt-shadow);
  border:1px solid var(--dt-line);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex; flex-direction:column; gap:6px;
  overflow:hidden;
}
.dt-card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--dt-accent,var(--dt-red));
}
.dt-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--dt-shadow-lg);
  border-color:transparent;
}
.dt-card-row{ display:flex; align-items:center; gap:10px; }
.dt-card-icon{
  width:36px; height:36px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff;
  background:var(--dt-accent,var(--dt-red));
  box-shadow:0 6px 14px -6px var(--dt-accent,var(--dt-red));
}
.dt-card h3{ font-size:14.5px; font-weight:800; margin:0; color:var(--dt-ink); line-height:1.3; }
.dt-card p{
  font-size:12px; color:var(--dt-ink-soft); margin:0; line-height:1.45; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dt-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; margin-top:2px; border-top:1px dashed var(--dt-line);
}
.dt-badge-count{
  font-size:11px; font-weight:700; color:var(--dt-accent,var(--dt-red));
  background:color-mix(in srgb, var(--dt-accent,var(--dt-red)) 12%, transparent);
  padding:3px 8px; border-radius:999px;
}
.dt-badge-count.dt-badge-soon{ color:var(--dt-ink-soft); background:var(--dt-bg); font-style:italic; }
.dt-card-go{
  font-size:11.5px; font-weight:700; color:var(--dt-ink);
  display:inline-flex; align-items:center; gap:5px;
}
.dt-card:hover .dt-card-go{ color:var(--dt-accent,var(--dt-red)); }
.dt-card-go i{ transition:transform .2s ease; font-size:10px; }
.dt-card:hover .dt-card-go i{ transform:translateX(3px); }

/* ---------- SECTION HEADS ---------- */
.dt-section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 18px; flex-wrap:wrap; gap:10px; }
.dt-section-head h2{ font-size:21px; font-weight:800; margin:0; }
.dt-section-head p{ margin:4px 0 0; color:var(--dt-ink-soft); font-size:13.5px; }

/* ---------- CATEGORY HEADER (dsdethi.php) ---------- */
.dt-cat-header{
  display:flex; align-items:center; gap:18px; margin-bottom:26px; flex-wrap:wrap;
}
.dt-cat-icon{
  width:64px; height:64px; border-radius:18px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  background:var(--dt-accent,var(--dt-red));
  box-shadow:0 10px 22px -8px var(--dt-accent,var(--dt-red));
}
.dt-cat-header h1{ font-size:25px; font-weight:800; margin:0 0 4px; }
.dt-cat-header p{ margin:0; color:var(--dt-ink-soft); font-size:13.5px; max-width:640px; }

/* ---------- FILTER BAR ---------- */
.dt-filter{
  background:var(--dt-card); border:1px solid var(--dt-line); border-radius:var(--dt-radius);
  padding:18px; box-shadow:var(--dt-shadow); margin-bottom:26px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
}
.dt-field{ flex:1; min-width:200px; }
.dt-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--dt-ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.3px; }
.dt-select-wrap{ position:relative; }
.dt-select-wrap select, .dt-select-wrap input[type=text]{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--dt-line);
  font-size:14px; background:#fbfbfd; color:var(--dt-ink); outline:0; transition:border-color .15s ease, background .15s ease;
  appearance:none; -webkit-appearance:none;
}
.dt-select-wrap select{ padding-right:34px; }
.dt-select-wrap i.dt-caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--dt-ink-soft); pointer-events:none; font-size:12px;
}
.dt-select-wrap select:focus, .dt-select-wrap input:focus{ border-color:var(--dt-red); background:#fff; }
.dt-btn{
  border:0; cursor:pointer; font-weight:700; font-size:14px; border-radius:10px;
  padding:11px 22px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease;
}
.dt-btn-primary{ background:linear-gradient(120deg,var(--dt-red),var(--dt-red-dark)); color:#fff; box-shadow:0 10px 20px -8px var(--dt-red); }
.dt-btn-primary:hover{ transform:translateY(-2px); }
.dt-btn-ghost{ background:#fff; color:var(--dt-ink); border:1.5px solid var(--dt-line); }
.dt-btn-ghost:hover{ border-color:var(--dt-red); color:var(--dt-red); }
.dt-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* searchable tinh dropdown */
.dt-combo{ position:relative; }
.dt-combo-input{ cursor:pointer; }
.dt-combo-panel{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--dt-line); border-radius:12px; box-shadow:var(--dt-shadow-lg);
  max-height:320px; overflow:auto; display:none; padding:8px;
}
.dt-combo.open .dt-combo-panel{ display:block; }
.dt-combo-search{
  width:100%; border:1.5px solid var(--dt-line); border-radius:8px; padding:8px 10px;
  font-size:13.5px; margin-bottom:8px; outline:0;
}
.dt-combo-search:focus{ border-color:var(--dt-red); }
.dt-combo-group-label{ font-size:11px; font-weight:800; color:var(--dt-ink-soft); text-transform:uppercase; letter-spacing:.4px; padding:8px 8px 4px; }
.dt-combo-opt{ padding:8px 10px; border-radius:8px; font-size:13.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.dt-combo-opt:hover, .dt-combo-opt.active{ background:#f6ecec; color:var(--dt-red); }
.dt-combo-opt .cnt{ font-size:11px; color:var(--dt-ink-soft); background:var(--dt-bg); padding:1px 7px; border-radius:999px; }
.dt-combo-opt.empty .cnt{ visibility:hidden; }

/* ---------- GROUPED LISTING (accordion theo tung Tinh/Thanh, moi nhom la 1 danh sach hang) ---------- */
.dt-group-list{ margin-bottom:6px; display:flex; flex-direction:column; gap:14px; }
.dt-group{
  background:var(--dt-card); border:1px solid var(--dt-line); border-left:4px solid var(--dt-accent,var(--dt-red));
  border-radius:12px; box-shadow:var(--dt-shadow); overflow:hidden;
}
.dt-group-head{
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:var(--dt-ink);
  padding:15px 18px; cursor:pointer; list-style:none; user-select:none;
}
.dt-group-head::-webkit-details-marker{ display:none; }
.dt-group-head::marker{ content:none; }
.dt-group-head:hover{ background:var(--dt-bg); }
.dt-group-caret{ font-size:11px; color:var(--dt-ink-soft); transition:transform .15s ease; }
.dt-group[open] > .dt-group-head .dt-group-caret{ transform:rotate(90deg); }
.dt-group-head i.fa-map-marker, .dt-group-head i.fa-list, .dt-group-head i.fa-university, .dt-group-head i.fa-bookmark-o{ color:var(--dt-accent,var(--dt-red)); }
.dt-group-count{ margin-left:auto; font-size:12px; font-weight:700; color:var(--dt-ink-soft); background:var(--dt-bg); padding:3px 10px; border-radius:999px; }
.dt-group-body{ border-top:1px solid var(--dt-line); }

.dt-row{
  display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--dt-line);
  transition:background .12s ease;
}
.dt-row:last-child{ border-bottom:0; }
.dt-row:hover{ background:#fbf4f4; }
.dt-row-year{
  flex:none; font-size:12px; font-weight:700; color:#fff; background:var(--dt-ink-soft);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.dt-row-title{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--dt-ink); display:flex; flex-direction:column; gap:5px; }
.dt-row-title-text{ display:block; }
.dt-row-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dt-row-tags .dt-tag{ font-size:11px; font-weight:600; padding:2px 8px; }
.dt-row-actions{ flex:none; display:flex; gap:8px; }
.dt-row-btn{
  width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--dt-ink); color:#fff; font-size:14px; transition:transform .15s ease, background .15s ease;
}
.dt-row-btn:hover{ background:var(--dt-red); transform:translateY(-2px); color:#fff; }
.dt-row-btn-word{ background:#fff; color:var(--dt-ink); border:1.5px solid var(--dt-line); }
.dt-row-btn-word:hover{ border-color:var(--dt-red); color:var(--dt-red); background:#fff; }

/* ---------- RESULTS ---------- */
.dt-results-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.dt-result-card{
  display:flex; align-items:center; gap:16px; background:var(--dt-card); border:1px solid var(--dt-line);
  border-left:4px solid var(--dt-accent,var(--dt-red)); border-radius:12px; padding:16px 18px; box-shadow:var(--dt-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.dt-result-card:hover{ transform:translateY(-3px); box-shadow:var(--dt-shadow-lg); }
.dt-result-main{ flex:1; min-width:0; }
.dt-result-main h4{ font-size:15.5px; font-weight:800; margin:0 0 6px; color:var(--dt-ink); }
.dt-result-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; }
.dt-tag{ background:var(--dt-bg); color:var(--dt-ink-soft); padding:3px 9px; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.dt-tag i{ font-size:11px; }
.dt-result-actions{ display:flex; gap:8px; flex:none; }
.dt-result-actions a{
  font-size:13px; font-weight:700; padding:9px 14px; border-radius:9px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.dt-act-de{ background:var(--dt-ink); color:#fff; }
.dt-act-de:hover{ background:var(--dt-red); }
.dt-act-word{ background:#fff; color:var(--dt-ink); border:1.5px solid var(--dt-line); }
.dt-act-word:hover{ border-color:var(--dt-red); color:var(--dt-red); }

/* ---------- EMPTY STATE ---------- */
.dt-empty{
  text-align:center; padding:52px 20px; background:var(--dt-card); border:1px dashed var(--dt-line);
  border-radius:var(--dt-radius); color:var(--dt-ink-soft); margin-bottom:30px;
}
.dt-empty i{ font-size:34px; color:var(--dt-red); margin-bottom:14px; display:block; }
.dt-empty h4{ color:var(--dt-ink); font-size:16px; margin:0 0 6px; }
.dt-empty p{ margin:0 0 16px; font-size:13.5px; }

/* ---------- HOMEPAGE BANNER ---------- */
.dt-home-banner{
  position:relative; overflow:hidden; border-radius:20px; margin:22px 0 30px;
  padding:30px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(120deg,#20242b 0%,#3a2029 55%,var(--dt-red-dark) 100%);
  color:#fff; box-shadow:var(--dt-shadow-lg);
}
.dt-home-banner::before{
  content:'\f19d'; font-family:FontAwesome; position:absolute; right:24px; top:50%; transform:translateY(-50%) rotate(-8deg);
  font-size:130px; color:rgba(255,255,255,.06);
}
.dt-home-banner-txt{ position:relative; z-index:1; max-width:600px; }
.dt-home-banner h3{ font-size:22px; font-weight:800; margin:0 0 8px; color:#ffffff !important; }
.dt-home-banner h3 span{ color:var(--dt-gold) !important; }
.dt-home-banner p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.82); }
.dt-home-banner-cta{
  position:relative; z-index:1; background:var(--dt-gold); color:#3a2000; font-weight:800; font-size:14px;
  padding:12px 22px; border-radius:11px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:transform .15s ease;
}
.dt-home-banner-cta:hover{ transform:translateY(-2px); color:#3a2000; }

/* ---------- PAGE FRAME PADDING ---------- */
.dt-page{ padding-bottom:36px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:767px){
  .dt-hero{ padding:36px 0 32px; border-radius:0 0 20px 20px; }
  .dt-hero h1{ font-size:25px; }
  .dt-hero-stats{ gap:18px; }
  .dt-filter{ padding:14px; }
  .dt-cat-header h1{ font-size:20px; }
  .dt-result-card{ flex-direction:column; align-items:stretch; }
  .dt-result-actions{ justify-content:flex-end; }
  .dt-row{ flex-wrap:wrap; row-gap:8px; }
  .dt-row-title{ order:3; flex:0 0 100%; }
  .dt-row-actions{ margin-left:auto; }
  .dt-home-banner{ padding:24px 18px; }
  .dt-home-banner::before{ display:none; }
}