/* ==========================================================================
   FlowColour Việt Nam — CSS chính
   Bám mockup trang sản phẩm đã duyệt (tai-lieu/san-pham.png) + SPEC 01.
   Desktop trước (SPEC 01 §8). Mobile có spec riêng sau — ở đây chỉ bảo đảm không vỡ.
   ========================================================================== */

:root {
	--fc-red: #e30613;
	--fc-red-dark: #bf0510;
	--fc-red-soft: #fde7e8;
	--fc-dark: #2b2b2b;
	--fc-darker: #1e1e1e;
	--fc-text: #222;
	--fc-muted: #666;
	--fc-line: #e6e6e6;
	--fc-bg-soft: #f6f6f6;
	--fc-green: #16a34a;
	--fc-radius: 6px;
	--fc-wrap: 1200px;
	--fc-font: "Roboto", "Segoe UI", Arial, sans-serif;
	--fc-header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fc-font); font-size: 15px; line-height: 1.55; color: var(--fc-text); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fc-wrap { width: 100%; max-width: var(--fc-wrap); margin: 0 auto; padding: 0 20px; }
.fc-ic { flex-shrink: 0; vertical-align: middle; }
.fc-red { color: var(--fc-red); }
.fc-ic--zalo { display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--fc-font); letter-spacing: -.2px; }

/* --------------------------------------------------------------- Topbar */
.fc-topbar { font-size: 12.5px; color: #444; border-bottom: 1px solid var(--fc-line); }
.fc-topbar__in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 16px; }
.fc-topbar__l, .fc-topbar__r { display: flex; align-items: center; gap: 8px; }
.fc-topbar__r { gap: 22px; }
.fc-topbar__r a { display: inline-flex; align-items: center; gap: 6px; }
.fc-topbar__r a:hover { color: var(--fc-red); }

