/* ==========================================================================
   WEB366 PET — style.css
   Namespace: tất cả class/biến dùng prefix web366-, toàn bộ CSS được bọc
   trong scope .web366-ux7k2p (đặt trên <body>) để không phá Elementor/WP.
   Giai đoạn 1: shell (header/footer/menu) là bản chính thức, phần nội dung
   từng trang đang ở dạng wireframe block (.web366-wf).
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. BODY (biến nằm ở tokens.css)
   -------------------------------------------------------------------------- */
.web366-ux7k2p {
  background: var(--web366-paper);
  color: var(--web366-ink);
  font-family: var(--web366-font);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   02. BASE (scoped)
   -------------------------------------------------------------------------- */
.web366-ux7k2p *,
.web366-ux7k2p *::before,
.web366-ux7k2p *::after { box-sizing: border-box; }

.web366-ux7k2p h1,
.web366-ux7k2p h2,
.web366-ux7k2p h3,
.web366-ux7k2p h4 {
  font-family: var(--web366-font);
  font-weight: var(--web366-fw-head);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 var(--web366-s3);
  text-wrap: pretty;
}
.web366-ux7k2p h1 { font-size: clamp(34px, 4.6vw, 54px); }
.web366-ux7k2p h2 { font-size: clamp(26px, 3.2vw, 38px); }
.web366-ux7k2p h3 { font-size: clamp(19px, 2vw, 24px); }
.web366-ux7k2p p { margin: 0 0 var(--web366-s3); }
.web366-ux7k2p img { display: block; max-width: 100%; height: auto; }
.web366-ux7k2p ul, .web366-ux7k2p ol { margin: 0; padding: 0; list-style: none; }
.web366-ux7k2p a { color: var(--web366-accent-700); text-decoration: none; text-underline-offset: 3px; }
.web366-ux7k2p a:hover { color: var(--web366-hot-700); text-decoration: underline; }
.web366-ux7k2p button { font: inherit; color: inherit; }
.web366-ux7k2p :focus-visible { outline: 2px solid var(--web366-accent); outline-offset: 2px; }
.web366-ux7k2p ::selection { background: var(--web366-accent-200); }

.web366-container {
  width: 100%;
  max-width: var(--web366-max);
  margin: 0 auto;
  padding: 0 var(--web366-s6);
}
.web366-kicker {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--web366-accent-700);
  margin: 0 0 var(--web366-s2);
}
.web366-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.web366-skip {
  position: absolute; left: var(--web366-s3); top: -60px; z-index: 200;
  background: var(--web366-ink); color: var(--web366-white); padding: var(--web366-s2) var(--web366-s3);
  border-radius: var(--web366-radius); transition: top .2s;
}
.web366-skip:focus { top: var(--web366-s2); color: var(--web366-white); }

/* --------------------------------------------------------------------------
   03. BUTTONS
   -------------------------------------------------------------------------- */
.web366-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: var(--web366-fw-head); font-size: 15px; line-height: 1.2;
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--web366-radius);
  background: transparent; cursor: pointer; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.web366-btn:hover { text-decoration: none; }
.web366-btn--primary { background: var(--web366-accent); color: var(--web366-white); }
.web366-btn--primary:hover { background: var(--web366-accent-600); color: var(--web366-white); }
.web366-btn--primary:active { background: var(--web366-accent-700); }
.web366-btn--hot { background: var(--web366-hot); color: var(--web366-white); }
.web366-btn--hot:hover { background: var(--web366-hot-700); color: var(--web366-white); }
.web366-btn--outline { border-color: var(--web366-ink); color: var(--web366-ink); }
.web366-btn--outline:hover { background: var(--web366-ink); color: var(--web366-paper); }
.web366-btn--ghost { color: var(--web366-accent-700); padding-inline: 8px; }
.web366-btn--ghost:hover { background: var(--web366-accent-100); }
.web366-btn--block { width: 100%; }
.web366-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   04. TOPBAR
   -------------------------------------------------------------------------- */
.web366-topbar {
  background: var(--web366-ink);
  color: var(--web366-on-dark-90);
  font-size: 13.5px;
  letter-spacing: .01em;
}
.web366-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--web366-s4); min-height: 38px;
}
.web366-topbar__note { display: flex; align-items: center; gap: var(--web366-s2); margin: 0; white-space: nowrap; }
.web366-topbar__dot { color: var(--web366-hot); }
.web366-topbar a { color: var(--web366-on-dark-90); }
.web366-topbar a:hover { color: var(--web366-white); text-decoration: underline; }
.web366-topbar__links { display: flex; align-items: center; gap: var(--web366-s4); }

/* --------------------------------------------------------------------------
   05. HEADER / NAV
   -------------------------------------------------------------------------- */
.web366-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--web366-paper);
  transition: box-shadow .2s ease, background .2s ease;
}
.web366-header.is-stuck {
  background: rgba(243, 242, 242, .93);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--web366-line), var(--web366-shadow-sm);
}
.web366-header__inner {
  display: flex; align-items: center; gap: var(--web366-s6);
  min-height: var(--web366-header-h);
}
.web366-logo { display: flex; align-items: center; flex: 0 0 auto; }
.web366-logo:hover { text-decoration: none; }
.web366-logo svg { height: 34px; width: auto; }

.web366-nav { margin: 0 auto; }
.web366-menu { display: flex; align-items: center; gap: var(--web366-s6); }
.web366-menu > li { position: relative; }
.web366-menu > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 0; font-size: 16px; color: var(--web366-ink);
}
.web366-menu > li > a:hover,
.web366-menu > li.is-open > a { color: var(--web366-accent-700); text-decoration: none; }
.web366-menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--web366-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.web366-menu > li > a:hover::after,
.web366-menu > li.is-open > a::after,
.web366-menu > li.web366-current > a::after { transform: scaleX(1); }
.web366-menu > li.web366-current > a { color: var(--web366-accent-800); }
.web366-caret { width: 9px; height: 9px; transition: transform .2s ease; }
.web366-menu > li.is-open .web366-caret { transform: rotate(180deg); }

.web366-sub {
  position: absolute; top: calc(100% + 6px); left: -14px; min-width: 232px;
  background: var(--web366-paper); border: 1px solid var(--web366-line);
  border-radius: var(--web366-radius); box-shadow: var(--web366-shadow-md);
  padding: var(--web366-s2) 0; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.web366-menu > li.is-open > .web366-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.web366-sub a {
  display: block; padding: 9px 18px; font-size: 15px; color: var(--web366-ink);
}
.web366-sub a:hover { background: var(--web366-accent-100); color: var(--web366-accent-800); text-decoration: none; }

.web366-actions { display: flex; align-items: center; gap: var(--web366-s1); flex: 0 0 auto; }
.web366-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--web366-radius); color: var(--web366-ink);
  transition: background .18s ease, color .18s ease;
}
.web366-iconbtn:hover { background: var(--web366-accent-100); color: var(--web366-accent-800); }
.web366-iconbtn svg { width: 22px; height: 22px; }
.web366-badge {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--web366-hot); color: var(--web366-white); font-size: 11px; font-weight: 600;
  border-radius: 9px; line-height: 1;
}
.web366-header__hotline {
  display: flex; flex-direction: column; line-height: 1.15; margin-left: var(--web366-s2);
}
.web366-header__hotline span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--web366-ink-45); }
.web366-header__hotline a { font-size: 17px; font-weight: 600; color: var(--web366-ink); }
.web366-burger { display: none; }

/* search bar dưới header */
.web366-search {
  display: none; border-top: 1px solid var(--web366-line); background: var(--web366-paper);
}
.web366-search.is-open { display: block; }
.web366-search form { display: flex; gap: var(--web366-s2); padding: var(--web366-s3) 0; }
.web366-input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  background: var(--web366-surface); color: var(--web366-ink);
  border: 1px solid var(--web366-line); border-radius: var(--web366-radius);
}
.web366-input::placeholder { color: var(--web366-ink-45); }

/* --------------------------------------------------------------------------
   06. MOBILE DRAWER + OVERLAY
   -------------------------------------------------------------------------- */
