@font-face {
  font-family: 'LNTH';
  src: url('https://phannuhoangcungvn.com/wp-content/themes/hello-elementor/assets/fonts/LNTH-DecoTech.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SFUF';
  src: url('https://phannuhoangcungvn.com/wp-content/themes/hello-elementor/assets/fonts/SFUFuturaBook.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --phn-header-height: 84px;
  --font-primary: 'LNTH', serif;
  --font-secondary: 'SFUF', sans-serif;
  --color-primary: #8B0001;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body.phn-menu-open {
  overflow: hidden;
}

/* 1. HEADER CHÍNH */
.phn-main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 60px !important;
    z-index: 100001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    transition: all 0.35s ease;
    border: none !important;
}

body:not(.elementor-editor-active) {
  padding-top: var(--phn-header-height) !important;
}

.header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    flex: 1 !important;
}

.header-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    justify-content: flex-end !important;
    flex: 1 !important;
}

/* FIX ICON NHỎ GỌN, TINH TẾ */
.pnhc-nav-icons .elementor-icon {
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    width: 38px !important; /* Thu nhỏ lại */
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pnhc-nav-icons .elementor-icon i {
    font-size: 16px !important;
    color: #ffffff !important;
}

.pnhc-logo img {
    height: 60px !important;
    width: auto !important;
}

.phn-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--color-primary);
    font-size: 32px;
    font-family: var(--font-primary);
    text-shadow: 0.6px 0 var(--color-primary);
}

/* 2. MEGA MENU - ÉP ẨN MẶC ĐỊNH */
.phn-mega-menu {
    position: fixed !important;
    top: var(--phn-header-height) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--phn-header-height)) !important;
    background-image: url('https://res.cloudinary.com/dwehvxlcv/image/upload/v1774417706/GIAI_%C4%90O%E1%BA%A0N_1_3_gew1tz.png');
    background-size: cover;
    background-position: center;
    z-index: 100000 !important;

    /* QUAN TRỌNG: Mặc định phải ẩn đi */
    display: none !important; 
}

/* HIỆN RA KHI CÓ CLASS ACTIVE (KHI BẤM NÚT) */
.phn-mega-menu.active {
    display: flex !important; 
    padding: 60px 10% !important;
    gap: 60px !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

.phn-menu-left {
    flex: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.phn-menu-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

.phn-menu-item {
    font-family: var(--font-primary);
    font-size: 38px;
    color: var(--color-primary);
    text-decoration: none;
    transition: 0.3s;
}

.phn-menu-right {
    flex: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
}

.phn-preview-image {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 3. HIỆU ỨNG CUỘN & NÚT ĐÓNG */
.phn-main-header.phn-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.phn-close-btn {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    cursor: pointer;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .phn-main-header { padding: 0 20px !important; }
    .phn-mega-menu.active { flex-direction: column !important; padding: 40px 20px !important; }
    .phn-menu-item { font-size: 28px; }
}