/* ==========================================================================
   XINHVUI — GIAO DIỆN  (chỉ CSS, ánh xạ mockup sang markup thật của Flatsome)
   .footer-section1 = khối link SEO | .social-icons = thanh social nổi
   .footer-section3 = dải đỏ        | .absolute-footer = thanh copyright
   .homepage-top-tags = khối tag nổi bật
   ========================================================================== */
:root{
  --xv-red:#d71920; --xv-red-dark:#ad1016; --xv-red-deep:#a80d13;
  --xv-text:#171717; --xv-muted:#6c6c70; --xv-line:#ececef;
}

/* ==================== 1. HEADER MỚI (thay hẳn header Flatsome) ==================== */

/* Ẩn toàn bộ header của theme — mockup là bố cục khác hẳn, ghi đè CSS lên
   markup Flatsome không ra được. Cũng ẩn khối tag hồng cũ ở đầu trang. */
#top-bar, .header-main, .header-bottom, .header-wrapper .header-bg-container{ display:none !important; }
.header, #header{ background:transparent !important; box-shadow:none !important; min-height:0 !important; }

/* Theme đặt html{background-color:#9c1414} và để #wrapper phủ trắng lên.
   Khối .xvh nằm NGOÀI #wrapper nên phải tự sơn nền, không thì lộ nền đỏ. */
