/* =========================================================================
   FreeMockup.vn – "Dark Studio" – shared stylesheet
   Tách từ <style> inline trong template-trang-chu-dark.php và category.php
   để enqueue qua functions.php của child theme Flatsome.
   (xem file fmvn-enqueue.php đi kèm để biết cách gắn vào child theme)
   ========================================================================= */

/* Nền mặc định của <body> — hiển thị ngay trước khi #fmvn-home render,
   tránh nháy sai màu khi tải trang. */
body{margin:0;background:#0B0C10;}
html[data-fmvn-theme="light"] body{background:#F4F4F6;}

/* ===== #fmvn-home – scoped styles (dùng chung cho trang chủ & trang danh mục) ===== */
#fmvn-home{
  --surface: #121317;
  --surface-deep: #0B0C10;
  --surface-container-lowest: #0d0e12;
  --surface-container-low: #1a1b20;
  --surface-container: #1f1f24;
  --surface-container-high: #292a2e;
  --surface-raised: #1E1E1E;
  --surface-variant: #343439;
  --surface-bright: #38393e;
  --outline-variant: #454654;
  --on-surface: #e3e2e8;
  --on-surface-variant: #c5c5d7;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --primary: #bdc2ff;
  --on-primary: #00149e;
  --primary-container: #0b20b6;
  --on-primary-container: #949fff;
  --electric-blue: #0B20B6;
  --header-bg: rgba(18,19,23,.9);
  --radius-sm: .25rem; --radius: .5rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--on-surface);
  background: var(--surface);
  position: relative;
  isolation: isolate;
  transition:background .2s,color .2s;
}
/* ----- Giao diện SÁNG (bật qua nút chuyển đổi, mặc định vẫn là tối) ----- */
html[data-fmvn-theme="light"] #fmvn-home{
  --surface: #F4F4F6;
  --surface-deep: #FFFFFF;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #FFFFFF;
  --surface-container: #EDEDF1;
  --surface-container-high: #E3E3E9;
  --surface-raised: #FFFFFF;
  --surface-variant: #E0E0E6;
  --surface-bright: #FFFFFF;
  --outline-variant: #D6D6DE;
  --on-surface: #1B1B1F;
  --on-surface-variant: #4B4B55;
  --text-primary: #0B0C10;
  --text-secondary: #5B5B66;
  --primary: #2F3FC9;
  --on-primary: #FFFFFF;
  --primary-container: #DDE0FF;
  --on-primary-container: #1F30C0;
  --electric-blue: #0B20B6;
  --header-bg: rgba(255,255,255,.85);
}
#fmvn-home *{box-sizing:border-box;}
#fmvn-home a{text-decoration:none;color:inherit;}
#fmvn-home ul{list-style:none;margin:0;padding:0;}
#fmvn-home button{font-family:inherit;cursor:pointer;border:none;}
#fmvn-home input{font-family:inherit;}
#fmvn-home img{max-width:100%;display:block;}
#fmvn-home .material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:20px; line-height:1; user-select:none;
}
#fmvn-home::-webkit-scrollbar{display:none;}

.fmvn-headline-lg{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:32px;line-height:40px;}
.fmvn-headline-md{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:20px;line-height:28px;}
.fmvn-label-lg{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;line-height:20px;letter-spacing:.05em;}
.fmvn-label-sm{font-family:'Inter',sans-serif;font-weight:500;font-size:12px;line-height:16px;}

