/* ============================================================
   FLATSOME OVERRIDES — Quang Trung Child Theme
   ============================================================
   File này chứa các CSS override cho nội dung hardcode trong
   WordPress database: Flatsome Header Builder, Customizer,
   Widget areas... không thể sửa qua PHP template.

   CÁCH SỬ DỤNG:
   - Mỗi override phải có comment ghi rõ:
       [KHU VỰC]  : Header / Footer / Sidebar / v.v.
       [NGUỒN]    : Header Builder / Customizer / Widget / v.v.
       [VẤN ĐỀ]   : Tại sao phải override bằng CSS
       [FIX ĐÚNG] : Cách fix "đúng gốc" nếu muốn xóa override này
   ============================================================ */


/* ------------------------------------------------------------
   HEADER — Logo tagline text
   [NGUỒN]    : Flatsome Header Builder (Appearance > Header)
   [VẤN ĐỀ]   : Text "TRƯỜNG CAO ĐẲNG NGHỀ" hardcode trong DB,
                 chưa được sửa trong Header Builder
   [FIX ĐÚNG] : Vào WP Admin > Appearance > Header > tìm HTML block
                 đổi thành "TRƯỜNG TRUNG CẤP", rồi xóa cả rule này lẫn
                 rule tương ứng trong global.css section LOGO TEXT
   [GHI CHÚ]  : Rule CSS thực tế nằm trong global.css (section LOGO TEXT)
                 để deploy 1 file duy nhất lên server
   ------------------------------------------------------------ */
/* (rule đã được đặt trong global.css để tránh phải upload file mới) */


/* ------------------------------------------------------------
   HEADER — Ẩn desktop nav row trên mobile
   [NGUỒN]    : Flatsome Header Builder (Desktop row: Logo + Nav)
   [VẤN ĐỀ]   : Inspect xác nhận class: .flex-col.show-for-medium.flex-left
                 là cột nav desktop đang hiện trên mobile.
                 Flatsome Foundation breakpoint không match với viewport.
   [FIX ĐÚNG] : Header Builder → hover row LOGO+Main Menu
                 → bánh răng → bật "Hide on Mobile"
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* "Left/Right Elements" = desktop nav (hide-for-medium) đang hiện sai trên mobile.
     Foundation CSS cho .hide-for-medium không apply đúng → force ẩn tại đây.
     Hamburger nằm trong .show-for-medium → không bị ảnh hưởng. */
  #header .header-inner .flex-col.hide-for-medium {
    display: none !important;
  }
}


/* ------------------------------------------------------------
   HEADER — Logo căn trái mobile (sát hamburger)
   [NGUỒN]    : Flatsome Header Builder Mobile/Tablet
   [VẤN ĐỀ]   : Flatsome dùng position:absolute + left:50% + translateX(-50%)
                 để center logo trên mobile → logo nằm giữa, xa hamburger.
   [FIX ĐÚNG] : Header Builder → Mobile/Tablet tab → kéo LOGO vào LEFT column
                 (cùng ô với Nav Icon) → xóa rule này.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  #header #logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
  }

  /* Co cột hamburger lại để logo không bị đẩy xa */
  #header .header-inner .flex-col.show-for-medium.flex-left {
    flex: 0 0 auto !important;
  }
}