/* ============================================================
   MAIN.CSS - Supplemental styles
   ============================================================ */

/* Single service/product uu diem grid */
@media (max-width: 600px) {
  .uu-diem-grid { grid-template-columns: 1fr !important; }
  .woocommerce div.product { grid-template-columns: 1fr !important; }
  .gallery-image-wrap { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* WooCommerce single product grid fix */
@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

/* FAQ open state */
.faq-item.open .faq-q span { transform: rotate(45deg); }
.faq-item.open .faq-a { display: block !important; }

/* Product grid WooCommerce */
.woo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 1024px) { .woo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woo-grid { grid-template-columns: repeat(2, 1fr); } }

/* WooCommerce cart button override */
.woocommerce a.added_to_cart { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--primary); }

/* Sale flash */
.woocommerce span.onsale {
  background: var(--secondary);
  border-radius: 999px;
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  top: 12px;
  left: 12px;
}

/* Nav menu level 2 fix */
.main-nav .sub-menu { position: absolute; }
.main-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  transform: none;
  margin-top: 0;
}

/* Ensure sub-sub menus don't overflow viewport */
.main-nav li:last-child .sub-menu,
.main-nav li:nth-last-child(2) .sub-menu {
  left: auto;
  right: 0;
}
.main-nav li:last-child .sub-menu .sub-menu,
.main-nav li:nth-last-child(2) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}

/* Filter sidebar open on mobile */
@media (max-width: 1024px) {
  #filter-sidebar {
    position: fixed;
    top: 0; right: -320px;
    width: 300px; height: 100vh;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
    z-index: 400;
    overflow-y: auto;
    transition: right .3s ease;
    padding: 20px;
    display: block !important;
  }
  #filter-sidebar.open { right: 0; }
}

/* Tabs - section tabs */
.section-tabs { overflow-x: auto; white-space: nowrap; }
.section-tab { display: inline-flex; }

