@layer reset, base, layout, components, utility, vtg;

/* ============================================================
   TOKEN — không nằm trong layer để child theme ghi đè dễ dàng
   ============================================================ */
:root{
  --vc-brand:#0b6b3a;
  --vc-brand-2:#0e8c4c;
  --vc-brand-ink:#fff;
  --vc-accent:#c8862a;
  --vc-support:#0e8c4c;

  --vc-bg:#fff;
  --vc-surface:#f7f8f9;
  --vc-surface-2:#eef0f2;
  --vc-text:#1c1f22;
  --vc-muted:#5c6570;
  --vc-line:rgba(0,0,0,.1);

  --vc-font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --vc-font-head:var(--vc-font-sans);
  --vc-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- Thang chữ. Chỉ ba mức lớn nhất co giãn; từ H3 xuống là số cố định. --- */
  --vc-step--2:.8125rem;                                  /* 13 — nhỏ nhất, không xuống thấp hơn */
  --vc-step--1:.875rem;                                   /* 14 */
  --vc-step-0:1rem;                                       /* 16 */
  --vc-step-1:1.25rem;                                    /* 20 */
  --vc-step-2:clamp(1.5rem,1.15rem + 1.1vw,2rem);         /* 24 → 32 */
  --vc-step-3:clamp(2rem,1.25rem + 2.35vw,3.5rem);        /* 32 → 56 */
  --vc-step-hero:clamp(2.5rem,1.6rem + 2.8vw,3.875rem);   /* 40 → 62 */
  --vc-step-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);    /* 17 → 20 */
  --vc-step-btn:.9375rem;                                 /* 15 */
  --vc-step-badge:.6875rem;                               /* 11 — CHI cho huy hieu toan so, khong dau tieng Viet */

  /* Line-height bám lưới 4px */
  --vc-lh-hero:1.1;
  --vc-lh-h1:1.15;
  --vc-lh-h2:1.25;
  --vc-lh-h3:1.4;
  --vc-lh-body:1.5;
  --vc-lh-tight:1.45;
  --vc-lh-read:1.75;                                      /* bài dài: 16 × 1.75 = 28px, đúng lưới */

  /* Giãn chữ âm dần theo cỡ */
  --vc-ls-hero:-.025em;
  --vc-ls-h2:-.025em;
  --vc-ls-h3:-.015em;
  --vc-ls-body:0;

  /* Ba độ đậm duy nhất. 300 chỉ dùng từ 28px trở lên, dưới cỡ đó dấu tiếng Việt bị nhoè. */
  --vc-w-h1:500;
  --vc-w-h2:500;
  --vc-w-h3:600;
  --vc-w-body:400;
  --vc-w-lead:400;
  --vc-w-btn:600;

  /* --- Khoảng cách: thang 8px, số cứng. Chỉ đệm trang và đệm section co giãn. --- */
  --vc-s-1:4px;
  --vc-s-2:8px;
  --vc-s-3:12px;
  --vc-s-4:16px;
  --vc-s-5:24px;
  --vc-s-6:32px;
  --vc-s-7:48px;
  --vc-s-8:64px;
  --vc-space:clamp(1rem,4vw,2rem);
  --vc-section:clamp(4rem,8vw,6rem);

  /* --- Bề ngang: bốn tầng --- */
  --vc-shell:1440px;
  --vc-wide:1320px;
  --vc-content:760px;
  --vc-narrow:560px;

  /* --- Bo góc --- */
  --vc-r-sm:8px;
  --vc-r:12px;
  --vc-r-lg:16px;
  --vc-r-full:999px;

  /* --- Nút --- */
  --vc-btn-h:44px;
  --vc-btn-pad:10px 20px;

  /* --- Tỉ lệ ảnh: ba tỉ lệ, không tuỳ tiện --- */
  --vc-ratio-share:1200/630;
  --vc-ratio-card:4/3;
  --vc-ratio-product:1/1;
  --vc-ratio-hero:16/9;

  --vc-shadow:0 2px 10px rgba(0,0,0,.06);
  --vc-header-h:64px;
  --vc-ease:cubic-bezier(.2,.7,.3,1);

  /* Bí danh cho code chưa kịp đổi sang token mới */
  --vc-radius:var(--vc-r);
  --vc-radius-sm:var(--vc-r-sm);
  --vc-thumb-ratio:var(--vc-ratio-share);

  /* Cầu nối sang các plugin VTG — plugin đọc đúng các biến này */
  --vtg-dock-bg:var(--vc-bg);
  --vtg-dock-fg:var(--vc-text);
  --vtg-dock-active:var(--vc-brand);
  --vtg-toc-bg:var(--vc-surface);
  --vtg-form-accent:var(--vc-brand);
  --vtg-form-line:var(--vc-line);
  --vtg-form-bg:var(--vc-bg);
  --vtg-cm-btn:var(--vc-brand);

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --vc-bg:#121416;
    --vc-surface:#191c1f;
    --vc-surface-2:#22262a;
    --vc-text:#e7e9ea;
    --vc-muted:#a3acb5;
    --vc-line:rgba(255,255,255,.14);
    --vc-brand:#22a35f;
    --vc-shadow:0 2px 12px rgba(0,0,0,.5);
  }
}