.web366-overlay {
  position: fixed; inset: 0; z-index: 110; background: rgba(32, 30, 29, .55);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.web366-overlay.is-open { opacity: 1; visibility: visible; }

.web366-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
  width: 78%; max-width: 340px;
  background: var(--web366-ink-900); color: var(--web366-on-dark);
  transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.web366-drawer.is-open { transform: translateX(0); }
.web366-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--web366-s4); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.web366-drawer__head svg { height: 30px; width: auto; }
.web366-drawer__close {
  width: 40px; height: 40px; border: 0; background: transparent; color: var(--web366-on-dark); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--web366-radius);
}
.web366-drawer__close:hover { background: rgba(255, 255, 255, .1); }
.web366-drawer nav { padding: var(--web366-s2) 0; flex: 1; }
.web366-drawer a { color: var(--web366-on-dark); }
.web366-macc { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.web366-macc > a,
.web366-macc__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px var(--web366-s4); font-size: 17px; background: transparent; border: 0;
  cursor: pointer; text-align: left;
}
.web366-macc > a:hover, .web366-macc__toggle:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.web366-macc__panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; background: rgba(255, 255, 255, .04); }
.web366-macc.is-open .web366-macc__panel { max-height: 320px; }
.web366-macc.is-open .web366-macc__toggle .web366-caret { transform: rotate(180deg); }
.web366-macc__panel a { display: block; padding: 11px var(--web366-s4) 11px 34px; font-size: 15px; color: var(--web366-on-dark-70); }
.web366-macc__panel a:hover { color: var(--web366-white); }
.web366-drawer__foot {
  padding: var(--web366-s4); border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; gap: var(--web366-s2);
}
.web366-drawer__foot .web366-btn--outline { border-color: rgba(255, 255, 255, .4); color: var(--web366-on-dark); }
.web366-drawer__foot .web366-btn--outline:hover { background: var(--web366-on-dark); color: var(--web366-ink-900); }

/* --------------------------------------------------------------------------
   07. MINI CART DRAWER (UI — dữ liệu do WooCommerce cung cấp)
   -------------------------------------------------------------------------- */
.web366-minicart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: 90%; max-width: 400px; background: var(--web366-paper);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column; box-shadow: var(--web366-shadow-lg);
}
.web366-minicart.is-open { transform: translateX(0); }
.web366-minicart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--web366-s4); border-bottom: 1px solid var(--web366-line);
}
.web366-minicart__head h2 { margin: 0; font-size: 20px; }
.web366-minicart__body { flex: 1; overflow-y: auto; padding: var(--web366-s4); }
.web366-minicart__foot { padding: var(--web366-s4); border-top: 1px solid var(--web366-line); display: grid; gap: var(--web366-s2); }
.web366-minicart__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 17px; }
.web366-minicart__row strong { font-size: 20px; }

/* --------------------------------------------------------------------------
   08. FOOTER
   -------------------------------------------------------------------------- */
.web366-footer {
  background: var(--web366-ink-900); color: var(--web366-on-dark-70); margin-top: 0;
  padding: var(--web366-s16) 0 var(--web366-s6);
  font-size: 15px;
}
.web366-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--web366-s8);
}
.web366-footer h3 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--web366-white); margin-bottom: var(--web366-s4);
}
.web366-footer a { color: var(--web366-on-dark-70); }
.web366-footer a:hover { color: var(--web366-white); }
.web366-footer__col li { margin-bottom: var(--web366-s2); }
.web366-footer__logo { margin-bottom: var(--web366-s3); }
.web366-footer__logo svg { height: 34px; width: auto; }
.web366-footer__about { max-width: 34ch; color: var(--web366-on-dark-55); }
.web366-footer__biz li { margin-bottom: var(--web366-s2); color: var(--web366-on-dark-55); }
.web366-footer__biz strong { color: var(--web366-white); font-weight: 600; }
.web366-footer__bottom {
  margin-top: var(--web366-s12); padding-top: var(--web366-s4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--web366-s3); justify-content: space-between;
  font-size: 13.5px; color: var(--web366-on-dark-45);
}

/* --------------------------------------------------------------------------
   09. PAGE HEAD / BREADCRUMB
   -------------------------------------------------------------------------- */
.web366-pagehead { padding: var(--web366-s12) 0 var(--web366-s6); }
.web366-pagehead h1 { margin-bottom: var(--web366-s3); max-width: 20ch; }
.web366-pagehead p { max-width: 58ch; color: var(--web366-ink-60); font-size: 18px; }
.web366-crumb { display: flex; flex-wrap: wrap; gap: var(--web366-s2); font-size: 14px; color: var(--web366-ink-45); margin-bottom: var(--web366-s4); }
.web366-crumb li::after { content: "/"; margin-left: var(--web366-s2); color: var(--web366-line); }
.web366-crumb li:last-child::after { content: ""; }
.web366-crumb a { color: var(--web366-ink-60); }

.web366-section { padding: var(--web366-s16) 0; }
.web366-section--tight { padding: var(--web366-s12) 0; }
.web366-section--alt { background: var(--web366-surface); }
.web366-section--paper { background: var(--web366-paper); }

/* --------------------------------------------------------------------------
   10. WIREFRAME BLOCKS (chỉ dùng ở giai đoạn khung — sẽ được thay bằng UI thật)
   -------------------------------------------------------------------------- */