/* ---------- Layout shell ---------- */
#fmvn-home .fmvn-shell{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
#fmvn-home .fmvn-sidebar{
  position:fixed; left:0; top:0; bottom:0; width:260px; z-index:60;
  background:var(--surface-container-low);
  border-right:1px solid rgba(69,70,84,.2);
  display:flex; flex-direction:column;
  padding:24px 0; overflow-y:auto;
  transition:left .25s ease;
}
#fmvn-home .fmvn-logo{padding:0 24px 28px;display:flex;justify-content:center;}
#fmvn-home .fmvn-logo img{height:46px;width:auto;object-fit:contain;}
/* Tối -> logo Light Version, Sáng -> logo mặc định Flatsome */
#fmvn-home .fmvn-logo-light{display:none;}
html[data-fmvn-theme="light"] #fmvn-home .fmvn-logo-dark{display:none;}
html[data-fmvn-theme="light"] #fmvn-home .fmvn-logo-light{display:block;}
#fmvn-home .fmvn-nav{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:4px;}
#fmvn-home .fmvn-nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;
  color:var(--on-surface-variant); transition:background .15s,color .15s;
}
#fmvn-home .fmvn-nav-item:hover{color:var(--text-primary);background:rgba(52,52,57,.5);}
#fmvn-home .fmvn-nav-item.active{background:rgba(189,194,255,.1);color:var(--primary);}
#fmvn-home .fmvn-nav-item .fmvn-chevron{margin-left:auto;}

/* Nhãn tiêu đề nhóm trong sidebar (VD: "THƯ VIỆN") — dùng cho các mục hiện trực
   tiếp trong sidebar, không cần bấm mở như nav-group có mega panel. */
#fmvn-home .fmvn-nav-section-label{
  padding:16px 16px 4px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
#fmvn-home .fmvn-nav-group{position:relative;}
/* Bảng menu mở khi hover/bấm. position:fixed + backdrop-blur, chỉ phủ phần bên phải
   sidebar. Toàn bộ kích thước (padding/khoảng cách/cỡ chữ) dùng clamp() theo vh để TỰ
   CO GIÃN vừa chiều cao màn hình, hạn chế tối đa việc phải hiện thanh cuộn; overflow-y:auto
   chỉ là lưới an toàn cho các màn hình cực thấp. Nội dung căn giữa theo chiều dọc. */
#fmvn-home .fmvn-mega{
  display:none; position:fixed; top:0; left:260px; right:0; bottom:0; margin:0; max-width:none;
  background:rgba(8,9,12,.82); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  border:none; border-radius:0; box-shadow:none; z-index:300;
  /* padding-top canh ngang hàng với mục "Free Mockups" ở sidebar (24px padding sidebar +
     60px khối logo + ~24px nửa trên item) thay vì canh giữa màn hình */
  padding:100px 56px clamp(20px,4vh,40px); overflow-y:auto;
  gap:24px; flex-direction:column; justify-content:flex-start;
}
#fmvn-home .fmvn-nav-group:hover .fmvn-mega,
#fmvn-home .fmvn-nav-group.fmvn-open .fmvn-mega{display:flex;}
#fmvn-home .fmvn-mega-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  row-gap:clamp(12px,2.6vh,24px);column-gap:40px;max-width:100%;width:100%;
}
/* Bảng menu này luôn có nền tối làm mờ (spotlight), không đổi theo theme sáng/tối của
   trang — nên chữ trong bảng dùng màu cố định thay vì biến theo theme để luôn rõ nét. */
#fmvn-home .fmvn-mega-grid h4{
  margin:0 0 clamp(6px,1.2vh,12px);color:#A6A6B3;font-family:'Inter',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
#fmvn-home .fmvn-mega-grid h4::after{content:" ↘";opacity:.6;}
#fmvn-home .fmvn-mega-grid ul{display:flex;flex-direction:column;gap:clamp(5px,1vh,10px);}
#fmvn-home .fmvn-mega-grid a{
  color:#FFFFFF;font-family:'Hanken Grotesk',sans-serif;font-weight:600;
  font-size:clamp(15px,1.9vh,21px);line-height:1.2;letter-spacing:-0.01em;transition:color .15s,opacity .15s;
}
#fmvn-home .fmvn-mega-grid a:hover{color:#bdc2ff;}
#fmvn-home .fmvn-mega-foot{
  margin-top:clamp(10px,2vh,20px);padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  text-align:left;font-style:italic;font-size:13px;color:#A6A6B3;max-width:100%;
}
#fmvn-home .fmvn-mega-close{
  display:flex;position:fixed;top:24px;right:32px;width:44px;height:44px;border-radius:999px;
  background:rgba(255,255,255,.08);color:#FFFFFF;align-items:center;justify-content:center;
  z-index:301;transition:background .15s;
}
#fmvn-home .fmvn-mega-close:hover{background:rgba(255,255,255,.16);}
@media (max-width:1024px){
  /* Sidebar chuyển thành drawer ẩn (không chiếm chỗ) nên bảng menu phủ full-width */
  #fmvn-home .fmvn-mega{left:0;padding:clamp(56px,10vh,88px) 24px clamp(20px,4vh,32px);}
  #fmvn-home .fmvn-mega-grid{grid-template-columns:1fr;row-gap:clamp(12px,2.4vh,24px);column-gap:24px;}
  #fmvn-home .fmvn-mega-grid a{font-size:clamp(15px,2.4vh,19px);}
}
#fmvn-home .fmvn-sidebar-foot{padding:16px 24px 0;}
#fmvn-home .fmvn-social-row{display:flex;align-items:center;justify-content:center;gap:12px;}
#fmvn-home .fmvn-social-btn{
  width:40px;height:40px;border-radius:999px;background:var(--surface-variant);color:var(--on-surface-variant);
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
#fmvn-home .fmvn-social-btn:hover{background:var(--surface-bright);color:var(--primary);}

