/* ============================================================
   Di Động An Phát — Mega-menu "Danh mục" (giống didongviet.vn)
   Cột trái: 5 danh mục cấp 1. Bảng phải: đổi theo danh mục rê chuột.
   Mở/đóng bằng cách BẤM nút DANH MỤC (JS toggle .dap-open).
   ============================================================ */

/* ---- Fly-out: chỉ mở khi có .dap-open (bấm nút). Tắt hover + luôn-mở của Flatsome ---- */
.header-vertical-menu > .header-vertical-menu__fly-out{
  width:1180px !important; max-width:calc(100vw - 96px);
  padding:0 !important; border-radius:0 0 14px 14px;
  box-shadow:0 24px 48px rgba(0,0,0,.16); overflow:hidden; border:1px solid #ececec;
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateY(-6px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.header-vertical-menu.dap-open > .header-vertical-menu__fly-out{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  transform:translateY(0);
}
.header-vertical-menu__opener{ cursor:pointer; }
.header-vertical-menu__opener .icon-angle-down{ display:none !important; }
/* DANH MỤC opener: gọn theo chữ + nền đỏ sáng (bỏ đỏ đậm #8d000b) */
.header .header-vertical-menu__opener{ width:auto !important; padding:10px 14px !important; background:#e01222 !important; }
.header .header-vertical-menu__opener:hover{ background:#c30f1c !important; }
/* Nhãn "DANH MỤC" → "Danh mục" (hoa chữ đầu, còn lại thường) */
.header .header-vertical-menu__title{ display:inline-block !important; text-transform:lowercase !important; }
.header .header-vertical-menu__title::first-letter{ text-transform:uppercase !important; }
/* Nút ☰ mở menu (mobile) — bỏ hình tròn đỏ, icon to hơn */
a.button.circle[data-open="#main-menu"]{ background:transparent !important; border:0 !important; box-shadow:none !important; width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; padding:0 6px !important; line-height:1 !important; }
a.button.circle[data-open="#main-menu"] i{ font-size:24px !important; color:#fff !important; }
/* Nav ngang: bỏ nền (active + hover), hover chỉ đổi màu chữ */
.header .header-bottom-nav > li > a{ background:transparent !important; }
.header .header-bottom-nav > li.active > a,
.header .header-bottom-nav > li.current-menu-item > a{ color:#fff !important; }
.header .header-bottom-nav > li:hover > a{ color:#ffe08a !important; }

/* ==== Homepage hero: 2 banner phải lấp đầy chiều cao slider (cover) ==== */
/* :has(> .col.large-9) chỉ khớp hàng hero (slider + banner), KHÔNG khớp lưới sản phẩm */
.section-content .row:has(> .col.large-9) > .col.large-3 > .col-inner{ height:100%; display:flex; flex-direction:column; gap:14px; }
.section-content .row:has(> .col.large-9) > .col.large-3 > .col-inner > .img{ flex:1 1 0; min-height:0; margin:0 !important; }
.section-content .row:has(> .col.large-9) > .col.large-3 > .col-inner > .img > .img-inner{ height:100%; }
.section-content .row:has(> .col.large-9) > .col.large-3 > .col-inner .img img{ width:100%; height:100%; object-fit:cover; }

.dap-mega{ display:flex; background:#fff; align-items:stretch; }

/* ---- Cột danh mục (trái) ---- */
.dap-mega-cats{ flex:0 0 236px; background:#f6f7f8; padding:8px 0; border-right:1px solid #e8eaed; }
.dap-mcat{ display:flex; align-items:center; gap:12px; padding:11px 20px; color:#1f2430; font-size:14.5px; font-weight:500; line-height:1.3; transition:background .15s, color .15s; }
.dap-mcat > i:first-child{ width:20px; text-align:center; color:#6b7280; font-size:15px; flex:0 0 auto; transition:color .15s; }
.dap-mcat span{ flex:1 1 auto; }
.dap-mcat-arrow{ font-size:11px; color:#c7ccd3; }
.dap-mcat:hover,
.dap-mcat.is-active{ background:#fff; color:#ed1c24; box-shadow:inset 3px 0 0 #ed1c24; }
.dap-mcat:hover > i,
.dap-mcat.is-active > i:first-child{ color:#ed1c24; }

/* ---- Vùng bảng phải: 5 bảng, chỉ bảng .is-active hiện ---- */
.dap-mega-panels{ flex:1 1 auto; min-height:300px; }
.dap-mega-panel{ display:none; min-height:300px; padding:22px 6px; }
.dap-mega-panel.is-active{ display:grid; }
.dap-panel-3col{ grid-template-columns:1.05fr 1.2fr 1fr; }
.dap-panel-2col{ grid-template-columns:1fr 1.15fr; }
.dap-panel-1col{ grid-template-columns:1fr; }
.dap-panel-head{ display:none; } /* chỉ hiện trên mobile */

.dap-mega-col{ padding:0 22px; border-right:1px solid #eef0f2; min-width:0; }
.dap-mega-col:last-child{ border-right:0; }
.dap-mega .dap-mega-h{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#1f2430; margin:0 0 18px !important; padding:0 0 10px !important; border-bottom:2px solid #ed1c24; display:inline-block; }

/* ---- Thương hiệu (logo, chip có sẵn viền) ---- */
.dap-brands{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 12px; }
.dap-brand{ display:block; border-radius:12px; transition:transform .2s ease, box-shadow .2s ease; }
.dap-brand:hover{ transform:translateY(-2px); box-shadow:0 7px 18px rgba(0,0,0,.12); }
.dap-brand img{ display:block; width:100%; height:auto; border-radius:12px; }
.dap-brand-txt,
.dap-brand span{ font-size:13px; font-weight:700; color:#1f2430; }

/* ---- Danh sách sản phẩm (ảnh + tên + giá) ---- */
.dap-mprods{ list-style:none; margin:0; padding:0; }
.dap-mprods li{ margin-bottom:9px; }
.dap-mprods li:last-child{ margin-bottom:0; }
.dap-mprods a{ display:flex; align-items:center; gap:11px; padding:7px 10px; border:1px solid #e8eaed; border-radius:10px; background:#fff; color:#374151; transition:border-color .2s ease, box-shadow .2s ease; }
.dap-mprods a:hover{ border-color:#ed1c24; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.dap-mprod-img{ width:44px; height:44px; flex:0 0 44px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fafafa; }
.dap-mprod-img img{ width:100%; height:100%; object-fit:contain; }
.dap-mprod-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dap-mprod-name{ font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.dap-mprods a:hover .dap-mprod-name{ color:#ed1c24; }
.dap-mprod-price{ display:none; }
.dap-mprod-price del{ color:#9aa0a6; font-weight:400; font-size:11px; margin-right:5px; }
.dap-mprod-price ins{ text-decoration:none; }

/* ---- Pill giá sốc ---- */
.dap-mpills{ display:flex; flex-direction:column; gap:9px; }
.dap-mpill{ display:block; padding:11px 14px; background:#fff; border:1px solid #e8eaed; border-radius:10px; color:#374151; font-size:13px; line-height:1.4; transition:border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.dap-mpill:hover{ border-color:#ed1c24; color:#ed1c24; box-shadow:0 4px 12px rgba(0,0,0,.05); }

/* ---- Danh sách tick (cam kết / ưu đãi) ---- */
.dap-mnote{ list-style:none; margin:0; padding:0; }
.dap-mnote li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:#374151; line-height:1.5; margin-bottom:12px; }
.dap-mnote li i{ color:#16a34a; font-size:14px; margin-top:2px; flex:0 0 auto; }

/* ---- Loại phụ kiện (subcats) ---- */
.dap-msubs{ display:flex; flex-direction:column; gap:4px; }
.dap-msub{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; color:#374151; font-size:13.5px; transition:background .18s, color .18s; }
.dap-msub i{ width:18px; text-align:center; color:#6b7280; font-size:14px; }
.dap-msub:hover{ background:#f6f7f8; color:#ed1c24; }
.dap-msub:hover i{ color:#ed1c24; }

/* ---- Thu cũ đổi mới (promo) ---- */
.dap-promo{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.dap-promo-head{ display:flex; align-items:center; gap:12px; }
.dap-promo-head .dap-mega-h{ margin:0 !important; padding-bottom:8px !important; }
.dap-promo-ic{ width:44px; height:44px; border-radius:12px; background:#fdecec; color:#ed1c24; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.dap-promo-text{ font-size:13.5px; color:#4b5563; line-height:1.6; margin:0; }
.dap-promo-call{ font-size:16px; font-weight:800; color:#1f2430; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.dap-promo-call i{ color:#ed1c24; }

/* ---- Quy trình (steps) ---- */
.dap-steps{ list-style:none; counter-reset:dstep; margin:0; padding:0; }
.dap-steps li{ counter-increment:dstep; position:relative; padding:0 0 18px 40px; font-size:13.5px; color:#374151; line-height:1.5; }
.dap-steps li:last-child{ padding-bottom:0; }
.dap-steps li:before{ content:counter(dstep); position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:50%; background:#ed1c24; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.dap-steps li:not(:last-child):after{ content:''; position:absolute; left:12.5px; top:26px; bottom:4px; width:1px; background:#e8eaed; }

/* ---- Công nghệ 24h (blog) ---- */
.dap-blog-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dap-blog-head .dap-mega-h{ margin:0 !important; }
.dap-blog-all{ font-size:13px; font-weight:600; color:#ed1c24; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.dap-blog-all:hover{ color:#c81119; }
.dap-blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dap-bpost{ display:flex; flex-direction:column; gap:9px; color:#1f2430; }
.dap-bpost-img{ display:block; border-radius:10px; overflow:hidden; aspect-ratio:16/10; background:#f2f3f5; }
.dap-bpost-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.dap-bpost:hover .dap-bpost-img img{ transform:scale(1.05); }
.dap-bpost-title{ font-size:13px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .18s; }
.dap-bpost:hover .dap-bpost-title{ color:#ed1c24; }
/* Blog: desktop chỉ 4 bài; panel 1 cột không viền phải */
@media (min-width:850px){ .dap-blog-grid .dap-bpost:nth-child(n+5){ display:none; } }
.dap-panel-1col .dap-mega-col{ border-right:0; }
/* Chủ đề (category) — pills */
.dap-blog-cats{ display:flex; flex-wrap:wrap; gap:9px; }
.dap-blog-cat{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid #e8eaed; border-radius:999px; background:#fff; color:#374151; font-size:13px; font-weight:600; transition:border-color .18s, color .18s; }
.dap-blog-cat:hover{ border-color:#ed1c24; color:#ed1c24; }
.dap-blog-cat em{ font-style:normal; font-size:11px; font-weight:700; color:#9aa0a6; background:#f2f3f5; border-radius:999px; padding:1px 8px; }

.dap-empty{ font-size:13px; color:#9aa0a6; font-style:italic; margin:0; }

/* ---- MOBILE: menu ☰ (off-canvas) → 2 cột kiểu didongviet ---- */
@media (max-width:849px){
  /* Fly-out desktop ẩn hẳn trên mobile */
  .header-vertical-menu > .header-vertical-menu__fly-out{ display:none !important; }

  /* Nới rộng drawer, chừa mép phải để chạm đóng + chặn tràn ngang */
  .mfp-wrap.off-canvas .mfp-content{ width:100vw !important; max-width:100vw !important; background:#fff !important; overflow:hidden !important; }
  #main-menu.mobile-sidebar{ width:100% !important; max-width:100% !important; overflow-x:hidden; }
  /* Ẩn tab MENU — chỉ còn DANH MỤC */
  #main-menu .sidebar-menu-tabs{ display:none !important; }
  /* Header đỏ + logo trắng (logo chính didonganphat bản light) */
  #main-menu .sidebar-menu-top-content{ background:#ed1c24; display:flex; align-items:center; min-height:56px; padding:0 16px; margin:0; }
  #main-menu .sidebar-menu-top-content #logo{ margin:0; padding:0; }
  #main-menu .sidebar-menu-top-content #logo img{ display:none; }
  #main-menu .sidebar-menu-top-content #logo a{ display:block; width:170px; height:46px; background:url(/wp-content/uploads/2026/06/didonganphat-logolight.png) left center / contain no-repeat; }
  /* Nút X đỏ đóng menu (góc trên phải) */
  .mfp-wrap.off-canvas .mfp-close{ opacity:1 !important; mix-blend-mode:normal !important; top:8px !important; right:8px !important; width:40px; height:40px; padding:0; background:transparent !important; color:#fff !important; border-radius:0; box-shadow:none; z-index:1200; display:flex; align-items:center; justify-content:center; }
  .mfp-wrap.off-canvas .mfp-close svg{ display:block !important; width:26px; height:26px; stroke:#fff !important; }
  #main-menu .sidebar-menu, #main-menu .sidebar-menu-tabs, #main-menu ul.nav-sidebar, #main-menu ul.nav-vertical{ width:100% !important; min-width:0; max-width:100%; }
  #main-menu .sidebar-menu{ padding:0 !important; }

  /* dap-mega = 2 cột: rail trái cố định + bảng phải cuộn dọc */
  #main-menu .dap-mega{ display:flex !important; align-items:flex-start; background:#fff; width:100%; min-width:0; max-width:100%; }
  #main-menu .dap-mega-cats{ flex:0 0 90px; min-width:0; background:#f6f7f8; border-right:1px solid #e8eaed; padding:4px 0; max-height:calc(100dvh - 60px); overflow-y:auto; }
  #main-menu .dap-mcat{ flex-direction:column; gap:6px; text-align:center; padding:12px 4px; font-size:11.5px; font-weight:500; line-height:1.25; box-shadow:none; }
  #main-menu .dap-mcat > i:first-child{ width:auto; font-size:21px; }
  #main-menu .dap-mcat .dap-mcat-arrow{ display:none; }
  #main-menu .dap-mcat.is-active{ background:#fff; color:#ed1c24; box-shadow:inset 3px 0 0 #ed1c24; }
  #main-menu .dap-mcat.is-active > i:first-child{ color:#ed1c24; }

  /* Vùng bảng phải cuộn dọc */
  #main-menu .dap-mega-panels{ display:block !important; flex:1 1 auto; min-width:0; max-width:100%; min-height:0; max-height:calc(100dvh - 60px); overflow-y:auto; padding:10px; background:#f2f3f5; }
  #main-menu .dap-mega-panel{ display:none !important; min-height:0; padding:0; }
  #main-menu .dap-mega-panel.is-active{ display:block !important; }

  /* Header bảng: tên + Xem tất cả */
  .dap-panel-head{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:2px 2px 10px; }
  #main-menu .dap-blog-head{ display:none !important; }
  .dap-ph-name{ font-size:16px; font-weight:700; color:#1f2430; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dap-ph-all{ font-size:13px; font-weight:600; color:#ed1c24; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex:0 0 auto; }

  /* Mỗi cột = thẻ trắng xếp dọc */
  #main-menu .dap-mega-col{ min-width:0; max-width:100%; border-right:0; padding:13px; background:#fff; border-radius:12px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
  #main-menu .dap-mega-col:last-child{ margin-bottom:0; }

  /* Thương hiệu 3/hàng */
  #main-menu .dap-brands{ grid-template-columns:repeat(3,1fr); gap:9px; }
  #main-menu .dap-msub{ min-width:0; }
  #main-menu .dap-msub span{ min-width:0; overflow-wrap:anywhere; }

  /* Sản phẩm → cuộn ngang, ảnh trên tên dưới */
  #main-menu .dap-mprods{ display:flex; min-width:0; gap:9px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  #main-menu .dap-mprods li{ flex:0 0 116px; min-width:0; margin-bottom:0; }
  #main-menu .dap-mprods a{ flex-direction:column; align-items:stretch; gap:7px; padding:8px; height:100%; }
  #main-menu .dap-mprod-img{ width:100%; height:auto; flex:none; aspect-ratio:1/1; }
  #main-menu .dap-mprod-name{ -webkit-line-clamp:2; font-size:12px; }
  #main-menu .dap-mprod-price{ font-size:12px; }

  /* Giá sốc → cuộn ngang */
  #main-menu .dap-mpills{ flex-direction:row; flex-wrap:nowrap; min-width:0; gap:8px; overflow-x:auto; padding-bottom:4px; }
  #main-menu .dap-mpill{ flex:0 0 auto; white-space:nowrap; }

  /* Blog → cuộn ngang */
  #main-menu .dap-blog-grid{ display:grid !important; grid-template-columns:1fr 1fr; min-width:0; gap:10px; overflow:visible; }
  #main-menu .dap-bpost{ flex:none; }
}