.web366-wf {
  position: relative;
  border: 1px dashed var(--web366-ink-45);
  background: repeating-linear-gradient(-45deg, rgba(32,30,29,.035) 0 10px, transparent 10px 20px);
  border-radius: var(--web366-radius);
  padding: var(--web366-s4);
  min-height: 130px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.web366-wf__tag {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--web366-accent-800);
}
.web366-wf__title { font-size: 19px; font-weight: 600; line-height: 1.2; }
.web366-wf__note { font-size: 14px; color: var(--web366-ink-60); max-width: 70ch; margin: 0; }
.web366-wf--hero { min-height: 420px; background-color: var(--web366-surface); }
.web366-wf--tall { min-height: 300px; }
.web366-wf--sm { min-height: 92px; }
.web366-wf--hot { border-color: var(--web366-hot); }
.web366-wf--hot .web366-wf__tag { color: var(--web366-hot-700); }
.web366-wf__list { font-size: 14px; color: var(--web366-ink-60); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.web366-wf__list li::before { content: "— "; color: var(--web366-ink-45); }

.web366-wfgrid { display: grid; gap: var(--web366-s4); }
.web366-wfgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web366-wfgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web366-wfgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.web366-wfgrid--sidebar { grid-template-columns: 280px minmax(0, 1fr); }
.web366-wfgrid--detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.web366-wfgrid--cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

.web366-stack { display: grid; gap: var(--web366-s4); }
.web366-stack--lg { gap: var(--web366-s8); }

/* --------------------------------------------------------------------------
   11. SITEMAP / WIREFRAME OVERVIEW (trang wireframe.html)
   -------------------------------------------------------------------------- */
.web366-map { display: grid; gap: var(--web366-s3); }
.web366-map__row {
  display: grid; grid-template-columns: 54px 1fr 230px 150px; gap: var(--web366-s4);
  align-items: baseline; padding: var(--web366-s3) 0; border-top: 1px solid var(--web366-line);
}
.web366-map__row:hover { background: var(--web366-accent-100); }
.web366-map__num { font-size: 13px; color: var(--web366-ink-45); letter-spacing: .1em; }
.web366-map__name { font-size: 20px; font-weight: 600; }
.web366-map__desc { font-size: 14px; color: var(--web366-ink-60); margin: 4px 0 0; }
.web366-map__url { font-size: 14px; color: var(--web366-accent-700); word-break: break-all; }
.web366-map__file { font-size: 13.5px; color: var(--web366-ink-45); }
.web366-map__tpl { font-size: 12px; color: var(--web366-ink-45); display: block; margin-top: 3px; }

.web366-mini { border: 1px solid var(--web366-line); background: var(--web366-white); border-radius: var(--web366-radius); overflow: hidden; }
.web366-mini__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--web366-s2);
  padding: var(--web366-s2) var(--web366-s3); border-bottom: 1px solid var(--web366-line);
  background: var(--web366-surface);
}
.web366-mini__cap b { font-size: 15px; }
.web366-mini__cap span { font-size: 12px; color: var(--web366-ink-45); }
.web366-mini__body { padding: var(--web366-s3); display: grid; gap: 6px; }
.web366-blk {
  border: 1px dashed var(--web366-ink-45); border-radius: 2px; padding: 7px 9px;
  font-size: 12px; color: var(--web366-ink-60); background: rgba(32,30,29,.02);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.web366-blk--fill { background: var(--web366-accent-100); border-color: var(--web366-accent-600); color: var(--web366-accent-800); }
.web366-blk--dark { background: var(--web366-ink-900); border-color: var(--web366-ink-900); color: var(--web366-on-dark-80); }
.web366-blk--tall { min-height: 62px; }
.web366-blk__row { display: grid; gap: 6px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.web366-note { font-size: 14px; color: var(--web366-ink-60); max-width: 72ch; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .web366-header__hotline { display: none; }
  .web366-menu { gap: var(--web366-s4); }
  .web366-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--web366-s6); }
  .web366-map__row { grid-template-columns: 40px 1fr 200px; }
  .web366-map__file { display: none; }
  .web366-topbar__links { display: none; }
}
@media (max-width: 980px) {
  .web366-nav { display: none; }
  .web366-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--web366-radius); color: var(--web366-ink);
  }
  .web366-burger:hover { background: var(--web366-accent-100); }
  .web366-burger svg { width: 24px; height: 24px; }
  .web366-logo { margin-right: auto; }
  .web366-header__inner { gap: var(--web366-s2); }
  .web366-wfgrid--sidebar,
  .web366-wfgrid--detail,
  .web366-wfgrid--cart { grid-template-columns: minmax(0, 1fr); }
  .web366-wfgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .web366-container { padding: 0 var(--web366-s4); }
  .web366-topbar { font-size: 12.5px; }
  .web366-topbar__note { white-space: normal; }
  .web366-wfgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web366-section { padding: var(--web366-s8) 0; }
  .web366-footer { padding-top: var(--web366-s12); }
  .web366-map__row { grid-template-columns: 1fr; gap: var(--web366-s1); }
}
@media (max-width: 520px) {
  .web366-wfgrid--2,
  .web366-wfgrid--3,
  .web366-wfgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .web366-wf--hero { min-height: 320px; }
  .web366-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .web366-ux7k2p *,
  .web366-ux7k2p *::before,
  .web366-ux7k2p *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   13. TRANG CHỦ — COMPONENTS
   ========================================================================== */

/* --- section heading dùng chung --- */
.web366-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--web366-s6); margin-bottom: var(--web366-s8); }
.web366-sechead h2 { margin: 0; max-width: 18ch; }
.web366-sechead p { margin: var(--web366-s2) 0 0; color: var(--web366-ink-60); max-width: 46ch; }
.web366-sechead__link { white-space: nowrap; font-weight: 600; }

/* --- HERO SLIDER --- */
.web366-hero { position: relative; overflow: hidden; background: var(--web366-surface); }
.web366-hero__track { position: relative; min-height: 620px; }
.web366-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
  display: flex; align-items: center;
}
.web366-slide.is-active { opacity: 1; visibility: visible; }
.web366-slide__media { position: absolute; inset: 0; }
.web366-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.web366-slide__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(243,242,242,.97) 0%, rgba(243,242,242,.9) 38%, rgba(243,242,242,.15) 72%, rgba(243,242,242,0) 100%);
}
.web366-slide__inner { position: relative; width: 100%; }
.web366-slide__box { max-width: 42rem; padding: var(--web366-s12) 0; }
.web366-slide h1, .web366-slide h2 { font-size: clamp(38px, 5vw, 62px); margin-bottom: var(--web366-s4); max-width: 16ch; }
.web366-slide p { font-size: 19px; color: var(--web366-ink-60); max-width: 44ch; margin-bottom: var(--web366-s6); }
.web366-slide__cta { display: flex; flex-wrap: wrap; gap: var(--web366-s3); }
.web366-slide--plate .web366-slide__media { background: var(--web366-paper); }
.web366-hero__plate {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  display: grid; grid-template-columns: repeat(2, 1fr); align-content: center; gap: var(--web366-s4);
  padding: var(--web366-s8) var(--web366-s8) var(--web366-s8) 0;
}
.web366-hero__plate figure { background: var(--web366-surface); border-radius: var(--web366-radius); padding: var(--web366-s3); text-align: center; }
.web366-hero__plate img { width: 100%; height: auto; }
.web366-hero__plate figcaption { font-size: 13px; color: var(--web366-ink-60); margin-top: var(--web366-s1); }
.web366-hero__nav {
  position: absolute; bottom: var(--web366-s6); left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--web366-s4);
}
.web366-hero__arrow {
  width: 46px; height: 46px; border: 1px solid var(--web366-ink); background: rgba(243,242,242,.85);
  border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.web366-hero__arrow:hover { background: var(--web366-ink); color: var(--web366-paper); }
.web366-hero__arrow svg { width: 20px; height: 20px; }
.web366-hero__dots { display: flex; gap: var(--web366-s2); }
.web366-hero__dot {
  flex: 0 0 auto; width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--web366-ink); background: transparent; transition: background .2s ease;
}
.web366-hero__dot.is-active { background: var(--web366-ink); }

/* --- USP --- */
.web366-usp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web366-s8); padding: var(--web366-s12) 0; }
.web366-usp__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--web366-s3); align-items: start; }
.web366-usp__item svg { width: 40px; height: 40px; color: var(--web366-accent-700); }
.web366-usp h3 { font-size: 19px; margin-bottom: 4px; }
.web366-usp p { margin: 0; font-size: 15px; color: var(--web366-ink-60); }

/* --- DANH MỤC --- */
.web366-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--web366-s4); }
.web366-cat { display: block; text-align: center; }
.web366-cat:hover { text-decoration: none; }
.web366-cat__img { background: var(--web366-surface); border-radius: var(--web366-radius); overflow: hidden; }
.web366-cat img { width: 100%; height: auto; transition: transform .3s ease; }
.web366-cat:hover img { transform: scale(1.05); }
.web366-cat span { display: block; margin-top: var(--web366-s2); font-size: 15px; font-weight: 600; color: var(--web366-ink); }
.web366-cat:hover span { color: var(--web366-accent-700); }

/* --- EDITORIAL --- */
.web366-editorial { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--web366-s12); align-items: center; }
.web366-editorial__media { position: relative; }
.web366-editorial__media img { width: 100%; border-radius: var(--web366-radius); }
.web366-editorial__badge {
  position: absolute; left: calc(var(--web366-s6) * -1); bottom: var(--web366-s6);
  background: var(--web366-paper); padding: var(--web366-s4); max-width: 240px;
  box-shadow: var(--web366-shadow-md); border-radius: var(--web366-radius);
}
.web366-editorial__badge strong { display: block; font-size: 30px; line-height: 1; }
.web366-editorial__badge span { font-size: 14px; color: var(--web366-ink-60); }
.web366-points { display: grid; gap: var(--web366-s4); margin: var(--web366-s6) 0; }
.web366-points li { display: grid; grid-template-columns: 26px 1fr; gap: var(--web366-s3); }
.web366-points b { display: block; font-size: 17px; }
.web366-points p { margin: 2px 0 0; font-size: 15px; color: var(--web366-ink-60); }
.web366-points svg { width: 22px; height: 22px; color: var(--web366-accent); margin-top: 3px; }