:root[data-theme=dark]{
  --vc-bg:#121416;
  --vc-surface:#191c1f;
  --vc-surface-2:#22262a;
  --vc-text:#e7e9ea;
  --vc-muted:#a3acb5;
  --vc-line:rgba(255,255,255,.14);
  --vc-brand:#22a35f;
  --vc-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* Ghi đè có chủ đích lên vtg-essentials: rule không layer luôn thắng rule có layer */
.vtg-dock{--vtg-dock-bg:var(--vc-bg);--vtg-dock-fg:var(--vc-text);--vtg-dock-active:var(--vc-brand)}
.vtg-toc{--vtg-toc-bg:var(--vc-surface)}
.vtg-form{--vtg-form-accent:var(--vc-brand)}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--vc-header-h) + 16px)}
  body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
  ul[class],ol[class]{list-style:none;padding:0}
  img,picture,svg,video{max-width:100%;display:block;height:auto}
  input,button,textarea,select{font:inherit;color:inherit}
  button{cursor:pointer}
  table{border-collapse:collapse;width:100%}
  a{color:var(--vc-brand)}
  :target{scroll-margin-top:calc(var(--vc-header-h) + 16px)}
}

@layer base{
  body{
    margin:0;background:var(--vc-bg);color:var(--vc-text);
    font-family:var(--vc-font-sans);font-size:var(--vc-step-0);line-height:var(--vc-lh-body);
    -webkit-font-smoothing:antialiased;
    display:flex;flex-direction:column;min-height:100dvh;
  }
  /* H1 tiêu đề trang · H2 ý chính · H3 ý phụ. H4–H6 cố tình không tạo bậc mới
     để không ai bị cám dỗ dùng chúng thay cho cấu trúc đúng. */
  h1,h2,h3,h4,h5,h6{font-family:var(--vc-font-head);text-wrap:balance}
  h1{font-size:var(--vc-step-3);font-weight:var(--vc-w-h1);line-height:var(--vc-lh-h1);letter-spacing:var(--vc-ls-hero)}
  h2{font-size:var(--vc-step-2);font-weight:var(--vc-w-h2);line-height:var(--vc-lh-h2);letter-spacing:var(--vc-ls-h2)}
  h3{font-size:var(--vc-step-1);font-weight:var(--vc-w-h3);line-height:var(--vc-lh-h3);letter-spacing:var(--vc-ls-h3)}
  h4,h5,h6{font-size:var(--vc-step-0);font-weight:var(--vc-w-h3);line-height:var(--vc-lh-h3)}
  body{font-weight:var(--vc-w-body,400)}
  .vc-lead{font-size:var(--vc-step-lead);font-weight:var(--vc-w-lead);line-height:var(--vc-lh-body);color:var(--vc-muted)}
  p,li{text-wrap:pretty}
  small{font-size:var(--vc-step--1)}
  code,pre,kbd{font-family:var(--vc-font-mono);font-size:.92em}
  :focus-visible{outline:2px solid var(--vc-brand);outline-offset:2px;border-radius:2px}
  ::selection{background:var(--vc-brand);color:var(--vc-brand-ink)}
  hr{border:0;border-top:1px solid var(--vc-line);margin:var(--vc-space) 0}
}

