/* Custom visual refinements: typography, spacing, buttons, header, and mobile tweaks */

:root{
  --primary: #0a2540; /* deep navy hoàng gia sâu thẳm */
  --accent: #d4af37;  /* warm gold metallic lấp lánh */
  --accent-dark: #b8860b;
  --text: #2c3e50;    /* xám xanh đen lịch lãm dễ đọc */
  --muted: #475569;   /* xám đậm phụ đảm bảo độ tương phản cao */
  --bg: #ffffff;
  --radius: 12px;     /* Bo góc 12px hiện đại hơn */
  --base-font-size: 16px;
}

html,body{background-color:var(--bg);}
body{
  font-size:var(--base-font-size);
  line-height:1.7;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings — balanced scale & premium size for web readability */
h1{font-size:clamp(32px,5.2vw,64px);line-height:1.1;margin-bottom:.6em;color:var(--primary);font-weight:700;}
h2{font-size:clamp(24px,4.2vw,48px);line-height:1.15;color:var(--primary);font-weight:700;}
h3{font-size:clamp(20px,3.2vw,32px);line-height:1.2;font-weight:600;}

.main-title,.section-title h2{color:var(--primary)}

/* Custom header CTA button refinement */
.header-cta-btn {
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 11px 20px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important; /* Bo góc nhẹ thanh lịch cho header */
    letter-spacing: 0.5px !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15) !important;
    min-height: 40px !important;
    width: auto !important;
}
.header-cta-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3) !important;
}

/* Header Layout & Height Tweak - Desktop (>= 992px) */
@media (min-width: 992px) {
    header.second-header {
        min-height: 88px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 0 !important;
        background: var(--primary) !important; /* Sử dụng nền xanh navy tối hoàng gia để hiển thị nổi bật logo trắng */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }
    header.second-header .container {
        display: block !important;
        width: 100% !important;
    }
    header.second-header .row {
        display: flex !important;
        align-items: center !important; /* Căn dọc tuyệt đối thẳng hàng logo, menu, nút */
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    header.second-header .col-lg-2 {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
        display: flex !important;
        align-items: center !important;
    }
    header.second-header .col-lg-7 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    header.second-header .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    /* Logo styling */
    .second-logo img {
        max-height: 52px !important;
        height: auto !important;
        width: auto !important;
        transition: transform 0.3s ease !important;
    }
    .second-logo img:hover {
        transform: scale(1.03) !important;
    }
    /* Menu alignment vertically and seamless dark blending */
    #cssmenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: transparent !important; /* Đặt nền trong suốt để menu tiệp với nền xanh navy của header */
        border: none !important;
    }
    #cssmenu > ul {
        background: transparent !important;
    }
}

/* Header Layout & Height Tweak - Mobile (< 992px) */
@media (max-width: 991px) {
    header.second-header {
        padding: 16px 0 !important; /* Tăng padding để tạo khoảng thở rộng rãi trên dưới */
        min-height: 82px !important; /* Tăng chiều cao tối thiểu của header mobile tránh nén logo */
        background: var(--primary) !important; /* Giữ nền xanh navy tối hoàng gia trên mobile */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    }
    .header-cta-btn {
        display: none !important; /* Ẩn nút cta bị vỡ/lỗi trên mobile header */
    }
    header.second-header .row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    header.second-header .col-md-2 {
        flex: 0 0 auto !important;
        max-width: 65% !important; /* Nới rộng không gian cột logo */
        display: flex !important;
        align-items: center !important;
    }
    header.second-header .col-md-10 {
        flex: 0 0 auto !important;
        max-width: 35% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .second-logo img {
        max-height: 48px !important; /* Tăng kích thước logo di động to rõ, không bị nén */
        height: auto !important;
        width: auto !important;
    }
}


/* Navigation */
#cssmenu{background:var(--primary) !important;border-bottom:0}
#cssmenu>ul>li>a{color:#fff !important;padding:18px 14px !important;font-size:13px !important}
#cssmenu ul ul{background:#fff !important}
#cssmenu ul ul li a{color:#222 !important;background:#fff !important}

/* Sticky navbar refinement */
nav.navbar.sticky{box-shadow:0 8px 30px rgba(0,0,0,0.06);background:#fff}
.navbar-brand img{max-height:48px}

/* Buttons */
.btn{padding:10px 20px;border-radius:var(--radius);font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
.btn.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:0;box-shadow:0 8px 22px rgba(199,154,42,0.18)}
.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.14)}

/* Containers & spacing */
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}
.section-padding{padding-top:60px;padding-bottom:60px}

/* Cards, panels */
.card,.panel,.single-featured{border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,0.04);padding:20px;background:#fff}

/* Images */
img{border-radius:8px}

/* Footer - Tăng cường độ tương phản */
.footer-area{background:#f8fafc;color:var(--muted)}
.footer-area a{color:#475569}
.footer-area a:hover{color:var(--accent)}

/* Hero tweaks */
.main-slider-welcome-text{min-height:260px;display:flex;align-items:center}

/* Mobile adjustments */
@media (max-width:991px){
  #cssmenu{background:var(--primary)}
  #cssmenu>ul>li>a{padding:14px 12px !important;font-size:14px !important}
  h1{font-size:clamp(22px,6vw,36px)}
  .btn.btn-primary{width:100%;padding:14px 16px;font-size:16px}
  .section-padding{padding-top:40px;padding-bottom:40px}
  
  /* SỬA LỖI CHỮ TỐI TRÊN NỀN TỐI Ở MENU CON DI ĐỘNG */
  #cssmenu ul ul {
    background: var(--primary) !important;
  }
  #cssmenu ul ul li a {
    color: #ffffff !important; /* Chữ trắng cực kỳ rõ nét */
    background: rgba(255, 255, 255, 0.05) !important; /* Nền xanh tối hoàng gia nhạt hơn */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  #cssmenu ul ul li a:hover {
    background: var(--accent) !important;
    color: var(--primary) !important;
  }
}

@media (max-width:480px){
  h2.main-title{font-size:28px;line-height:36px}
  .second-logo img{max-height:44px !important} /* Tăng logo trên màn hình cực nhỏ */
  .single-header-bottom .content{font-size:14px}
  header.second-header{min-height:76px !important; height: auto !important; padding:10px 0 !important;} /* Tăng nhẹ chiều cao header di động nhỏ */
  #cssmenu{margin-top:0px !important}
}

/* Subtle link hover */
a{color:var(--primary);transition:color .18s ease}
a:hover{color:var(--accent)}

/* Accessibility: increase tap targets */
#cssmenu>ul>li>a{min-height:44px;display:flex;align-items:center}

/* Reduce visual noise for small screens */
@media (max-width:767px){
  .section-title{margin-bottom:30px}
}

/* End of custom overrides */