/* --- PRODUCT CARD / GRID --- */
.web366-prodgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--web366-s6) var(--web366-s4); }
.web366-prod { display: flex; flex-direction: column; }
.web366-prod__media { position: relative; background: var(--web366-surface); border-radius: var(--web366-radius); overflow: hidden; }
.web366-prod__media img { width: 100%; height: auto; transition: transform .35s ease; }
.web366-prod:hover .web366-prod__media img { transform: scale(1.04); }
.web366-prod__flags { position: absolute; top: var(--web366-s2); left: var(--web366-s2); display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.web366-flag { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 2px; background: var(--web366-ink); color: var(--web366-white); }
.web366-flag--sale { background: var(--web366-hot); }
.web366-flag--new { background: var(--web366-accent); }
.web366-flag--out { background: var(--web366-ink-45); }
.web366-prod__cat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--web366-ink-45); margin: var(--web366-s3) 0 4px; }
.web366-prod__title { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; }
.web366-prod__title a { color: var(--web366-ink); }
.web366-prod__title a:hover { color: var(--web366-accent-700); text-decoration: none; }
.web366-rating { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--web366-ink-45); margin-bottom: 8px; }
.web366-rating__stars { color: var(--web366-hot); letter-spacing: 1px; }
.web366-prod__price { display: flex; align-items: baseline; gap: var(--web366-s2); margin-bottom: var(--web366-s3); }
.web366-prod__price b { font-size: 19px; }
.web366-prod__price del { color: var(--web366-ink-45); font-size: 15px; }
.web366-prod__foot { margin-top: auto; }

/* --- MÃ GIẢM GIÁ THÁNG --- */
.web366-coupons { background: var(--web366-ink); color: var(--web366-on-dark); padding: var(--web366-s16) 0; }
.web366-coupons .web366-sechead h2 { color: var(--web366-white); }
.web366-coupons .web366-sechead p { color: var(--web366-on-dark-60); }
.web366-coupons .web366-sechead__link { color: var(--web366-accent-400, #62c5ee); }
.web366-couponlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web366-s4); }
.web366-coupon {
  position: relative; background: var(--web366-paper); color: var(--web366-ink);
  border-radius: var(--web366-radius); padding: var(--web366-s4) var(--web366-s4) var(--web366-s4) var(--web366-s6);
  display: grid; gap: 6px;
}
.web366-coupon::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: repeating-linear-gradient(180deg, var(--web366-hot) 0 10px, transparent 10px 20px);
}
.web366-coupon__val { font-size: 30px; font-weight: 600; line-height: 1; }
.web366-coupon__val span { font-size: 15px; font-weight: 400; color: var(--web366-ink-60); }
.web366-coupon__desc { font-size: 14.5px; color: var(--web366-ink-60); margin: 0; }
.web366-coupon__row { display: flex; align-items: center; gap: var(--web366-s2); margin-top: var(--web366-s2); }
.web366-coupon__code {
  font-family: var(--web366-font); font-size: 17px; font-weight: 600; letter-spacing: .08em;
  border: 1px dashed var(--web366-ink-45); border-radius: 2px; padding: 7px 12px; background: var(--web366-white);
}
.web366-coupon__copy {
  border: 0; background: var(--web366-accent); color: var(--web366-white); padding: 8px 14px; border-radius: 2px;
  cursor: pointer; font-size: 14px; font-weight: 600; transition: background .18s ease;
}
.web366-coupon__copy:hover { background: var(--web366-accent-600); }
.web366-coupon__copy.is-copied { background: var(--web366-hot-700); }
.web366-coupon__exp { font-size: 13px; color: var(--web366-ink-45); }

/* --- REVIEW SLIDER --- */
.web366-reviews__viewport { overflow: hidden; }
.web366-reviews__track { display: flex; transition: transform .45s ease; }
.web366-review { flex: 0 0 33.3333%; padding-right: var(--web366-s6); }
.web366-review:last-child { padding-right: 0; }
.web366-review__ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.web366-review blockquote { margin: 0 0 var(--web366-s4); font-size: 19px; font-style: italic; line-height: 1.5; }
.web366-review__who { display: flex; align-items: center; gap: var(--web366-s3); }
.web366-review__ava {
  width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 50%; background: var(--web366-surface);
  display: grid; place-items: center; font-weight: 600; color: var(--web366-accent-800);
}
.web366-review__who b { display: block; font-size: 15px; }
.web366-review__who span { font-size: 13.5px; color: var(--web366-ink-45); }
.web366-slidernav { display: flex; align-items: center; justify-content: center; gap: var(--web366-s4); margin-top: var(--web366-s8); }
.web366-slidernav__dots { order: 1; }
.web366-slidernav button:last-of-type { order: 2; }
.web366-slidernav button { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--web366-line); background: transparent; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.web366-slidernav button:hover { border-color: var(--web366-ink); background: var(--web366-surface); }
.web366-slidernav svg { width: 18px; height: 18px; }
.web366-slidernav__dots { display: flex; align-items: center; gap: 8px; }
.web366-slidernav__dots button { flex: 0 0 auto; width: 11px; height: 11px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid var(--web366-ink-45); background: transparent; cursor: pointer; }
.web366-slidernav__dots button.is-active { background: var(--web366-ink); border-color: var(--web366-ink); }

/* --- BLOG --- */
.web366-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web366-s6); }
.web366-post__media { display: block; background: var(--web366-surface); border-radius: var(--web366-radius); overflow: hidden; aspect-ratio: 16 / 10; }
.web366-section--blog { padding-bottom: calc(var(--web366-s16) * 2); }
.web366-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.web366-post:hover .web366-post__media img { transform: scale(1.04); }
.web366-post .web366-post__meta { display: flex; gap: var(--web366-s2); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--web366-ink-45); margin: 20px 0 6px; }
.web366-post__meta a { color: var(--web366-accent-700); }
.web366-post h3 { font-size: 21px; margin-bottom: 6px; }
.web366-post h3 a { color: var(--web366-ink); }
.web366-post h3 a:hover { color: var(--web366-accent-700); text-decoration: none; }
.web366-post p { font-size: 15px; color: var(--web366-ink-60); margin-bottom: var(--web366-s2); }

/* --- CTA --- */
.web366-cta { position: relative; overflow: hidden; }
.web366-cta__bg { position: absolute; inset: 0; }
.web366-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.web366-cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(27, 25, 24, .72); }
.web366-cta__inner { position: relative; padding: var(--web366-s16) 0; color: var(--web366-on-dark); text-align: center; }
.web366-cta h2 { color: var(--web366-white); margin: 0 auto var(--web366-s3); max-width: 20ch; }
.web366-cta p { color: var(--web366-on-dark-70); max-width: 52ch; margin: 0 auto var(--web366-s6); font-size: 18px; }
.web366-cta__phone { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 600; color: var(--web366-white); margin-bottom: var(--web366-s6); }
.web366-cta__phone:hover { color: var(--web366-white); }
.web366-cta__actions { display: flex; flex-wrap: wrap; gap: var(--web366-s3); justify-content: center; }
.web366-cta .web366-btn--outline { border-color: rgba(255,255,255,.55); color: var(--web366-white); }
.web366-cta .web366-btn--outline:hover { background: var(--web366-white); color: var(--web366-ink); }

/* --- responsive cho trang chủ --- */
@media (max-width: 1100px) {
  .web366-prodgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web366-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web366-hero__plate { display: none; }
  .web366-slide__media::after { background: linear-gradient(90deg, rgba(243,242,242,.97) 0%, rgba(243,242,242,.85) 55%, rgba(243,242,242,.35) 100%); }
}
@media (max-width: 980px) {
  .web366-editorial { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s8); }
  .web366-editorial__badge { left: var(--web366-s4); }
  .web366-usp { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s4); padding: var(--web366-s8) 0; }
  .web366-couponlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web366-review { flex-basis: 50%; }
  .web366-posts { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s8); }
  .web366-hero__track { min-height: 520px; }
}
@media (max-width: 720px) {
  .web366-sechead { flex-direction: column; align-items: flex-start; gap: var(--web366-s3); margin-bottom: var(--web366-s6); }
  .web366-prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web366-s6) var(--web366-s3); }
  .web366-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web366-couponlist { grid-template-columns: minmax(0, 1fr); }
  .web366-review { flex-basis: 100%; padding-right: 0; }
  .web366-hero__track { min-height: 460px; }
  .web366-slide p { font-size: 17px; }
  .web366-coupons { padding: var(--web366-s12) 0; }
}


/* ==========================================================================
   14. FIX — độ ưu tiên màu chữ nút (thắng rule link chung)
   ========================================================================== */
