/* ===== Base ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: #1E293B; background: #ffffff; -webkit-font-smoothing: antialiased; }
a { color: #2563EB; text-decoration: none; }
a:hover { color: #1D4ED8; }
h1, h2, h3, h4 { font-family: 'Be Vietnam Pro', system-ui, sans-serif; margin: 0; color: #0F172A; }
p { margin: 0; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; }

/* ===== Animation + hover (trích từ bản Claude Design) ===== */
@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
.scp0:hover { filter: brightness(1.06); transform: translateY(-1px); }
.scp1:hover { transform: translateY(-2px); filter: brightness(1.05); }
.scp2:hover { border-color: rgb(37, 99, 235); color: rgb(37, 99, 235); }
.scp3:hover { transform: translateY(-3px); box-shadow: rgba(37, 99, 235, 0.12) 0px 16px 36px; }
.scp4:hover { border-color: rgb(191, 211, 246); background: rgb(255, 255, 255); box-shadow: rgba(37, 99, 235, 0.1) 0px 12px 28px; }
.scp5:hover { border-color: rgb(59, 130, 246); background: rgba(59, 130, 246, 0.08); }
.scp7:hover { filter: brightness(1.05); transform: translateY(-1px); }
.scp8:hover { transform: translateY(-2px); }
a:hover { color: rgb(29, 78, 216); }
@keyframes reveal { 
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}
@keyframes floaty { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes pulseRing { 
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes spinSlow { 
  100% { transform: rotate(360deg); }
}

/* ===== Responsive (thêm thủ công — bản gốc thiếu media query) ===== */
/* Chặn tràn ngang toàn cục (vòng tròn trang trí hero, ...) */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 900px) {
  /* Hero: 2 cột -> 1 cột */
  .herogrid { grid-template-columns: 1fr !important; gap: 36px !important; }
  /* Card giảng viên: ảnh + text -> xếp dọc, canh giữa */
  .lead-gv { grid-template-columns: 1fr !important; gap: 20px !important; text-align: center; justify-items: center; }
  .lead-gv > div:first-child { width: 200px !important; max-width: 70%; margin: 0 auto; }
  /* Ảnh diễn giả: giữ tỉ lệ 3/4, không co về 0 */
  .lead-gv [data-img] { width: 100% !important; min-width: 160px; aspect-ratio: 3 / 4; }
  /* Mọi grid inline 2/3/4 cột -> 1-2 cột cho gọn */
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .grid2, .grid3 { grid-template-columns: 1fr !important; }
  h1 { font-size: 34px !important; }
  h2 { font-size: 26px !important; }
}

@media (max-width: 560px) {
  section, header, nav > div, footer { padding-left: 18px !important; padding-right: 18px !important; }
  /* Xuống 1 cột hết cho dễ đọc */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  /* Countdown 4 ô giữ nguyên 4 cột (số nhỏ, vẫn vừa) */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(4, 1fr) !important; }
  h1 { font-size: 29px !important; line-height: 1.18 !important; }
  h2 { font-size: 23px !important; }
  h3 { font-size: 18px !important; }
  /* Giảm padding section cho đỡ chật */
  section, header { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* Nav mobile: hamburger + menu xổ (JS bật display) — KHÔNG ẩn cứng navlink nữa */
@media (max-width: 768px) {
  #nav-links a.navlink { display: block !important; }
}

/* Chat widget: mobile chỉ giữ nút tròn, ẩn bubble text để không che nội dung */
@media (max-width: 768px) {
  .chat-widget { right: 14px !important; bottom: 14px !important; }
  .chat-widget .chat-bubble { display: none !important; }
  .chat-widget > div:last-child { width: 52px !important; height: 52px !important; font-size: 24px !important; }
}

/* Bảng neo giá: màn hẹp xuống 1 cột cho dễ đọc */
@media (max-width: 560px) {
  .anchor-table { grid-template-columns: 1fr !important; }
  /* cột "Nếu tự làm" thụt vào, chữ nhỏ hơn để phân biệt với dòng chính */
  .anchor-table > div:nth-child(even) { color: #94A3B8 !important; font-size: 12.5px !important; padding-top: 2px !important; }
}

/* trạng thái form */
.field-error { border-color: #DC2626 !important; }
.form-msg { margin-top: 14px; padding: 13px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; display: none; }
.form-msg.ok { display: block; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.form-msg.err { display: block; background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }