/* =====================================================================
 * HERO PHỤ TÙNG – Khối banner trang chủ
 * Element: [ptc_cat_menu]  (Menu danh mục dọc có flyout ↔ lưới icon mobile)
 * Layout desktop 3 cột (menu | slider | KM) ghép bằng Row/Col Flatsome.
 * Nhân viên chỉ đổi NỘI DUNG (menu + ảnh slider + banner), không đụng CSS.
 * ===================================================================== */

:root{
  --ptc-menu-w: 260px;
  --ptc-hero-h: 460px;
}

/* ---- Nền hero bung FULL chiều ngang màn hình ---- */
.ptc-hero-section{
  width: auto !important;          /* đè .section{width:100%} của Flatsome để margin âm nới được */
  max-width: none !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- HÀNG HERO full chiều ngang ---- */
.ptc-hero-row{ align-items: stretch; }
.ptc-hero-row > .col{ padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.ptc-hero-row .col-inner{ height: 100%; }

/* Menu cần position:relative + cho phép flyout tràn ra ngoài */
.ptc-hero-col--menu,
.ptc-hero-col--menu .col-inner{ position: relative; overflow: visible; z-index: 20; }

/* Chiều cao đồng bộ giữa 3 cột trên desktop */
.ptc-hero-col--slider .ux_banner,
.ptc-hero-col--slider .ux-slider-wrapper,
.ptc-hero-col--slider .slider,
.ptc-hero-col--slider .flickity-viewport,
.ptc-hero-col--slider .flickity-slider,
.ptc-hero-col--slider .banner-inner,
.ptc-hero-col--slider .bg{ height: var(--ptc-hero-h) !important; min-height: var(--ptc-hero-h); }
/* Ảnh nền banner luôn phủ đầy khung (không bị giới hạn/lệch) */
.ptc-hero-col--slider .bg{ background-size: cover !important; background-position: center center !important; }

/* ---- CỘT KHUYẾN MÃI (3 banner xếp dọc, chia đều chiều cao) ---- */
.ptc-hero-col--promo .col-inner{ display: flex; flex-direction: column; gap: 12px; }
.ptc-hero-col--promo .ux_banner{
  flex: 1 1 0; height: auto !important; min-height: 0;
  border-radius: var(--ds-radius, 10px); overflow: hidden;
}

/* =====================================================================
 * ELEMENT: MENU DANH MỤC  (.ptc-catmenu)
 * ===================================================================== */
.ptc-catmenu{
  --pcm-cols: 3;
  font-family: var(--ds-font, inherit);
  background: var(--ds-bg, #fff);
  border: 1px solid var(--ds-border, #E6EAF0);
  border-radius: var(--ds-radius, 10px);
  box-shadow: var(--ds-shadow, 0 6px 20px rgba(11,32,46,.08));
  height: 100%;
  display: flex; flex-direction: column;
  overflow: visible;           /* QUAN TRỌNG: để flyout tràn sang phải, không bị cắt */
}
.ptc-catmenu__title{
  flex: 0 0 auto;
  background: var(--ds-primary, #0A57C2);
  color: #fff; font-weight: 700; font-size: .95rem;
  letter-spacing: .3px; text-transform: uppercase;
  padding: 12px 16px; display: flex; align-items: center; gap: 8px;
  border-radius: var(--ds-radius, 10px) var(--ds-radius, 10px) 0 0;  /* bo 2 góc trên */
}
.ptc-catmenu__title i{ font-size: 1.05rem; }

.ptc-catmenu__list{
  list-style: none; margin: 0; padding: 6px 0;
  flex: 1 1 auto; overflow: visible;   /* không clip -> flyout hiển thị đầy đủ */
}

.ptc-catmenu__item{ position: relative; margin: 0 !important; padding: 0; list-style: none; }
.ptc-catmenu__link{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px; color: var(--ds-text, #11202E);
  font-size: .9rem; font-weight: 600; line-height: 1.25;
  text-decoration: none; transition: background .15s, color .15s;
}
.ptc-catmenu__icon{
  flex: 0 0 22px; width: 22px; text-align: center;
  color: var(--ds-primary, #0A57C2); font-size: 1rem; transition: color .15s;
}
.ptc-catmenu__label{ flex: 1 1 auto; }
.ptc-catmenu__arrow{ flex: 0 0 auto; font-size: .7rem; color: #9aa3b0; transition: transform .15s, color .15s; }

.ptc-catmenu__item:hover > .ptc-catmenu__link{
  background: var(--ds-primary-soft, #E8F0FB); color: var(--ds-primary-dark, #073B82);
}
.ptc-catmenu__item:hover > .ptc-catmenu__link .ptc-catmenu__icon{ color: var(--ds-secondary, #FF7A1A); }
.ptc-catmenu__item:hover > .ptc-catmenu__link .ptc-catmenu__arrow{ color: var(--ds-secondary, #FF7A1A); }

/* ---- FLYOUT (submenu mở sang phải, đè lên slider) ---- */
.ptc-catmenu__flyout{
  position: absolute; top: -6px; left: 100%;
  min-width: 230px; max-width: 320px;
  background: #fff; border: 1px solid var(--ds-border, #E6EAF0);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(11,32,46,.16);
  padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.ptc-catmenu__item.has-sub:hover > .ptc-catmenu__flyout{
  opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
}
.ptc-catmenu__sublist{ list-style: none; margin: 0; padding: 0; }
.ptc-catmenu__sublist .ptc-catmenu__sublist{ margin: 2px 0 4px 10px; border-left: 2px solid var(--ds-primary-soft,#E8F0FB); }
.ptc-catmenu__sublink{
  display: block; padding: 8px 12px; border-radius: 7px;
  color: var(--ds-text, #11202E); font-size: .875rem; font-weight: 500;
  text-decoration: none; transition: background .14s, color .14s;
}
.ptc-catmenu__sublink:hover{ background: var(--ds-primary-soft,#E8F0FB); color: var(--ds-primary-dark,#073B82); }
.ptc-catmenu__subitem--head > .ptc-catmenu__sublink{ font-weight: 700; color: var(--ds-primary-dark,#073B82); }

.ptc-catmenu--empty{
  padding: 24px; text-align: center; color: var(--ds-muted,#5B6470);
  background: var(--ds-bg-soft,#F4F6F9); border: 1px dashed var(--ds-border,#E6EAF0);
  border-radius: var(--ds-radius,10px); font-size: .9rem;
}

/* =====================================================================
 * MOBILE  (≤849px): menu -> LƯỚI ICON, slider lên trên cùng
 * ===================================================================== */
@media (max-width: 849px){
  /* FULL-BLEED trên mobile: bỏ mọi padding/gutter 2 bên để tràn sát mép */
  .ptc-hero-section{
    padding-left: 0 !important; padding-right: 0 !important;
    padding-top: 0 !important;           /* bỏ đệm trên trong section */
    margin-top: -20px !important;        /* kéo banner xít lên gần header */
  }
  .ptc-hero-row.row{ margin-left: 0 !important; margin-right: 0 !important; }
  /* Ép 3 cột xếp chồng full-width (đè class medium-3 của Flatsome) */
  .ptc-hero-row > .col.ptc-hero-col{
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-bottom: 12px;
  }
  /* Slider tràn sát mép; tiêu đề + lưới giữ lề nhỏ cho dễ đọc */
  .ptc-catmenu__title{ padding-left: 12px; padding-right: 12px; }
  .ptc-catmenu__list{ padding-left: 10px; padding-right: 10px; }
  .ptc-hero-col--slider{ order: 1; }
  .ptc-hero-col--menu{ order: 2; }
  .ptc-hero-col--promo{ display: none !important; }   /* ẨN 3 banner dọc trên mobile */
  .ptc-hero-col--menu,
  .ptc-hero-col--menu .col-inner{ overflow: visible; }

  /* Slider thấp lại cho cân đối màn hình đứng */
  :root{ --ptc-hero-h: 300px; }
  /* Chữ trên slider nhỏ lại cho vừa khung mobile (tránh tràn) */
  .ptc-hero-col--slider h2{ font-size: 1.5rem !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
  .ptc-hero-col--slider p{ font-size: .82rem !important; line-height: 1.3 !important; }

  .ptc-catmenu{ border: 0; box-shadow: none; background: transparent; height: auto; }
  .ptc-catmenu__title{
    background: transparent; color: var(--ds-text,#11202E);
    padding: 4px 4px 12px; font-size: 1rem;
    justify-content: center;      /* canh giữa icon + chữ tiêu đề trên mobile */
  }
  .ptc-catmenu__title i{ color: var(--ds-primary,#0A57C2); }

  .ptc-catmenu__list{
    display: grid; grid-template-columns: repeat(var(--pcm-cols), 1fr);
    gap: 9px; padding: 2px; overflow: visible;
  }
  .ptc-catmenu__item{ position: static; }
  .ptc-catmenu__link{
    flex-direction: column; gap: 7px; text-align: center;
    padding: 11px 6px; border-radius: 12px;
    background: var(--ds-primary-soft,#E8F0FB);
    width: 100%; box-sizing: border-box;   /* lấp đầy ô lưới -> hết lệch phải, cân giữa đều */
    height: 100%; justify-content: flex-start;
    border: 1px solid rgba(11,32,46,.04);
  }
  .ptc-catmenu__icon{
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; box-shadow: 0 2px 6px rgba(11,32,46,.10);
  }
  /* Nhãn: giữ chỗ 2 dòng để mọi ô cao bằng nhau, gọn gàng */
  .ptc-catmenu__label{
    flex: 0 0 auto; font-size: .72rem; font-weight: 600; line-height: 1.2;
    min-height: 2.4em; display: flex; align-items: center; justify-content: center;
  }
  .ptc-catmenu__arrow{ display: none; }
  .ptc-catmenu__flyout{ display: none !important; }

  /* Bảng màu pastel xoay vòng cho các ô icon (giống ảnh mẫu) */
  .ptc-catmenu__item:nth-child(6n+1) .ptc-catmenu__link{ background:#FCE4EC; }
  .ptc-catmenu__item:nth-child(6n+2) .ptc-catmenu__link{ background:#E3F2FD; }
  .ptc-catmenu__item:nth-child(6n+3) .ptc-catmenu__link{ background:#FFF8E1; }
  .ptc-catmenu__item:nth-child(6n+4) .ptc-catmenu__link{ background:#E8F5E9; }
  .ptc-catmenu__item:nth-child(6n+5) .ptc-catmenu__link{ background:#F3E5F5; }
  .ptc-catmenu__item:nth-child(6n+6) .ptc-catmenu__link{ background:#E0F7FA; }
  .ptc-catmenu__item .ptc-catmenu__icon{ color: var(--ds-primary,#0A57C2); }
}

@media (max-width: 549px){
  :root{ --ptc-hero-h: 100vw; }        /* banner VUÔNG 1:1 trên điện thoại, ảnh phủ đầy khung */
  .ptc-hero-col--slider h2{ font-size: 1.25rem !important; }
  .ptc-hero-col--slider p{ font-size: .78rem !important; }
  .ptc-catmenu__list{ gap: 8px; }
  .ptc-catmenu__link{ padding: 12px 4px; }
  .ptc-catmenu__label{ font-size: .72rem; }
}