/* --------------------------------------------------------------- Header */
.fc-header { display: flex; height: var(--fc-header-h); background: var(--fc-dark); position: sticky; top: 0; z-index: 50; }
.fc-header__brand { background: var(--fc-red); display: flex; align-items: center; padding: 0 28px 0 max(20px, calc((100vw - var(--fc-wrap)) / 2 + 20px)); flex-shrink: 0; }
.fc-header__bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 0 max(20px, calc((100vw - var(--fc-wrap)) / 2 + 20px)) 0 20px; }
.fc-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.fc-logo__mark { width: 38px; height: 38px; border-radius: 50%; border: 3px solid currentColor; position: relative; flex-shrink: 0; }
.fc-logo__mark::before, .fc-logo__mark::after { content: ""; position: absolute; inset: 7px; border: 2.5px solid currentColor; border-radius: 50%; transform: scaleX(.45) rotate(45deg); }
.fc-logo__mark::after { transform: scaleX(.45) rotate(-45deg); }
.fc-logo__mark--red { color: var(--fc-red); width: 26px; height: 26px; border-width: 2.5px; }
.fc-logo__mark--red::before, .fc-logo__mark--red::after { inset: 4px; border-width: 2px; }
.fc-logo__img { display: flex; flex-direction: column; line-height: 1; }
.fc-logo__img img { width: 209px; height: auto; }
/* "VIETNAM" thẳng hàng dưới chữ FLOWCOLOUR (bỏ qua phần biểu tượng tròn ~28% bề ngang logo) */
.fc-logo__img small { margin: 3px 0 0 28.5%; font-size: 10px; letter-spacing: 6.2px; font-weight: 500; color: #fff; }
.fc-logo--footer .fc-logo__img img { width: 190px; }
.fc-logo__text { display: flex; flex-direction: column; line-height: 1; }
.fc-logo__text b { font-size: 23px; font-weight: 900; letter-spacing: .3px; }
.fc-logo__text small { font-size: 10px; letter-spacing: 5px; margin-top: 4px; font-weight: 500; }

.fc-nav { flex: 1; }
.fc-nav { min-width: 0; flex: 0 1 auto; }
.fc-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* Mục menu luôn 1 dòng như mockup — hết chỗ thì thu padding, không xuống hàng */
/* 8 mục IA trong khung 1200px cố định → cỡ gọn là mặc định ở MỌI bề ngang màn hình */
.fc-nav__list a { display: block; padding: 8px 6px; color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1px; border-radius: 4px; white-space: nowrap; }
.fc-nav__list a:hover, .fc-nav__list .current-menu-item > a { color: #fff; background: rgba(255,255,255,.08); }

.fc-search { position: relative; width: 180px; flex-shrink: 0; margin-left: auto; }
.fc-search input { width: 100%; height: 38px; border: 0; border-radius: 20px; padding: 0 44px 0 18px; font: 13.5px var(--fc-font); outline: none; }
.fc-search button { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border: 0; background: none; color: #333; display: grid; place-items: center; }
.fc-header__icons { display: flex; align-items: center; gap: 18px; color: #fff; }
.fc-cart { position: relative; }
.fc-cart__n { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--fc-red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ----------------------------------------------------------- Breadcrumb */
.fc-crumb { font-size: 12.5px; color: var(--fc-muted); padding: 14px 0 10px; }
.fc-crumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.fc-crumb li + li::before { content: "›"; margin: 0 8px; color: #aaa; }
.fc-crumb a:hover { color: var(--fc-red); }
.fc-crumb [aria-current] { color: #333; }

.fc-demo-note { background: #fff7e0; border: 1px dashed #e0b400; color: #7a5b00; padding: 8px 12px; border-radius: 4px; font-size: 13px; margin: 0 0 12px; }

/* -------------------------------------------------------------- Hero */
.fc-hero { display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); gap: 32px; align-items: start; }

.fc-gal { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; }
.fc-gal__tabs { display: flex; border-bottom: 1px solid var(--fc-line); }
.fc-gal__tabs button { flex: 1; background: none; border: 0; padding: 12px 8px; font-size: 14px; color: #555; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fc-gal__tabs button.is-on { color: var(--fc-red); font-weight: 700; border-bottom-color: var(--fc-red); }
.fc-gal__body { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px; }
.fc-gal__thumbs { display: flex; flex-direction: column; gap: 10px; }
.fc-thumb { position: relative; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--fc-line); border-radius: 4px; background: #fff; overflow: hidden; }
.fc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fc-thumb.is-on { border: 2px solid var(--fc-red); padding: 3px; }
.fc-thumb--video, .fc-thumb--360 { background: #333; }
.fc-thumb--video img, .fc-thumb--360 img { opacity: .55; }
.fc-thumb__badge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.fc-thumb__badge--txt { font-weight: 900; font-size: 15px; }
.fc-gal__stage { min-width: 0; }
.fc-gal__pane[hidden] { display: none; }
.fc-zoom { aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; cursor: zoom-in; }
.fc-zoom img { width: 100%; height: 100%; object-fit: contain; transition: transform .15s ease-out; }
.fc-zoom.is-zoom img { transform: scale(2); }
.fc-gal__hint { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--fc-muted); display: flex; gap: 6px; justify-content: center; align-items: center; }
.fc-gal__pane video { width: 100%; aspect-ratio: 1 / 1; background: #000; object-fit: contain; }
/* Bản vẽ kích thước: ảnh hãng cao (1320x1602) — chặn chiều cao cho khỏi chiếm hết màn, bấm mở ảnh gốc (24/09) */
.fc-draw { display: block; position: relative; cursor: zoom-in; background: #fff; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); overflow: hidden; }
.fc-draw img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.fc-draw__zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(0,0,0,.65); color: #fff; border-radius: 4px; font-size: 12.5px; }
.fc-draw:hover .fc-draw__zoom { background: var(--fc-red); }

/* 360° */
.fc-360 { position: relative; aspect-ratio: 1 / 1; background: #fff; user-select: none; touch-action: pan-y; cursor: grab; display: grid; place-items: center; }
.fc-360.is-drag { cursor: grabbing; }
.fc-360__img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fc-360__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px; }
.fc-360__hint { flex: 1; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--fc-muted); }
.fc-360__load { font-size: 12px; color: var(--fc-red); }
.fc-360__bar button { width: 34px; height: 34px; border: 1px solid var(--fc-line); border-radius: 50%; background: #fff; display: grid; place-items: center; color: #333; }
.fc-360__bar button:hover { color: var(--fc-red); border-color: var(--fc-red); }
.fc-360:fullscreen { background: #fff; }

/* Mua hàng */
.fc-buy__badges { display: flex; gap: 8px; margin-bottom: 10px; }
.fc-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; letter-spacing: .2px; }
.fc-pill--red { background: var(--fc-red); color: #fff; }
.fc-pill--soft { background: var(--fc-red-soft); color: var(--fc-red); }
.fc-buy__title { font-size: 30px; font-weight: 700; color: #1a1a1a; }
.fc-buy__tagline { margin: 6px 0 0; color: #555; }
.fc-buy__price { margin: 14px 0 12px; font-size: 32px; font-weight: 900; color: var(--fc-red); }
.fc-buy__ask { font-size: 20px; font-weight: 700; }
.fc-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.fc-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.fc-checks li .fc-ic { margin-top: 1px; }
.fc-checks--sm li { font-size: 14px; }
.fc-field { margin-bottom: 14px; }
.fc-field[hidden] { display: none; }
.fc-field__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.fc-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.fc-size { min-width: 56px; height: 38px; padding: 0 14px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-weight: 500; }
.fc-size:hover { border-color: var(--fc-red); color: var(--fc-red); }
.fc-size.is-on { background: var(--fc-red); border-color: var(--fc-red); color: #fff; }
.fc-sku { margin: 8px 0 0; font-size: 13px; color: var(--fc-muted); min-height: 1em; }
.fc-field--qty { display: flex; align-items: center; gap: 18px; }
.fc-field--qty .fc-field__label { margin: 0; }
.fc-qty { display: inline-flex; border: 1px solid #ccc; border-radius: 4px; }
.fc-qty button { width: 36px; height: 36px; border: 0; background: #fff; display: grid; place-items: center; }
.fc-qty input { width: 48px; border: 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; font: 15px var(--fc-font); -moz-appearance: textfield; }
.fc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fc-buy__ctas { display: flex; gap: 14px; margin-top: 6px; }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 4px; font-weight: 700; font-size: 15px; border: 2px solid transparent; flex: 1; transition: background .15s, color .15s; }
.fc-btn[hidden] { display: none; }
.fc-btn--red { background: var(--fc-red); color: #fff; border-color: var(--fc-red); }
.fc-btn--red:hover { background: var(--fc-red-dark); border-color: var(--fc-red-dark); }
.fc-btn--line { background: #fff; color: var(--fc-red); border-color: var(--fc-red); }
.fc-btn--line:hover { background: var(--fc-red-soft); }
.fc-btn--white { background: #fff; color: var(--fc-red); flex: 0 0 auto; }
.fc-buy__feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fc-buy__feats li { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.fc-buy__feats b { display: block; font-weight: 500; }
.fc-buy__feats small { color: var(--fc-muted); font-size: 12px; }

/* ------------------------------------------------------------ Cam kết */
.fc-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.fc-trust__item { display: flex; align-items: center; gap: 16px; background: var(--fc-bg-soft); border-radius: var(--fc-radius); padding: 18px 20px; }
.fc-trust__item b { display: block; font-weight: 500; font-size: 14px; }
.fc-trust__item small { color: var(--fc-muted); font-size: 12.5px; }

/* ----------------------------------------------------------- Tab neo */
.fc-anchors { position: sticky; top: var(--fc-header-h); z-index: 40; background: #fff; margin-top: 26px; padding: 10px 0; }
.fc-anchors.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.fc-anchors ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.fc-anchors a { display: block; white-space: nowrap; padding: 10px 18px; font-size: 13.5px; border: 1px solid var(--fc-line); margin-left: -1px; background: #fff; }
.fc-anchors li:first-child a { border-radius: 4px 0 0 4px; margin-left: 0; }
.fc-anchors li:last-child a { border-radius: 0 4px 4px 0; }
.fc-anchors a.is-on { background: var(--fc-red); border-color: var(--fc-red); color: #fff; font-weight: 700; position: relative; }

/* ----------------------------------------------------------- Các khối */
.fc-sections { display: grid; gap: 16px; padding-bottom: 28px; }
.fc-sections > section, .fc-row3 > section { scroll-margin-top: calc(var(--fc-header-h) + 64px); }
.fc-card { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; padding: 20px 22px; min-width: 0; }
.fc-h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.fc-h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.fc-h3 small { font-weight: 400; font-size: 13px; color: var(--fc-muted); }
.fc-sub { margin: -4px 0 14px; color: var(--fc-muted); font-size: 14px; }
.fc-prose p { margin: 0 0 10px; }
.fc-prose p:last-child { margin: 0; }

.fc-desc { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: center; }
.fc-desc__card { position: relative; margin: 0; border-radius: var(--fc-radius); background: linear-gradient(160deg, #f4f4f4, #e6e6e6); overflow: hidden; min-height: 180px; display: grid; grid-template-columns: 46% 1fr; align-items: center; }
/* Vạch đỏ chéo nằm GIỮA ảnh và chữ như mockup — không được đè lên chữ */
.fc-desc__card::before { content: ""; position: absolute; left: 46%; top: -20%; width: 10px; height: 140%; background: var(--fc-red); transform: rotate(16deg); transform-origin: center; }
.fc-desc__card::after { content: ""; position: absolute; left: calc(46% + 16px); top: -20%; width: 4px; height: 140%; background: var(--fc-red); opacity: .35; transform: rotate(16deg); }
.fc-desc__card img { width: 100%; height: 170px; object-fit: contain; position: relative; padding: 10px; }
.fc-desc__card figcaption { position: relative; z-index: 1; padding: 14px 16px 14px 34px; text-align: center; font-size: 13px; }
.fc-desc__card figcaption b { display: block; font-size: 15px; margin-top: 8px; }
/* Logo trắng gốc dùng làm mặt nạ → tô đỏ, khỏi cần thêm file logo màu */
.fc-desc__brand { display: block; width: 120px; height: 23px; margin: 0 auto; background: var(--fc-red); -webkit-mask: var(--fc-logo) no-repeat center / contain; mask: var(--fc-logo) no-repeat center / contain; }

/* Giải thích ký hiệu cột bảng kích thước — rê chuột (máy tính) / chạm (điện thoại) */
.fc-tip { position: relative; cursor: help; border-bottom: 1px dotted currentColor; outline: none; }
.fc-tip::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 20; width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 4px; background: var(--fc-darker); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; display: none; pointer-events: none; }
.fc-tip:hover::after, .fc-tip:focus::after { display: block; }
.fc-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--fc-apps-n, 8), 1fr); gap: 12px; }
.fc-app { text-align: center; font-size: 12.5px; }
.fc-app img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 4px; margin-bottom: 6px; }
.fc-app--noimg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; background: var(--fc-bg-soft); border-radius: 4px; }
.fc-app__ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--fc-red); display: grid; place-items: center; }

/* Hàng 3 ô: ô nào thiếu dữ liệu bị ẩn thì các ô còn lại GIÃN RA — không để cột trống (SPEC 01 §8) */
.fc-row3 { display: flex; gap: 16px; align-items: stretch; }
.fc-row3 > section { flex: 1 1 0; }
.fc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
.fc-steps li { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.fc-steps__n { width: 26px; height: 26px; border-radius: 50%; background: var(--fc-red); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
/* Ảnh bước lắp là TUỲ CHỌN — khung cố định để bước có ảnh và bước không ảnh vẫn thẳng hàng */
.fc-steps img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--fc-bg-soft); order: -1; margin-bottom: 4px; }
.fc-steps b { font-size: 14px; }
.fc-steps span:last-child { color: var(--fc-muted); }

.fc-faq details { border: 1px solid var(--fc-line); border-radius: 4px; margin-bottom: 8px; }
.fc-faq summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq details[open] summary { color: var(--fc-red); }
.fc-faq details[open] summary .fc-ic { transform: rotate(180deg); }
.fc-faq p { margin: 0; padding: 0 14px 12px; font-size: 13.5px; color: #444; }

.fc-tablewrap { overflow-x: auto; }
.fc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fc-table th, .fc-table td { border: 1px solid var(--fc-line); padding: 7px 10px; text-align: left; }
.fc-table--kv th { width: 44%; font-weight: 400; color: #444; background: var(--fc-bg-soft); }
.fc-table--kv tr:nth-child(even) td { background: #fafafa; }
.fc-table--size th { background: var(--fc-bg-soft); font-weight: 500; text-align: center; white-space: nowrap; }
.fc-table--size td { text-align: center; white-space: nowrap; }
.fc-table--size tr.is-on td { background: var(--fc-red-soft); color: var(--fc-red); font-weight: 700; }
.fc-link { background: none; border: 0; padding: 10px 0 0; color: var(--fc-red); font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.fc-fulltable[hidden] { display: none; }

.fc-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fc-doc { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; }
.fc-doc__main { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
a.fc-doc:hover, .fc-doc__main:hover { border-color: var(--fc-red); }
.fc-doc__ic { width: 44px; height: 44px; border-radius: 6px; background: var(--fc-red-soft); color: var(--fc-red); display: grid; place-items: center; flex-shrink: 0; }
.fc-doc__txt { flex: 1; min-width: 0; font-size: 13px; }
.fc-doc__txt b { display: block; font-weight: 500; font-size: 14px; }
.fc-doc__txt em { font-style: normal; color: var(--fc-red); }
.fc-doc__txt small { color: var(--fc-muted); }
.fc-doc__main[hidden], .fc-doc__none[hidden] { display: none; }
.fc-doc__none { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; opacity: .7; }
.fc-doc__all { border-top: 1px solid var(--fc-line); font-size: 13px; }
.fc-doc__all summary { cursor: pointer; padding: 8px 16px; color: var(--fc-red); }
.fc-doc__all ul { list-style: none; margin: 0; padding: 0 16px 10px; display: grid; gap: 4px; }
.fc-doc__all a:hover { color: var(--fc-red); }
.fc-doc__all small { color: var(--fc-muted); }

/* ------------------------------------------ Sản phẩm liên quan / đi kèm */
.fc-related { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 28px; }
.fc-related--one { grid-template-columns: 1fr; }
.fc-related__head { display: flex; justify-content: space-between; align-items: baseline; }
.fc-related__more { color: var(--fc-red); font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.fc-pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fc-related--one .fc-pcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fc-pcard { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fc-pcard__img { aspect-ratio: 1 / 1; border: 1px solid var(--fc-line); border-radius: 4px; display: grid; place-items: center; background: #fff; color: #bbb; overflow: hidden; }
.fc-pcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.fc-pcard:hover .fc-pcard__img { border-color: var(--fc-red); }
.fc-pcard__name { line-height: 1.35; }
.fc-pcard__price { color: var(--fc-red); font-weight: 700; }

/* ------------------------------------------------------------- Đại lý */
.fc-dealer { background: var(--fc-red); color: #fff; }
.fc-dealer__in { display: flex; align-items: center; gap: 22px; padding-top: 22px; padding-bottom: 22px; }
.fc-dealer__txt { flex: 1; }
.fc-dealer h2 { font-size: 20px; font-weight: 700; }
.fc-dealer p { margin: 4px 0 0; font-size: 14px; opacity: .95; }

/* ------------------------------------------------------------- Footer */
.fc-footer { background: var(--fc-darker); color: #ccc; font-size: 13.5px; }
.fc-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 32px; }
.fc-footer__brand p { margin: 12px 0 0; }
.fc-footer h3 { color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.fc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-footer a:hover { color: #fff; }
.fc-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.fc-social { display: flex; gap: 10px; }
.fc-social a { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: #3a3a3a; }
.fc-social__facebook { background: #1877f2 !important; }
.fc-social__youtube { background: #ff0000 !important; }
.fc-social__zalo { background: #0068ff !important; }
.fc-social__linkedin { background: #0a66c2 !important; }
.fc-footer__bottom { border-top: 1px solid #333; font-size: 12.5px; }
.fc-footer__bottom-in { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.fc-legal { display: flex !important; gap: 18px !important; }

/* Trang thường */
.fc-page { padding-bottom: 36px; display: grid; gap: 16px; }
.fc-page__title { font-size: 28px; font-weight: 700; margin-bottom: 14px; }
.fc-page__body { max-width: 860px; }
.fc-page__item .fc-h3 a:hover { color: var(--fc-red); }

/* Sản phẩm không do Studio quản → template Woo mặc định */
.fc-woo-default { padding: 24px 20px 40px; }

/* ------------------------------------------------ Màn nhỏ (tạm, chờ SPEC mobile) */
@media (max-width: 1240px) {
	.fc-nav__list a { padding: 8px 5px; font-size: 12.5px; }
	.fc-search { width: 150px; }
}
@media (max-width: 1100px) {
	.fc-apps { grid-template-columns: repeat(4, 1fr); }
	.fc-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.fc-topbar { display: none; }
	.fc-header { height: auto; flex-wrap: wrap; position: static; }
	.fc-header__brand { min-width: 0; padding: 12px 20px; flex: 1 0 100%; }
	.fc-header__bar { flex-wrap: wrap; padding: 10px 20px; gap: 10px; }
	.fc-nav { flex: 1 0 100%; overflow-x: auto; }
	.fc-search { flex: 1; width: auto; }
	.fc-hero, .fc-desc, .fc-related { grid-template-columns: 1fr; }
	.fc-row3 { flex-direction: column; }
	.fc-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-trust { grid-template-columns: repeat(2, 1fr); }
	.fc-anchors { top: 0; }
	.fc-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.fc-buy__title { font-size: 24px; }
	.fc-buy__ctas { flex-direction: column; }
	.fc-docs { grid-template-columns: 1fr; }
	/* Điện thoại: dải tiện ích + cam kết gọn lại, 2 ô một hàng (anh 23/09) */
	.fc-buy__feats, .fc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.fc-buy__feats li { gap: 8px; font-size: 12px; }
	.fc-buy__feats b { font-size: 12.5px; }
	.fc-buy__feats small { font-size: 11.5px; }
	.fc-trust { margin-top: 18px; }
	.fc-trust__item { gap: 9px; padding: 10px 11px; }
	.fc-trust__item b { font-size: 12.5px; line-height: 1.25; }
	.fc-trust__item small { font-size: 11.5px; }
	.fc-trust__item .fc-ic { width: 24px; height: 24px; }
	.fc-apps { grid-template-columns: repeat(2, 1fr); }
	.fc-dealer__in { flex-direction: column; text-align: center; }
	.fc-footer__grid { grid-template-columns: 1fr; }
	.fc-gal__body { grid-template-columns: 1fr; }
	.fc-gal__thumbs { flex-direction: row; overflow-x: auto; order: 2; }
}

/* ------------------------------------------------------------------ Thêm giỏ không tải lại trang (anh yêu cầu 22/09) */
.fc-btn.is-loading { opacity: .75; cursor: progress; }
.fc-btn.is-done { background: var(--fc-green); border-color: var(--fc-green); }
.fc-cart.is-bump { animation: fc-bump .45s ease; }
@keyframes fc-bump { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fc-toast { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: 380px; padding: 14px 16px; background: #fff; color: var(--fc-text); border: 1px solid var(--fc-line); border-left: 4px solid var(--fc-green); border-radius: var(--fc-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-family: var(--fc-font); transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.fc-toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fc-toast__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fc-green); color: #fff; font-weight: 700; }
.fc-toast__tx { display: flex; flex-direction: column; min-width: 0; }
.fc-toast__tx b { font-size: 15px; }
.fc-toast__tx small { color: var(--fc-muted); font-size: 13px; }
.fc-toast__go { flex: none; margin-left: auto; padding: 8px 12px; border-radius: 4px; background: var(--fc-red); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; text-decoration: none; }
.fc-toast__go:hover { background: var(--fc-red-dark); color: #fff; }
.fc-toast__x { flex: none; border: 0; background: none; color: var(--fc-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
@media (max-width: 600px) {
	.fc-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ==========================================================================
   TRANG DANH SÁCH SẢN PHẨM — mockup tai-lieu/category.png + SPEC_02 (23/09)
   Dùng chung cho danh mục · dòng sản phẩm · danh mục × dòng.
   ========================================================================== */
.fc-list { padding-bottom: 30px; }

/* Hero: thấp, đẩy khách xuống lưới nhanh (SPEC_02 §4) */
.fc-lhero { background: linear-gradient(120deg, #f7f8f9 0%, #eef0f2 60%, #e8eaec 100%); border-bottom: 1px solid var(--fc-line); }
.fc-lhero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center; padding-top: 24px; padding-bottom: 20px; }
.fc-lhero__h1 { font-size: 30px; font-weight: 700; }
.fc-lhero__intro { margin-top: 8px; max-width: 70ch; color: #444; font-size: 14.5px; }
.fc-lhero__intro p { margin: 0 0 8px; }
.fc-lhero__sizes { margin-top: 16px; }
.fc-lhero__sizes b { display: block; font-size: 14px; margin-bottom: 8px; }
.fc-lhero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-lhero__chips .fc-size { display: inline-flex; align-items: center; justify-content: center; }
.fc-lhero__conv { margin-left: 8px; color: var(--fc-red); font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.fc-lhero__media { display: grid; gap: 12px; justify-items: center; }
.fc-lhero__media img { max-height: 190px; width: auto; object-fit: contain; }
.fc-lhero__trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; width: 100%; }
.fc-lhero__trust li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #444; }

/* Lọc + lưới */
.fc-lgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding-top: 20px; align-items: start; }
.fc-filter { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; padding: 14px 16px; }
.fc-filter__head { display: flex; align-items: center; gap: 8px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--fc-line); }
.fc-filter__head b { display: inline-flex; align-items: center; gap: 7px; flex: 1; }
.fc-filter__head a { color: var(--fc-red); font-size: 12.5px; font-weight: 500; }
.fc-filter__x { display: none; border: 0; background: none; color: var(--fc-muted); }
.fc-filter__grp { border-bottom: 1px solid var(--fc-line); padding: 10px 0; }
.fc-filter__grp summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 13.5px; }
.fc-filter__grp summary::-webkit-details-marker { display: none; }
.fc-filter__grp[open] summary .fc-ic { transform: rotate(180deg); }
.fc-check { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; cursor: pointer; }
.fc-check input { accent-color: var(--fc-red); width: 15px; height: 15px; }
.fc-check small { color: var(--fc-muted); }
.fc-filter__go { width: 100%; height: 42px; margin-top: 14px; font-size: 14px; }
.fc-filter__help { margin-top: 14px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: var(--fc-bg-soft); padding: 14px; display: flex; gap: 12px; font-size: 13px; }
.fc-filter__help b { display: block; font-size: 13.5px; }
.fc-filter__help small { display: block; color: var(--fc-muted); margin: 4px 0 10px; }
.fc-filter__help .fc-btn { height: 36px; font-size: 13px; }

.fc-lbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; }
.fc-lbar__count { flex: 1; font-size: 13px; color: var(--fc-muted); }
.fc-lbar__filter { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--fc-line); border-radius: 4px; background: #fff; font-size: 13.5px; }
.fc-lbar__view { display: flex; border: 1px solid var(--fc-line); border-radius: 4px; overflow: hidden; }
.fc-lbar__view a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; background: #fff; }
.fc-lbar__view a.is-on { background: var(--fc-red); color: #fff; font-weight: 500; }
.fc-lbar__sort select { height: 36px; border: 1px solid var(--fc-line); border-radius: 4px; background: #fff; padding: 0 8px; font-size: 13px; }

.fc-lcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fc-lcard { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.fc-lcard:hover { border-color: var(--fc-red); }
.fc-lcard__img { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; color: #ccc; padding: 10px; }
.fc-lcard__img img { width: 100%; height: 100%; object-fit: contain; }
.fc-lcard__assets { position: absolute; top: 8px; right: 8px; display: grid; gap: 4px; justify-items: end; }
.fc-lcard__assets span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--fc-muted); background: rgba(255,255,255,.92); border: 1px solid var(--fc-line); border-radius: 3px; padding: 2px 5px; }
.fc-lcard__body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; border-top: 1px solid var(--fc-line); flex: 1; }
.fc-lcard__std { display: flex; flex-wrap: wrap; gap: 5px; }
.fc-lcard__std em { font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .3px; color: #555; background: var(--fc-bg-soft); border: 1px solid var(--fc-line); border-radius: 3px; padding: 2px 6px; }
.fc-lcard__name { font-size: 14.5px; font-weight: 500; line-height: 1.35; margin: 0; }
.fc-lcard__name a:hover { color: var(--fc-red); }
.fc-lcard__size { margin: 0; font-size: 12.5px; color: var(--fc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-lcard__price { margin: 0; font-size: 13px; color: #444; }
.fc-lcard__price b { color: var(--fc-red); font-size: 16px; font-weight: 700; }
.fc-lcard__meta { margin: 0; display: grid; gap: 3px; font-size: 12.5px; }
.fc-lcard__meta div { display: flex; gap: 6px; }
.fc-lcard__meta dt { color: var(--fc-muted); }
.fc-lcard__meta dd { margin: 0; }
.fc-lcard__go { height: 38px; margin-top: auto; font-size: 13.5px; }
.fc-lempty { font-size: 14px; }
.fc-lempty a { color: var(--fc-red); }

/* Danh sách (nút chuyển kiểu xem) */
.fc-lcards.is-list { grid-template-columns: 1fr; }
.fc-lcards.is-list .fc-lcard { flex-direction: row; }
.fc-lcards.is-list .fc-lcard__img { width: 150px; flex: none; border-right: 1px solid var(--fc-line); }
.fc-lcards.is-list .fc-lcard__body { border-top: 0; }
.fc-lcards.is-list .fc-lcard__go { margin-top: 6px; align-self: flex-start; padding: 0 20px; }

.fc-pager { display: flex; gap: 6px; justify-content: center; padding: 20px 0 6px; }
.fc-pager a, .fc-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--fc-line); border-radius: 4px; font-size: 13.5px; background: #fff; }
.fc-pager a:hover { border-color: var(--fc-red); color: var(--fc-red); }
.fc-pager .is-on { background: var(--fc-red); border-color: var(--fc-red); color: #fff; font-weight: 700; }

/* Thông tin hữu ích */
.fc-lsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fc-lsec__more { color: var(--fc-red); font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.fc-lposts { padding-top: 26px; }
.fc-lposts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fc-lpost__img { display: block; aspect-ratio: 16 / 9; border-radius: var(--fc-radius); overflow: hidden; background: var(--fc-bg-soft); }
.fc-lpost__img img { width: 100%; height: 100%; object-fit: cover; }
.fc-lpost__t { font-size: 14.5px; font-weight: 700; margin: 10px 0 6px; line-height: 1.35; }
.fc-lpost__t a:hover { color: var(--fc-red); }
.fc-lpost__ex { margin: 0 0 8px; font-size: 13px; color: #555; }
.fc-lpost__go { color: var(--fc-red); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }

/* Khối kỹ thuật */
/* Khối kỹ thuật: 2 hay 3 ô đều chia đều bề ngang, không để hở một cột trống (23/09) */
.fc-ltech { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding-top: 26px; align-items: start; }
.fc-ltech > div { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 18px 20px; background: #fff; }
.fc-ltech__note { margin: 10px 0 0; font-size: 12px; color: var(--fc-muted); }
.fc-ltech__din p { margin: 0 0 10px; font-size: 13.5px; color: #444; }
.fc-ltech__pts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.fc-ltech__pts li { display: flex; gap: 8px; align-items: flex-start; }
.fc-ltech__faq details { margin-bottom: 8px; }

/* Nhóm liên quan */
.fc-lrel { padding-top: 26px; }
.fc-lrel__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fc-lrel__item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 12px; background: #fff; }
.fc-lrel__item:hover { border-color: var(--fc-red); }
.fc-lrel__img { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--fc-bg-soft); border-radius: 4px; overflow: hidden; }
.fc-lrel__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.fc-lrel__tx { display: grid; gap: 3px; font-size: 13px; min-width: 0; }
.fc-lrel__tx b { font-weight: 500; }
.fc-lrel__tx small { color: var(--fc-muted); font-size: 12px; }
.fc-lrel__tx em { font-style: normal; color: var(--fc-red); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 1100px) {
	.fc-lcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fc-lposts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-ltech { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.fc-lhero__in { grid-template-columns: 1fr; }
	.fc-lhero__media { justify-items: start; }
	.fc-lgrid { grid-template-columns: 1fr; }
	.fc-lbar__filter { display: inline-flex; }
	/* Bộ lọc thành ngăn kéo trên điện thoại (SPEC_02 §13) */
	.fc-filter { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); padding: 0; border: 0; border-radius: 0; display: none; }
	.fc-filter.is-open { display: block; }
	.fc-filter form { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: #fff; overflow: auto; padding: 14px 16px 20px; }
	.fc-filter__help { display: none; }
	.fc-filter__x { display: inline-flex; }
	body.fc-noscroll { overflow: hidden; }
}
@media (max-width: 560px) {
	.fc-lhero__h1 { font-size: 23px; }
	.fc-lcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-lcards.is-list .fc-lcard { flex-direction: column; }
	.fc-lcards.is-list .fc-lcard__img { width: 100%; border-right: 0; }
	.fc-lposts__list { grid-template-columns: 1fr; }
	.fc-lcard__go { font-size: 12.5px; }
	.fc-lhero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; font-size: 12px; }
}

/* Menu sổ xuống: nhóm con + dòng sản phẩm (QĐ-25) — tự sinh từ dữ liệu, xem functions.php */
.fc-nav__list > li { position: relative; }
.fc-nav__list .sub-menu { display: none; position: absolute; left: 0; top: 100%; z-index: 70; min-width: 230px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--fc-line); border-radius: 0 0 var(--fc-radius) var(--fc-radius); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.fc-nav__list > li:hover > .sub-menu, .fc-nav__list > li:focus-within > .sub-menu { display: block; }
.fc-nav__list .sub-menu a { color: var(--fc-text); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 8px 16px; border-radius: 0; }
.fc-nav__list .sub-menu a:hover { background: var(--fc-red-soft); color: var(--fc-red); }
.fc-nav__has-sub > a::after { content: "▾"; margin-left: 5px; font-size: 10px; opacity: .8; }
@media (max-width: 900px) {
	.fc-nav__list .sub-menu { display: none !important; } /* điện thoại: bấm vào mục cha xem trang danh mục, lọc ở trang */
}

/* Điện thoại: thanh trên lưới xếp lại cho đỡ chật (kiểm tra thật trên màn 375px, 23/09) */
@media (max-width: 620px) {
	.fc-lbar { gap: 8px; }
	.fc-lbar__filter { order: 1; }
	.fc-lbar__view { order: 2; margin-left: auto; }
	.fc-lbar__count { order: 4; flex: 1 0 100%; }
	.fc-lbar__sort { order: 3; flex: 1 0 100%; }
	.fc-lbar__sort select { width: 100%; }
	.fc-lbar__view a span { display: none; }
}

/* Danh mục chưa có hàng → không có bộ lọc: lưới chiếm cả bề ngang (anh báo 23/09) */
.fc-lgrid--rong { grid-template-columns: 1fr; }
.fc-lbar__count--rong { flex: 0 1 auto; font-size: 14px; color: #444; }
.fc-lempty { max-width: 640px; }

/* Điện thoại: đầu trang danh mục gọn lại — 2 icon một dòng, bỏ hàng nút chọn size, ảnh nhỏ lại (anh 23/09) */
@media (max-width: 700px) {
	.fc-lhero__in { padding-bottom: 14px; gap: 14px; }
	.fc-lhero__sizes { margin-top: 10px; }
	.fc-lhero__sizes > b, .fc-lhero__chips .fc-size { display: none; } /* chọn size đã có trong bộ lọc */
	.fc-lhero__conv { margin-left: 0; }
	.fc-lhero__media { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; justify-items: start; }
	.fc-lhero__media img { max-height: 120px; }
	.fc-lhero__trust li { font-size: 12px; gap: 6px; }
	.fc-lhero__trust .fc-ic { width: 20px; height: 20px; }
}
.fc-lhero__trust a { display: flex; align-items: center; gap: 8px; }
.fc-lhero__trust a:hover span { color: var(--fc-red); text-decoration: underline; }

/* ==========================================================================
   TRANG CHỦ — SPEC_04 Homepage Desktop Design Lock v1.0 + mockup Home-page.png (23/09)
   Trắng / đen / xám + đỏ FlowColour làm accent. Không thêm màu khác.
   ========================================================================== */
.fc-home { padding-bottom: 40px; }
.fc-hsec { padding-top: 34px; }
.fc-hsec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.fc-hsec__head .fc-h2 { margin-bottom: 2px; }
.fc-hsec__head .fc-sub { margin: 0; font-size: 13.5px; }

/* Hero */
/* Ảnh hero là ẢNH NỀN tràn ngang: ảnh của hãng đã chừa khoảng trống bên trái cho chữ (anh 23/09) */
.fc-hhero { position: relative; border-bottom: 1px solid var(--fc-line); overflow: hidden; background: #d9dbdd; }
.fc-hhero__bg { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 74%; height: 100%; object-fit: cover; object-position: 68% center; }
.fc-hhero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 46%); align-items: center; min-height: 480px; }
.fc-hhero__txt { padding: 34px 0; }
.fc-hhero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #555; }
.fc-hhero__eyebrow span { width: 28px; height: 3px; background: var(--fc-red); border-radius: 2px; }
.fc-hhero__h1 { font-size: 38px; font-weight: 700; line-height: 1.22; }
.fc-hhero__h1 em { font-style: normal; color: var(--fc-red); }
.fc-hhero__sub { margin: 14px 0 22px; max-width: 46ch; color: #444; font-size: 15px; }
.fc-hhero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.fc-hhero__cta .fc-btn { flex: 0 0 auto; }
.fc-hhero__badges { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fc-hhero__badges li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.3; color: #333; }
.fc-hhero__badges li + li { border-left: 1px solid #d8d9db; padding-left: 12px; }
/* Màn hẹp: ảnh nền mờ dần sang trái để chữ luôn đọc được */
/* Nối mềm giữa nền trắng bên trái và ảnh bên phải, không để lộ đường cắt */
.fc-hhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, #fff 25%, rgba(255,255,255,.75) 33%, rgba(255,255,255,0) 46%); pointer-events: none; }
.fc-hhero__in { z-index: 2; }

/* 4 nhóm sản phẩm */
.fc-hcats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Thẻ danh mục: xếp DỌC (trước đây dùng grid không khai báo cột → ảnh phình to, phần chữ bị cắt mất, 23/09) */
.fc-hcat { display: flex; flex-direction: column; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; overflow: hidden; height: 100%; position: relative; }
.fc-hcat:hover { border-color: var(--fc-red); }
/* Ảnh hãng là ảnh VUÔNG → khung vuông, để trọn ảnh không cắt (anh 23/09) */
.fc-hcat__img { width: 100%; aspect-ratio: 1 / 1; flex: none; display: grid; place-items: center; background: #fff; color: #bbb; overflow: hidden; border-bottom: 1px solid var(--fc-line); }
.fc-hcat__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.fc-hcat__tx { flex: 1; padding: 14px 46px 18px 16px; }
.fc-hcat__tx b { display: block; font-size: 15.5px; }
.fc-hcat__tx small { display: block; margin-top: 3px; color: var(--fc-muted); font-size: 12.5px; line-height: 1.4; }
.fc-hcat__go { position: absolute; right: 14px; bottom: 16px; width: 28px; height: 28px; border: 1px solid var(--fc-line); border-radius: 50%; display: grid; place-items: center; color: var(--fc-red); background: #fff; }
.fc-hcat:hover .fc-hcat__go { background: var(--fc-red); border-color: var(--fc-red); color: #fff; }

/* Sản phẩm nổi bật */
.fc-hprods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.fc-hprod { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; overflow: hidden; }
.fc-hprod:hover { border-color: var(--fc-red); }
.fc-hprod__img { aspect-ratio: 1 / 1; display: grid; place-items: center; color: #ccc; padding: 10px; }
.fc-hprod__img img { width: 100%; height: 100%; object-fit: contain; }
.fc-hprod__name { padding: 0 12px; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.fc-hprod__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 12px 12px; }
.fc-hprod__foot small { color: var(--fc-muted); font-size: 11.5px; }
.fc-hprod__foot em { font-style: normal; color: var(--fc-red); display: inline-flex; }

/* Ứng dụng thực tế */
.fc-happs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.fc-happ { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--fc-radius); overflow: hidden; background: var(--fc-dark); }
.fc-happ img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .15s, transform .25s; }
.fc-happ:hover img { opacity: 1; transform: scale(1.04); }
.fc-happ span { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; font-size: 13.5px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.fc-happ--noimg { background: linear-gradient(140deg, #3a3a3a, #202020); }

/* Tài liệu kỹ thuật */
.fc-hdocs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fc-hdocs a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; }
.fc-hdocs a:hover { border-color: var(--fc-red); }
.fc-hdocs__ic { width: 44px; height: 44px; flex: none; border-radius: 6px; background: var(--fc-red-soft); display: grid; place-items: center; }
.fc-hdocs b { display: block; font-size: 14.5px; font-weight: 500; }
.fc-hdocs small { color: var(--fc-muted); font-size: 12.5px; }

/* Dải đại lý (nền tối như mockup) */
.fc-hdealer { padding-top: 34px; }
.fc-hdealer__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--fc-darker); color: #fff; border-radius: var(--fc-radius); padding: 26px 30px; }
.fc-hdealer__txt { display: flex; gap: 18px; align-items: flex-start; }
.fc-hdealer__txt h2 { font-size: 22px; font-weight: 700; }
.fc-hdealer__txt p { margin: 6px 0 14px; font-size: 14px; color: #ccc; }
.fc-hdealer__loi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fc-hdealer__loi li { display: flex; gap: 10px; align-items: center; font-size: 13px; line-height: 1.35; }

/* Về FlowColour */
.fc-habout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center; padding-top: 38px; }
.fc-habout__tx p { margin: 0 0 16px; color: #444; font-size: 14.5px; max-width: 68ch; }
.fc-habout__quote { background: var(--fc-darker); color: #fff; border-radius: var(--fc-radius); padding: 28px 30px; }
.fc-habout__quote blockquote { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; }
.fc-habout__quote blockquote::after { content: ""; display: block; width: 40px; height: 3px; background: var(--fc-red); border-radius: 2px; margin-top: 16px; }

@media (max-width: 1100px) {
	.fc-hcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-hprods, .fc-happs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fc-hdocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-hhero__h1 { font-size: 32px; }
}
@media (max-width: 900px) {
	.fc-hhero__in { grid-template-columns: 1fr; min-height: 380px; }
	.fc-hhero__bg { object-position: 70% center; }
	.fc-hhero::after { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.55) 100%); }
	.fc-hhero__txt { padding: 24px 0 18px; }
	.fc-hdealer__in, .fc-habout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.fc-hhero__h1 { font-size: 25px; }
	.fc-hhero__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fc-hhero__badges li + li { border-left: 0; padding-left: 0; }
	.fc-hcats, .fc-hprods, .fc-happs, .fc-hdocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-hsec__head { flex-direction: column; gap: 6px; }
	.fc-hdealer__loi { grid-template-columns: 1fr; }
}

/* Bảng quy đổi trong khối kỹ thuật: không để tràn ra ngoài khung (23/09) */
.fc-ltech__bang { table-layout: fixed; }
.fc-ltech__bang th, .fc-ltech__bang td { white-space: normal; word-break: break-word; padding: 7px 8px; }
/* Thẻ nhóm liên quan: canh đều, ảnh trống thì không chừa ô xám lệch */
.fc-lrel__item { align-items: flex-start; }
.fc-lrel__img:empty { display: none; }
.fc-lrel__tx { flex: 1; }

/* Ô liên hệ nhanh ở bộ lọc: gọi · Zalo · Fanpage (anh 23/09) */
.fc-filter__help { display: block; }
.fc-filter__help > b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.fc-filter__help > small { display: block; color: var(--fc-muted); margin: 6px 0 10px; }
.fc-kenh { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fc-kenh a { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 500; color: #fff; }
.fc-kenh a:hover { filter: brightness(1.08); }
.fc-kenh__goi { background: var(--fc-red); }
.fc-kenh__zalo { background: #0068ff; }
.fc-kenh__facebook { background: #1877f2; }
.fc-kenh .fc-ic--zalo { font-size: 10px; border: 1px solid rgba(255,255,255,.85); border-radius: 3px; padding: 1px 3px; }

/* Trang tìm kiếm (23/09) — dùng lại thẻ sản phẩm của trang danh mục */
.fc-tk__head { padding-top: 18px; }
.fc-tk__head .fc-lhero__h1 { font-size: 26px; }
.fc-tk__head .fc-sub { margin: 6px 0 14px; }
.fc-tk__form { display: flex; gap: 10px; max-width: 620px; }
.fc-tk__form input[type="search"] { flex: 1; height: 46px; padding: 0 14px; border: 1px solid var(--fc-line); border-radius: 4px; font-size: 15px; }
.fc-tk__form input[type="search"]:focus { outline: none; border-color: var(--fc-red); }
.fc-tk__form .fc-btn { flex: 0 0 auto; height: 46px; padding: 0 22px; }
.fc-tk .fc-lcards, .fc-tk .fc-lposts__list { margin-top: 4px; }
.fc-tk__empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 16px; padding-top: 18px; align-items: start; }
.fc-tk__help b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fc-tk__help small { display: block; color: var(--fc-muted); margin: 6px 0 12px; }
@media (max-width: 900px) { .fc-tk__empty { grid-template-columns: 1fr; } }

/* Trang tìm kiếm: khối bài viết gọn lại — ảnh nhỏ bên trái, chữ bên phải (anh 23/09) */
.fc-tk .fc-lposts { padding-top: 22px; }
.fc-tk .fc-lposts__list { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.fc-tk .fc-lpost { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 10px; background: #fff; }
.fc-tk .fc-lpost:hover { border-color: var(--fc-red); }
.fc-tk .fc-lpost__img { grid-row: span 3; aspect-ratio: 1 / 1; border-radius: 4px; }
.fc-tk .fc-lpost__t { font-size: 13.5px; margin: 0 0 4px; }
.fc-tk .fc-lpost__ex { margin: 0 0 6px; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-tk .fc-lpost__go { font-size: 12.5px; }

/* Bài viết đơn + trang Tin tức (23/09) */
.fc-baiviet { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; padding: 8px 20px 36px; align-items: start; }
.fc-baiviet__h1 { font-size: 28px; font-weight: 700; line-height: 1.25; }
.fc-baiviet__meta { margin: 8px 0 16px; color: var(--fc-muted); font-size: 13px; }
.fc-baiviet__anh { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--fc-radius); }
.fc-baiviet__noidung { margin-top: 18px; font-size: 15.5px; line-height: 1.7; max-width: 72ch; }
.fc-baiviet__noidung h2 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; }
.fc-baiviet__noidung h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
.fc-baiviet__noidung ul, .fc-baiviet__noidung ol { margin: 0 0 14px; padding-left: 22px; }
.fc-baiviet__noidung li { margin-bottom: 6px; }
.fc-baiviet__noidung b { font-weight: 700; }
.fc-baiviet__ben { display: grid; gap: 14px; position: sticky; top: calc(var(--fc-header-h) + 14px); }
.fc-baiviet__khac b { display: block; margin-bottom: 10px; font-size: 14px; }
.fc-baiviet__khac ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.fc-baiviet__khac a:hover { color: var(--fc-red); }
@media (max-width: 900px) {
	.fc-baiviet { grid-template-columns: 1fr; }
	.fc-baiviet__ben { position: static; }
	.fc-baiviet__h1 { font-size: 23px; }
}

/* Trang Tài liệu kỹ thuật (23/09) */
.fc-tailieu { padding: 8px 20px 36px; }
.fc-tailieu .fc-sub { margin: 6px 0 18px; }
.fc-tailieu__bang td, .fc-tailieu__bang th { text-align: left; white-space: normal; }
.fc-tailieu__bang td:not(.fc-tailieu__ten) { text-align: center; white-space: nowrap; }
.fc-tailieu__bang a { color: var(--fc-red); display: inline-flex; align-items: center; gap: 5px; }
.fc-tailieu__ten a { color: inherit; font-weight: 500; }
.fc-tailieu__ten a:hover { color: var(--fc-red); }

/* Trang Ứng dụng thực tế (23/09) */
.fc-ungdung { padding: 8px 20px 36px; }
.fc-ungdung .fc-sub { margin: 6px 0 20px; }
.fc-ud { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 18px 20px; margin-bottom: 16px; background: #fff; }
.fc-ud__top { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 14px; }
.fc-ud__anh { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--fc-radius); }
.fc-ud__mota { margin: 4px 0 6px; color: #444; font-size: 14px; }
.fc-ud__dem { margin: 0; color: var(--fc-muted); font-size: 13px; }
@media (max-width: 700px) { .fc-ud__top { grid-template-columns: 1fr; } }

/* Điện thoại: bảng tài liệu xếp thành thẻ (khỏi cuộn ngang), ô tìm xuống dòng (23/09) */
@media (max-width: 620px) {
	.fc-tk__form { flex-wrap: wrap; }
	.fc-tk__form input[type="search"] { flex: 1 0 100%; }
	.fc-tk__form .fc-btn { flex: 1; }
	.fc-tailieu__bang, .fc-tailieu__bang tbody, .fc-tailieu__bang tr, .fc-tailieu__bang td { display: block; width: 100%; }
	.fc-tailieu__bang thead { display: none; }
	.fc-tailieu__bang tr { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); margin-bottom: 10px; padding: 10px 12px; }
	.fc-tailieu__bang td { border: 0; padding: 3px 0; text-align: left !important; }
	.fc-tailieu__ten { font-size: 14px; margin-bottom: 4px; }
	.fc-tailieu__bang td:not(.fc-tailieu__ten):not(:empty) { display: inline-flex; margin-right: 14px; }
	.fc-tailieu .fc-tablewrap { overflow: visible; }
}

/* Trang Liên hệ (23/09) */
.fc-lienhe { padding: 8px 20px 36px; }
.fc-lienhe .fc-sub { margin: 6px 0 18px; }
.fc-lienhe__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fc-lienhe__tit { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 12px; }
.fc-lienhe__ds { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.fc-lienhe__ds li { display: flex; gap: 9px; align-items: flex-start; }
.fc-lienhe__ds a:hover { color: var(--fc-red); }
.fc-lienhe__them { margin-top: 16px; }

/* ==========================================================================
   TRANG ĐĂNG KÝ ĐẠI LÝ (/dai-ly/dang-ky/) — mockup tai-lieu/dang-ky-dai-ly (23/09)
   ========================================================================== */
.fc-dk { padding-bottom: 40px; }
.fc-dkhero { background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%); border-bottom: 1px solid var(--fc-line); overflow: hidden; }
.fc-dkhero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.fc-dkhero__txt { padding: 34px 0; }
.fc-dkhero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--fc-muted); text-transform: uppercase; }
.fc-dkhero__eyebrow span { width: 28px; height: 3px; background: var(--fc-red); border-radius: 2px; }
.fc-dkhero__h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--fc-darker); }
.fc-dkhero__h1 .fc-red { color: var(--fc-red); }
.fc-dkhero__sub { margin: 0 0 18px; max-width: 560px; color: #444; }
.fc-dkhero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-dkhero__tags li { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #fff; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); font-size: 13px; line-height: 1.35; }
.fc-dkhero__img { width: 100%; height: 100%; max-height: 330px; object-fit: contain; }

.fc-dk__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; align-items: start; }
.fc-dk__side { display: grid; gap: 22px; }
.fc-dkform__tit { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--fc-darker); }
.fc-dk .fc-sub { margin: 0 0 16px; color: var(--fc-muted); font-size: 14px; }

.fc-dkbao { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--fc-radius); font-size: 14px; }
.fc-dkbao--ok { background: #e8f7ee; border: 1px solid #b7e3c7; color: #15803d; }
.fc-dkbao--loi { background: var(--fc-red-soft); border: 1px solid #f3bdc0; color: var(--fc-red-dark); }

.fc-dkf__bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-dkf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fc-dkf__f { display: block; margin-bottom: 14px; border: 0; padding: 0; }
.fc-dkf__f > span, .fc-dkf__f legend { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #333; }
.fc-dkf__f i, .fc-dkf__dongy i { color: var(--fc-red); font-style: normal; }
.fc-dkf input[type="text"], .fc-dkf input[type="tel"], .fc-dkf input[type="email"], .fc-dkf select, .fc-dkf textarea {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--fc-text);
	background: #fff; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); transition: border-color .15s, box-shadow .15s;
}
.fc-dkf input:focus, .fc-dkf select:focus, .fc-dkf textarea:focus { outline: 0; border-color: var(--fc-red); box-shadow: 0 0 0 3px rgba(227, 6, 19, .12); }
.fc-dkf input::placeholder, .fc-dkf textarea::placeholder { color: #9b9b9b; }
.fc-dkf textarea { resize: vertical; min-height: 96px; }
.fc-dkf__checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fc-dkf__check { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.fc-dkf__check input, .fc-dkf__dongy input { width: 16px; height: 16px; accent-color: var(--fc-red); }
.fc-dkf__dongy { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13.5px; color: #444; }
.fc-dkf__gui { width: 100%; justify-content: center; font-size: 15px; padding: 13px 18px; }
.fc-dkf__loi { margin: -8px 0 12px; color: var(--fc-red-dark); font-size: 13px; }

.fc-dkbuoc__ds { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: b; }
.fc-dkbuoc__ds li { display: flex; gap: 12px; align-items: flex-start; }
.fc-dkbuoc__so { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #f3bdc0; border-radius: 50%; background: var(--fc-red-soft); color: var(--fc-red-dark); font-weight: 700; font-size: 14px; }
.fc-dkbuoc__ds b, .fc-dkquyen__ds b { display: block; font-size: 14.5px; color: var(--fc-darker); }
.fc-dkbuoc__ds small, .fc-dkquyen__ds small { display: block; margin-top: 2px; color: var(--fc-muted); font-size: 13px; line-height: 1.45; }
.fc-dkquyen__ds { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fc-dkquyen__ds li { display: flex; gap: 12px; align-items: flex-start; }
.fc-dkquyen__tel { display: block; margin: 2px 0; font-size: 20px; font-weight: 800; color: var(--fc-red); text-decoration: none; }
.fc-dkquyen__kenh { margin-top: 16px; }

.fc-dkfaq { margin-top: 26px; }
.fc-dkfaq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fc-dkfaq__i { background: #fff; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); }
.fc-dkfaq__i summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.fc-dkfaq__i summary::-webkit-details-marker { display: none; }
.fc-dkfaq__i summary::after { content: "⌄"; color: var(--fc-muted); font-size: 18px; line-height: 1; transition: transform .15s; }
.fc-dkfaq__i[open] summary::after { transform: rotate(180deg); }
.fc-dkfaq__i p { margin: 0; padding: 0 16px 14px; color: #444; font-size: 14px; }

.fc-dkcta { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 22px 24px; background: var(--fc-red-soft); border: 1px solid #f6cdd0; border-radius: var(--fc-radius); }
.fc-dkcta > div { flex: 1 1 auto; }
.fc-dkcta b { display: block; font-size: 17px; color: var(--fc-red-dark); }
.fc-dkcta span { display: block; margin-top: 3px; color: #555; font-size: 14px; }

@media (max-width: 900px) {
	.fc-dkhero__in { grid-template-columns: 1fr; }
	.fc-dkhero__img { order: -1; max-height: 210px; }
	.fc-dkhero__h1 { font-size: 30px; }
	.fc-dk__grid, .fc-dkfaq__grid { grid-template-columns: 1fr; }
	.fc-dkcta { flex-direction: column; align-items: flex-start; }
	.fc-dkcta .fc-btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
	.fc-dkf__row { grid-template-columns: 1fr; gap: 0; }
	.fc-dkhero__tags li { width: 100%; }
	.fc-dkhero__h1 { font-size: 26px; }
}

/* ==========================================================================
   BẢNG GIÁ ĐẠI LÝ (/dai-ly/bang-gia/) — anh chốt 23/09
   ========================================================================== */
.fc-bg { padding-bottom: 40px; }
.fc-bg__khoa { margin-top: 20px; text-align: center; padding: 34px 20px; }
.fc-bg__nut { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fc-bg__top { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin: 18px 0 14px; }
.fc-bg__loc { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-bg__tim, .fc-bg__cat { padding: 10px 12px; font: inherit; font-size: 14px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; }
.fc-bg__tim { min-width: 260px; }
.fc-bg__tim:focus, .fc-bg__cat:focus { outline: 0; border-color: var(--fc-red); box-shadow: 0 0 0 3px rgba(227, 6, 19, .12); }
.fc-bg__chua { margin: 0 0 12px; padding: 10px 14px; background: #fff8e6; border: 1px solid #f0dca8; border-radius: var(--fc-radius); font-size: 14px; }
.fc-bg__wrap { overflow-x: auto; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: #fff; }
.fc-bg__tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-bg__tbl th, .fc-bg__tbl td { padding: 9px 12px; border-bottom: 1px solid var(--fc-line); text-align: left; vertical-align: middle; }
.fc-bg__tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--fc-dark); color: #fff; font-size: 13px; white-space: nowrap; }
.fc-bg__tbl tbody tr:nth-child(even) { background: #fafafa; }
.fc-bg__tbl tbody tr:hover { background: var(--fc-red-soft); }
.fc-bg__sp { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.fc-bg__sp img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--fc-line); border-radius: 4px; flex: 0 0 44px; }
.fc-bg__sp a { color: var(--fc-text); text-decoration: none; font-weight: 600; }
.fc-bg__sp a:hover { color: var(--fc-red); }
.fc-bg__sku { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--fc-muted); }
.fc-bg__num { text-align: right; white-space: nowrap; }
.fc-bg__dl { font-weight: 700; color: var(--fc-red); }
.fc-bg__dem { margin: 10px 2px 0; color: var(--fc-muted); font-size: 13px; }
.fc-bg__khong { margin: 0; padding: 18px; text-align: center; color: var(--fc-muted); }
.fc-giadl { display: block; margin-top: 4px; font-size: 14px; color: var(--fc-text); }
.fc-giadl b { color: var(--fc-red); }
@media (max-width: 700px) {
	.fc-bg__top { flex-direction: column; align-items: stretch; }
	.fc-bg__tim { min-width: 0; width: 100%; }
	.fc-bg__loc { flex-direction: column; }
}
@media print {
	.fc-header, .fc-footer, .fc-bg__loc, .fc-dealer, .fc-breadcrumb { display: none !important; }
	.fc-bg__wrap { overflow: visible; border: 0; }
	.fc-bg__tbl thead th { position: static; background: #eee; color: #000; }
}

/* Size 2 đầu / cỡ ren: danh sách dài giấu trong nút mở, không kéo vỡ khung (24/09) */
.fc-lhero__them { flex: 0 0 auto; }
.fc-lhero__them summary { cursor: pointer; padding: 0 12px; height: 38px; display: inline-flex; align-items: center; border: 1px dashed #bbb; border-radius: 4px; background: #fff; font-size: 13.5px; color: var(--fc-muted); list-style: none; }
.fc-lhero__them summary::-webkit-details-marker { display: none; }
.fc-lhero__them summary:hover { border-color: var(--fc-red); color: var(--fc-red); }
.fc-lhero__them[open] summary { border-style: solid; border-color: var(--fc-red); color: var(--fc-red); }
.fc-lhero__chips--an { margin-top: 10px; max-height: 176px; overflow-y: auto; padding: 4px; }
.fc-lhero__chips--an .fc-size { font-size: 13px; height: 34px; min-width: 0; }
.fc-lhero__chips { max-width: 100%; }
.fc-lhero__chips .fc-size { max-width: 100%; }