/* Mobile sidebar toggle */
#fmvn-home .fmvn-burger{display:none;}
#fmvn-home .fmvn-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;}

/* ---------- Main ---------- */
#fmvn-home .fmvn-main{flex:1;margin-left:260px;position:relative;min-width:0;}
#fmvn-home .fmvn-ambient{position:absolute;top:0;left:0;right:0;height:600px;overflow:hidden;pointer-events:none;z-index:0;}
#fmvn-home .fmvn-ambient span{position:absolute;border-radius:999px;filter:blur(120px);}
#fmvn-home .fmvn-ambient span:nth-child(1){top:-256px;left:50%;transform:translateX(-50%);width:800px;height:800px;background:rgba(189,194,255,.05);}
#fmvn-home .fmvn-ambient span:nth-child(2){top:128px;right:10%;width:400px;height:400px;background:rgba(11,32,182,.1);filter:blur(100px);}

#fmvn-home .fmvn-header{
  position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(10px);
  padding:24px 32px 16px;display:flex;align-items:center;justify-content:center;position:relative;
  border-bottom:1px solid rgba(69,70,84,.1);
}
#fmvn-home .fmvn-theme-toggle{position:absolute;right:32px;top:50%;transform:translateY(-50%);}
/* Icon hiển thị đúng theo giao diện hiện tại: mặt trăng khi đang Tối, mặt trời khi đang Sáng */
#fmvn-home .fmvn-theme-toggle .fmvn-theme-icon-light{display:none;}
html[data-fmvn-theme="light"] #fmvn-home .fmvn-theme-toggle .fmvn-theme-icon-dark{display:none;}
html[data-fmvn-theme="light"] #fmvn-home .fmvn-theme-toggle .fmvn-theme-icon-light{display:inline-flex;}
#fmvn-home .fmvn-icon-btn{
  width:40px;height:40px;border-radius:999px;background:var(--surface-container);
  display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant);transition:color .15s;
}
#fmvn-home .fmvn-icon-btn:hover{color:var(--text-primary);}
#fmvn-home .fmvn-burger{position:absolute;left:32px;top:50%;transform:translateY(-50%);}
/* Ô tìm kiếm dùng chính search form của Flatsome (get_search_form) — reskin lại cho hợp dark theme.
   Căn giữa toàn bộ header thay vì lấp khoảng trống còn lại. */