.web366-ux7k2p a.web366-btn--primary,
.web366-ux7k2p a.web366-btn--primary:hover,
.web366-ux7k2p a.web366-btn--hot,
.web366-ux7k2p a.web366-btn--hot:hover { color: var(--web366-white); text-decoration: none; }
.web366-ux7k2p a.web366-btn--outline { color: var(--web366-ink); }
.web366-ux7k2p a.web366-btn--outline:hover { color: var(--web366-paper); text-decoration: none; }
.web366-ux7k2p .web366-cta a.web366-btn--outline { color: var(--web366-white); }
.web366-ux7k2p .web366-cta a.web366-btn--outline:hover { color: var(--web366-ink); }
.web366-ux7k2p .web366-drawer__foot a.web366-btn--outline { color: var(--web366-on-dark); }
.web366-ux7k2p .web366-drawer__foot a.web366-btn--outline:hover { color: var(--web366-ink-900); }
.web366-ux7k2p a.web366-btn--ghost { color: var(--web366-accent-700); }
.web366-ux7k2p .web366-btn--primary,
.web366-ux7k2p .web366-btn--hot { color: var(--web366-white); }

/* nền xen kẽ: các khối trên nền surface cần media nổi bật hơn */
.web366-section--alt .web366-prod__media,
.web366-section--alt .web366-cat__img,
.web366-section--alt .web366-post__media { background: var(--web366-paper); }

/* slide 3 — ảnh chủ thể lệch phải, crop khác slide 1 để không lặp hình */
.web366-slide__media--right img { object-position: 78% 38%; transform: scaleX(-1); }


/* ==========================================================================
   10. TRANG CON — SHOP / BLOG / GIỚI THIỆU / LIÊN HỆ
   ========================================================================== */
.web366-prod__media, .web366-cat__img { aspect-ratio: 1 / 1; }
.web366-prod__media img, .web366-cat img { width: 100%; height: 100%; object-fit: cover; }
.web366-hero__plate figure img { aspect-ratio: 1 / 1; object-fit: cover; }

.web366-shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--web366-s10); align-items: start; }
.web366-shop .web366-prodgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web366-filter + .web366-filter { margin-top: var(--web366-s6); }
.web366-filter h3 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--web366-ink-45); margin-bottom: var(--web366-s3); }
.web366-filter ul { display: grid; gap: 10px; }
.web366-filter label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.web366-filter input[type="checkbox"], .web366-filter input[type="radio"] { width: 16px; height: 16px; accent-color: var(--web366-accent); }
.web366-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--web366-s3); margin-bottom: var(--web366-s6); font-size: 15px; color: var(--web366-ink-60); }
.web366-toolbar select { font: inherit; font-size: 15px; padding: 10px 12px; color: var(--web366-ink); background: var(--web366-paper); border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-pager { display: flex; gap: 8px; margin-top: var(--web366-s10); }
.web366-pager a, .web366-pager span { min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0 12px; font-size: 15px; color: var(--web366-ink); border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-pager a:hover { border-color: var(--web366-accent); color: var(--web366-accent-700); text-decoration: none; }
.web366-pager .is-current { background: var(--web366-ink); border-color: var(--web366-ink); color: var(--web366-paper); }

.web366-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--web366-s8); align-items: center; }
.web366-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--web366-radius); }
.web366-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--web366-s8); }
.web366-chips a { padding: 9px 16px; font-size: 14px; color: var(--web366-ink); border: 1px solid var(--web366-line); border-radius: 999px; }
.web366-chips a:hover, .web366-chips a.is-active { background: var(--web366-ink); border-color: var(--web366-ink); color: var(--web366-paper); text-decoration: none; }

.web366-figrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-inline: -30px; padding: 0; }
.web366-figrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--web366-radius); }
.web366-figrow figcaption { font-size: 13px; color: var(--web366-ink-60); margin-top: 10px; }
.web366-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--web366-s6); }
.web366-stats strong { display: block; font-size: 40px; line-height: 1; }
.web366-stats span { font-size: 15px; color: var(--web366-ink-60); }

.web366-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--web366-s12); align-items: start; }
.web366-form { display: grid; gap: var(--web366-s3); }
.web366-form label { display: grid; gap: 8px; font-size: 14px; color: var(--web366-ink-60); }
.web366-form textarea { min-height: 150px; resize: vertical; }
.web366-infolist { display: grid; gap: var(--web366-s4); }
.web366-infolist b { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--web366-ink-45); margin-bottom: 4px; }
.web366-storyimg img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--web366-radius); }

@media (max-width: 980px) {
  .web366-shop, .web366-contact, .web366-feature { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s8); }
  .web366-shop .web366-prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web366-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .web366-shop .web366-prodgrid { grid-template-columns: minmax(0, 1fr); }
  .web366-figrow { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s6); margin-inline: -20px; }
}


/* --- TRANG CHI TIẾT SẢN PHẨM --- */
.web366-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--web366-s10); align-items: start; }
.web366-pdp > div:nth-child(2) { padding-left: 50px; }
.web366-gallery__main { background: var(--web366-surface); border-radius: var(--web366-radius); overflow: hidden; aspect-ratio: 1 / 1; }
.web366-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.web366-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.web366-gallery__thumbs button { padding: 0; aspect-ratio: 1 / 1; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); background: none; cursor: pointer; overflow: hidden; }
.web366-gallery__thumbs button.is-active { border-color: var(--web366-accent); }
.web366-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.web366-pdp__price { display: flex; align-items: baseline; gap: var(--web366-s2); margin: var(--web366-s3) 0; }
.web366-pdp__price b { font-family: var(--web366-font-head, inherit); font-size: 32px; }
.web366-pdp__price del { color: var(--web366-ink-45); font-size: 19px; }
.web366-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.web366-opt { padding: 10px 16px; font: inherit; font-size: 15px; color: var(--web366-ink); background: transparent; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); cursor: pointer; }
.web366-opt:hover { border-color: var(--web366-accent); }
.web366-opt.is-active { background: var(--web366-ink); border-color: var(--web366-ink); color: var(--web366-paper); }
.web366-buy { display: flex; flex-wrap: wrap; gap: var(--web366-s2); align-items: center; margin: var(--web366-s5) 0; }
.web366-qty { display: inline-flex; align-items: center; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-qty button { width: 44px; height: 48px; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--web366-ink); cursor: pointer; }
.web366-qty input { width: 52px; height: 48px; text-align: center; border: 0; background: transparent; font: inherit; color: var(--web366-ink); }
.web366-assure { display: grid; gap: 10px; font-size: 15px; color: var(--web366-ink-60); border-top: 1px solid var(--web366-line); padding-top: var(--web366-s4); }
.web366-tabs__nav { display: flex; flex-wrap: wrap; gap: var(--web366-s6); border-bottom: 1px solid var(--web366-line); margin-bottom: var(--web366-s6); }
.web366-tabs__nav button { padding: 0 0 14px; margin-bottom: -1px; font: inherit; font-size: 18px; color: var(--web366-ink-60); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.web366-tabs__nav button.is-active { color: var(--web366-ink); border-bottom-color: var(--web366-accent); }
.web366-tabpanel[hidden] { display: none; }
.web366-tabpanel p { max-width: 70ch; }
.web366-spec { width: 100%; border-collapse: collapse; font-size: 15px; max-width: 720px; }
.web366-spec th, .web366-spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--web366-line); vertical-align: top; }
.web366-spec th { width: 240px; color: var(--web366-ink-60); font-weight: 400; }
@media (max-width: 980px) {
  .web366-pdp { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s8); }
  .web366-pdp > div:nth-child(2) { padding-left: 0; }
}


/* ==========================================================================
   15. TÍCH HỢP WORDPRESS — Elementor · Xpro Theme Builder · Hello Elementor
   (bổ sung khi chuyển sang theme; không đổi giao diện gốc)
   ========================================================================== */