/* Tab panel transition */
.tab-panel { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Gallery hover */
.gallery-image img { transition: transform .3s ease; }
.gallery-image:hover img { transform: scale(1.04); }

/* Print utilities */
@media print {
  .site-header, .site-footer, .sidebar, .floating-contact, .mobile-bottom-nav { display: none !important; }
  .content-sidebar-wrap { grid-template-columns: 1fr; }
}

/* Elementor compatibility */
.elementor-widget-container > .section { margin-top: 0; }
.elementor-section .container { width: 100%; }


/* === ChatGPT bugfix v1.0.1: chống co/vỡ header + overflow === */
html, body { max-width:100%; overflow-x:hidden; }
.container { width:min(1200px, calc(100% - 32px)); margin-left:auto; margin-right:auto; }
.header-inner { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; }
.site-logo { flex:0 0 auto; min-width:0; max-width:260px; display:flex; align-items:center; gap:10px; }
.site-logo img, .custom-logo { max-height:56px; width:auto; object-fit:contain; }
.main-nav-wrap { flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.main-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.main-nav li { list-style:none; margin:0; }
.header-right { flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
img { max-width:100%; height:auto; }
@media (max-width:991px){ .main-nav-wrap{display:none}.menu-toggle{display:inline-flex!important}.header-phone{display:none!important}.header-inner{justify-content:space-between} }

/* === HR content/theme adaptation === */
.header-search-toggle{height:40px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;font-weight:700;color:#29384d;cursor:pointer;box-shadow:var(--shadow)}
.header-search-form{position:absolute;right:18px;top:calc(100% + 12px);display:none;grid-template-columns:220px auto;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 48px rgba(18,58,130,.14);padding:10px;z-index:220}.header-search-form.open{display:grid}.header-search-form input{height:42px;border:1px solid var(--line);border-radius:12px;padding:0 12px;outline:none}.header-search-form button{height:42px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:700;padding:0 14px}.site-header .header-inner{position:relative}.hr-page-hero{background:linear-gradient(135deg,#1554c8,#073a8f);color:#fff;padding:58px 0;text-align:left}.hr-page-hero h1{color:#fff;font-size:clamp(32px,4.2vw,56px);line-height:1.08;letter-spacing:-.04em;font-weight:800;max-width:980px}.hr-page-wrap{padding:42px 0 72px}.hr-page-document{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:42px;font-size:17px;line-height:1.82;color:#26364c}.hr-page-document h2{font-size:30px;line-height:1.18;margin:32px 0 14px;color:#10213b;letter-spacing:-.03em}.hr-page-document h3{font-size:23px;line-height:1.22;margin:26px 0 12px;color:#10213b}.hr-page-document p{margin:0 0 16px}.hr-page-document ul,.hr-page-document ol{margin:0 0 20px;padding-left:24px}.hr-page-document li{margin:7px 0}.hr-page-document strong{color:#10213b}.hr-page-document .wp-block-buttons{margin-top:24px}.hr-page-document .wp-block-button__link{border-radius:999px;background:var(--primary);font-weight:800;padding:14px 22px}.hr-page-document blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--primary);background:#f4f8ff;border-radius:14px;color:#41566e}.hr-footer .footer-grid{grid-template-columns:1.25fr repeat(4,1fr)}
@media(max-width:1280px){.hr-footer .footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1024px){.header-search-toggle{display:none}.header-search-form{display:none!important}.main-nav-wrap .header-search-form{display:none}}
@media(max-width:767px){.hr-page-document{padding:26px 20px;border-radius:20px;font-size:16px}.hr-page-wrap{padding:28px 0 56px}.hr-page-hero{padding:42px 0}.hr-footer .footer-grid{grid-template-columns:1fr}}


/* === HR hotfix v1.0.3: typography, menu stability, contrast === */
:root{
  --hr-heading:#10213b;
  --hr-body:#26364c;
  --hr-muted:#5f7188;
  --hr-dark:#10213b;
}

/* Inter chỉ dùng tối đa 600, giảm size heading toàn site */
body, button, input, select, textarea{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;}
h1,h2,h3,h4,h5,h6,
.section-title,.single-title,.sidebar-widget-title,
.logo-text strong,.btn,.phone-number,
.hr-home h1,.hr-home h2,.hr-home h3,.hr-home strong,
.hr-page-hero h1,.hr-page-document h2,.hr-page-document h3{
  font-weight:600!important;
}
.hr-hero h1{font-size:clamp(34px,4.9vw,62px)!important;line-height:1.08!important;letter-spacing:-.035em!important;}
.hr-section-head h2,.hr-center-head h2{font-size:clamp(25px,3.1vw,42px)!important;line-height:1.14!important;letter-spacing:-.025em!important;}
.hr-cta-box h2{font-size:clamp(26px,3.2vw,42px)!important;line-height:1.14!important;letter-spacing:-.025em!important;}
.hr-card h3{font-size:20px!important;line-height:1.25!important;}
.hr-page-hero h1{font-size:clamp(28px,3.4vw,44px)!important;line-height:1.14!important;letter-spacing:-.025em!important;}
.hr-page-document h2{font-size:26px!important;}
.hr-page-document h3{font-size:21px!important;}
.hr-home .hr-pill,.hr-actions .btn,.hr-link,.hr-score,.hr-step:before,.hr-faq summary,.hr-page-document .wp-block-button__link{font-weight:600!important;}

/* Header/menu: cố định layout, không xê dịch khi hover */
.site-header{z-index:999!important;}
.site-header .container.header-inner{min-height:68px!important;width:min(1360px,calc(100% - 36px))!important;gap:14px!important;}
.site-logo{flex:0 0 176px!important;min-width:176px!important;max-width:176px!important;}
.logo-text strong{font-size:18px!important;}
.logo-text small{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.main-nav-wrap{flex:1 1 auto!important;min-width:0!important;display:flex!important;justify-content:center!important;align-self:stretch!important;align-items:center!important;overflow:visible!important;}
.main-nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex-wrap:nowrap!important;width:100%;list-style:none!important;margin:0!important;padding:0!important;overflow:visible!important;}
.main-nav > li{position:relative!important;display:flex!important;align-items:stretch!important;margin:0!important;}
.main-nav > li > a{display:flex!important;align-items:center!important;height:68px!important;padding:0 8px!important;font-size:12.5px!important;line-height:1.15!important;font-weight:600!important;color:#26364c!important;white-space:nowrap!important;}
.main-nav > li > a:hover,.main-nav > li.current-menu-item > a,.main-nav > li.current-menu-ancestor > a{color:var(--primary)!important;}
.main-nav > li.current-menu-item > a::after{display:none!important;}
.main-nav li.menu-item-has-children > a::after{position:static!important;display:inline-block!important;content:'⌄'!important;margin-left:4px!important;background:none!important;color:#6d7f95!important;width:auto!important;height:auto!important;}
.header-right{gap:8px!important;flex:0 0 auto!important;}
.header-phone{display:none!important;}
.header-right .btn{padding:10px 14px!important;font-size:13px!important;border-radius:999px!important;}
.header-search-toggle{height:38px!important;padding:0 12px!important;font-size:13px!important;}

/* Dropdown: bỏ khoảng hở gây mất menu, thêm vùng đệm hover */
.main-nav .sub-menu{
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  position:absolute!important;
  top:100%!important;
  left:0!important;
  right:auto!important;
  transform:none!important;
  min-width:240px!important;
  margin:0!important;
  padding:10px!important;
  background:#fff!important;
  border:1px solid #e5ebf4!important;
  border-radius:14px!important;
  box-shadow:0 18px 48px rgba(18,58,130,.16)!important;
  z-index:1000!important;
  list-style:none!important;
  transition:opacity .12s ease,visibility .12s ease!important;
}
.main-nav > li > .sub-menu::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px;background:transparent;}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.main-nav .sub-menu li{position:relative!important;display:block!important;}
.main-nav .sub-menu li a{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:10px 12px!important;border-radius:10px!important;font-size:13px!important;font-weight:500!important;color:#26364c!important;background:transparent!important;white-space:nowrap!important;}
.main-nav .sub-menu li a:hover{background:#f1f6ff!important;color:var(--primary)!important;}
.main-nav .sub-menu .sub-menu{top:0!important;left:calc(100% + 8px)!important;right:auto!important;margin:0!important;}
.main-nav .sub-menu .sub-menu::before{content:'';position:absolute;top:0;bottom:0;left:-8px;width:8px;background:transparent;}
.main-nav > li:nth-last-child(-n+3) > .sub-menu{left:auto!important;right:0!important;}
.main-nav > li:nth-last-child(-n+3) .sub-menu .sub-menu{left:auto!important;right:calc(100% + 8px)!important;}
.main-nav > li:nth-last-child(-n+3) .sub-menu .sub-menu::before{left:auto;right:-8px;}

/* Contrast: không để chữ trắng trên nền sáng */
.hr-card,.hr-card h3,.hr-card p,.hr-card strong,
.hr-mini-stat,.hr-mini-stat strong,.hr-kpi,.hr-kpi b,
.hr-candidate,.hr-candidate b,.hr-faq details,.hr-faq summary,.hr-page-document{
  color:var(--hr-body)!important;
}
.hr-card h3,.hr-mini-stat strong,.hr-kpi b,.hr-candidate b,.hr-faq summary,.hr-page-document h2,.hr-page-document h3{color:var(--hr-heading)!important;}
.hr-card p,.hr-faq p,.hr-page-document p,.hr-page-document li{color:var(--hr-muted)!important;}
.hr-band,.hr-band h2,.hr-band h3,.hr-band p,.hr-band .hr-pill,.hr-cta-box,.hr-cta-box h2,.hr-cta-box p,.hr-float-card,.hr-float-card p,.hr-photo-card,.hr-photo-card strong{color:#fff!important;}
.hr-band p{color:#d8e5f7!important;}
.hr-cta-box p{color:#eef5ff!important;}
.hr-band .hr-card,.hr-band .hr-card h3{color:var(--hr-heading)!important;}
.hr-band .hr-card p{color:var(--hr-muted)!important;}
.hr-band .hr-card .hr-link{color:var(--primary)!important;}
.hr-pill{color:var(--primary)!important;}
.hr-band .hr-pill{color:#fff!important;}
.btn-outline{background:#fff!important;color:var(--primary)!important;}
.hr-actions .btn-outline{color:#10213b!important;background:#fff!important;}
.hr-cta-box .btn{background:#fff!important;color:#073a8f!important;}

/* Mobile: đồng bộ breakpoint, menu không bị đè sai */
@media(max-width:1180px){
  .main-nav > li > a{font-size:12px!important;padding:0 6px!important;}
  .site-logo{flex-basis:158px!important;min-width:158px!important;max-width:158px!important;}
  .header-right .btn{display:none!important;}
}
@media(max-width:1024px){
  .main-nav-wrap{display:none!important;}
  .main-nav-wrap.open{display:block!important;}
  .header-search-toggle,.header-search-form{display:none!important;}
  .menu-toggle{display:inline-flex!important;}
}
@media(max-width:640px){
  .hr-hero h1{font-size:34px!important;}
  .hr-card h3{font-size:19px!important;}
}