#fmvn-home .fmvn-search{width:100%;max-width:640px;margin:0 auto;position:relative;}
#fmvn-home .fmvn-search .searchform-wrapper{width:100%;}
#fmvn-home .fmvn-search form,
#fmvn-home .fmvn-search .searchform{margin:0;width:100%;position:relative;}
#fmvn-home .fmvn-search .flex-row{display:flex;align-items:center;width:100%;margin:0;}
#fmvn-home .fmvn-search input[type="text"],
#fmvn-home .fmvn-search input[type="search"],
#fmvn-home .fmvn-search .search-field{
  width:100%;background:var(--surface-container-high);color:var(--text-primary);border-radius:999px;
  padding:12px 16px 12px 48px;font-size:16px;outline:none;border:2px solid transparent;transition:border-color .15s;
  -webkit-appearance:none;appearance:none;
}
#fmvn-home .fmvn-search input::placeholder{color:var(--text-secondary);}
#fmvn-home .fmvn-search input:focus{border-color:rgba(189,194,255,.5);}
#fmvn-home .fmvn-search button[type="submit"],
#fmvn-home .fmvn-search .search-submit,
#fmvn-home .fmvn-search .ux-search-submit{
  position:absolute!important;left:12px;top:50%;transform:translateY(-50%);z-index:1;
  width:24px;height:24px;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important;
  display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant);cursor:pointer;
}
#fmvn-home .fmvn-search button[type="submit"] i,
#fmvn-home .fmvn-search button[type="submit"] svg,
#fmvn-home .fmvn-search .search-submit i,
#fmvn-home .fmvn-search .search-submit svg,
#fmvn-home .fmvn-search .ux-search-submit i,
#fmvn-home .fmvn-search .ux-search-submit svg{width:20px;height:20px;font-size:20px;line-height:1;fill:currentColor;color:inherit;}

/* --- Fix: hộp kết quả Live Search (devbridge autocomplete) của Flatsome bị mất
   position:absolute khi ở ngoài khung #header gốc, khiến nó đẩy giãn cả header.
   Ép định vị lại thành overlay nổi bên dưới ô tìm kiếm. --- */
#fmvn-home .fmvn-search .live-search-results{
  position:absolute!important; top:calc(100% + 8px)!important; left:0!important; right:0!important;
  width:100%!important; margin:0!important; z-index:100;
}
#fmvn-home .fmvn-search .autocomplete-suggestions{
  position:static!important; top:auto!important; left:auto!important; width:100%!important; max-width:none!important;
  max-height:70vh; overflow-y:auto; box-sizing:border-box;
  background:var(--surface-container-high); border:1px solid rgba(69,70,84,.3); border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.5); padding:8px;
}
#fmvn-home .fmvn-search .autocomplete-suggestion{
  display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; cursor:pointer;
  color:var(--on-surface-variant); font-size:14px; line-height:1.4; transition:background .1s;
}
#fmvn-home .fmvn-search .autocomplete-suggestion:hover,
#fmvn-home .fmvn-search .autocomplete-suggestion.autocomplete-selected{background:var(--surface-variant);}
#fmvn-home .fmvn-search .autocomplete-suggestion strong{color:var(--primary);font-weight:600;}
#fmvn-home .fmvn-search .search-image{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--surface-deep);}
#fmvn-home .fmvn-search .search-name{color:var(--text-primary);flex:1;}
#fmvn-home .fmvn-search .search-price{color:var(--text-secondary);font-size:12px;flex:0 0 auto;}
#fmvn-home .fmvn-search .autocomplete-no-suggestion{padding:12px;color:var(--text-secondary);font-size:14px;}
#fmvn-home .fmvn-search .autocomplete-group{padding:6px 8px;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
#fmvn-home .fmvn-content{padding:24px;position:relative;z-index:10;}

/* Category pills (không dùng nữa — đã thay bằng Max Mega Menu bên dưới, giữ lại phòng khi cần) */
#fmvn-home .fmvn-pills{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:40px;scrollbar-width:none;}
#fmvn-home .fmvn-pills::-webkit-scrollbar{display:none;}
#fmvn-home .fmvn-pill{
  padding:10px 24px;border-radius:999px;white-space:nowrap;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;
  background:var(--surface-raised);color:var(--on-surface);border:1px solid rgba(69,70,84,.3);transition:transform .15s,background .15s;
}
#fmvn-home .fmvn-pill:hover{transform:scale(1.05);background:var(--surface-variant);}
#fmvn-home .fmvn-pill.is-active{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent;}