/* Widget WEB366 nằm trong section full-width, không thêm khoảng trắng của Elementor */
.web366-ux7k2p .elementor-widget[class*="elementor-widget-web366-"] { margin: 0 !important; --kit-widget-spacing: 0; }
.web366-ux7k2p .elementor-widget[class*="elementor-widget-web366-"] > .elementor-widget-container { margin: 0; padding: 0; }
.web366-ux7k2p .elementor-section .elementor-column-gap-no > .elementor-column > .elementor-element-populated,
.web366-ux7k2p .elementor-section .elementor-column-gap-no > .elementor-column > .elementor-widget-wrap { padding: 0; }
.web366-ux7k2p .site-main, .web366-ux7k2p .page-content { margin: 0; padding: 0; max-width: none; }
.web366-ux7k2p .page-content > .elementor, .web366-ux7k2p .page-content > p:empty { margin: 0; }

/* Header Xpro: topbar cuộn đi, thanh header chính dính trên cùng (giống html gốc) */
.web366-ux7k2p .xpro-theme-builder-header {
  position: sticky; z-index: 90;
  top: calc(var(--web366-topbar-h, 38px) * -1);
}
.web366-ux7k2p.admin-bar .xpro-theme-builder-header { top: calc(32px - var(--web366-topbar-h, 38px)); }
@media (max-width: 782px) {
  .web366-ux7k2p.admin-bar .xpro-theme-builder-header { top: calc(var(--web366-topbar-h, 38px) * -1); }
}
.web366-ux7k2p .xpro-theme-builder-header .web366-header { position: relative; top: auto; }
.web366-ux7k2p .xpro-theme-builder-header-nav { z-index: 90; }
.web366-ux7k2p .xpro-hidden { display: none; }

/* Base nút khi đã tắt reset của Hello */
.web366-ux7k2p button { cursor: pointer; }
.web366-ux7k2p input, .web366-ux7k2p select, .web366-ux7k2p textarea { font: inherit; }

/* Lưới 3 cột */
.web366-prodgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web366-shop--full { grid-template-columns: minmax(0, 1fr); }
.web366-shop--full .web366-prodgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .web366-prodgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .web366-prodgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Phân trang WordPress (paginate_links) */
.web366-pager { flex-wrap: wrap; }
.web366-pager .dots { border: 0; min-width: 24px; }

/* ==========================================================================
   16. WOOCOMMERCE — đồng bộ với hệ nút/ô nhập gốc
   ========================================================================== */
.web366-ux7k2p .woocommerce-notices-wrapper:empty { display: none; }
.web366-ux7k2p .woocommerce-message,
.web366-ux7k2p .woocommerce-info,
.web366-ux7k2p .woocommerce-error {
  list-style: none; margin: 0 0 var(--web366-s4); padding: 14px 18px;
  background: var(--web366-accent-100); color: var(--web366-ink);
  border: 0; border-left: 3px solid var(--web366-accent); border-radius: var(--web366-radius);
  display: flex; flex-wrap: wrap; gap: var(--web366-s3); align-items: center; justify-content: space-between;
}
.web366-ux7k2p .woocommerce-error { background: var(--web366-hot-100); border-left-color: var(--web366-hot); }
.web366-ux7k2p .woocommerce-message::before,
.web366-ux7k2p .woocommerce-info::before,
.web366-ux7k2p .woocommerce-error::before { display: none; }

.web366-ux7k2p .woocommerce a.button,
.web366-ux7k2p.woocommerce a.button,
.web366-ux7k2p .woocommerce button.button,
.web366-ux7k2p.woocommerce button.button,
.web366-ux7k2p .woocommerce input.button,
.web366-ux7k2p.woocommerce input.button,
.web366-ux7k2p .woocommerce #respond input#submit,
.web366-ux7k2p.woocommerce #respond input#submit,
.web366-ux7k2p .woocommerce-message .button,
.web366-ux7k2p .woocommerce-mini-cart__buttons .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--web366-font); font-weight: var(--web366-fw-head); font-size: 15px; line-height: 1.2;
  padding: 13px 22px; border: 1px solid var(--web366-ink); border-radius: var(--web366-radius);
  background: transparent; color: var(--web366-ink); text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.web366-ux7k2p .woocommerce a.button:hover,
.web366-ux7k2p.woocommerce a.button:hover,
.web366-ux7k2p .woocommerce button.button:hover,
.web366-ux7k2p.woocommerce button.button:hover,
.web366-ux7k2p .woocommerce input.button:hover,
.web366-ux7k2p.woocommerce input.button:hover,
.web366-ux7k2p .woocommerce-mini-cart__buttons .button:hover { background: var(--web366-ink); color: var(--web366-paper); text-decoration: none; }
.web366-ux7k2p .woocommerce a.button.alt,
.web366-ux7k2p.woocommerce a.button.alt,
.web366-ux7k2p .woocommerce button.button.alt,
.web366-ux7k2p.woocommerce button.button.alt,
.web366-ux7k2p .woocommerce #place_order,
.web366-ux7k2p.woocommerce #place_order,
.web366-ux7k2p .woocommerce .checkout-button,
.web366-ux7k2p.woocommerce .checkout-button,
.web366-ux7k2p .woocommerce-mini-cart__buttons .button.checkout,
.web366-ux7k2p .single_add_to_cart_button {
  background: var(--web366-accent); border-color: var(--web366-accent); color: var(--web366-white);
}
.web366-ux7k2p .woocommerce a.button.alt:hover,
.web366-ux7k2p.woocommerce a.button.alt:hover,
.web366-ux7k2p .woocommerce button.button.alt:hover,
.web366-ux7k2p.woocommerce button.button.alt:hover,
.web366-ux7k2p .woocommerce #place_order:hover,
.web366-ux7k2p.woocommerce #place_order:hover,
.web366-ux7k2p .woocommerce .checkout-button:hover,
.web366-ux7k2p.woocommerce .checkout-button:hover,
.web366-ux7k2p .woocommerce-mini-cart__buttons .button.checkout:hover,
.web366-ux7k2p .single_add_to_cart_button:hover { background: var(--web366-accent-600); border-color: var(--web366-accent-600); color: var(--web366-white); }
.web366-ux7k2p .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

.web366-ux7k2p .woocommerce form .form-row input.input-text,
.web366-ux7k2p.woocommerce form .form-row input.input-text,
.web366-ux7k2p .woocommerce form .form-row textarea,
.web366-ux7k2p.woocommerce form .form-row textarea,
.web366-ux7k2p .woocommerce form .form-row select,
.web366-ux7k2p.woocommerce form .form-row select,
.web366-ux7k2p .woocommerce .input-text,
.web366-ux7k2p.woocommerce .input-text,
.web366-ux7k2p .woocommerce select,
.web366-ux7k2p.woocommerce select,
.web366-ux7k2p .woocommerce-ordering select,
.web366-ux7k2p .web366-pdp__cart select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.4;
  background: var(--web366-surface); color: var(--web366-ink);
  border: 1px solid var(--web366-line); border-radius: var(--web366-radius);
}
.web366-ux7k2p .woocommerce form .form-row label ,
.web366-ux7k2p.woocommerce form .form-row label { font-size: 14px; color: var(--web366-ink-60); }
.web366-ux7k2p .woocommerce form .form-row ,
.web366-ux7k2p.woocommerce form .form-row { margin-bottom: var(--web366-s3); }
.web366-ux7k2p .woocommerce-ordering { margin: 0; }
.web366-ux7k2p .woocommerce-ordering select { width: auto; background: var(--web366-paper); }
.web366-ux7k2p .woocommerce-result-count { margin: 0; }

/* Thẻ sản phẩm: link "Xem giỏ hàng" WC chèn sau nút AJAX */
.web366-prod__foot .added_to_cart { display: block; margin-top: 8px; font-size: 14px; text-align: center; }
.web366-ux7k2p .web366-btn.loading { opacity: .6; pointer-events: none; }
.web366-ux7k2p .web366-btn.added::after { content: "✓"; }

