/*!
 * i Nội Thất — Design System v1
 * Bảng màu/typography riêng cho thương hiệu, không sao chép của bên thứ ba.
 * Mobile-first: style gốc = mobile, mở rộng dần qua @media (min-width) cho tablet/desktop.
 */

:root {
  /* Brand palette */
  --c-primary: #7A4B27;
  --c-primary-dark: #5C3A1E;
  --c-primary-light: #A9754A;
  --c-accent: #C88B3D;
  --c-accent-dark: #A66F2A;
  --c-secondary: #3F5D46;
  --c-danger: #C62828; /* do dam hon #D64545 cu - dam bao ty le tuong phan >=4.5:1 voi chu trang (WCAG AA) */

  /* Neutrals */
  --c-bg: #FAF6F1;
  --c-bg-alt: #F3ECE3;
  --c-card: #FFFFFF;
  --c-border: #E7DDD1;
  --c-text: #2B2118;
  --c-text-muted: #6B5C4E;
  --c-text-inverse: #FFF8EF;
  --c-footer-bg: var(--c-primary-dark);

  /* Type */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* --fs-scale: do Admin > Cai dat website > Giao dien dieu chinh (% co chu tong the).
     Dung px thay vi rem: CSS cu co "html{font-size:62.5%}" (doi goc 1rem = 10px), neu
     dung rem o day se bi an theo ty le do, sai co chu du dinh. */
  --fs-scale: 1;
  --fs-xs: calc(12px * var(--fs-scale));
  --fs-sm: calc(14px * var(--fs-scale));
  --fs-base: calc(16px * var(--fs-scale));
  --fs-md: calc(18px * var(--fs-scale));
  --fs-lg: calc(22px * var(--fs-scale));
  --fs-xl: calc(28px * var(--fs-scale));
  --fs-2xl: calc(36px * var(--fs-scale));

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Misc */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(43,33,24,0.08);
  --shadow-md: 0 6px 20px rgba(43,33,24,0.10);
  --shadow-lg: 0 12px 32px rgba(43,33,24,0.14);
  --container-max: 1280px;
  --header-h: 64px;
}

/* ---------------- Reset & base ---------------- */
.it-scope, .it-scope * , .it-scope *::before, .it-scope *::after { box-sizing: border-box; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
}

.it-scope a { color: inherit; text-decoration: none; }
.it-scope ul { list-style: none; margin: 0; padding: 0; }
.it-scope img { max-width: 100%; display: block; position: static !important; transform: none !important; }
.it-scope button { font-family: inherit; cursor: pointer; }

/* Thang tieu de mac dinh — co the bi ghi de boi bien --font-h1..h5 tu Admin > Giao dien */
.it-scope h1, .it-scope h2, .it-scope h3, .it-scope h4, .it-scope h5, .it-scope h6 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-text);
}
.it-scope h1 { font-family: var(--font-h1, var(--font-base)) !important; font-size: var(--font-h1-size, var(--fs-xl)) !important; }
.it-scope h2 { font-family: var(--font-h2, var(--font-base)) !important; font-size: var(--font-h2-size, var(--fs-lg)) !important; }
.it-scope h3 { font-family: var(--font-h3, var(--font-base)) !important; font-size: var(--font-h3-size, var(--fs-md)) !important; }
.it-scope h4 { font-family: var(--font-h4, var(--font-base)); font-size: var(--font-h4-size, var(--fs-base)); }
.it-scope h5 { font-family: var(--font-h5, var(--font-base)); font-size: var(--font-h5-size, var(--fs-sm)); }
.it-scope p { line-height: 1.6; }
.it-scope p, .it-scope span, .it-scope strong {
  font-family: var(--font-base) !important;
}

.it-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-1);
}
body { overflow-x: hidden; }

.it-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-0);
}
@media (min-width: 768px) { .it-page { padding: var(--sp-5) var(--sp-4); } }