@layer layout{
  .vc-wrap{width:min(100% - 2 * var(--vc-space),var(--vc-wide));margin-inline:auto}
  .vc-wrap--shell{width:min(100% - 2 * var(--vc-space),var(--vc-shell))}
  .vc-wrap--narrow{width:min(100% - 2 * var(--vc-space),var(--vc-content))}
  .vc-wrap--tight{width:min(100% - 2 * var(--vc-space),var(--vc-narrow))}
  .vc-main{flex:1 0 auto;padding-block:20px}
  .vc-main--flush{padding-block:0}
  .vc-stack>*+*{margin-top:var(--vc-s-5)}
  .vc-grid{display:grid;gap:var(--vc-s-5);grid-template-columns:1fr}
  @media (min-width:640px){.vc-grid{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){.vc-grid{gap:var(--vc-s-6);grid-template-columns:repeat(3,1fr)}}
}

@layer components{
  /* --- Bỏ qua tới nội dung --- */
  .vc-skip{position:absolute;left:-9999px;top:0;z-index:10000;padding:12px 18px;background:var(--vc-brand);color:var(--vc-brand-ink);border-radius:0 0 var(--vc-radius-sm) 0}
  .vc-skip:focus{left:0}

  /* --- Header: hàng và ô dựng từ cấu hình --- */
  .vc-header{position:sticky;top:0;z-index:8000;background:color-mix(in srgb,var(--vc-bg) 88%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--vc-line);transition:transform .25s ease,box-shadow .2s ease}
  .vc-header--sticky-none{position:relative}
  .vc-header--sticky-scrollup.is-hidden{transform:translateY(-100%)}
  .vc-header.is-stuck{box-shadow:var(--vc-shadow)}
  .vc-header--shrink.is-stuck .vc-header__in{min-height:calc(var(--vc-header-h) - 12px)}
  .vc-header--shrink.is-stuck .vc-brand img{max-height:32px}
  .vc-header--transparent:not(.is-stuck){position:absolute;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
  .vc-header__in{min-height:var(--vc-header-h)}
  .vc-topbar{border-bottom:1px solid var(--vc-line);font-size:var(--vc-step--1)}
  .vc-topbar .vc-row{min-height:38px}
  .vc-row{display:flex;align-items:center;gap:var(--vc-space)}
  .vc-cell{display:flex;align-items:center;gap:14px;min-width:0}
  .vc-cell--left{margin-right:auto}
  .vc-cell--center{margin-inline:auto}
  .vc-cell--right{margin-left:auto}
  .vc-cell:empty{display:none}
  .vc-el{display:flex;align-items:center;min-width:0}
  .vc-spacer{display:block;width:var(--vc-space)}
  .vc-info{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit;white-space:nowrap}
  .vc-info svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px;opacity:.7}
  .vc-info:hover{color:var(--vc-brand)}
  .vc-social{display:flex;gap:8px;margin:0;padding:0;list-style:none}
  .vc-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--vc-surface);color:var(--vc-text);text-decoration:none;font-size:12px}
  .vc-social svg{width:17px;height:17px;fill:currentColor}
  .vc-social a:hover{background:var(--vc-brand);color:var(--vc-brand-ink)}
  .vc-legal{font-size:var(--vc-step--1);color:var(--vc-muted);line-height:1.6}
  .vc-legal p{margin:0 0 4px}
  .vc-header__mobile{display:none;align-items:center;gap:12px;min-height:56px}
  .vc-header__mobile .vc-cell,.vc-header__mobile .vc-el{min-width:0}
  .vc-header__mobile .vc-el--burger,.vc-header__mobile .vc-el--icon_search+.vc-el{margin-left:0}
  .vc-header__mobile .vc-cell--right,.vc-header__mobile>.vc-el:first-child{margin-right:auto}
  /* Thanh mobile có thể tới 3 nút 44px: tên site phải chịu co, nếu không header tràn ngang */
  .vc-header__mobile .vc-brand{min-width:0}
  .vc-header__mobile .vc-brand>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

  /* --- Tấm phủ mở từ icon header. Mỗi lần chỉ một tấm mở. --- */
  /* Trượt xuống ngay dưới header, không phủ lên header — bấm lại icon là đóng được. */
  .vc-panel{position:fixed;left:0;right:0;top:var(--vc-header-h);z-index:7900;background:var(--vc-bg);border-bottom:1px solid var(--vc-line);box-shadow:0 10px 30px rgba(0,0,0,.1);max-height:calc(88dvh - var(--vc-header-h));overflow-y:auto;transform:translateY(-120%);transition:transform .28s var(--vc-ease)}
  body.admin-bar .vc-panel{top:calc(var(--vc-header-h) + 32px);max-height:calc(88dvh - var(--vc-header-h) - 32px)}
  .vc-panel[hidden]{display:block;visibility:hidden}
  .vc-panel.is-open{transform:translateY(0);visibility:visible}
  .vc-panel__in{position:relative;padding:26px 0 34px}
  .vc-panel__close{position:absolute;top:var(--vc-s-2);right:var(--vc-s-2);display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--vc-muted);border-radius:50%}
  .vc-panel__close:hover{color:var(--vc-text);background:var(--vc-surface)}
  .vc-panel__title{margin:24px 0 4px;font-size:var(--vc-step--1);color:var(--vc-muted)}
  .vc-panel__lead{margin:0 0 14px;font-size:var(--vc-step-1);font-weight:600}
  .vc-panel__acts{display:flex;flex-wrap:wrap;gap:var(--vc-s-2);margin:0}

  /* --- Mini-cart --- */
  .vc-mc__head{margin:0 0 var(--vc-s-4);padding-right:48px;font-size:var(--vc-step-1);font-weight:600}
  .vc-mc{display:grid;gap:var(--vc-s-4)}
  .vc-mc.is-busy{opacity:.55;pointer-events:none}
  .vc-mc__wait,.vc-mc__empty{margin:0;color:var(--vc-muted)}
  .vc-mc__err{margin:0;padding:10px 14px;border-radius:var(--vc-r-sm);background:var(--vc-surface);color:#b32d2e;font-size:var(--vc-step--1)}
  .vc-mc__list{display:grid;gap:var(--vc-s-4);margin:0;padding:0;list-style:none;max-height:46dvh;overflow-y:auto}
  .vc-mc__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--vc-s-3);align-items:start}
  .vc-mc__img{width:64px;height:64px;border-radius:var(--vc-r-sm);background:var(--vc-surface);object-fit:cover}
  .vc-mc__mid{min-width:0}
  .vc-mc__name{display:block;color:inherit;font-size:var(--vc-step--1);font-weight:600;line-height:1.35;text-decoration:none}
  .vc-mc__var{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
  .vc-mc__var span{padding:2px 8px;border:1px solid var(--vc-line);border-radius:var(--vc-r-full);font-size:var(--vc-step-badge);color:var(--vc-muted)}
  .vc-mc__qty{display:inline-flex;align-items:center;margin-top:var(--vc-s-2);border:1px solid var(--vc-line);border-radius:var(--vc-r-full);overflow:hidden}
  .vc-mc__step{width:30px;height:30px;border:0;background:none;color:inherit;font-size:1rem;line-height:1}
  .vc-mc__step:hover:not(:disabled){background:var(--vc-surface)}
  .vc-mc__step:disabled{opacity:.35}
  .vc-mc__n{min-width:26px;text-align:center;font-size:var(--vc-step--1);font-weight:600}
  .vc-mc__right{display:grid;justify-items:end;gap:var(--vc-s-1)}
  .vc-mc__sum{font-size:var(--vc-step--1);font-weight:600;white-space:nowrap}
  .vc-mc__del{border:0;background:none;padding:0;color:var(--vc-muted);font-size:var(--vc-step--2);text-decoration:underline}
  .vc-mc__del:hover{color:#b32d2e}

  /*
   * Màn cảm ứng: nới nút cộng trừ và nút xoá lên đủ 44px cho ngón tay.
   * Bắt cả hai lối: bề ngang phone/tablet, và mọi thiết bị cảm ứng thật.
   * Chrome desktop thu nhỏ vẫn báo hover:hover nên chỉ dựa vào hover là hụt.
   */
  @media (max-width:768px),(hover:none){
    .vc-mc__step{width:44px;height:44px}
    .vc-mc__n{min-width:32px}
    .vc-mc__del{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 var(--vc-s-2)}
    .vc-mc__right{gap:0}
  }
  .vc-mc__ship{margin:0;padding:10px 12px;border-radius:var(--vc-r-sm);background:var(--vc-surface);font-size:var(--vc-step--1);color:var(--vc-muted)}
  .vc-mc__ship.is-done{color:var(--vc-support);font-weight:600}
  .vc-mc__bar{display:block;height:4px;margin-top:8px;border-radius:var(--vc-r-full);background:var(--vc-line);overflow:hidden}
  .vc-mc__bar>span{display:block;height:100%;background:var(--vc-support);transition:width .3s var(--vc-ease)}
  .vc-mc__total{display:flex;align-items:baseline;justify-content:space-between;padding-top:var(--vc-s-3);border-top:1px solid var(--vc-line);font-size:var(--vc-step-1)}
  .vc-mc__acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--vc-s-2)}
  .vc-mc__acts .vc-btn{width:100%}
  .vc-panel__links{margin:0;padding:0;list-style:none}
  .vc-panel__links a{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 0;text-decoration:none;color:inherit;font-weight:600}
  .vc-panel__links a:hover{color:var(--vc-brand)}
  .vc-panel__links .vc-i{width:18px;height:18px;flex:0 0 18px;opacity:.75}
  .vc-panel__search input[type=search]{width:100%;border:0;border-bottom:1px solid var(--vc-line);border-radius:0;padding:10px 0 12px;font-size:1.55rem;background:none}
  .vc-panel__search .vc-btn{display:none}
  .vc-panel__menu .vc-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .vc-panel__menu .vc-menu__link{padding:10px 0;font-size:1.3rem;font-weight:600;border-radius:0}
  .vc-panel__menu .vc-menu__link:hover{background:none;color:var(--vc-brand)}
  .vc-panel__menu .vc-menu__item--parent{display:grid;grid-template-columns:1fr auto;align-items:center}
  .vc-panel__menu .vc-menu__sub{position:static;display:none;border:0;box-shadow:none;background:none;padding:0 0 10px 14px;grid-column:1/-1}
  .vc-panel__menu .vc-menu__item--parent.is-open>.vc-menu__sub{display:block}
  .vc-panel__menu .vc-menu__toggle{display:grid;place-items:center;color:var(--vc-muted)}
  body.vc-panel-open{overflow:hidden}
  .vc-brand{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;color:inherit;font-weight:700;font-size:var(--vc-step-1);margin-right:auto}
  .vc-brand img{max-height:40px;width:auto}
  .vc-brand__tag{display:block;font-size:var(--vc-step--2);font-weight:400;color:var(--vc-muted);line-height:1.2}

  /* --- Menu --- */
  .vc-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
  .vc-menu__item{position:relative}
  /* .page_item: menu dự phòng do wp_list_pages sinh khi chưa gán menu nào */
  .vc-menu__link,.vc-menu .page_item>a{display:block;padding:10px 12px;text-decoration:none;color:var(--vc-text);font-size:var(--vc-step--1);font-weight:500;border-radius:var(--vc-r-sm)}
  .vc-menu__link:hover,.vc-menu .page_item>a:hover{background:var(--vc-surface);color:var(--vc-brand)}
  .vc-menu__item.is-current>.vc-menu__link,.vc-menu .current_page_item>a{color:var(--vc-brand);font-weight:700}
  .vc-menu__toggle{display:none;background:none;border:0;padding:8px;border-radius:var(--vc-radius-sm)}
  .vc-menu__toggle svg{width:18px;height:18px;fill:currentColor;transition:transform .18s}
  .vc-menu__sub{position:absolute;top:100%;left:0;min-width:220px;background:var(--vc-bg);border:1px solid var(--vc-line);border-radius:var(--vc-radius);box-shadow:var(--vc-shadow);padding:6px;margin:0;list-style:none;display:none;z-index:20}
  .vc-menu__item--parent:hover>.vc-menu__sub,.vc-menu__item--parent:focus-within>.vc-menu__sub,.vc-menu__item--parent.is-open>.vc-menu__sub{display:block}
  .vc-menu__sub .vc-menu__link{padding:9px 12px;font-size:var(--vc-step--1)}
  .vc-menu__sub .vc-menu__sub{top:0;left:100%}

  .vc-actions{display:flex;align-items:center;gap:4px}
  .vc-iconbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;background:none;border:1px solid transparent;border-radius:var(--vc-radius-sm);color:var(--vc-text)}
  .vc-iconbtn--wide{width:auto;grid-auto-flow:column;gap:.35rem;padding:0 .6rem;font:inherit;font-size:var(--vc-step--1);font-weight:600;cursor:pointer}
  .vc-iconbtn__n{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--vc-r-full);background:var(--vc-brand);color:var(--vc-brand-ink);font-size:var(--vc-step-badge);font-weight:600;line-height:17px;text-align:center}
  .vc-iconbtn:hover{background:var(--vc-surface);color:var(--vc-brand)}

  /* Ô tìm kiếm dạng viên trong header */
  .vc-field{display:flex;align-items:center;gap:var(--vc-s-1);padding:5px 5px 5px 14px;border:1px solid var(--vc-line);border-radius:var(--vc-r-full);background:var(--vc-bg)}
  .vc-field:focus-within{border-color:var(--vc-brand)}
  .vc-field .search-field{flex:1;min-width:130px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:var(--vc-step--1)}
  .vc-field .search-field:focus{outline:none}
  .vc-field__go{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--vc-muted);cursor:pointer}
  .vc-field__go:hover{background:var(--vc-surface);color:var(--vc-brand)}
  .vc-field__go svg{width:17px;height:17px}

  /* Hộp đăng nhập / đăng ký */
  .vc-auth{width:min(92vw,420px);padding:0;border:0;border-radius:16px;background:var(--vc-bg);color:var(--vc-text);box-shadow:0 18px 60px rgba(0,0,0,.22)}
  .vc-auth::backdrop{background:rgba(0,0,0,.45)}
  .vc-auth__box{position:relative;padding:1.6rem}
  .vc-auth__x{position:absolute;top:.9rem;right:.9rem;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--vc-line);border-radius:50%;background:none;color:inherit;cursor:pointer}
  .vc-auth__x svg{width:15px;height:15px}
  .vc-auth__title{margin:0 0 1.1rem;font-size:var(--vc-step-1);font-weight:600;text-align:center}
  .vc-auth__tabs{display:flex;gap:.3rem;margin-bottom:1.1rem;padding:.25rem;border-radius:var(--vc-r-full);background:var(--vc-surface)}
  .vc-auth__tab{flex:1;min-height:38px;border:0;border-radius:var(--vc-r-full);background:none;color:var(--vc-muted);font:inherit;font-size:var(--vc-step--1);font-weight:600;cursor:pointer}
  .vc-auth__tab.is-on{background:var(--vc-bg);color:var(--vc-text);box-shadow:var(--vc-shadow)}
  .vc-auth__body p{margin:0 0 .8rem}
  .vc-auth__body label{display:block;margin-bottom:.3rem;font-size:var(--vc-step--1);font-weight:600}
  .vc-auth__body input[type=text],.vc-auth__body input[type=email],.vc-auth__body input[type=password]{width:100%;min-height:48px;padding:.6rem .9rem;border:1px solid var(--vc-line);border-radius:12px;background:var(--vc-bg);color:inherit;font:inherit}
  .vc-auth__body button[type=submit]{width:100%;min-height:48px;margin-top:.4rem;border:0;border-radius:var(--vc-r-full);background:var(--vc-brand);color:var(--vc-brand-ink);font:inherit;font-weight:var(--vc-w-btn);cursor:pointer}
  .vc-auth__note{color:var(--vc-muted);font-size:var(--vc-step--1);text-align:center}
  .vc-auth__or{position:relative;margin:1.2rem 0;text-align:center}
  .vc-auth__or::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--vc-line)}
  .vc-auth__or span{position:relative;padding:0 .7rem;background:var(--vc-bg);color:var(--vc-muted);font-size:var(--vc-step--1)}
  .vc-auth__foot{margin:1rem 0 0;font-size:var(--vc-step--1);text-align:center}
  .vc-auth__foot a{color:var(--vc-muted)}
  .vc-iconbtn svg{width:20px;height:20px;fill:currentColor}
  .vc-iconbtn .vc-icon--moon{display:none}
  :root[data-theme=dark] .vc-iconbtn .vc-icon--moon{display:block}
  :root[data-theme=dark] .vc-iconbtn .vc-icon--sun{display:none}

  /* --- Tiêu đề trang & breadcrumb --- */
  .vc-page-head{margin-bottom:var(--vc-space)}
  .vc-page-title{margin:0 0 6px}
  .vc-page-sub{color:var(--vc-muted)}
  .vc-crumbs{font-size:var(--vc-step--1);color:var(--vc-muted);margin-bottom:14px}
  .vc-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
  .vc-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
  .vc-crumbs a{color:inherit;text-decoration:none}
  .vc-crumbs a:hover{color:var(--vc-brand);text-decoration:underline}

  /* --- Ảnh đại diện (Template::thumb, dùng ở trang tĩnh) --- */
  /* Thẻ bài viết nằm ở plugin vtg-tin-tuc, không còn ở đây */
  .vc-thumb{overflow:hidden;border-radius:var(--vc-radius);background:var(--vc-surface-2);aspect-ratio:var(--vc-thumb-ratio,1200/630)}
  .vc-thumb__img{width:100%;height:100%;object-fit:cover;transition:transform .3s}

  /* --- Nội dung bài --- */
  .vc-entry{font-size:var(--vc-step-0);line-height:var(--vc-lh-read)}
  .vc-entry>*+*{margin-top:1.1em}
  .vc-entry h2{margin-top:1.8em}
  .vc-entry h3{margin-top:1.5em}
  .vc-entry ul,.vc-entry ol{padding-left:1.4em}
  .vc-entry li+li{margin-top:.4em}
  .vc-entry img,.vc-entry figure img{border-radius:var(--vc-radius)}
  .vc-entry figcaption{font-size:var(--vc-step--1);color:var(--vc-muted);margin-top:8px;text-align:center}
  .vc-entry blockquote{margin:0;padding:2px 0 2px 20px;border-left:3px solid var(--vc-brand);color:var(--vc-muted);font-style:italic}
  .vc-entry pre{background:var(--vc-surface);padding:16px;border-radius:var(--vc-radius);overflow-x:auto}
  .vc-entry :not(pre)>code{background:var(--vc-surface-2);padding:2px 6px;border-radius:4px}
  .vc-entry table{display:block;overflow-x:auto;white-space:nowrap}
  .vc-entry th,.vc-entry td{border:1px solid var(--vc-line);padding:9px 12px;text-align:left}
  .vc-entry th{background:var(--vc-surface)}
  .vc-entry a{text-underline-offset:2px}

  .vc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--vc-space)}
  .vc-tags a{font-size:var(--vc-step--1);padding:5px 11px;background:var(--vc-surface);border-radius:99px;text-decoration:none;color:var(--vc-muted)}
  .vc-tags a:hover{background:var(--vc-support,var(--vc-brand));color:#fff}


  /* --- Nút & form --- */
  .vc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vc-btn-h);padding:var(--vc-btn-pad);background:var(--vc-accent,var(--vc-brand));color:var(--vc-brand-ink);border:0;border-radius:var(--vc-r);font-size:var(--vc-step-btn);font-weight:var(--vc-w-btn);line-height:1.2;text-decoration:none;transition:transform .15s var(--vc-ease),opacity .15s}
  .vc-btn:hover{transform:translateY(-1px);opacity:.92}
  .vc-btn:hover{background:var(--vc-brand-2)}
  .vc-btn--ghost{background:transparent;color:var(--vc-brand);border:1px solid currentColor}

  /* --- Phân trang --- */
  .vc-pager{margin-top:var(--vc-section)}
  .vc-pager .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .vc-pager .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--vc-line);border-radius:var(--vc-radius-sm);text-decoration:none;color:var(--vc-text)}
  .vc-pager .page-numbers:hover{border-color:var(--vc-brand);color:var(--vc-brand)}
  .vc-pager .page-numbers.current{background:var(--vc-support,var(--vc-brand));border-color:var(--vc-support,var(--vc-brand));color:#fff;font-weight:600}
  .vc-pager .dots{border-color:transparent}

  /* --- Bình luận (khi chưa bật module của plugin) --- */
  .vc-comments{margin-top:var(--vc-section)}
  .vc-comments__card{padding:var(--vc-s-6);background:var(--vc-bg);border:1px solid var(--vc-line);border-radius:var(--vc-r-lg);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 22px rgba(0,0,0,.07)}
  .vc-comments__title{margin:0 0 var(--vc-s-5);font-size:var(--vc-step-1)}
  .vc-comment-form label{display:block;font-size:var(--vc-step--1);font-weight:600;margin-bottom:4px}
  .vc-comment-form input[type=text],.vc-comment-form input[type=email],.vc-comment-form input[type=url],.vc-comment-form textarea{width:100%;padding:11px 13px;border:1px solid var(--vc-line);border-radius:var(--vc-radius-sm);background:var(--vc-bg)}
  .vc-comment-form .submit{padding:12px 24px;background:var(--vc-brand);color:var(--vc-brand-ink);border:0;border-radius:var(--vc-radius-sm);font-weight:600}

  /* --- Footer --- */
  .vc-footer{margin-top:auto;background:var(--vc-surface);border-top:1px solid var(--vc-line);padding-block:var(--vc-section) var(--vc-space)}
  .vc-footer__cols{display:grid;gap:var(--vc-space);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .vc-widget__title{font-size:var(--vc-step-0);margin-bottom:10px}
  .vc-widget ul{list-style:none;padding:0;margin:0}
  .vc-widget li+li{margin-top:6px}
  .vc-widget a{color:var(--vc-muted);text-decoration:none}
  .vc-widget a:hover{color:var(--vc-brand)}
  .vc-footer__bar{display:flex;flex-wrap:wrap;gap:10px var(--vc-space);align-items:center;justify-content:space-between;margin-top:var(--vc-section);padding-top:var(--vc-space);border-top:1px solid var(--vc-line);font-size:var(--vc-step--2);color:var(--vc-muted)}
  .vc-footer__menu{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0}
  .vc-footer__menu a{color:inherit;text-decoration:none}
  .vc-footer__menu a:hover{color:var(--vc-brand)}

  /* --- 404 & không kết quả --- */
  .vc-empty{text-align:center;padding-block:var(--vc-section)}
  .vc-empty h1{font-size:var(--vc-step-hero);line-height:var(--vc-lh-hero);color:var(--vc-brand);margin-bottom:var(--vc-s-2)}
  .vc-empty p{color:var(--vc-muted);margin-bottom:var(--vc-s-5)}
  .vc-empty .vc-field{max-width:480px;margin:0 auto var(--vc-s-5)}
}

@layer utility{
  .vc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .vc-center{text-align:center}
  .vc-hide{display:none!important}
  .alignwide{width:min(100%,var(--vc-wide));margin-inline:auto}
  .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
  .aligncenter{margin-inline:auto;display:block}
  .alignleft{float:left;margin:0 var(--vc-space) var(--vc-space) 0}
  .alignright{float:right;margin:0 0 var(--vc-space) var(--vc-space)}
  .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1023px){
  .vc-header__desktop{display:none}
  .vc-header__mobile{display:flex}
  .vc-menu{flex-direction:column;align-items:stretch;gap:0}
  .vc-menu__item{border-bottom:1px solid var(--vc-line)}
  .vc-menu__item--parent{display:grid;grid-template-columns:1fr auto;align-items:center}
  .vc-menu__link{padding:13px 4px}
  .vc-menu__toggle{display:grid;place-items:center;color:var(--vc-muted)}
  .vc-menu__item.is-open>.vc-menu__toggle svg{transform:rotate(180deg)}
  .vc-menu__sub{position:static;display:none;border:0;box-shadow:none;background:transparent;padding:0 0 8px 14px;grid-column:1/-1}
  .vc-menu__item--parent:hover>.vc-menu__sub,.vc-menu__item--parent:focus-within>.vc-menu__sub{display:none}
  .vc-menu__item--parent.is-open>.vc-menu__sub{display:block}

}

@media (min-width:1024px){
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .vc-header,.vc-footer,.vc-comments,.vtg-fc,.vtg-dock{display:none!important}
  body{background:#fff;color:#000}
}