/* Bảng giỏ hàng, tổng tiền, thanh toán */
.web366-ux7k2p .woocommerce table.shop_table ,
.web366-ux7k2p.woocommerce table.shop_table {
  border: 1px solid var(--web366-line); border-radius: var(--web366-radius); border-collapse: separate;
  background: var(--web366-paper); width: 100%;
}
.web366-ux7k2p .woocommerce table.shop_table th,
.web366-ux7k2p.woocommerce table.shop_table th,
.web366-ux7k2p .woocommerce table.shop_table td ,
.web366-ux7k2p.woocommerce table.shop_table td { padding: 14px 12px; border-top: 1px solid var(--web366-line); }
.web366-ux7k2p .woocommerce table.shop_table thead th ,
.web366-ux7k2p.woocommerce table.shop_table thead th { border-top: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--web366-ink-45); font-weight: 400; }
.web366-ux7k2p .woocommerce table.cart img ,
.web366-ux7k2p.woocommerce table.cart img { width: 72px; border-radius: var(--web366-radius); }
.web366-ux7k2p .woocommerce a.remove ,
.web366-ux7k2p.woocommerce a.remove { color: var(--web366-hot) !important; }
.web366-ux7k2p .woocommerce a.remove:hover ,
.web366-ux7k2p.woocommerce a.remove:hover { background: var(--web366-hot); color: var(--web366-white) !important; }
.web366-ux7k2p .woocommerce .cart-collaterals .cart_totals h2,
.web366-ux7k2p.woocommerce .cart-collaterals .cart_totals h2,
.web366-ux7k2p .woocommerce-checkout h3,
.web366-ux7k2p #order_review_heading { font-size: 22px; }
.web366-ux7k2p .woocommerce-checkout #payment { background: var(--web366-surface); border-radius: var(--web366-radius); }
.web366-ux7k2p .woocommerce .quantity .qty ,
.web366-ux7k2p.woocommerce .quantity .qty { width: 64px; padding: 10px 6px; text-align: center; background: transparent; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-ux7k2p .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; }
.web366-ux7k2p .woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: var(--web366-radius); color: var(--web366-ink); }
.web366-ux7k2p .woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.web366-ux7k2p .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--web366-ink); color: var(--web366-paper); text-decoration: none; }
.web366-ux7k2p .woocommerce .col2-set .col-1,
.web366-ux7k2p.woocommerce .col2-set .col-1,
.web366-ux7k2p .woocommerce .col2-set .col-2 ,
.web366-ux7k2p.woocommerce .col2-set .col-2 { max-width: none; }

/* Thanh tiến trình Giỏ hàng → Thanh toán → Hoàn tất */
.web366-steps { display: flex; flex-wrap: wrap; gap: var(--web366-s3) var(--web366-s8); margin: 0 0 var(--web366-s8); padding: 0; list-style: none; counter-reset: none; }
.web366-steps li { display: flex; align-items: center; gap: var(--web366-s2); color: var(--web366-ink-45); font-size: 15px; }
.web366-steps li span { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--web366-line); border-radius: 50%; font-size: 14px; }
.web366-steps li.is-current { color: var(--web366-ink); font-weight: 600; }
.web366-steps li.is-current span { background: var(--web366-accent); border-color: var(--web366-accent); color: var(--web366-white); }
.web366-steps li.is-done span { background: var(--web366-ink); border-color: var(--web366-ink); color: var(--web366-paper); }

/* Mini cart (WooCommerce) trong drawer gốc */
.web366-minicart__body .widget_shopping_cart_content { display: flex; flex-direction: column; min-height: 100%; }
.web366-ux7k2p .woocommerce-mini-cart { display: grid; gap: var(--web366-s3); }
.web366-ux7k2p .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px var(--web366-s3); padding-right: 24px; font-size: 15px; }
.web366-ux7k2p .woocommerce-mini-cart-item > a:not(.remove) { display: contents; color: var(--web366-ink); font-weight: 600; }
.web366-ux7k2p .woocommerce-mini-cart-item img { grid-row: span 2; width: 64px; height: 64px; object-fit: cover; border-radius: var(--web366-radius); }
.web366-ux7k2p .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--web366-ink-60); font-size: 14px; }
.web366-ux7k2p .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: 0; color: var(--web366-hot); font-size: 20px; line-height: 1; }
.web366-ux7k2p .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--web366-s4) 0 var(--web366-s3); padding-top: var(--web366-s3); border-top: 1px solid var(--web366-line); font-size: 17px; }
.web366-ux7k2p .woocommerce-mini-cart__total .amount { font-size: 20px; font-weight: 600; }
.web366-ux7k2p .woocommerce-mini-cart__buttons { display: grid; gap: var(--web366-s2); margin: 0; }
.web366-ux7k2p .woocommerce-mini-cart__buttons .button { width: 100%; }
.web366-ux7k2p .woocommerce-mini-cart__empty-message { color: var(--web366-ink-60); }

/* Trang chi tiết: form mua hàng WooCommerce → giao diện .web366-buy/.web366-qty gốc */
.web366-pdp__short { color: var(--web366-ink); }
.web366-pdp__cart { margin: var(--web366-s5) 0; }
.web366-pdp__cart form.cart { display: flex; flex-wrap: wrap; gap: var(--web366-s2); align-items: center; margin: 0; }
.web366-pdp__cart form.variations_form { display: block; }
.web366-pdp__cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--web366-s2); align-items: center; margin-top: var(--web366-s4); }
.web366-pdp__cart table.variations { border: 0; margin: 0; width: 100%; }
.web366-pdp__cart table.variations th, .web366-pdp__cart table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.web366-pdp__cart table.variations th label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--web366-accent-700); font-weight: 400; }
.web366-pdp__cart table.variations select.web366-has-opts { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.web366-pdp__cart .reset_variations { display: none !important; }
.web366-pdp__cart .woocommerce-variation-price { display: none; } /* giá biến thể được JS đồng bộ lên khối giá chính */
.web366-pdp__cart .woocommerce-variation-price del { color: var(--web366-ink-45); font-weight: 400; font-size: 16px; }
.web366-pdp__cart .woocommerce-variation-price ins { text-decoration: none; }
.web366-pdp__cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-pdp__cart .quantity .qty { width: 52px; height: 48px; text-align: center; border: 0; background: transparent; font: inherit; color: var(--web366-ink); -moz-appearance: textfield; }
.web366-pdp__cart .quantity .qty::-webkit-outer-spin-button, .web366-pdp__cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.web366-pdp__cart .web366-qty-btn { width: 44px; height: 48px; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--web366-ink); }
.web366-pdp__cart .stock { width: 100%; margin: 0; font-size: 15px; color: var(--web366-ink-60); }
.web366-pdp__cart .stock.out-of-stock { color: var(--web366-hot-700); }
.web366-pdp__price .web366-flag { align-self: center; }
.web366-pdp .web366-rating { margin-bottom: 0; }

/* Tab đánh giá */
.web366-ux7k2p #reviews .commentlist { display: grid; gap: var(--web366-s4); margin: 0 0 var(--web366-s6); padding: 0; }
.web366-ux7k2p #reviews .comment_container { display: grid; grid-template-columns: 48px 1fr; gap: var(--web366-s3); }
.web366-ux7k2p #reviews .comment_container img.avatar { width: 48px; height: 48px; border-radius: 50%; }
.web366-ux7k2p #reviews .comment-form label { display: block; font-size: 14px; color: var(--web366-ink-60); margin-bottom: 6px; }
.web366-ux7k2p #reviews .comment-form textarea,
.web366-ux7k2p #reviews .comment-form input[type="text"],
.web366-ux7k2p #reviews .comment-form input[type="email"] { width: 100%; padding: 12px 14px; background: var(--web366-paper); border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-ux7k2p .woocommerce .star-rating,
.web366-ux7k2p.woocommerce .star-rating, .web366-ux7k2p p.stars a { color: var(--web366-hot); }