.it-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------------- Grid ---------------- */
.it-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
  min-width: 0;
}
.it-grid > * { min-width: 0; }
.it-price__now, .it-price__old, .it-product-card__code, .it-product-card__name { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 640px) { .it-grid.it-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .it-grid.it-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .it-grid.it-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Card dang it-grid-3 (bai viet, tai lieu) co tieu de/mo ta dai - 2 cot tren mobile lam
   tieu de bi cat qua ngan, kho doc. Rieng mobile xuong 1 cot; tablet/desktop giu nguyen. */
@media (max-width: 639px) {
  .it-grid.it-grid-3 { grid-template-columns: 1fr; }
}
/* display:flex thay vi grid — de cac box con lai o dong cuoi (khi tong so khong chia het cho
   so cot) duoc can giua thay vi keo dan het chieu rong hoac dinh vao ben trai. */
.it-grid-cat {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.it-grid-cat > * { flex: 0 0 calc((100% - (var(--cat-cols-mobile, 3) - 1) * var(--sp-4)) / var(--cat-cols-mobile, 3)); max-width: calc((100% - (var(--cat-cols-mobile, 3) - 1) * var(--sp-4)) / var(--cat-cols-mobile, 3)); }
@media (min-width: 640px) {
  .it-grid-cat > * { flex-basis: calc((100% - 3 * var(--sp-4)) / 4); max-width: calc((100% - 3 * var(--sp-4)) / 4); }
}
@media (min-width: 1024px) {
  .it-grid-cat > * { flex-basis: calc((100% - (var(--cat-cols, 6) - 1) * var(--sp-4)) / var(--cat-cols, 6)); max-width: calc((100% - (var(--cat-cols, 6) - 1) * var(--sp-4)) / var(--cat-cols, 6)); }
}
.it-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.it-layout > * { min-width: 0; }
@media (min-width: 992px) {
  .it-layout.has-sidebar { grid-template-columns: 1fr 300px; align-items: start; }
}

/* ---------------- Buttons ---------------- */
.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 20px; border-radius: var(--radius-pill); border: none;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.it-btn-primary { background: var(--c-accent); color: #2B1B08; }
.it-btn-primary:hover { background: var(--c-accent-dark); }
.it-btn-outline { background: transparent; border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.it-btn-outline:hover { background: var(--c-primary); color: var(--c-text-inverse); }
.it-btn-sm { padding: 6px 14px; font-size: var(--fs-xs); }
.it-btn-block { width: 100%; }

/* ---------------- Header ---------------- */
.it-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
}
.it-header__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) 0; min-height: var(--header-h);
}
.it-header__logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-lg); color: var(--c-primary); }
.it-header__logo img.it-hide-mobile { height: var(--logo-h-desktop, 56px) !important; width: auto !important; position: static !important; transform: none !important; }
.it-header__logo img.it-hide-desktop { height: var(--logo-h-mobile, 36px) !important; width: auto !important; position: static !important; transform: none !important; }
.it-header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.it-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--icon-btn-size, 40px); height: var(--icon-btn-size, 40px); border-radius: 50%; background: var(--c-bg-alt); color: var(--c-primary);
}
.it-icon-btn .it-badge-count {
  position: absolute; top: -4px; right: -4px; background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.it-header__search { flex: 1; max-width: 480px; display: none; }
@media (min-width: 992px) { .it-header__search { display: block; } }

/* Thanh tim kiem rieng cho mobile/tablet - an tren desktop vi da co o tim kiem trong header */
.it-mobile-search { padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); background: var(--c-card); }
.it-mobile-search .it-search-form { width: 100%; }
@media (min-width: 992px) { .it-mobile-search { display: none; } }
.it-search-form { display: flex; border: 1.5px solid var(--c-border); border-radius: var(--radius-pill); overflow: hidden; }
.it-search-form input { flex: 1; border: none; padding: 10px 16px; font-size: var(--fs-sm); outline: none; }
.it-search-form button { border: none; background: var(--c-primary); color: #fff; padding: 0 18px; }

.it-header__hotline { display: none; align-items: center; gap: var(--sp-2); color: var(--c-primary); font-weight: 700; white-space: nowrap; }
@media (min-width: 1200px) { .it-header__hotline { display: flex; } }
.it-header__hotline small { display: block; font-weight: 400; color: var(--c-text-muted); font-size: var(--fs-xs); }

.it-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn-size, 40px); height: var(--icon-btn-size, 40px); border: none; background: var(--c-bg-alt); border-radius: var(--radius-sm); }
@media (min-width: 992px) { .it-menu-toggle { display: none; } }

