:root {
    --abc-menu-hover: #457BFF;
    --abc-menu-text: #1a1a1a;
    --abc-menu-muted: #4b5563;
    --abc-menu: #4d4d4d;
}

/* ---- Nav item cấp 1 ---- */
.abc-navbar .nav-item {
    position: relative;
    margin-right: 14px;
}

/* Xóa bỏ icon tam giác mặc định của Bootstrap khi dùng class dropdown-toggle */
.abc-navbar .dropdown-toggle::after {
    display: none !important;
}

.abc-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    
    padding: 16px 10px; 
    
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    
    color: var(--abc-menu);
}

/* ---- Chevron Icon Base ---- */
.abc-navbar .nav-link .chevron-up,
.abc-navbar .dropdown-toggle .chevron-up {
    width: 10px;
    height: auto;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

/* Xoay icon 180 độ khi Menu cha đang mở hoặc hover */
.abc-navbar .dropdown.show .chevron-up,
.abc-navbar .dropdown.show > .dropdown-toggle .chevron-up,
.abc-navbar .dropdown:hover .chevron-up {
    transform: rotate(180deg);
}

/* Hover / Focus / Active / khi Hover thẻ cha LI hoặc khi Dropdown đang mở */
/* Chỉ đổi màu khi thực sự hover, active hoặc khi menu đang có class .show */
.abc-navbar .nav-link:hover,
.abc-navbar .nav-link.active,
.abc-navbar .nav-item:hover > .nav-link,
.abc-navbar .dropdown.show > .nav-link {
    color: var(--abc-menu-hover) !important;
    border-bottom-color: var(--abc-menu-hover) !important;
}

/* Xóa viền/màu focus bàn phím thừa khi vừa nhấp/rê chuột xong */
.abc-navbar .nav-link:focus:not(:hover) {
    color: var(--abc-menu);
    border-bottom-color: transparent;
}

/* Đổi màu icon chevron khi hover/active/mở dropdown */
.abc-navbar .nav-link:hover .chevron-up,
.abc-navbar .nav-link:focus .chevron-up,
.abc-navbar .nav-link.active .chevron-up,
.abc-navbar .nav-item:hover > .nav-link .chevron-up,
.abc-navbar .dropdown.show .chevron-up {
    /* Chuyển màu icon sang tông xanh #457BFF của --abc-menu-hover */
    filter: invert(41%) sepia(85%) saturate(2286%) hue-rotate(210deg) brightness(102%) contrast(105%);
}

/* ---- Mega panel full-width tràn toàn bộ màn hình ---- */
.abc-navbar .nav-item.abc-mega {
    position: static !important; /* Đặt static ở thẻ cha để panel căn theo container/navbar */
}

.abc-mega__panel {
    display: none;
    position: absolute;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 1050;
}

.abc-navbar .dropdown.abc-mega .abc-mega__panel::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    display: block;
    background: transparent;
}

.abc-mega__panel--sm {
    width: 260px !important;
    left: auto !important;
    right: auto !important;
}

/* Hiển thị ngay lập tức khi có class .show */
.abc-navbar .dropdown.show > .abc-mega__panel {
    display: block;
}

.abc-mega__link {
    display: block;
    color: var(--abc-menu-muted);
    text-decoration: none;
    font-size: .9rem;
    transition: color .15s ease, padding-left .15s ease;
}

.abc-mega__link:hover {
    color: var(--abc-menu-hover);
    padding-left: 2px;
}

/* Xóa bỏ bóng đổ (box-shadow) của Mega Panel và Dropdown Menu */
.abc-mega__panel,
.abc-navbar .dropdown-menu {
    box-shadow: none !important;
}

/* Xóa bóng/viền xanh mặc định của Bootstrap khi focus vào nút */
.abc-navbar .nav-link:focus,
.abc-navbar .dropdown-toggle:focus {
    box-shadow: none !important;
}

/* ---- Mobile: fallback về dạng dọc ---- */
@media (max-width: 991.98px) {
    .abc-mega__panel {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        box-shadow: none !important;
        margin-top: 8px !important;
    }
}

/* Shared footer: company details and centered separators (Cloud Server PSD). */
.site-footer .footer-company { padding:40px 32px; border:1px solid #ededed; border-radius:24px; background:#fff; }
.site-footer .footer-company-grid { display:grid; grid-template-columns:37% 17% 22% 24%; align-items:center; }
.site-footer .footer-company-grid > div { min-width:0; }
.site-footer .footer-company-address { padding-right:28px; }
.site-footer .footer-company-contact { position:relative; padding-inline:clamp(20px,2.9vw,56px) 16px; overflow-wrap:anywhere; }
.site-footer .footer-company-contact::before { content:""; position:absolute; left:0; top:50%; width:1px; height:96px; transform:translateY(-50%); background:linear-gradient(transparent,#e8e8e8 25%,#e8e8e8 75%,transparent); }
@media (max-width:1399.98px) {
  .site-footer .footer-company-contact { padding-left:24px; }
}
@media (max-width:1199.98px) {
  .site-footer .footer-company-grid { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:32px; }
  .site-footer .footer-company-address { grid-column:1 / -1; padding-right:0; }
  .site-footer .footer-company-contact:nth-child(2) { padding-left:0; }
  .site-footer .footer-company-contact:nth-child(2)::before { display:none; }
}
@media (max-width:767.98px) {
  .site-footer .footer-company { padding:24px; }
  .site-footer .footer-company-grid { grid-template-columns:minmax(0,1fr); row-gap:0; }
  .site-footer .footer-company-contact { margin-top:20px; padding:20px 0 0; border-top:1px solid #ededed; }
  .site-footer .footer-company-contact::before { display:none; }
}

/* Footer typography from the Cloud Server PSD. */
.site-footer .footer-links .footer-item { font-size:15px !important; }
.site-footer .footer-links > div:first-child .footer-item { font-size:16px !important; }
.site-footer .footer-company-grid,
.site-footer .footer-company-grid p,
.site-footer .footer-company-grid h6,
.site-footer .footer-company-grid .fs-6,
.site-footer > .container > .row.small { font-size:15px !important; }
.site-footer .footer-company-grid,
.site-footer .footer-company-grid p,
.site-footer > .container > .row.small,
.site-footer > .container > .text-center > p,
.site-footer .info-card li a { font-family:"PlusJakartaSans Light",sans-serif !important; }
.site-footer .footer-company-grid h6,
.site-footer .footer-company-grid .font-pj-bold,
.site-footer .info-card h4 { font-family:"PlusJakartaSans Bold",sans-serif !important; font-synthesis:none; }