/* Sidebar bộ lọc Shop (widget WooCommerce trong .web366-filter) */
.web366-shop__filters .web366-filter ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.web366-shop__filters .web366-filter li { font-size: 15px; }
.web366-shop__filters .web366-filter li a { color: var(--web366-ink); }
.web366-shop__filters .web366-filter li a:hover { color: var(--web366-accent-700); }
.web366-shop__filters .web366-filter .count { color: var(--web366-ink-45); font-size: 13px; }
.web366-shop__filters .web366-filter .children { margin: 8px 0 0 14px; }
.web366-shop__filters .web366-filter .current-cat > a,
.web366-shop__filters .web366-filter .chosen a { color: var(--web366-accent-700); font-weight: 600; }
.web366-shop__filters .woocommerce-widget-layered-nav-list__item--chosen a::before,
.web366-shop__filters .chosen a::before { content: "✓ "; }
.web366-ux7k2p .widget_price_filter .price_slider { margin-bottom: var(--web366-s3); }
.web366-ux7k2p .widget_price_filter .ui-slider .ui-slider-range,
.web366-ux7k2p .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--web366-accent); }
.web366-ux7k2p .widget_price_filter .price_slider_wrapper .ui-widget-content { background-color: var(--web366-line); }
.web366-ux7k2p .widget_price_filter .price_slider_amount { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 14px; }
.web366-ux7k2p .widget_price_filter .price_slider_amount .button { padding: 8px 14px; font-size: 14px; border: 1px solid var(--web366-ink); background: transparent; border-radius: var(--web366-radius); }

/* ==========================================================================
   17. NỘI DUNG BÀI VIẾT / CHÍNH SÁCH (theo wireframe tin-tuc-chi-tiet.html)
   ========================================================================== */
.web366-narrow { max-width: calc(70ch + 60px); }
.web366-article { font-size: 18px; line-height: 1.7; }
.web366-article > * { max-width: 70ch; }
.web366-article h2 { font-size: clamp(24px, 2.6vw, 30px); margin: var(--web366-s8) 0 var(--web366-s3); }
.web366-article h3 { font-size: 21px; margin: var(--web366-s6) 0 var(--web366-s2); }
.web366-article > :first-child { margin-top: 0; }
.web366-article ul, .web366-article ol { margin: 0 0 var(--web366-s4); padding-left: 1.3em; }
.web366-article ul { list-style: disc; }
.web366-article ol { list-style: decimal; }
.web366-article li { margin-bottom: 6px; }
.web366-article li::marker { color: var(--web366-accent); }
.web366-article blockquote { margin: var(--web366-s6) 0; padding: var(--web366-s3) var(--web366-s4); border-left: 3px solid var(--web366-accent); background: var(--web366-surface); font-style: italic; }
.web366-article table { width: 100%; max-width: none; border-collapse: collapse; font-size: 16px; margin: 0 0 var(--web366-s4); }
.web366-article th, .web366-article td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--web366-line); vertical-align: top; }
.web366-article th { color: var(--web366-ink-60); font-weight: 600; }
.web366-article img { border-radius: var(--web366-radius); }
.web366-article > .web366-figrow { max-width: none; margin-inline: 0; }

.web366-postlayout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--web366-s12); align-items: start; }
.web366-postimg { margin: 0; }
.web366-postimg img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--web366-radius); }
.web366-postimg figcaption { font-size: 13px; color: var(--web366-ink-60); margin-top: 10px; }
.web366-postside { position: sticky; top: calc(var(--web366-header-h) + 20px); display: grid; gap: var(--web366-s4); }
.web366-sidebox { background: var(--web366-surface); border-radius: var(--web366-radius); padding: var(--web366-s4); }
.web366-sidebox h3 { font-size: 18px; margin-bottom: var(--web366-s3); }
.web366-sidelist { display: grid; gap: 10px; }
.web366-sidelist li { display: flex; justify-content: space-between; gap: var(--web366-s3); font-size: 15px; }
.web366-sidelist li span { color: var(--web366-ink-45); font-size: 13px; white-space: nowrap; }
.web366-sidelist a { color: var(--web366-ink); }
.web366-toc ol { display: grid; gap: 8px; padding-left: 1.2em; list-style: decimal; font-size: 15px; }
.web366-toc li.is-sub { margin-left: 14px; list-style: circle; }
.web366-toc a { color: var(--web366-ink); }
.web366-sidebox--hot { background: var(--web366-ink); color: var(--web366-on-dark); }
.web366-sidebox--hot h3 { color: var(--web366-white); }
.web366-sidebox--hot p { color: var(--web366-on-dark-70); font-size: 15px; }
.web366-sidebox--hot .web366-kicker { color: var(--web366-accent-300); }
.web366-sidebox--hot .web366-cta__phone { font-size: 28px; color: var(--web366-white); margin-bottom: var(--web366-s3); }
.web366-ux7k2p .web366-sidebox--hot a.web366-btn--outline { border-color: rgba(255, 255, 255, .55); color: var(--web366-white); }
.web366-ux7k2p .web366-sidebox--hot a.web366-btn--outline:hover { background: var(--web366-white); color: var(--web366-ink); }
@media (max-width: 980px) {
  .web366-postlayout { grid-template-columns: minmax(0, 1fr); gap: var(--web366-s8); }
  .web366-postside { position: static; }
}

/* ==========================================================================
   18. CONTACT FORM 7 trong .web366-form
   ========================================================================== */
.web366-form .wpcf7-form { display: grid; gap: var(--web366-s3); }
.web366-form .wpcf7-form > p { margin: 0; }
.web366-form .wpcf7-form label { display: grid; gap: 8px; font-size: 14px; color: var(--web366-ink-60); }
.web366-form .wpcf7-form-control-wrap { display: block; }
.web366-form .wpcf7-form textarea { min-height: 150px; height: 150px; resize: vertical; }
.web366-form .wpcf7-submit { width: 100%; }
.web366-form .wpcf7-spinner { position: absolute; }
.web366-form .wpcf7-not-valid-tip { font-size: 13px; color: var(--web366-hot-700); margin-top: 4px; }
.web366-form .wpcf7-response-output { margin: 0 !important; padding: 12px 14px !important; border-radius: var(--web366-radius); font-size: 14px; }
.web366-form > .web366-note { margin-top: var(--web366-s3); }

/* Nút thêm giỏ trang chi tiết — thắng màu tím mặc định của WooCommerce */
body.web366-ux7k2p .web366-pdp__cart .single_add_to_cart_button.button,
body.web366-ux7k2p .web366-pdp__cart .single_add_to_cart_button.button.alt {
  background: var(--web366-accent); border: 1px solid var(--web366-accent); color: var(--web366-white);
  font-family: var(--web366-font); font-weight: var(--web366-fw-head); font-size: 15px; line-height: 1.2;
  padding: 15px 22px; border-radius: var(--web366-radius); height: auto;
}
body.web366-ux7k2p .web366-pdp__cart .single_add_to_cart_button.button:hover { background: var(--web366-accent-600); border-color: var(--web366-accent-600); }
body.web366-ux7k2p .web366-pdp__cart .web366-buy-now { padding: 15px 22px; }

/* Bộ tăng/giảm số lượng do plugin khác chèn (vd Xpro Addons) → cùng giao diện .web366-qty */
.web366-pdp__cart .xpro-quantity-wrap { display: inline-flex; align-items: center; border: 1px solid var(--web366-line); border-radius: var(--web366-radius); }
.web366-pdp__cart .xpro-quantity-wrap .quantity { border: 0; }
.web366-pdp__cart .xpro-quantity-wrap .xpro-minus,
.web366-pdp__cart .xpro-quantity-wrap .xpro-plus { width: 44px; height: 48px; border: 0; background: transparent; color: var(--web366-ink); padding: 0; font-size: 18px; }
.web366-pdp__cart .xpro-quantity-wrap .xpro-minus i, .web366-pdp__cart .xpro-quantity-wrap .xpro-plus i { display: none; }
.web366-pdp__cart .xpro-quantity-wrap .xpro-minus::before { content: "−"; }
.web366-pdp__cart .xpro-quantity-wrap .xpro-plus::before { content: "+"; }
.web366-pdp__cart .xpro-quantity-wrap .xpro-minus:hover, .web366-pdp__cart .xpro-quantity-wrap .xpro-plus:hover { background: var(--web366-surface); }
/* figure trong .web366-figrow giữ đúng lề mặc định như html gốc (tránh bị CSS plugin reset về 0) */
.web366-figrow figure { margin: 1em 40px; }
/* Mobile: chừa chỗ cho cụm điều hướng slider, không đè lên nút CTA (bản gốc bị chồng) */
@media (max-width: 720px) { .web366-slide__box { padding-bottom: 110px; } }