/* ── Utility ─────────────────────────────────────────────────────────────────── */
.downline { display: block; }

/* ── Base reset — giống hệt <style> inline trong các file HTML ──────────────── */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: #FFFFFF;
  color: #1E4D5A;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

a {
  color: #1E4D5A;
  text-decoration: none;
}

a:hover {
  color: #1E4D5A;
}

input::placeholder,
textarea::placeholder {
  color: #1E4D5A;
}

button {
  font-family: Montserrat, sans-serif;
}

/* ── Container utility — max-width 1200px content + 96px padding ─────────── */
.container {
  width: 100%;
  max-width: 1392px; /* 1200px content + 2 × 96px padding */
  margin-left: auto;
  margin-right: auto;
  padding-left: 96px;
  padding-right: 96px;
}

@media (max-width: 1023px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Header responsive — desktop vs mobile ────────────────────────────────── */
/* Desktop nav: hiển thị trên ≥1200px */
.vs-header-desk {
  display: flex;
}

/* Mobile nav: hiển thị trên <1200px */
.vs-header-mob {
  display: none;
}

@media (max-width: 1199px) {
  .vs-header-desk {
    display: none !important;
  }

  .vs-header-mob {
    display: flex !important;
  }
}

/* ── Footer responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Tablet: 3 cột, quick links lên row 1 cùng logo */
  .vs-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 48px !important;
    column-gap: 32px !important;
  }

  .vs-footer-col-1 { order: 1; grid-column: span 2; }
  .vs-footer-col-2 { order: 3; }
  .vs-footer-col-3 { order: 4; }
  .vs-footer-col-4 { order: 5; }
  .vs-footer-col-5 { order: 2; }
}

@media (max-width: 767px) {
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .vs-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 40px !important;
  }

  /* Mobile: thứ tự tự nhiên, reset về mặc định */
  .vs-footer-col-1,
  .vs-footer-col-2,
  .vs-footer-col-3,
  .vs-footer-col-4,
  .vs-footer-col-5 { order: unset; grid-column: auto; }
}

/* ── Nav dropdown hover transition ──────────────────────────────────────────── */
.vs-nav-item:hover .vs-dropdown,
.vs-nav-item.is-open .vs-dropdown {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.vs-nav-item:hover .vs-mega,
.vs-nav-item.is-open .vs-mega {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.vs-nav-item:hover .vs-chevron,
.vs-nav-item.is-open .vs-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown item hover ─────────────────────────────────────────────────────── */
.vs-dropdown a:hover,
.vs-mega a:hover {
  background: #D2E0D7 !important;
}

/* ── Search overlay ────────────────────────────────────────────────────────── */
#vs-search-overlay {
  display: none;
  align-items: center;
}

#vs-search-overlay.is-open {
  display: flex !important;
}

/* Tablet 1024-1199px: search overlay giữ 80px (giống desktop) */
@media (max-width: 1023px) {
  #vs-search-overlay {
    height: 64px !important;
  }
}
@media (max-width: 767px) {
  #vs-search-overlay input {
    font-size: 16px !important;
  }
  #vs-search-overlay > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────── */
#vs-mob-drawer {
  display: none;
  flex-direction: column;
}

#vs-mob-drawer.is-open {
  display: flex !important;
}

/* ── Mobile accordion ──────────────────────────────────────────────────────── */
.vs-mob-acc-panel {
  display: none;
  flex-direction: column;
}

.vs-mob-acc-panel.is-open {
  display: flex !important;
}

.vs-mob-acc.is-open .vs-mob-chevron {
  transform: rotate(180deg);
}

/* ── Social icons hover (footer) ────────────────────────────────────────────── */
footer a[title="Facebook"]:hover,
footer a[title="YouTube"]:hover,
footer a[title="Instagram"]:hover,
footer a[title="Zalo"]:hover {
  background: #6FC7B6 !important;
  color: #1E4D5A !important;
  box-shadow: none !important;
}

/* ── Footer links hover ──────────────────────────────────────────────────────── */
footer a:hover {
  color: #6FC7B6 !important;
}