/* Max Mega Menu — trang chủ dùng location 1, trang danh mục dùng nhiều location khác
   nhau tuỳ danh mục (max_mega_menu_1..8, xem $fmvn_cat_megamenu_map trong category.php)
   nên dùng selector thuộc tính [id^="mega-menu-max_mega_menu_"] để áp dụng chung cho
   MỌI location. Menu này được admin cấu hình cho nền sáng (chữ mặc định #000) nên cần
   ép lại màu chữ cho đọc được trên nền tối của trang. Không đụng tới bố cục
   submenu/mega-panel — giữ nguyên như cấu hình gốc trong wp-admin. */
#fmvn-home .fmvn-megamenu{margin:4px 0 28px;padding-bottom:20px;}
#fmvn-home .fmvn-megamenu .mega-menu-wrap{background:transparent!important;}
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"]{text-align:center!important;padding:0!important;}
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item{margin:0 4px 0 0!important;}
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item > a.mega-menu-link{
  color:var(--text-primary)!important; font-family:'Hanken Grotesk',sans-serif!important; font-weight:600!important;
  border-radius:999px!important; background:var(--surface-raised)!important; border:1px solid rgba(69,70,84,.3)!important;
  height:auto!important; line-height:1!important; padding:12px 22px!important; margin:4px 2px!important;
}
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item > a.mega-menu-link:hover,
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item > a.mega-menu-link:focus,
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#fmvn-home .fmvn-megamenu ul[id^="mega-menu-max_mega_menu_"] > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link{
  background:var(--primary-container)!important; color:var(--on-primary-container)!important; border-color:transparent!important;
}

/* Hero: trái tiêu đề/mô tả (linh hoạt), phải ô quảng cáo 728x90 (cố định) —
   xuống dòng tự nhiên trên tablet/mobile. Theo thang chữ display-lg/body-lg
   của design system, thu nhỏ theo clamp() thay vì nhảy cấp qua breakpoint. */
#fmvn-home .fmvn-hero{
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  padding-bottom:32px;margin-bottom:28px;border-bottom:0px solid rgba(69,70,84,.15);
}
#fmvn-home .fmvn-hero-content{flex:1 1 320px;text-align:left;}
#fmvn-home .fmvn-hero-content h1{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;letter-spacing:-0.02em;
  font-size:clamp(28px,3.2vw,40px);line-height:1.2;color:var(--text-primary);margin:0 0 14px;
}
#fmvn-home .fmvn-hero-content p{
  font-family:'Inter',sans-serif;color:var(--on-surface-variant);
  font-size:14px;line-height:1.7;margin:0;max-width:80ch;
}
#fmvn-home .fmvn-hero-ad{flex:0 0 auto;display:flex;justify-content:center;margin:0 auto;}
#fmvn-home .fmvn-hero-ad ins.adsbygoogle{max-width:100%;}
@media (max-width:900px){
  #fmvn-home .fmvn-hero{flex-direction:column;align-items:stretch;gap:24px;}
  #fmvn-home .fmvn-hero-ad{align-self:center;}
}

/* Section heading */
#fmvn-home .fmvn-section{margin-bottom:64px;}
#fmvn-home .fmvn-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
#fmvn-home .fmvn-section-head p{margin:4px 0 0;color:var(--on-surface-variant);}
#fmvn-home .fmvn-viewall{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:500;transition:color .15s;}
#fmvn-home .fmvn-viewall:hover{color:var(--text-primary);}

/* Card grid */
#fmvn-home .fmvn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
#fmvn-home .fmvn-card{
  background:var(--surface-container);border-radius:12px;overflow:hidden;transition:background .3s;display:flex;flex-direction:column;
}
#fmvn-home .fmvn-card:hover{background:var(--surface-container-high);}
#fmvn-home .fmvn-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-raised);}
#fmvn-home .fmvn-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s;}
#fmvn-home .fmvn-card:hover .fmvn-card-media img{transform:scale(1.05);}
#fmvn-home .fmvn-card-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s;
}
#fmvn-home .fmvn-card:hover .fmvn-card-overlay{opacity:1;}
#fmvn-home .fmvn-card-overlay span{
  width:48px;height:48px;border-radius:999px;background:var(--primary);color:var(--on-primary);
  display:flex;align-items:center;justify-content:center;transition:transform .15s;
}
#fmvn-home .fmvn-card:hover .fmvn-card-overlay span{transform:scale(1.1);}
#fmvn-home .fmvn-file-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.92); color:#1f1f24; backdrop-filter:blur(4px);
  padding:6px 12px; border-radius:8px; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#fmvn-home .fmvn-card-body{padding:16px;display:flex;flex-direction:column;gap:4px;}