.xvh{ position:relative; background:#fff; }
.xvh-muc{ background:#fff; }

/* ---------- Thanh header ---------- */
.xvh-bar{ position:absolute; top:0; left:0; right:0; z-index:20; }
.xvh--dac .xvh-bar{ position:relative; background:var(--xv-red-dark); }
.xvh-bar-in{
  width:min(1410px, calc(100% - 40px)); margin:0 auto;
  display:flex; align-items:center; gap:26px; height:78px;
}
.xvh-logo{ flex:0 0 auto; line-height:0; }
.xvh-logo img{ height:58px; width:auto; border-radius:10px; display:block; }

.xvh-nav{ flex:1 1 auto; min-width:0; }
.xvh-nav ul{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.xvh-nav li{ position:relative; }
.xvh-nav > ul > li > a{
  color:#fff !important; font-size:15px; font-weight:600; text-decoration:none !important;
  white-space:nowrap; opacity:.94; transition:opacity .15s ease;
}
.xvh-nav > ul > li > a:hover{ opacity:1; }
.xvh-nav li.menu-item-has-children > a::after{ content:" ⌄"; font-size:13px; opacity:.8; }
/* menu con */
.xvh-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:250px;
  background:#fff; border-radius:12px; padding:8px; margin-top:10px;
  box-shadow:0 14px 40px rgb(0 0 0 / 18%); flex-direction:column; gap:0; z-index:30;
}
.xvh-nav li:hover > .sub-menu{ display:flex; }
.xvh-nav .sub-menu a{
  display:block; padding:9px 12px; border-radius:8px;
  color:#29292c !important; font-size:14px; font-weight:500; text-decoration:none !important; white-space:normal;
}
.xvh-nav .sub-menu a:hover{ background:#fff2f2; color:var(--xv-red) !important; }

.xvh-right{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.xvh-theme{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgb(255 255 255 / 22%); backdrop-filter:blur(6px);
  color:#fff; font-size:16px; line-height:1; padding:0;
}
.xvh--dac .xvh-theme{ background:rgb(255 255 255 / 18%); }
.xvh-link{ color:#fff !important; font-size:15px; font-weight:600; text-decoration:none !important; white-space:nowrap; }
.xvh-btn{
  display:inline-flex; align-items:center; padding:11px 22px; border-radius:999px;
  font-size:15px; font-weight:700; text-decoration:none !important; white-space:nowrap;
}
.xvh-btn-do{ background:var(--xv-red); color:#fff !important; }
.xvh-btn-do:hover{ background:var(--xv-red-dark); }

/* ---------- Hero ---------- */
.xvh-hero{ position:relative; min-height:420px; display:flex; align-items:center; overflow:hidden; }
.xvh-collage{ position:absolute; inset:0; display:flex; }
.xvh-collage span{ flex:1 1 0; min-width:0; background:#2a2a2e center/cover no-repeat; }
.xvh-phu{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(0 0 0 / 52%) 0%, rgb(0 0 0 / 34%) 45%, rgb(0 0 0 / 55%) 100%);
}
.xvh-hero-in{
  position:relative; z-index:5; width:min(980px, calc(100% - 40px));
  margin:0 auto; padding:96px 0 70px; text-align:center;
}
.xvh-tieu-de{
  margin:0 0 12px !important; color:#fff !important;
  font-size:clamp(26px, 4vw, 46px); font-weight:800; line-height:1.15; text-transform:uppercase;
  text-shadow:0 2px 18px rgb(0 0 0 / 35%);
}
.xvh-phu-de{
  margin:0 0 26px !important; color:rgb(255 255 255 / 92%) !important;
  font-size:clamp(13px, 1.5vw, 16px);
}

/* Ô tìm kiếm */
.xvh-tim{
  display:flex; align-items:stretch; gap:0; background:#fff;
  border-radius:14px; overflow:hidden; box-shadow:0 16px 44px rgb(0 0 0 / 26%);
}
.xvh-scope{
  display:flex; align-items:center; gap:6px; padding:0 18px;
  font-size:15px; font-weight:600; color:#29292c; white-space:nowrap;
  border-right:1px solid #ececef;
}
.xvh-scope::after{ content:"⌄"; font-size:13px; opacity:.7; }
.xvh-tim input[type=search]{
  flex:1 1 auto; min-width:0; border:0 !important; outline:none !important;
  padding:18px 16px !important; font-size:15px !important; background:transparent !important;
  height:auto !important; box-shadow:none !important; border-radius:0 !important;
}
.xvh-tim button{
  flex:0 0 auto; width:62px; border:0; cursor:pointer; margin:8px 8px 8px 0;
  border-radius:10px; background:var(--xv-red); color:#fff; font-size:22px; line-height:1;
}
.xvh-tim button:hover{ background:var(--xv-red-dark); }

/* Hàng chip phổ biến */
.xvh-pho-bien{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 6px;
  margin-top:18px; font-size:13px; color:rgb(255 255 255 / 88%);
}
.xvh-pho-bien span{ margin-right:2px; }
.xvh-pho-bien a{
  color:#fff !important; text-decoration:none !important; font-weight:600;
  padding:2px 6px; border-radius:6px;
}
.xvh-pho-bien a:not(:last-child)::after{ content:" ·"; opacity:.6; margin-left:8px; font-weight:400; }
.xvh-pho-bien a:hover{ background:rgb(255 255 255 / 18%); }

.xvh-goc-t, .xvh-goc-p{
  position:absolute; bottom:14px; z-index:5; font-size:12px; color:rgb(255 255 255 / 80%);
}
.xvh-goc-t{ left:22px; }
.xvh-goc-p{ right:22px; }

/* ---------- Thanh chủ đề (viên pill) ---------- */
.xvh-sub{ background:#fff; border-bottom:1px solid #ececef; }
.xvh-sub-in{
  width:min(1410px, calc(100% - 40px)); margin:0 auto;
  display:flex; align-items:center; gap:16px; padding:14px 0;
}
.xvh-sub-nhan{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; color:#1d1d21; white-space:nowrap;
}
/* Ô vuông 4 chấm bên trái nhãn */
.xvh-o{
  width:14px; height:14px; display:inline-block;
  background-image:
    radial-gradient(circle, var(--xv-red) 45%, transparent 46%),
    radial-gradient(circle, var(--xv-red) 45%, transparent 46%),
    radial-gradient(circle, var(--xv-red) 45%, transparent 46%),
    radial-gradient(circle, var(--xv-red) 45%, transparent 46%);
  background-size:6px 6px; background-repeat:no-repeat;
  background-position:0 0, 8px 0, 0 8px, 8px 8px;
}
.xvh-chips{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px;
  overflow-x:auto; scrollbar-width:none;
}
.xvh-chips::-webkit-scrollbar{ display:none; }
.xvh-chips a{
  flex:0 0 auto; padding:9px 18px; border-radius:999px; white-space:nowrap;
  background:#f4f4f6; border:1px solid #ececef;
  color:#3c434a !important; font-size:14px; font-weight:600; text-decoration:none !important;
  transition:.15s ease;
}
.xvh-chips a:hover{ background:#fff2f2; border-color:#f6c9cb; color:var(--xv-red) !important; }
.xvh-chips a.on{
  background:var(--xv-red) !important; border-color:var(--xv-red) !important; color:#fff !important;
}
.xvh-tatca{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  color:var(--xv-red) !important; font-size:14px; font-weight:700; text-decoration:none !important;
}
.xvh-tatca span{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--xv-red);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.xvh-tatca:hover span{ background:var(--xv-red); color:#fff; }

/* ---------- Tiêu đề khối nội dung ---------- */
.xvh-muc{ background:#fff; padding:30px 0 10px; }
.xvh-muc-in{
  width:min(1410px, calc(100% - 40px)); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.xvh-muc-td{ position:relative; padding-left:16px; }
/* Vạch đỏ dọc bên trái tiêu đề */
.xvh-muc-td::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px;
  width:4px; border-radius:3px; background:var(--xv-red);
}
.xvh-muc h2{ margin:0 !important; font-size:clamp(19px, 2vw, 24px); font-weight:800; color:#1d1d21 !important; }
.xvh-muc p{ margin:5px 0 0 !important; font-size:13px; color:var(--xv-muted) !important; }
.xvh-loc{ display:flex; gap:9px; }
.xvh-loc span{
  padding:9px 20px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid #e0e0e4; background:#fff; color:#3c434a; white-space:nowrap;
}
.xvh-loc span.on{ background:var(--xv-red); border-color:var(--xv-red); color:#fff; }

/* ==================== 2. FOOTER MỚI (thay hẳn footer Flatsome) ==================== */

/* Ẩn toàn bộ footer + khối tag hồng cũ của theme */
.footer-section1, .footer-section2, .footer-section3, .absolute-footer,
.homepage-top-tags{ display:none !important; }
#footer .footer-wrapper{ background:transparent !important; }

/* ---------- Khối "Khám phá theo chủ đề" ---------- */
.xvf-chude{ background:#fff; padding:34px 0 40px; border-bottom:3px solid var(--xv-red); }
.xvf-in{ width:min(1410px, calc(100% - 40px)); margin:0 auto; }
.xvf-dau{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.xvf-dau-td{ position:relative; padding-left:16px; }
.xvf-dau-td::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px;
  width:4px; border-radius:3px; background:var(--xv-red);
}
.xvf-dau h2{ margin:0 !important; font-size:clamp(19px, 2vw, 24px); font-weight:800; color:#1d1d21 !important; }
.xvf-dau p{ margin:5px 0 0 !important; font-size:13px; color:var(--xv-muted) !important; }
.xvf-xem{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  color:var(--xv-red) !important; font-size:14px; font-weight:700; text-decoration:none !important;
}
.xvf-xem span{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--xv-red);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
.xvf-xem:hover span{ background:var(--xv-red); color:#fff; }

.xvf-chips{ display:flex; flex-wrap:wrap; gap:11px; margin-top:22px; }
.xvf-chips a{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:11px 20px; border-radius:999px;
  background:#f4f4f6; border:1px solid #ececef; text-decoration:none !important;
  transition:.15s ease;
}
.xvf-chips a b{ font-size:14px; font-weight:700; color:#29292c; }
.xvf-chips a em{ font-style:normal; font-size:11px; color:#9a9aa0; }
.xvf-chips a:hover{ background:#fff2f2; border-color:#f6c9cb; }
.xvf-chips a:hover b{ color:var(--xv-red); }
.xvf-chips a.on{ background:var(--xv-red) !important; border-color:var(--xv-red) !important; }
.xvf-chips a.on b{ color:#fff; }
.xvf-chips a.on em{ color:rgb(255 255 255 / 72%); }

/* ---------- Footer tối ---------- */
.xvf{
  background:
    radial-gradient(1200px 380px at 12% 0%, rgb(215 25 32 / 16%), transparent 62%),
    linear-gradient(180deg, #1b1113 0%, #17070a 55%, #140609 100%);
  color:rgb(255 255 255 / 74%); padding:52px 0 0; position:relative;
}
.xvf a{ color:rgb(255 255 255 / 74%) !important; text-decoration:none !important; }
.xvf a:hover{ color:#fff !important; }

.xvf-luoi{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr; gap:34px; align-items:start;
}
.xvf-cot h3{
  margin:0 0 20px !important; padding-bottom:11px; position:relative;
  font-size:15px; font-weight:700; color:#fff !important;
}
.xvf-cot h3::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:3px;
  border-radius:2px; background:var(--xv-red);
}
.xvf-cot ul{ list-style:none; margin:0; padding:0; }
.xvf-cot li{ margin:0 0 13px; padding-left:17px; position:relative; font-size:14px; }
.xvf-cot li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  background:var(--xv-red); transform:rotate(45deg); border-radius:1px;
}

/* Cột thương hiệu */
.xvf-logo{ display:flex; align-items:center; gap:14px; }
.xvf-badge{
  width:56px; height:56px; border-radius:14px; flex:0 0 auto;
  background:var(--xv-red); display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgb(215 25 32 / 32%);
}
.xvf-badge img{ width:38px; height:38px; object-fit:contain; border-radius:8px; }
.xvf-logo strong{ display:block; font-size:21px; font-weight:800; color:#fff; letter-spacing:.5px; }
.xvf-logo em{ display:block; font-style:normal; font-size:12px; color:rgb(255 255 255 / 62%); margin-top:2px; }
.xvf-mota{ margin:22px 0 24px !important; font-size:14px; line-height:1.7; max-width:330px; }
.xvf-nut-do{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  background:var(--xv-red); color:#fff !important; font-size:14px; font-weight:700;
  box-shadow:0 8px 24px rgb(215 25 32 / 30%);
}
.xvf-nut-do:hover{ background:var(--xv-red-dark); }

/* Thẻ kết nối */
.xvf-the{
  background:rgb(255 255 255 / 4%); border:1px solid rgb(255 255 255 / 9%);
  border-radius:16px; padding:24px 22px;
}
.xvf-the h3{ margin-bottom:12px !important; padding-bottom:0; }
.xvf-the h3::after{ display:none; }
.xvf-the p{ margin:0 0 18px !important; font-size:13px; line-height:1.65; }
.xvf-mxh{ display:flex; gap:10px; margin-bottom:20px; }
.xvf-mxh a{
  width:42px; height:42px; border-radius:50%;
  background:rgb(255 255 255 / 7%); border:1px solid rgb(255 255 255 / 10%);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff !important; font-size:16px;
}
.xvf-mxh a.do{ background:var(--xv-red); border-color:var(--xv-red); font-weight:800; }
.xvf-mxh a:hover{ background:var(--xv-red); border-color:var(--xv-red); }
.xvf-nut-vien{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px;
  border:1px solid rgb(255 255 255 / 22%); font-size:13px; font-weight:600; color:#fff !important;
}
.xvf-nut-vien:hover{ background:rgb(255 255 255 / 10%); }

/* Hai hàng dưới */
.xvf-giua{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:46px; padding:24px 0; border-top:1px solid rgb(255 255 255 / 9%);
  font-size:13px; line-height:1.8;
}
.xvf-giua strong{ display:block; color:#fff; font-size:14px; }
.xvf-giua span{ display:block; }
.xvf-len{ display:inline-flex; align-items:center; gap:10px; font-size:13px; }
.xvf-len span{
  width:34px; height:34px; border-radius:50%; border:1px solid rgb(255 255 255 / 22%);
  display:inline-flex; align-items:center; justify-content:center;
}
.xvf-len:hover span{ background:var(--xv-red); border-color:var(--xv-red); }
.xvf-cuoi{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 0 26px; border-top:1px solid rgb(255 255 255 / 7%);
  font-size:12px; color:rgb(255 255 255 / 52%);
}
.xvf-cuoi nav{ display:flex; gap:8px; }
.xvf-cuoi nav a{ font-size:12px; color:rgb(255 255 255 / 62%) !important; }
.xvf-cuoi nav a:not(:last-child)::after{ content:" •"; margin-left:8px; opacity:.5; }

/* Footer trên màn nhỏ */
@media (max-width:1100px){
  .xvf-luoi{ grid-template-columns:1.4fr 1fr 1fr; }
  .xvf-ketnoi{ grid-column:1 / -1; }
  .xvf-the{ max-width:520px; }
}
@media (max-width:767px){
  .xvf-chude{ padding:26px 0 30px; }
  .xvf-chips{ gap:8px; margin-top:18px; }
  .xvf-chips a{ padding:9px 15px; }
  .xvf-chips a b{ font-size:13px; }
  .xvf{ padding-top:38px; }
  .xvf-luoi{ grid-template-columns:1fr; gap:30px; }
  .xvf-mota{ max-width:none; }
  .xvf-giua{ margin-top:32px; }
  .xvf-giua, .xvf-cuoi{ flex-direction:column; align-items:flex-start; }
  .xvf-the{ max-width:none; }
}

/* ========================= 7. MOBILE ========================= */
@media (max-width:1024px){
  .footer-section1 .col:not(:last-child) .col-inner::after{ right:-8px; }
  .footer-section3 .col:last-child .col-inner{ padding-left:35px; }
}
@media (max-width:767px){
  /* Bẫy CSS Grid/Flex: ô mặc định min-width:auto nên nhãn dài đẩy tràn ngang */
  .footer-section1 .col, .footer-section3 .col,
  .footer-section1 .col-inner, .footer-section3 .col-inner{ min-width:0 !important; }
  body, .footer-section1, .footer-section3, .homepage-top-tags{ overflow-x:hidden !important; }

  #logo img{ max-height:64px !important; }
  .header-main{ min-height:auto !important; }

  .footer-section1{ padding:35px 0 70px !important; }
  .footer-section1 .col:not(:last-child) .col-inner::after{ display:none !important; }

  .social-icons.follow-icons{
    max-width:calc(100% - 24px); overflow-x:auto; justify-content:flex-start !important; padding:8px;
  }
  .social-icons.follow-icons a.icon.button.circle{ margin:0 6px !important; }

  .footer-section3{ padding-top:60px !important; }
  .footer-section3 .col:last-child .col-inner{ padding-left:0 !important; }
  .footer-section3 .col:last-child .col-inner::before{ display:none !important; }

  .homepage-top-tags{ padding:18px 14px 25px !important; }
  .homepage-top-tags a{ font-size:12px !important; padding:9px 12px !important; }
}

/* ==================== 8. SLOGAN + NÚT TÀI KHOẢN + NỀN TỐI ==================== */
.xv-slogan{
  display:block; margin-top:2px; font-size:12px; line-height:1.2;
  color:var(--xv-red); font-style:italic; white-space:nowrap;
}
.xv-actions{ display:flex !important; align-items:center; gap:8px; list-style:none; }
.xv-btn{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:600; text-decoration:none !important; white-space:nowrap;
  transition:.18s ease;
}
.xv-btn-ghost{ border:1px solid var(--xv-red); color:var(--xv-red) !important; background:transparent; }
.xv-btn-ghost:hover{ background:var(--xv-red); color:#fff !important; }
.xv-btn-solid{ background:var(--xv-red); color:#fff !important; border:1px solid var(--xv-red); }
.xv-btn-solid:hover{ background:var(--xv-red-dark); }
.xv-theme-toggle{
  width:34px; height:34px; border-radius:50%; border:1px solid #e6e6e8;
  background:#fff; cursor:pointer; font-size:15px; line-height:1; padding:0;
}
.xv-mi{ margin-right:6px; }

/* ==================== 9. HERO TRANG CHỦ ==================== */
.xv-hero{ padding:22px 0 4px; }
.xv-hero-inner{ width:min(1320px, calc(100% - 32px)); margin:0 auto; }
.xv-hero-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.xv-hero-card{
  position:relative; display:block; min-width:0; border-radius:14px; overflow:hidden;
  text-decoration:none !important; box-shadow:0 6px 20px rgb(0 0 0 / 8%);
  transition:transform .2s ease, box-shadow .2s ease;
}
.xv-hero-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgb(0 0 0 / 14%); }
.xv-hero-img{
  display:block; aspect-ratio:4/3; background:#eee center/cover no-repeat;
}
.xv-hero-meta{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px;
  background:linear-gradient(to top, rgb(0 0 0 / 78%), transparent);
  color:#fff; display:flex; flex-direction:column; gap:2px;
}
.xv-hero-meta strong{
  font-size:14px; font-weight:600; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.xv-hero-meta em{ font-size:11px; font-style:normal; opacity:.85; }
.xv-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.xv-hero-chips a{
  padding:8px 14px; border-radius:999px; background:#fff; border:1px solid #eeeeef;
  color:var(--xv-red) !important; font-size:13px; font-weight:500; text-decoration:none !important;
  box-shadow:0 3px 12px rgb(0 0 0 / 6%); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xv-hero-chips a small{ color:#ef777a; font-size:10px; margin-left:3px; }
.xv-hero-chips a:hover{ background:var(--xv-red); color:#fff !important; }
.xv-hero-chips a:hover small{ color:rgb(255 255 255 / 75%); }

/* Icon riêng cho 3 tiêu đề cột footer: người / địa cầu / máy ảnh */
.footer-section1 .col:nth-child(1) h3::before{ content:"👤"; }
.footer-section1 .col:nth-child(2) h3::before{ content:"🌐"; }
.footer-section1 .col:nth-child(3) h3::before{ content:"📷"; }

/* ==================== 10. NỀN TỐI ==================== */
html[data-xv-theme="dark"] body{ background:#15161a !important; color:#d8d8dc !important; }
html[data-xv-theme="dark"] .footer-section1{ background:#1b1c21 !important; }
html[data-xv-theme="dark"] .footer-section1 ul li a,
html[data-xv-theme="dark"] .footer-section1 h3{ color:#d8d8dc !important; }
html[data-xv-theme="dark"] .homepage-top-tags,
html[data-xv-theme="dark"] .homepage-top-tags a,
html[data-xv-theme="dark"] .xv-hero-chips a{
  background:#22242b !important; border-color:#2e3038 !important; color:#f0888c !important;
}
html[data-xv-theme="dark"] .social-icons.follow-icons{ background:#22242b !important; border-color:#2e3038 !important; }
html[data-xv-theme="dark"] .xv-theme-toggle{ background:#22242b; border-color:#2e3038; color:#ffd76e; }
html[data-xv-theme="dark"] .header-main{ background:#1b1c21 !important; }

/* ==================== 11. HERO TRÊN MOBILE ==================== */
@media (max-width:1024px){ .xv-hero-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  .xv-hero-inner{ width:calc(100% - 24px); }
  .xv-hero-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .xv-hero-card, .xv-hero-chips a{ min-width:0; }
  .xv-slogan{ display:none; }
  .xv-btn{ padding:6px 11px; font-size:12px; }
  .xv-hero-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
}

/* ==================== HEADER MỚI — MOBILE ==================== */
.xvh-mo{ display:none; flex:0 0 auto; width:40px; height:40px; padding:8px; border:0; background:none; cursor:pointer; }
.xvh-mo span{ display:block; height:2px; margin:4px 0; border-radius:2px; background:#fff; transition:.2s ease; }

@media (max-width:1200px){
  .xvh-nav > ul{ gap:18px; }
  .xvh-nav > ul > li > a{ font-size:14px; }
  .xvh-bar-in{ gap:16px; }
}
@media (max-width:1024px){
  .xvh-mo{ display:block; order:3; }
  .xvh-bar-in{ height:66px; gap:12px; }
  .xvh-logo{ order:1; }
  .xvh-logo img{ height:46px; }
  .xvh-right{ order:2; margin-left:auto; gap:10px; }
  .xvh-link{ display:none; }
  .xvh-btn{ padding:9px 16px; font-size:13px; }

  /* Menu trượt từ phải */
  .xvh-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw); z-index:60;
    background:#fff; padding:74px 18px 24px; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-10px 0 40px rgb(0 0 0 / 22%);
  }
  .xvh.menu-mo .xvh-nav{ transform:translateX(0); }
  .xvh-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .xvh-nav > ul > li > a{
    display:block; padding:13px 10px; color:#29292c !important; font-size:15px;
    border-bottom:1px solid #f0f0f2;
  }
  .xvh-nav .sub-menu{
    display:flex !important; position:static; box-shadow:none; margin:0 0 0 12px;
    padding:0; min-width:0; border-radius:0;
  }
  .xvh-nav .sub-menu a{ padding:10px; font-size:14px; color:#50575e !important; }
  .xvh-nav li.menu-item-has-children > a::after{ content:""; }
}
@media (max-width:767px){
  .xvh-hero{ min-height:340px; }
  .xvh-hero-in{ padding:78px 0 58px; }
  /* Dải ảnh: 5 tấm quá hẹp trên điện thoại -> chỉ giữ 2 */
  .xvh-collage span:nth-child(n+3){ display:none; }
  .xvh-tim{ border-radius:12px; }
  .xvh-scope{ display:none; }          /* nhường chỗ cho ô nhập */
  .xvh-tim input[type=search]{ padding:14px 12px !important; font-size:14px !important; }
  .xvh-tim button{ width:52px; font-size:19px; margin:6px 6px 6px 0; }
  .xvh-pho-bien{ font-size:12px; }
  .xvh-goc-t, .xvh-goc-p{ display:none; }
  .xvh-sub-in{ gap:22px; }
  .xvh-sub a{ font-size:13px; padding:13px 0; }
  .xvh-muc{ padding:24px 0 4px; }
  .xvh-muc-in{ align-items:flex-start; }
  .xvh-loc span{ padding:7px 14px; font-size:12px; }
}

/* Thanh chủ đề trên mobile */
@media (max-width:900px){
  .xvh-sub-nhan, .xvh-tatca{ display:none; }
  .xvh-sub-in{ padding:11px 0; gap:0; }
  .xvh-chips a{ padding:8px 15px; font-size:13px; }
}
@media (max-width:767px){
  .xvh-muc{ padding:22px 0 6px; }
  .xvh-muc-in{ align-items:flex-start; }
  .xvh-muc-td{ padding-left:13px; }
}

/* ==================== TRANG TRONG: tìm kiếm thu gọn + header dính ==================== */

/* Ô tìm kiếm nhỏ nằm trên header (chỉ trang trong) */
.xvh-tim-nho{
  flex:0 1 340px; min-width:0; display:flex; align-items:stretch;
  background:rgb(255 255 255 / 14%); border:1px solid rgb(255 255 255 / 20%);
  border-radius:999px; overflow:hidden; margin-left:auto;
}
.xvh-tim-nho input[type=search]{
  flex:1 1 auto; min-width:0; border:0 !important; outline:none !important; background:transparent !important;
  padding:9px 16px !important; font-size:14px !important; color:#fff !important;
  height:auto !important; box-shadow:none !important; border-radius:0 !important;
}
.xvh-tim-nho input::placeholder{ color:rgb(255 255 255 / 62%); }
.xvh-tim-nho button{
  flex:0 0 auto; width:44px; border:0; cursor:pointer;
  background:var(--xv-red); color:#fff; font-size:18px; line-height:1;
}
.xvh-tim-nho button:hover{ background:var(--xv-red-dark); }
.xvh--dac .xvh-nav{ flex:0 1 auto; }

/* Header dính. Trang chủ: trong suốt ở đỉnh, chuyển nền đặc khi cuộn. */
.xvh--dac .xvh-bar{ position:sticky; top:0; z-index:50; }
.xvh--hero .xvh-bar{ transition:background .2s ease, box-shadow .2s ease; }
.xvh--hero.dinh .xvh-bar{
  position:fixed; top:0; left:0; right:0;
  background:var(--xv-red-dark); box-shadow:0 6px 24px rgb(0 0 0 / 22%);
}
.xvh--dac.dinh .xvh-bar{ box-shadow:0 6px 24px rgb(0 0 0 / 22%); }

/* Thanh chủ đề cũng dính, nằm ngay dưới header */
.xvh-sub{ position:sticky; top:0; z-index:40; }
.xvh--dac .xvh-sub{ top:66px; }

@media (max-width:1024px){
  .xvh-tim-nho{ flex-basis:200px; }
  .xvh--dac .xvh-sub{ top:66px; }
}
@media (max-width:767px){
  .xvh-tim-nho{ display:none; }        /* quá chật; dùng chip chủ đề để điều hướng */
  .xvh-sub{ position:static; }
}