/* Desktop nav */
.it-nav { border-top: 1px solid var(--c-border); display: none; }
@media (min-width: 992px) { .it-nav { display: block; } }
.it-nav__list { display: flex; align-items: center; justify-content: center; }
.it-nav__item { position: relative; }
.it-nav__link {
  display: flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-text);
}
.it-nav__item:hover > .it-nav__link, .it-nav__link.is-active { color: var(--c-primary); }
.it-nav__item.has-children:hover .it-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.it-nav__dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .15s ease; z-index: 50;
}
.it-nav__dropdown a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.it-nav__dropdown a:hover { background: var(--c-bg-alt); color: var(--c-primary); }

/* Menu "San pham" 2 cot: cot trai la danh muc lon (cha), cot phai la danh muc nho (con) cua
   danh muc dang duoc tro/hover ben trai — chuyen doi bang JS (xem initProductMenu trong theme.js). */
.it-nav__dropdown--products { left: 50%; transform: translate(-50%, 6px); display: flex; padding: 0; width: max-content; max-width: min(90vw, 640px); }
.it-nav__item.has-children:hover .it-nav__dropdown--products { transform: translate(-50%, 0); }
.it-nav__dd-catlist {
  display: flex; flex-direction: column; min-width: 220px; max-height: 60vh; overflow-y: auto;
  padding: var(--sp-2); border-right: 1px solid var(--c-border);
}
.it-nav__dd-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 8px 12px !important; border-radius: var(--radius-sm); font-weight: 600; }
.it-nav__dd-cat:hover, .it-nav__dd-cat.is-active { background: var(--c-bg-alt); color: var(--c-primary); }
.it-nav__dd-subpanel { min-width: 220px; padding: var(--sp-2); max-height: 60vh; overflow-y: auto; }
.it-nav__dd-sublist { display: none; flex-direction: column; }
.it-nav__dd-sublist.is-active { display: flex; }
.it-nav__dd-sublist a { padding: 8px 12px !important; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.it-nav__dd-sublist a:hover { background: var(--c-bg-alt); color: var(--c-primary); }

/* Mobile drawer nav */
.it-drawer-backdrop { position: fixed; inset: 0; background: rgba(43,33,24,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 199; }
.it-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.it-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 340px;
  background: var(--c-card); z-index: 200; transform: translateX(-100%);
  transition: transform .25s ease; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.it-drawer.is-open { transform: translateX(0); }
.it-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.it-drawer__close { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--c-bg-alt); }
.it-drawer__list a { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--sp-4); border-bottom: 1px solid var(--c-border); font-weight: 600; font-size: var(--fs-sm); }
.it-drawer__sub { display: none; background: var(--c-bg-alt); }
.it-drawer__sub.is-open { display: block; }
.it-drawer__sub a { padding-left: var(--sp-6); font-weight: 400; }
@media (min-width: 992px) { .it-drawer, .it-drawer-backdrop { display: none; } }

/* ---------------- Breadcrumb ---------------- */
.it-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--c-text-muted); margin: var(--sp-4) 0; }
.it-breadcrumb a { color: var(--c-text-muted); }
.it-breadcrumb a:hover { color: var(--c-primary); }
.it-breadcrumb .sep { opacity: .5; }
.it-breadcrumb .current { color: var(--c-text); font-weight: 600; }