#fmvn-home .fmvn-card-body h3{
  margin:0;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;line-height:1.3;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
#fmvn-home .fmvn-card-body span{color:var(--text-secondary);font-size:12px;}
#fmvn-home .fmvn-skeleton{background:linear-gradient(90deg,var(--surface-container) 25%,var(--surface-container-high) 37%,var(--surface-container) 63%);background-size:400% 100%;animation:fmvn-shimmer 1.4s ease infinite;}
@keyframes fmvn-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Ad slot inside the grid (Flatsome Blog Ads Inserter) */
#fmvn-home .fmvn-card-ad{
  position:relative; align-items:center; justify-content:center; text-align:center;
  background:transparent; min-height:auto; padding:0;
}
#fmvn-home .fmvn-ad-slot{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden;}
#fmvn-home .fmvn-ad-slot ins.adsbygoogle{max-width:100%;}

/* Promo / branding section */
#fmvn-home .fmvn-promo{padding:32px;border-radius:24px;background:var(--surface-container);border:1px solid rgba(69,70,84,.1);position:relative;overflow:hidden;}
#fmvn-home .fmvn-promo::before{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(to left,rgba(11,32,182,.1),transparent);pointer-events:none;}
#fmvn-home .fmvn-promo-grid{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:center;position:relative;z-index:1;}
#fmvn-home .fmvn-promo-text{display:flex;flex-direction:column;gap:16px;}
#fmvn-home .fmvn-badge{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:6px;background:var(--surface-container-high);
  border:1px solid rgba(69,70,84,.2);width:max-content;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;
}
#fmvn-home .fmvn-badge .material-symbols-outlined{color:var(--primary);font-size:16px;}
#fmvn-home .fmvn-promo-text h2{margin:0;color:var(--text-primary);line-height:1.25;}
#fmvn-home .fmvn-promo-text p{margin:0;color:var(--on-surface-variant);line-height:1.6;}
#fmvn-home .fmvn-promo-cta{
  padding:10px 24px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.05em;width:max-content;box-shadow:0 8px 20px rgba(189,194,255,.2);transition:background .15s,color .15s;
}
#fmvn-home .fmvn-promo-cta:hover{background:var(--electric-blue);color:#fff;}

/* Promo image slider — hiển thị 2 ảnh đầy đủ + 1/5 ảnh kế tiếp */
#fmvn-home .fmvn-promo-slider{position:relative;}
#fmvn-home .fmvn-promo-imgs{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
#fmvn-home .fmvn-promo-imgs::-webkit-scrollbar{display:none;}
#fmvn-home .fmvn-promo-imgs a{
  flex:0 0 calc((100% - 32px)/2.2); scroll-snap-align:start;
  border-radius:12px;overflow:hidden;background:var(--surface-deep);border:1px solid rgba(69,70,84,.2);
  aspect-ratio:16/9;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:opacity .15s;
}
#fmvn-home .fmvn-promo-imgs a:hover{opacity:.9;}
#fmvn-home .fmvn-promo-imgs img{width:100%;height:100%;object-fit:cover;}
#fmvn-home .fmvn-slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:36px;height:36px;border-radius:999px;
  background:rgba(11,12,16,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  color:var(--text-primary);z-index:2;transition:background .15s;
}
#fmvn-home .fmvn-slider-nav:hover{background:rgba(11,12,16,.9);}
#fmvn-home .fmvn-slider-prev{left:-14px;}
#fmvn-home .fmvn-slider-next{right:-14px;}
@media (max-width:640px){
  #fmvn-home .fmvn-promo-imgs a{flex-basis:calc((100% - 16px)/1.2);}
}