footer a[title="Facebook"]:hover,
footer a[title="YouTube"]:hover,
footer a[title="Instagram"]:hover,
footer a[title="Zalo"]:hover {
  color: #1E4D5A !important;
}

/* ── Scrolled header shadow ─────────────────────────────────────────────────── */
#vs-header.is-scrolled {
  box-shadow: 0 2px 10px rgba(30, 77, 90, 0.10) !important;
}

/* ── Desktop header: thu nhỏ padding + gap ở viewport 1200–1365px ───────────── */
@media (min-width: 1200px) and (max-width: 1365px) {
  .vs-header-desk {
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 12px !important;
  }

  .vs-header-desk nav {
    gap: 14px !important;
  }
}

/* ── CTA button hover (header desktop) ──────────────────────────────────────── */
header > .vs-header-desk > a[style*="background:#B6B6DB"]:hover {
  gap: 14px !important;
  background: #1E4D5A !important;
  color: #FFFFFF !important;
}

/* ── CTA button trong mobile bar (tablet ≥1024px) ────────────────────────────── */
.vs-header-mob-cta {
  display: none !important;
}

@media (min-width: 1024px) {
  .vs-header-mob-cta {
    display: inline-flex !important;
  }
}

/* ── Mobile bar: height + padding responsive ─────────────────────────────────── */
/* Tablet 1024-1199px: bar cao 80px, drawer top cũng 80px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vs-header-mob {
    height: 80px !important;
  }

  #vs-mob-drawer {
    top: 80px !important;
  }
}

/* ≥768px: padding bar + drawer rộng 40px */
@media (min-width: 768px) {
  .vs-header-mob {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  #vs-mob-drawer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

.vs-header-mob-cta:hover {
  gap: 14px !important;
  background: #1E4D5A !important;
  color: #FFFFFF !important;
}

/* ── Mega menu promo card link hover ────────────────────────────────────────── */
.vs-mega div a[style*="background:#B6B6DB"]:hover {
  background: #1E4D5A !important;
  color: #FFFFFF !important;
}

/* ── Chân dung K-12 (component dùng chung nhiều trang) ──────────────────────── */
.vs-cd-link:hover {
  gap: 14px !important;
}

.vs-cd-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.vs-cd-wheel > svg,
.vs-cd-wheel > #vs-cd-wheel-svg {
  max-width: 860px;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .vs-cd-domain-cards {
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -40px;
    padding: 0 40px;
    gap: 12px !important;
  }
  .vs-cd-domain-cards::-webkit-scrollbar { display: none; }
  .vs-cd-domain-cards > div {
    flex: 0 0 220px;
  }
}
@media (max-width: 600px) {
  .vs-cd-domain-cards {
    margin: 0 -20px;
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .vs-cd-hint {
    display: none !important;
  }
  .vs-cd-wheel {
    display: none !important;
  }
  .vs-cd-mobile-list {
    display: flex !important;
  }
  #chan-dung {
    padding: 56px 40px !important;
  }
  #chan-dung h2 {
    font-size: 30px !important;
  }
}

@media (min-width: 768px) {
  .vs-cd-mobile-list {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #chan-dung {
    padding: 56px 20px !important;
  }
}

@media (max-width: 767px) {
  #vs-cd-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .vs-cd-modal-mob {
    border-radius: 24px 24px 0 0 !important;
    padding: 32px 20px 24px !important;
    width: 100% !important;
    max-height: 85vh !important;
  }
}

.vs-footer-notch{
  position:relative;
  z-index:2;
  height:0;              /* không chiếm chỗ, không đẩy footer xuống */
  line-height:0;
  color:#D2E0D7;         /* = màu nền của section ngay phía trên footer */
}
.vs-footer-notch svg{
  position:absolute;
  top:-1px;              /* đè 1px để không lộ đường kẻ mảnh ở mép nối */
  left:50%;
  transform:translateX(-50%);
  width:120px;           /* kích thước cố định, không kéo giãn */
  height:31px;
  display:block;
}
@media (max-width:767px){
  .vs-footer-notch svg{ width:90px; height:23px; }
}