/* ---------------- Section heading ---------------- */
.it-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.it-section-head h2 { margin: 0; }
.it-section-head a { font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); white-space: nowrap; }

/* ---------------- Panel box cho tung khoi noi dung trang chu (danh muc, san pham theo danh muc, bai viet)
   — tach ro tung khoi bang khung trang rieng, tranh chu bi sat mep man hinh tren mobile. ---------------- */
.it-cate-panel {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-4); margin-bottom: var(--sp-5);
}
@media (min-width: 768px) { .it-cate-panel { padding: var(--sp-5); margin-bottom: var(--sp-7); } }

/* Tieu de khoi san pham dang "ruy bang" (nhan mau accent goc vat cheo + link danh muc con/xem tat ca nam cung hang ben phai) */
.it-cate-ribbon { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); }
@media (min-width: 768px) { .it-cate-ribbon { margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4); } }
.it-cate-ribbon__tag {
  position: relative; display: inline-block; background: var(--c-footer-bg); color: #fff; font-weight: 800; text-transform: uppercase;
  padding: 12px 28px 12px var(--sp-4); font-size: var(--fs-sm); letter-spacing: .02em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  border-radius: var(--radius-lg) 0 0 0;
}
.it-cate-ribbon__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .it-cate-ribbon__links { padding: 0 var(--sp-5); } }
.it-cate-ribbon__links a { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 600; white-space: nowrap; }
.it-cate-ribbon__links a:hover { color: var(--c-primary); text-decoration: underline; }

/* ---------------- Category card ---------------- */
/* Anh danh muc la anh chinh, chiem phan lon o (giong ty le cua homeoffice.com.vn),
   ten danh muc chi 1 dong, cat bot (…) neu dai qua thay vi xuong dong. */
.it-cat-card {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--c-card); border: 1px solid var(--c-border); overflow: hidden;
  border-radius: var(--radius-md); text-align: center; transition: box-shadow .15s ease, transform .15s ease;
}
.it-cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.it-cat-card__img { display: block; width: 100%; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.it-cat-card img { width: 100% !important; height: 100% !important; object-fit: contain !important; position: static !important; transform: none !important; }
.it-cat-card__name {
  display: block; padding: var(--sp-2) var(--sp-2); font-size: var(--fs-xs) !important; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- Product card ---------------- */
.it-product-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}
.it-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.it-product-card__img { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.it-product-card__img img { width: 100% !important; height: 100% !important; object-fit: contain !important; transition: transform .3s ease; position: static !important; transform: none !important; }
.it-product-card:hover .it-product-card__img img { transform: scale(1.05) !important; }
.it-badge { position: absolute; top: 10px; left: 10px; background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); }
.it-badge.is-new { background: var(--c-secondary); left: auto; right: 10px; }
.it-product-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.it-product-card__name { font-size: var(--fs-base); font-weight: 600; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it-product-card__code { font-size: var(--fs-xs); color: var(--c-text-muted); }
.it-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; }
.it-price__now { color: var(--c-accent-dark); font-weight: 800; font-size: var(--fs-md); }
.it-price__old { color: var(--c-text-muted); text-decoration: line-through; font-size: var(--fs-xs); }

/* ---------------- Anh san pham thuc te (tung anh mot, xep doc, giong tranhdaiviet.com goc) ---------------- */
.it-real-photos { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 520px; margin: var(--sp-3) auto 0; }
.it-real-photos figure { margin: 0; }
.it-real-photos img { width: 100% !important; height: auto !important; border-radius: var(--radius-md); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); position: static !important; transform: none !important; }
.it-real-photos figcaption { text-align: center; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ---------------- Article card ---------------- */
.it-article-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.it-article-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-alt); }
.it-article-card__img img { width: 100% !important; height: 100% !important; object-fit: cover; position: static !important; transform: none !important; }
.it-article-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.it-article-card__cat { font-size: 11px; font-weight: 700; color: var(--c-secondary); text-transform: uppercase; letter-spacing: .03em; }
.it-article-card__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it-article-card__excerpt { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it-article-card__meta { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: auto; }

/* ---------------- Banner / hero ---------------- */
.it-hero { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
/* Ty le co dinh 1600x520 danh cho anh banner - giu cho khong gian truoc khi anh tai xong, tranh CLS */
.it-hero img { width: 100% !important; height: auto !important; aspect-ratio: 1600 / 520; object-fit: cover; display: block !important; position: static !important; transform: none !important; }
.it-hero-dots { position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
/* Vung bam thuc te 24x24 (button), phan nhin thay chi la cham nho ben trong (:before) - vua du accessibility vua giu tham my */
.it-hero-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: none; background: transparent; cursor: pointer; }
.it-hero-dots button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s, background .2s; }
.it-hero-dots button.is-active::before { background: #fff; width: 20px; border-radius: 999px; }

/* ---------------- Sidebar / support box ---------------- */
.it-side-box { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.it-side-box h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--c-primary); margin: 0 0 var(--sp-3); }
.it-side-list a { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-border); font-size: var(--fs-sm); }
.it-side-list li:last-child a { border-bottom: none; }
.it-side-list img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; position: static !important; transform: none !important; }