/* Footer */
#fmvn-home .fmvn-footer{background:var(--surface-container-lowest);border-top:1px solid rgba(69,70,84,.2);padding:32px 24px 24px;}
#fmvn-home .fmvn-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
#fmvn-home .fmvn-footer-grid p{color:var(--on-surface-variant);font-size:12px;line-height:1.7;margin:0;}
#fmvn-home .fmvn-footer-col{display:flex;flex-direction:column;gap:8px;}
#fmvn-home .fmvn-footer-col h4{margin:0 0 4px;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;font-family:'Hanken Grotesk',sans-serif;font-size:14px;}
#fmvn-home .fmvn-footer-col a{color:var(--on-surface-variant);font-size:12px;transition:color .15s;}
#fmvn-home .fmvn-footer-col a:hover{color:var(--primary);}
#fmvn-home .fmvn-footer-social{display:flex;gap:16px;}
#fmvn-home .fmvn-footer-social a{color:var(--on-surface-variant);}
#fmvn-home .fmvn-footer-social a:hover{color:var(--primary);}
#fmvn-home .fmvn-footer-bottom{border-top:1px solid rgba(69,70,84,.1);padding-top:16px;text-align:center;color:var(--on-surface-variant);font-size:12px;}

@media (max-width:1024px){
  /* Sidebar trượt bằng "left" thay vì "transform": transform tạo containing-block mới
     cho các phần tử con position:fixed, khiến bảng menu mega (fixed, toàn màn hình)
     bị giới hạn trong khung 260px của sidebar thay vì phủ hết viewport — đây chính là
     lỗi hiện ở ảnh chụp màn hình. */
  #fmvn-home .fmvn-sidebar{left:-260px;box-shadow:0 0 40px rgba(0,0,0,.5);}
  #fmvn-home.fmvn-sidebar-open .fmvn-sidebar{left:0;}
  #fmvn-home.fmvn-sidebar-open .fmvn-overlay{display:block;}
  #fmvn-home .fmvn-main{margin-left:0;}
  #fmvn-home .fmvn-burger{display:flex;}
  #fmvn-home .fmvn-grid{grid-template-columns:repeat(2,1fr);}
  #fmvn-home .fmvn-promo-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  #fmvn-home .fmvn-header{padding:16px;}
  #fmvn-home .fmvn-burger{left:16px;}
  #fmvn-home .fmvn-theme-toggle{right:16px;}
  #fmvn-home .fmvn-content{padding:16px;}
  #fmvn-home .fmvn-grid{grid-template-columns:1fr 1fr;gap:12px;}
  #fmvn-home .fmvn-footer-grid{grid-template-columns:1fr 1fr;}
}

/* =========================================================================
   Chỉ dùng ở category.php: Breadcrumb / Pagination / Empty state
   ========================================================================= */
#fmvn-home .fmvn-breadcrumb{display:flex;align-items:center;gap:4px;margin-bottom:16px;font-size:13px;color:var(--text-secondary);flex-wrap:wrap;}
#fmvn-home .fmvn-breadcrumb a{color:var(--text-secondary);transition:color .15s;}
#fmvn-home .fmvn-breadcrumb a:hover{color:var(--primary);}
#fmvn-home .fmvn-breadcrumb .material-symbols-outlined{font-size:16px;opacity:.6;}
#fmvn-home .fmvn-breadcrumb-current{color:var(--text-primary);font-weight:500;}

#fmvn-home .fmvn-pagination{display:flex;justify-content:center;margin-top:8px;}
#fmvn-home .fmvn-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
#fmvn-home .fmvn-pagination .page-numbers{
  min-width:40px;height:40px;padding:0 14px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-container);color:var(--on-surface-variant);font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;
  transition:background .15s,color .15s;
}
#fmvn-home .fmvn-pagination a.page-numbers:hover{background:var(--surface-container-high);color:var(--text-primary);}
#fmvn-home .fmvn-pagination .page-numbers.current{background:var(--primary);color:var(--on-primary);}
#fmvn-home .fmvn-pagination .page-numbers.dots{background:transparent;}

#fmvn-home .fmvn-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:64px 24px;background:var(--surface-container);border-radius:16px;color:var(--on-surface-variant);
}
#fmvn-home .fmvn-empty .material-symbols-outlined{font-size:40px;opacity:.6;}
#fmvn-home .fmvn-empty p{margin:0;}