/* ---------------- Ho tro truc tuyen (thay the box "Can Tu Van?" chung chung) ---------------- */
.it-support__head { background: var(--c-primary); color: #fff; font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; text-align: center; }
.it-support__list { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.it-support__person { display: flex; align-items: center; gap: var(--sp-3); }
.it-support__person + .it-support__person { padding-top: var(--sp-3); border-top: 1px dashed var(--c-border); }
.it-support__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--c-bg-alt); }
.it-support__avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-alt); color: var(--c-text-muted); font-size: 18px; }
.it-support__role { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--c-accent-dark); margin-bottom: 2px; }
.it-support__name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); }
.it-support__phone { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); margin-top: 2px; }
.it-support__phone:hover { text-decoration: underline; }

/* ---------------- Filter / pagination ---------------- */
.it-filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); }
.it-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--c-border); font-size: var(--fs-xs); font-weight: 600; background: var(--c-card); }
.it-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.it-pagination { display: flex; justify-content: center; gap: 6px; margin: var(--sp-6) 0; }
.it-pagination a, .it-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); font-size: var(--fs-sm) !important; font-weight: 600; }
.it-pagination li { list-style: none; margin: 0; }
.it-pagination .active, .it-pagination .is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------------- Nut noi Zalo + Goi dien, dang tron + pulse, dung nguyen CSS that cua inoithat.com.vn ---------------- */
/* Ghi de vi tri cu cua .contact-footer trong main.css (width:100%/bottom:0/border/background/padding/display:none...) */
.contact-footer {
  display: flex !important; position: fixed; right: 16px; bottom: 90px; left: auto; top: auto; width: auto;
  flex-direction: column; gap: 12px; z-index: 200; margin: 0; padding: 0; border: none; background: none; text-align: center;
}
.zalo-float-btn,.call-float-btn{width:56px;height:56px;min-width:56px;max-width:56px;min-height:56px;max-height:56px;aspect-ratio:1/1;flex:0 0 56px;box-sizing:border-box;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;font-weight:bold;color:#ffffff;position:relative;overflow:hidden;white-space:nowrap;line-height:1;padding:0;}
.zalo-float-btn{background:#0068ff;border:3px solid #dd0000;font-size:13px;letter-spacing:.5px;-webkit-animation:pulse-zalo 1.5s infinite;animation:pulse-zalo 1.5s infinite;}
.call-float-btn{background:#28a745;border:none;font-size:22px;-webkit-animation:pulse-call 1.5s infinite;animation:pulse-call 1.5s infinite;}
.zalo-float-btn:focus,.zalo-float-btn:hover,.call-float-btn:focus,.call-float-btn:hover{color:#ffffff;text-decoration:none;}
.call-float-btn i{font-size:22px;}
@-webkit-keyframes pulse-zalo{0%{-webkit-box-shadow:0 0 0 0 rgba(0,104,255,.6);box-shadow:0 0 0 0 rgba(0,104,255,.6);}70%{-webkit-box-shadow:0 0 0 12px rgba(0,104,255,0);box-shadow:0 0 0 12px rgba(0,104,255,0);}100%{-webkit-box-shadow:0 0 0 0 rgba(0,104,255,0);box-shadow:0 0 0 0 rgba(0,104,255,0);}}
@keyframes pulse-zalo{0%{box-shadow:0 0 0 0 rgba(0,104,255,.6);}70%{box-shadow:0 0 0 12px rgba(0,104,255,0);}100%{box-shadow:0 0 0 0 rgba(0,104,255,0);}}
@-webkit-keyframes pulse-call{0%{-webkit-box-shadow:0 0 0 0 rgba(40,167,69,.6);box-shadow:0 0 0 0 rgba(40,167,69,.6);}70%{-webkit-box-shadow:0 0 0 12px rgba(40,167,69,0);box-shadow:0 0 0 12px rgba(40,167,69,0);}100%{-webkit-box-shadow:0 0 0 0 rgba(40,167,69,0);box-shadow:0 0 0 0 rgba(40,167,69,0);}}
@keyframes pulse-call{0%{box-shadow:0 0 0 0 rgba(40,167,69,.6);}70%{box-shadow:0 0 0 12px rgba(40,167,69,0);}100%{box-shadow:0 0 0 0 rgba(40,167,69,0);}}
@media (min-width: 1024px) { .contact-footer { display: none !important; } }

/* ---------------- Footer ---------------- */
.it-footer { background: var(--c-footer-bg); color: var(--c-text-inverse); margin-top: var(--sp-6); }
.it-footer__top { padding: var(--sp-4) 0; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .it-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .it-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.it-footer h4 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5);
}
.it-footer p, .it-footer a, .it-footer li, .it-footer span { color: #fff !important; font-size: var(--fs-sm) !important; line-height: 1.6; }
.it-footer p { margin: 0 0 var(--sp-2); }
.it-footer ul { margin: 0; }
.it-footer li { margin-bottom: var(--sp-2); }
.it-footer a:hover { color: #fff; opacity: .8; }
.it-footer__logo { font-size: var(--fs-lg); font-weight: 800; color: #fff; margin-bottom: var(--sp-3); display: block; }
.it-footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.it-footer__social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.it-footer__bottom { border-top: 1px solid rgba(255,255,255,.2); padding: var(--sp-4) 0; text-align: center; font-size: var(--fs-xs); color: #fff; }
.it-footer__bottom, .it-footer__bottom * { color: #fff !important; }

/* ---------------- Slider (dai san pham cuon ngang: 2 sp/mobile, 4 sp/desktop) ---------------- */
.it-slider { position: relative; }
.it-slider__track {
  display: flex; width: 100%; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  scrollbar-width: none;
}
.it-slider__track::-webkit-scrollbar { display: none; }
.it-slider__track > * {
  flex: 0 0 auto; width: calc(50% - var(--sp-2)); scroll-snap-align: start; min-width: 0;
}
@media (min-width: 640px) { .it-slider__track > * { width: calc(33.333% - var(--sp-3)); } }
@media (min-width: 1024px) { .it-slider__track > * { width: calc(25% - var(--sp-3)); } }
.it-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border-radius: 50%; background: var(--c-card); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; color: var(--c-primary);
}
.it-slider__arrow.is-prev { left: -14px; }
.it-slider__arrow.is-next { right: -14px; }
@media (max-width: 767px) { .it-slider__arrow { display: none; } }

/* ---------------- Read more (noi dung SEO danh muc, co the thu gon) ---------------- */
.it-readmore { position: relative; max-height: 220px; overflow: hidden; transition: max-height .35s ease; }
.it-readmore.is-expanded { max-height: 6000px; }
.it-readmore::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--c-card));
  pointer-events: none;
}
.it-readmore.is-expanded::after { display: none; }
.it-readmore-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--sp-3) auto 0; width: fit-content;
  font-weight: 700; font-size: var(--fs-sm); color: var(--c-primary);
  background: none; border: none; padding: 6px 16px; cursor: pointer;
}
.it-readmore-toggle i { transition: transform .2s ease; }
.it-readmore-toggle.is-expanded i { transform: rotate(180deg); }

/* ---------------- Collapse (khoi Mo ta / Van chuyen / Bao hanh / Danh gia o trang san pham) ---------------- */
.it-collapse { border: 1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom: var(--sp-3); background: var(--c-card); }
.it-collapse__body { padding: 0 var(--sp-4) var(--sp-4); }
.it-collapse summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; justify-content: space-between;
}
.it-collapse summary::-webkit-details-marker { display: none; }
.it-collapse summary::after { content: "\f107"; font-family: FontAwesome; font-weight: 400; color: var(--c-text-muted); transition: transform .2s ease; }
.it-collapse[open] summary::after { transform: rotate(180deg); }

/* Thong bao ket qua gui danh gia (san pham/bai viet) - class cu tu Bootstrap da mat CSS
   khi go main.min.css, gio dinh nghia lai rieng cho theme moi. */
.box-result.alert-success { background: rgba(47,125,50,.12); color: var(--c-secondary) !important; font-weight: 600; }
.box-result.alert-danger { background: rgba(198,40,40,.1); color: var(--c-danger) !important; font-weight: 600; }

/* ---------------- Prose (noi dung WYSIWYG: bai viet, mo ta san pham) ---------------- */
.it-prose h2 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); }
.it-prose h3 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); }
.it-prose p { margin: 0 0 var(--sp-3); }
.it-prose img { max-width: 100% !important; width: auto !important; height: auto !important; border-radius: var(--radius-md); margin: var(--sp-2) 0; position: static !important; transform: none !important; }
.it-prose ul, .it-prose ol { margin: 0 0 var(--sp-3); padding-left: 1.3em; }
.it-prose ul { list-style: disc; }
.it-prose ol { list-style: decimal; }
.it-prose a { color: var(--c-primary); text-decoration: underline; }
.it-prose hr { border: none; border-top: 1px solid var(--c-border); margin: var(--sp-5) 0; }

.it-toc { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-4); margin: 0 0 var(--sp-5); }
.it-toc__title { text-align: center; font-weight: 700; font-size: var(--fs-md); color: var(--c-text); margin-bottom: var(--sp-3); }
.it-toc__list { margin: 0; padding-left: 22px; list-style: decimal; }
.it-toc__list > li { margin-bottom: var(--sp-2); font-weight: 600; }
.it-toc__list a { color: var(--c-primary); text-decoration: none; }
.it-toc__list a:hover { text-decoration: underline; }
.it-toc__list ul { list-style: disc; margin: var(--sp-2) 0 0; padding-left: 20px; font-weight: 400; }
.it-toc__list ul li { margin-bottom: 6px; font-size: var(--fs-sm); }

/* ---------------- Utility ---------------- */
.it-mt-0 { margin-top: 0; }
.it-mb-0 { margin-bottom: 0; }
.it-hide-mobile { display: none !important; }
@media (min-width: 768px) { .it-hide-mobile { display: initial !important; } .it-hide-desktop { display: none !important; } }