/*
Theme Name: Fujicolor
Author: Fujicolor
Description: Custom cinematic theme for Fuji Color.
Version: 2.24.1
Text Domain: fujicolor
*/

:root { --black:#000; --white:#f7f7f7; --muted:#999; --gold:#e3b438; --orange:#f5a900; --line:#343434; --panel:rgba(38,38,38,.97); --panel-text:#f1f1f1; --font-display:'Be Vietnam Pro',Arial,Helvetica,sans-serif; }
/* Font hiển thị cho mọi chữ in hoa / có giãn chữ / tên mã màu: Be Vietnam Pro vẽ dấu tiếng Việt đúng trên mọi máy
   (Arial trên Windows làm dấu Ứ, Ẩ, Ệ… lệch, khách báo "lỗi font" 25/9). Chữ thân bài vẫn Arial. */
.site-nav a,.home-hero-title,.ux-button,.ux-title,.contact-title,.newsletter button,.section-title,.entry-title,.eyebrow,.post-meta,.page-heading h1,.feature-card h2,.product-tab,.project-nav-link,.dealer-prov h3,.pattern-meta,.brand-small,.outline-button,.system-step,.video-card figcaption,.cat-all a,.intro-line span,.stat-label,.swatch-filter,.catalog-group > h3,.about-eyebrow,.about-features h3,.color-row h2,.branches h2,.branch-map-cta,.contact-line-label,.btn,.hero-title,.line-title,.line-more,.cta-title,.swatch-code,.swatch-modal-code,.swatch-subnote,.catalog-item h4,.catalog-code,.project-cap strong,.pattern-body h3,.contact-line-value,.stat-num { font-family:var(--font-display); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--white); font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.5; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; transition:all .3s ease-in-out; }
img,video { display:block; max-width:100%; }
button,input { font:inherit; }
.container { width:min(1170px,calc(100% - 30px)); margin-inline:auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ===== Hiệu ứng xuất hiện / rời trang (fx) ===== */
/* Chỉ chạy khi có JS (html.js). Ẩn cho tới khi lọt khung nhìn (.is-in), rồi chạy keyframe 0.8s với độ trễ so le
   --fx-delay. Dùng animation (không transition) để sau khi xong không đè lên transform hover của card. */
html.js .fx-up:not(.is-in),html.js .fx-down:not(.is-in),html.js .fx-left:not(.is-in),html.js .fx-right:not(.is-in) { opacity:0; }
html.js .fx-up.is-in { animation:fx-in-up .8s cubic-bezier(.22,.61,.36,1) var(--fx-delay,0ms) backwards; }
html.js .fx-down.is-in { animation:fx-in-down .8s cubic-bezier(.22,.61,.36,1) var(--fx-delay,0ms) backwards; }
html.js .fx-left.is-in { animation:fx-in-left .9s cubic-bezier(.22,.61,.36,1) var(--fx-delay,0ms) backwards; }
html.js .fx-right.is-in { animation:fx-in-right .9s cubic-bezier(.22,.61,.36,1) var(--fx-delay,0ms) backwards; }
@keyframes fx-in-up { from { opacity:0; transform:translate3d(0,36px,0); } to { opacity:1; transform:none; } }
@keyframes fx-in-down { from { opacity:0; transform:translate3d(0,-28px,0); } to { opacity:1; transform:none; } }
@keyframes fx-in-left { from { opacity:0; transform:translate3d(-56px,0,0); } to { opacity:1; transform:none; } }
@keyframes fx-in-right { from { opacity:0; transform:translate3d(56px,0,0); } to { opacity:1; transform:none; } }
/* Rời trang: bấm link nội bộ -> trượt ra ngược chiều trong 0.5s (theme.js đã thêm html.is-animating rồi mới chuyển). */
html.is-animating .fx-up,html.is-animating .fx-down,html.is-animating .fx-left,html.is-animating .fx-right { animation:none !important; opacity:0 !important; transition:opacity .5s ease-in,transform .5s ease-in !important; }
html.is-animating .fx-up { transform:translate3d(0,36px,0) !important; }
html.is-animating .fx-down { transform:translate3d(0,-28px,0) !important; }
html.is-animating .fx-left { transform:translate3d(-56px,0,0) !important; }
html.is-animating .fx-right { transform:translate3d(56px,0,0) !important; }
/* Viền vàng nhấp rồi tan khi rê chuột vào card (mykolor: 2px #D6B96F, 2s). */
.fx-frame { position:relative; }
.fx-frame::after { content:""; position:absolute; inset:0; border:2px solid var(--gold); border-radius:inherit; opacity:0; pointer-events:none; }
.fx-frame:hover::after { animation:fx-frame-flash 1.6s cubic-bezier(.39,.575,.565,1) forwards; }
@keyframes fx-frame-flash { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
	html.js .fx-up,html.js .fx-down,html.js .fx-left,html.js .fx-right { opacity:1 !important; animation:none !important; transform:none !important; transition:none !important; }
	.fx-frame:hover::after { animation:none; }
}

/* Header nằm trên drawer (z-index 35 > 30) nên vùng trống của nó từng nuốt cú bấm vào
   mục menu đầu tiên. Bỏ nhận chuột ở phần nền, chỉ giữ lại đúng các phần tử bấm được. */
/* Header cố định (khách 24/9): nút menu, nút tìm kiếm và logo luôn đứng một chỗ khi cuộn.
   Thân trang chừa đúng chiều cao header; hero vẫn tràn lên dưới header nhờ margin-top âm. Khi cuộn,
   dải nền mờ chuyển dần xuống trong suốt để chữ/logo không lẫn vào nội dung. */
.site-header { position:fixed; top:0; left:0; right:0; z-index:35; background:transparent; pointer-events:none; }
.site-header::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,7,15,.94) 0%,rgba(5,7,15,.72) 55%,rgba(5,7,15,0) 100%); opacity:0; transition:opacity .4s ease; pointer-events:none; }
.site-header.is-scrolling::before { opacity:1; }
.tcolor-light .site-header::before { background:linear-gradient(180deg,rgba(244,244,244,.96) 0%,rgba(244,244,244,.8) 55%,rgba(244,244,244,0) 100%); }
body { padding-top:150px; }
.site-header a,.site-header button,.site-header input,.site-header .search-panel { pointer-events:auto; }
.header-inner.container { position:relative; width:100%; max-width:none; height:150px; padding-inline:22px; display:flex; align-items:center; justify-content:space-between; }
.brand { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1); display:inline-flex; align-items:baseline; font-size:32px; font-weight:800; letter-spacing:-.04em; white-space:nowrap; transition:all .5s ease-in-out; }
.site-header.is-scrolling .brand { transform:translate(-50%,-50%); }
.brand-script { margin-right:2px; color:#fff; font-family:Georgia,serif; font-size:40px; font-style:italic; font-weight:700; }
.brand-color,.brand-dot { color:var(--orange); }
.brand-color { letter-spacing:.02em; }
.brand-dot { font-size:12px; vertical-align:top; }
.brand-logo { display:block; height:54px; width:auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,.22)); }
.icon-button { width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:transparent; cursor:pointer; }
.menu-toggle { position:absolute; z-index:40; left:22px; }
.search-toggle { position:absolute; z-index:40; right:22px; color:#999; background:#fff; }
.search-toggle.is-open { opacity:0; visibility:hidden; transform:scale(.8); }
.hamburger,.hamburger::before,.hamburger::after { width:18px; height:2px; background:#fff; content:""; display:block; transition:transform .3s ease-in-out,top .3s ease-in-out,opacity .2s ease-in-out; }
.hamburger { position:relative; }
.hamburger::before { position:absolute; top:-6px; }
.hamburger::after { position:absolute; top:6px; }
.menu-toggle.is-open .hamburger { background:transparent; }
.menu-toggle.is-open .hamburger::before { top:0; transform:rotate(45deg); }
.menu-toggle.is-open .hamburger::after { top:0; transform:rotate(-45deg); }
.search-icon { width:13px; height:13px; border:2px solid currentColor; border-radius:50%; position:relative; }
.search-icon::after { content:""; position:absolute; right:-5px; bottom:-3px; width:6px; height:2px; background:currentColor; transform:rotate(45deg); }

.menu-panel { position:fixed; z-index:30; inset:0 auto 0 0; width:260px; padding:115px 30px 30px; background:var(--panel); color:var(--panel-text); opacity:0; visibility:hidden; transform:translate3d(-100%,0,0); transition:transform .3s cubic-bezier(.785,.135,.15,.86),opacity .3s ease,visibility .3s; }
.menu-panel.is-open { transform:translateX(0); }
.menu-panel.is-open { opacity:1; visibility:visible; transform:translate3d(0,0,0); }
.site-nav ul { margin:0; padding:0; list-style:none; text-align:left; }
.site-nav a { display:block; padding:12px 0; font-size:18px; font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:var(--panel-text); }
.site-nav a:hover { color:var(--gold); }
/* Menu nhiều cấp (accordion) */
.site-nav .menu-item-has-children { position:relative; }
.site-nav .menu-item-has-children > a,.site-nav .sub-menu .menu-item-has-children > a { padding-right:40px; }
/* Mục con có menu cấp 3 (vd "Sơn hiệu ứng nghệ thuật"): chữ nhỏ hơn nên nút +/- nhỏ và lệch lên cho khớp dòng đầu. */
.site-nav .sub-menu > .menu-item-has-children > .submenu-toggle { top:3px; width:30px; height:30px; }
.site-nav .menu-item-has-children.is-open > a { color:var(--gold); }
.submenu-toggle { position:absolute; top:6px; right:0; width:34px; height:34px; padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; transition:color .3s ease; }
.submenu-toggle::before,.submenu-toggle::after { content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.submenu-toggle::before { width:13px; height:2px; transform:translate(-50%,-50%); }
.submenu-toggle::after { width:2px; height:13px; transform:translate(-50%,-50%); }
.submenu-toggle:hover { color:var(--gold); }
.menu-item-has-children.is-open > .submenu-toggle { color:var(--gold); }
.menu-item-has-children.is-open > .submenu-toggle::after { transform:translate(-50%,-50%) scaleY(0); }
.site-nav .sub-menu { width:100%; height:0; overflow:hidden; opacity:0; transition:height .4s cubic-bezier(.25,.8,.25,1),opacity .35s ease; }
.site-nav .menu-item-has-children.is-open > .sub-menu { opacity:1; }
.site-nav .sub-menu a { position:relative; padding:9px 0 9px 20px; font-size:14px; font-weight:300; color:var(--muted); transform:translateX(-8px); opacity:0; transition:color .3s ease,transform .45s cubic-bezier(.25,.8,.25,1),opacity .45s ease; }
.site-nav .sub-menu a::before { content:""; position:absolute; left:0; top:50%; width:7px; height:1px; background:currentColor; opacity:.45; }
.site-nav .sub-menu a:hover { color:var(--gold); }
.site-nav .menu-item-has-children.is-open > .sub-menu a { transform:translateX(0); opacity:1; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(1) a { transition-delay:.05s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(2) a { transition-delay:.09s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(3) a { transition-delay:.13s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(4) a { transition-delay:.17s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(5) a { transition-delay:.21s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(6) a { transition-delay:.25s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(7) a { transition-delay:.29s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(8) a { transition-delay:.33s; }
.site-nav .menu-item-has-children.is-open > .sub-menu li:nth-child(n+9) a { transition-delay:.37s; }
.search-panel { position:absolute; z-index:45; top:57px; right:22px; width:36px; height:36px; overflow:hidden; border-radius:999px; background:#fff; opacity:0; visibility:hidden; transform:scale(.85); transform-origin:right center; transition:width .35s ease-in-out,opacity .2s ease,transform .35s ease,visibility .35s; }
.search-panel.is-open { width:min(330px,calc(100vw - 95px)); opacity:1; visibility:visible; transform:scale(1); }
.header-search-form { width:100%; height:100%; display:flex; align-items:center; }
.header-search-form input { min-width:0; flex:1; height:100%; padding:0 8px 0 18px; border:0; outline:0; color:#222; background:transparent; }
.header-search-form button { width:42px; height:36px; flex:0 0 42px; display:grid; place-items:center; border:0; color:#888; background:transparent; cursor:pointer; }

.cinema { padding-bottom:38px; }
.cinema-frame { width:min(1170px,calc(100% - 30px)); margin:0 auto; overflow:hidden; background:#080808; opacity:0; transform:translateZ(0); transition:opacity 2s ease-in-out,transform 2s ease-in-out; }
.is-ready .cinema-frame { opacity:1; }
.is-animating .cinema-frame { opacity:0; }
.cinema-frame video { width:100%; aspect-ratio:1376/768; object-fit:cover; }
.home-hero { margin-top:34px; text-align:center; }
.home-hero .eyebrow { margin:0 0 10px; }
.home-hero-title { margin:0; color:var(--gold); font-size:clamp(30px,5vw,56px); line-height:1.05; text-transform:uppercase; }
.home-hero-sub { max-width:680px; margin:14px auto 0; color:#cfcfcf; font-size:17px; line-height:1.6; }
/* WooCommerce: ảnh placeholder "chưa có hình" luôn vuông, bằng kích thước item khác (không phụ thuộc kích thước nội tại SVG) */
img.fujicolor-noimg { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; background:#f2f2f3; }
.woocommerce ul.products li.product a img.fujicolor-noimg,
.woocommerce ul.products li.product img.fujicolor-noimg { width:100%; height:auto; aspect-ratio:1/1; max-height:none; }
/* UX Builder shim (Flatsome) — render trang dựng bằng shortcode */
.builder-content { padding-top:4px; }
.ux-row { display:flex; flex-wrap:wrap; align-items:stretch; margin:0 -14px; }
.ux-col { flex:0 0 100%; max-width:100%; padding:14px; }
.ux-col-1 { flex-basis:8.3333%; max-width:8.3333%; }
.ux-col-2 { flex-basis:16.6667%; max-width:16.6667%; }
.ux-col-3 { flex-basis:25%; max-width:25%; }
.ux-col-4 { flex-basis:33.3333%; max-width:33.3333%; }
.ux-col-5 { flex-basis:41.6667%; max-width:41.6667%; }
.ux-col-6 { flex-basis:50%; max-width:50%; }
.ux-col-7 { flex-basis:58.3333%; max-width:58.3333%; }
.ux-col-8 { flex-basis:66.6667%; max-width:66.6667%; }
.ux-col-9 { flex-basis:75%; max-width:75%; }
.ux-col-10 { flex-basis:83.3333%; max-width:83.3333%; }
.ux-col-11 { flex-basis:91.6667%; max-width:91.6667%; }
.ux-col-12 { flex-basis:100%; max-width:100%; }
.ux-col { display:flex; flex-direction:column; gap:26px; }
.ux-image-box { display:flex; flex-direction:column; }
.ux-imgbox-link { display:block; color:inherit; text-decoration:none; }
.ux-imgbox-figure { margin:0; overflow:hidden; border-radius:12px; background:#0d0d0d; }
.ux-imgbox-img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s ease; }
.ux-imgbox-img.fujicolor-noimg { aspect-ratio:4/3; height:auto; object-fit:cover; }
.ux-imgbox-link:hover .ux-imgbox-img { transform:scale(1.05); }
.ux-imgbox-text { padding:14px 6px 0; text-align:center; }
.ux-imgbox-text h4 { margin:0 0 4px; font-size:17px; line-height:1.3; color:var(--white); }
.ux-imgbox-text p { margin:0; color:var(--muted); font-size:14px; }
.ux-imgbox-link:hover .ux-imgbox-text h4 { color:var(--gold); }
.ux-button { display:inline-block; margin:6px 0; padding:12px 26px; border:1px solid var(--gold); border-radius:999px; color:var(--gold); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:all .3s ease; }
.ux-button:hover { background:var(--gold); color:var(--black); }
.ux-button.is-expand { display:block; text-align:center; }
.ux-button.size-xlarge,.ux-button.size-xxlarge { font-size:17px; padding:15px 30px; }
.ux-button.is-expand { margin:34px 0 22px; }
/* Dọn <p> rỗng và <br> do WordPress tự chèn — khiến các cột lệch hàng, cách nhau vô lý */
.builder-content p:empty { display:none; }
.builder-content .ux-row > br,.builder-content .ux-col > br { display:none; }
.builder-content .ux-row { row-gap:36px; margin-bottom:8px; align-items:start; }
.builder-content .ux-imgbox-text { padding-top:12px; }
.ux-title { margin:30px 0 16px; font-size:24px; color:var(--white); text-transform:uppercase; letter-spacing:.02em; }
.ux-gap { height:30px; }
.ux-divider { border:0; height:1px; background:var(--line); margin:30px 0; }
.ux-section { margin:24px 0; }
@media (max-width:849px) {
	.ux-col-sm-1 { flex-basis:8.3333%; max-width:8.3333%; }
	.ux-col-sm-2 { flex-basis:16.6667%; max-width:16.6667%; }
	.ux-col-sm-3 { flex-basis:25%; max-width:25%; }
	.ux-col-sm-4 { flex-basis:33.3333%; max-width:33.3333%; }
	.ux-col-sm-6 { flex-basis:50%; max-width:50%; }
	.ux-col-sm-12 { flex-basis:100%; max-width:100%; }
}
.page-progress { pointer-events:none; position:fixed; z-index:1000; inset:0 0 auto; height:2px; overflow:hidden; }
.page-progress i { display:block; width:100%; height:100%; background:#d6b96f; box-shadow:0 0 10px #d6b96f,0 0 5px #d6b96f; transform:translate3d(-100%,0,0); transition:transform 200ms ease; }
.page-progress.is-running i { transform:translate3d(-8%,0,0); }
.icon-button,.newsletter button,.outline-button { transition:all .3s ease-in-out; }
.icon-button:hover { transform:scale(1.08); }
.outline-button:hover { color:#000; background:#d6b96f; border-color:#d6b96f; }
.newsletter button:hover { color:#d6b96f; }

.site-footer { padding:0 0 40px; background:#000; }
.contact-block { width:min(1170px,calc(100% - 30px)); margin:0 auto; text-align:center; }
.contact-title { margin:0 0 2px; color:var(--gold); font-size:17px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.contact-copy { margin:0 0 10px; color:#d5d5d5; }
.newsletter { width:min(440px,100%); margin:auto; }
.newsletter textarea { width:100%; min-height:84px; resize:vertical; padding:12px 14px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--white); background:transparent; font-family:inherit; font-size:15px; line-height:1.5; }
.newsletter textarea::placeholder { color:var(--muted); }
.newsletter textarea:focus { border-color:var(--gold); }
.newsletter button { margin-top:12px; padding:10px 28px; border:0; border-radius:999px; color:var(--black); background:var(--gold); font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.newsletter button:hover { filter:brightness(1.08); }
.newsletter-msg { display:block; margin-top:8px; min-height:18px; font-size:14px; }
.newsletter-msg.ok { color:#4ade80; }
.newsletter-msg.err { color:#f87171; }
.newsletter-msg.is-sending { color:var(--muted); }
.newsletter button[disabled],.contact-form button[disabled] { opacity:.6; cursor:progress; }
/* Honeypot chống spam: người dùng không thấy, bot điền vào là bị chặn. */
.fuji-hp { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.footer-bar { min-height:75px; margin-top:36px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-label { color:var(--gold); }
.socials { display:flex; align-items:center; gap:10px; }
.social-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--brand,#777); color:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.social-icon svg { width:18px; height:18px; display:block; fill:#fff; }
.social-icon:hover { transform:translateY(-2px) scale(1.06); box-shadow:0 6px 14px rgba(0,0,0,.28); }
.languages { text-align:center; font-size:15px; }
.languages span { margin-inline:5px; }
.lang-link { color:var(--muted); padding:0 4px; transition:color .3s ease; }
.lang-link:hover { color:var(--gold); }
.lang-link.is-active { color:var(--gold); font-weight:700; }
.lang-sep { color:var(--line); }

.section { padding:30px 0 90px; }
.section-head,.entry-header { margin-bottom:35px; text-align:center; }
.section-title,.entry-title { margin:0; color:var(--gold); font-size:clamp(38px,7vw,72px); line-height:1; text-transform:uppercase; }
/* Tiêu đề bài viết: cỡ vừa để tiêu đề thường nằm gọn một hàng (khách 30/9). */
.single .entry-title { font-size:clamp(24px,3.2vw,34px); line-height:1.3; letter-spacing:.01em; }
.eyebrow,.post-meta { color:var(--muted); font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.post-card { border:1px solid var(--line); background:#080808; }
.card-image { aspect-ratio:16/10; overflow:hidden; display:block; }
.card-image img { width:100%; height:100%; object-fit:cover; }
.image-placeholder { width:100%; height:100%; display:grid; place-items:center; color:var(--orange); font-size:48px; font-weight:800; background:#111; }
.card-body { padding:22px; }
.post-card h2 { margin:10px 0; font-size:22px; line-height:1.2; }
.post-card h2:hover,.entry-content a { color:var(--gold); }
.post-card p { color:var(--muted); }
.content-wrap { width:min(820px,calc(100% - 30px)); min-height:60vh; margin:auto; padding:45px 0 90px; }
.entry-content { font-size:17px; line-height:1.8; color:#cfcfcf; }
.entry-content > *:first-child { margin-top:0; }
.entry-content p { margin:0 0 24px; }
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6 { margin:44px 0 16px; color:#fff; line-height:1.25; font-weight:700; }
.entry-content h2 { font-size:28px; }
.entry-content h3 { font-size:23px; }
.entry-content h4 { font-size:20px; color:var(--gold); }
.entry-content a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.entry-content a:hover { color:var(--orange); }
.entry-content strong,.entry-content b { color:#fff; }
.entry-content ul,.entry-content ol { margin:0 0 24px; padding-left:24px; }
.entry-content li { margin:8px 0; }
.entry-content blockquote { margin:30px 0; padding:6px 0 6px 24px; border-left:3px solid var(--gold); color:#fff; font-style:italic; }
.entry-content hr { border:0; height:1px; background:var(--line); margin:40px 0; }
/* Media: ghì lại inline width khổng lồ từ editor cũ + canh đẹp */
.entry-content div,.entry-content img,.entry-content figure,.entry-content iframe,.entry-content video,.entry-content table { max-width:100% !important; }
.entry-content img { width:auto; height:auto; border-radius:8px; }
.entry-content figure { width:auto !important; height:auto; margin:30px 0; }
.entry-content figure img { width:100%; }
.entry-content p > img,.entry-content img.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.entry-content .aligncenter { margin-left:auto; margin-right:auto; text-align:center; }
.entry-content .alignleft { float:left; margin:6px 28px 18px 0; max-width:50%; }
.entry-content .alignright { float:right; margin:6px 0 18px 28px; max-width:50%; }
.entry-content .alignnone,.entry-content figure.alignnone { display:block; margin:30px 0; }
.entry-content .wp-caption-text,.entry-content figcaption { margin-top:10px; color:var(--muted); font-size:14px; font-style:italic; text-align:center; }
.entry-content iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:8px; }
/* Bài viết Tin tức */
.entry-content .post-list { list-style:none; padding-left:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; }
.entry-content .post-list li { position:relative; padding-left:32px; color:var(--white); line-height:1.6; }
.entry-content .post-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:var(--black); font-size:12px; font-weight:800; }
.entry-content .post-figure { margin:30px 0; }
.entry-content .post-figure img { width:100%; border-radius:12px; }
.entry-content .post-sep { border:0; height:1px; background:var(--line); margin:40px 0; }
.entry-content .post-signature { padding:24px 26px; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; background:#0a0a0a; }
.entry-content .post-signature p { margin:3px 0; color:var(--muted); font-size:15px; }
.entry-content .post-signature p:first-child { color:var(--gold); font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:.02em; }
.entry-content table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
.entry-content th,.entry-content td { padding:10px 14px; border:1px solid var(--line); text-align:left; }
.entry-content th { background:#141414; color:#fff; }
.entry-content::after { content:""; display:block; clear:both; }
.entry-thumbnail { margin-bottom:40px; }
.entry-thumbnail img { width:100%; height:auto; border-radius:10px; }
.subpage { min-height:60vh; padding-bottom:70px; }
.page-heading { padding:0 0 45px; }
.page-heading h1 { margin:0; font-size:30px; font-weight:300; letter-spacing:.05em; text-transform:uppercase; }
.page-heading h1::before { content:""; display:inline-block; width:34px; height:1px; margin:0 16px 9px 0; background:#ddd; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.feature-card { text-align:center; }
.feature-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.feature-card span { display:block; width:50px; height:1px; margin:30px auto 18px; background:var(--gold); }
.feature-card h2 { margin:0; font-size:25px; font-weight:400; line-height:1.2; text-transform:uppercase; }
/* Khối giới thiệu dòng sơn (trang Sản phẩm + từng trang sản phẩm): chữ bên trái, ảnh công trình
   bên phải, KHÔNG đè lên ảnh (khách chốt 09/2026). Tên dòng sơn cách điệu bằng chữ lớn tô gradient vàng. */
.product-showcase { position:relative; }
.showcase-pane { display:none; }
.showcase-pane.is-active { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(28px,4.5vw,64px); align-items:center; animation:fuji-pane-in .45s ease both; }
@keyframes fuji-pane-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.showcase-media { position:relative; margin:0; aspect-ratio:1/1; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:#0d0d0d; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.showcase-media::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); pointer-events:none; }
.showcase-media img { width:100%; height:100%; object-fit:cover; }
/* Tiêu đề dòng sơn: font Be Vietnam Pro 800 + gradient vàng cố định (không theo theme màu) — khách phản hồi bản cũ trên máy tính nhìn như lỗi font. */
.showcase-title { position:relative; margin:10px 0 22px; padding-bottom:18px; font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif; font-size:clamp(34px,4.2vw,56px); line-height:1.08; font-weight:800; letter-spacing:.01em; text-transform:uppercase; background:linear-gradient(105deg,#ffe7a3 0%,#f6c453 40%,#f5a900 100%); -webkit-background-clip:text; background-clip:text; color:#f5c451; -webkit-text-fill-color:transparent; filter:drop-shadow(0 6px 18px rgba(245,169,0,.22)); }
.showcase-title::after { content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; border-radius:2px; background:linear-gradient(90deg,#f6c453,#f5a900); }
.tcolor-light .showcase-title { background:linear-gradient(105deg,#b8780a 0%,#e07b00 55%,#c0890f 100%); -webkit-background-clip:text; background-clip:text; filter:none; }
.product-tab { padding:9px 18px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:color .3s ease,border-color .3s ease,background .3s ease; }
.product-tab:hover { color:var(--gold); border-color:var(--gold); }
.product-tab.is-active { color:var(--black); background:var(--gold); border-color:var(--gold); }
.product-tab:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
/* Công trình tiêu biểu: 3 mục, lưới ảnh 4 cột, tên công trình nằm sát ngay dưới ảnh. */
.project-nav { display:flex; flex-wrap:wrap; gap:10px; margin:-10px auto 34px; }
.project-nav-link { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid var(--line); border-radius:999px; color:var(--white); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:color .3s ease,border-color .3s ease; }
.project-nav-link span { padding:1px 8px; border-radius:999px; background:rgba(227,180,56,.14); color:var(--gold); font-size:12px; }
.project-nav-link:hover { color:var(--gold); border-color:var(--gold); }
.project-section { margin-bottom:64px; scroll-margin-top:170px; }
.project-head { margin-bottom:22px; }
.project-head .system-title { margin-bottom:8px; }
.project-head p { max-width:720px; margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.project-card { display:flex; flex-direction:column; width:100%; margin:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#080808; transition:transform .3s ease,border-color .3s ease; }
.project-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.project-card:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.project-media { display:block; aspect-ratio:4/3; overflow:hidden; background:#111; }
.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover .project-media img { transform:scale(1.05); }
.project-cap { display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; }
.project-cap strong { font-size:14px; line-height:1.4; color:var(--white); }
.project-cap small { color:var(--muted); font-size:12.5px; line-height:1.4; }
/* Trang Đại lý: 2 ảnh văn phòng lớn hơn (2 cột); phần chữ mở đầu gọn phía trên. */
.project-grid--wide { grid-template-columns:repeat(2,1fr); }
.dealer-intro { min-height:0; padding:0 0 30px; }
.dealer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.project-grid--single { grid-template-columns:minmax(0,760px); justify-content:start; }
/* Bản đồ NPP */
.dealer-map-wrap { margin-bottom:26px; }
.dealer-map { height:680px; max-height:82vh; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0d0d0d; }
.dealer-map-legend { display:flex; align-items:center; gap:8px; margin:10px 2px 0; color:var(--muted); font-size:13.5px; }
.dealer-pin-dot { width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#e53935; }
.dealer-pin { position:relative; background:none; border:0; }
.dealer-pin svg { display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.dealer-pin-sm svg { filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.dealer-pin b { position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#fff; color:#e53935; font:700 10px/17px Arial,sans-serif; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.dealer-pop strong { display:block; margin-bottom:2px; color:#c62828; font-family:var(--font-display); }
.dealer-pop span { display:block; margin-bottom:6px; color:#555; font-size:12.5px; }
.dealer-pop ul { margin:0; padding-left:16px; columns:1; }
.dealer-pop li { margin:2px 0; color:#222; font-size:13px; }
.leaflet-container { font-family:Arial,Helvetica,sans-serif; }
/* Nhãn "NPP Fujicolor" trên bản đồ dự phòng: chỉ hiện khi phóng to (class do dealer-map.js bật). */
.dealer-map .dealer-label { display:none; padding:2px 6px; border:0; border-radius:4px; background:rgba(255,255,255,.92); color:#c62828; font:700 11px/1.2 Arial,sans-serif; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.dealer-map .dealer-label::before { display:none; }
.dealer-map.show-labels .dealer-label { display:block; }

/* Thẻ VP Bắc Kạn trong lưới tỉnh: ảnh + tên, chiếm 2 cột. */
.dealer-office { display:grid; grid-template-columns:minmax(0,320px) 1fr; width:min(100%,640px); margin:0 0 22px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#080808; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.dealer-office-body h3 { margin:0; color:var(--gold); font-family:var(--font-display); font-size:15px; letter-spacing:.04em; text-transform:uppercase; }
.dealer-office-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.dealer-office-media img { width:100%; height:100%; object-fit:cover; }
.dealer-office-body { display:flex; flex-direction:column; justify-content:center; gap:6px; padding:16px 18px; }
.dealer-office-body span { color:#d9d9d9; font-size:14px; }
.dealer-prov { padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#080808; }
.dealer-prov h3 { margin:0 0 8px; color:var(--gold); font-size:15px; letter-spacing:.04em; text-transform:uppercase; }
.dealer-prov ul { margin:0; padding:0; list-style:none; }
.dealer-prov li { padding:4px 0 4px 16px; position:relative; color:#d9d9d9; font-size:14px; line-height:1.45; }
.dealer-prov li::before { content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
@media (max-width:1024px) { .dealer-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:1024px) { .project-grid,.project-grid--wide { grid-template-columns:repeat(2,1fr); gap:14px; } }
/* Trang Sơn hiệu ứng: lưới 7 mẫu; mẫu chưa có mã màu thì mờ đi và không bấm được. */
.effect-patterns { margin-top:70px; }
.pattern-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }
.pattern-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#080808; color:inherit; transition:transform .3s ease,border-color .3s ease; }
.pattern-card:has(a.pattern-link:hover) { transform:translateY(-4px); border-color:var(--gold); }
.pattern-link { display:flex; flex-direction:column; flex:1; color:inherit; }
a.pattern-link:hover h3 { color:var(--gold); }
.pattern-card.is-pending { opacity:.72; }
.pattern-media { display:block; aspect-ratio:16/9; overflow:hidden; background:#111; }
.pattern-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
a.pattern-link:hover .pattern-media img { transform:scale(1.05); }
.pattern-empty { display:block; width:100%; height:100%; background:repeating-linear-gradient(135deg,#151515 0 14px,#1c1c1c 14px 28px); }
.pattern-body { display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; }
.pattern-body h3 { margin:0; font-size:17px; color:var(--white); transition:color .3s ease; }
.pattern-body p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }
.pattern-meta { margin-top:6px; color:var(--gold); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.is-pending .pattern-meta { color:var(--muted); }
.pattern-page { display:block; margin:0 18px 16px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.pattern-page:hover { color:var(--gold); }
/* Bảng màu: dòng "Đang xem: mẫu …" khi vào từ trang Sơn hiệu ứng. */
.swatch-subnote { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px; margin:-18px 0 26px; color:var(--white); font-size:14px; }
.swatch-subnote-clear { padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--gold); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.swatch-subnote-clear:hover { border-color:var(--gold); }
.product-panel { position:static; width:auto; max-width:520px; padding:0; color:var(--white); background:transparent; border:0; }
.product-panel p { margin:0 0 6px; color:#d9d9d9; font-size:16px; line-height:1.8; }
.product-panel .outline-button { margin-top:22px; color:var(--gold); border-color:var(--gold); }
.product-panel .outline-button:hover { color:var(--black); background:var(--gold); }
.brand-small { margin:0; color:var(--gold); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.outline-button { display:inline-block; margin-top:16px; padding:10px 30px; border:1px solid currentColor; background:transparent; color:inherit; font-weight:600; text-transform:uppercase; }
.product-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; padding:0; }
/* Video mp4 dọc (khách quay điện thoại): hiện gọn giữa khung tối thay vì kéo giãn 16:9. */
.product-intro--portrait { display:flex; justify-content:center; padding:24px 0; border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:14px; background:radial-gradient(60% 80% at 50% 50%,#1a1a22,#080808); }
.product-intro video.is-portrait { width:auto; max-width:100%; height:min(78vh,720px); aspect-ratio:9/16; border:0; border-radius:12px; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); }
/* Video vuông (có aspect-ratio inline): tính theo bề rộng, không ép chiều cao cố định -> không dải đen trên mobile. */
.product-intro video.is-portrait[style*="aspect-ratio"] { height:auto; width:min(100%,640px); }
.product-system { margin-top:70px; }
.system-title { margin:0 0 34px; color:var(--gold); font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif; font-weight:800; font-size:clamp(24px,3.4vw,34px); line-height:1.3; text-transform:uppercase; letter-spacing:.01em; }
.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.system-card { display:flex; flex-direction:column; padding:26px 24px 28px; border:1px solid var(--line); border-top:2px solid var(--gold); background:#080808; }
.system-media { height:220px; display:grid; place-items:center; margin:-6px 0 18px; }
.system-media img { max-height:220px; max-width:80%; width:auto; object-fit:contain; }
.system-step { margin:0 0 6px; color:var(--orange); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.system-card h3 { margin:0 0 4px; font-size:20px; color:var(--white); }
.system-role { margin:0 0 16px; color:var(--muted); font-size:14px; }
.system-feats { margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.system-feats li { position:relative; padding-left:20px; color:var(--white); font-size:14px; line-height:1.5; }
.system-feats li::before { content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.system-cover { margin:auto 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--gold); font-size:13px; font-weight:600; }
.product-intro { margin-bottom:46px; }
.product-intro video { display:block; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-top:2px solid var(--gold); }
.video-embed { position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-top:2px solid var(--gold); }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.product-videos { margin-top:70px; }
.video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.video-card { margin:0; }
.video-card video { display:block; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-top:2px solid var(--gold); }
.video-card figcaption { margin-top:14px; color:var(--white); font-size:16px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.product-categories { margin-top:70px; }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.cat-card { display:flex; flex-direction:column; padding:26px 24px 24px; border:1px solid var(--line); border-top:2px solid var(--gold); background:#080808; }
.cat-card h3 { margin:2px 0 14px; font-size:21px; }
.cat-card h3 a { color:var(--white); }
.cat-card h3 a:hover { color:var(--gold); }
.cat-sub { margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.cat-sub a { position:relative; display:block; padding-left:18px; color:var(--muted); font-size:14px; }
.cat-sub a::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.7; }
.cat-sub a:hover { color:var(--gold); }
.cat-sub span { color:#6a6a6a; }
.cat-all { margin:auto 0 0; padding-top:16px; border-top:1px solid var(--line); }
.cat-all a { color:var(--gold); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cat-all a:hover { color:var(--orange); }
/* Trang Giới thiệu Fujicolor */
.section-title-sm { text-align:center; color:var(--gold); font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif; font-weight:800; font-size:clamp(22px,3vw,30px); line-height:1.35; text-transform:uppercase; letter-spacing:.02em; margin:0 0 26px; }
.intro-hero { margin-bottom:46px; }
/* Poster "QC sơn chung" tỉ lệ 3:2 — khung theo đúng tỉ lệ để không cắt logo/chữ. */
/* Ảnh bìa 16:9 hiện trọn, không cắt chữ (khách 30/9). */
.intro-slideshow { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#080808; }
.intro-slide { background-size:cover; }
.intro-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.intro-slide.is-active { opacity:1; }
.intro-dots { position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:10px; z-index:2; }
.intro-dot { width:24px; height:24px; padding:7px; border:0; border-radius:50%; background:rgba(255,255,255,.45); background-clip:content-box; cursor:pointer; transition:background .3s ease,transform .3s ease; }
.intro-dot.is-active { background:var(--gold); background-clip:content-box; transform:scale(1.25); }
.intro-about { max-width:900px; }
.intro-lead { text-align:center; font-size:18px; line-height:1.75; color:#eaeaea; margin:0 auto 26px; }
.intro-sub { text-align:center; color:var(--gold); font-weight:600; letter-spacing:.02em; margin:0 0 22px; }
.intro-lines { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:14px; }
.intro-line { display:flex; flex-direction:column; align-items:center; gap:14px; padding:0 0 18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#080808; transition:transform .3s ease,border-color .3s ease; }
.intro-line:hover { transform:translateY(-3px); border-color:var(--gold); }
/* Poster vuông từng dòng sơn (khách gửi 27/9) chiếm trọn bề rộng card. */
.intro-line-media { width:100%; aspect-ratio:1/1; overflow:hidden; background:#f9eeda; }
.intro-line-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.intro-line:hover .intro-line-media img { transform:scale(1.04); }
.intro-line span { font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--white); font-size:15px; }
.intro-line:hover span { color:var(--gold); }
.intro-divider { border:0; height:1px; background:var(--line); margin:36px 0; }
.intro-copy p { color:#dcdcdc; font-size:16px; line-height:1.85; margin:0 0 18px; text-align:center; }
.intro-factory { margin-top:66px; padding:56px 0; background:#060606; border-top:1px solid var(--line); }
.factory-media { width:100%; height:clamp(240px,40vw,460px); background-size:cover; background-position:center; border-radius:14px; border:1px solid var(--line); margin-bottom:36px; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat { text-align:center; padding:24px 12px; border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:12px; background:#0a0a0a; }
.stat-num { display:block; color:var(--gold); font-size:clamp(30px,5vw,46px); font-weight:800; line-height:1; }
.stat-label { display:block; margin-top:8px; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
/* Bảng màu — thư viện swatch */
.swatch-intro { text-align:center; max-width:760px; margin:0 auto 30px; }
.swatch-lead { color:#dcdcdc; font-size:17px; line-height:1.7; margin:8px 0 0; }
.swatch-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.swatch-filter { padding:9px 22px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; transition:color .3s ease,border-color .3s ease,background .3s ease; }
.swatch-filter:hover { color:var(--gold); border-color:var(--gold); }
.swatch-filter.is-active { background:var(--gold); border-color:var(--gold); color:var(--black); }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px; }
.swatch-card { display:block; width:100%; margin:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#080808; transition:transform .3s ease,border-color .3s ease; }
.swatch-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.swatch-media { display:block; aspect-ratio:4/3; overflow:hidden; background:#0d0d0d; }
.swatch-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.swatch-card:hover .swatch-media img { transform:scale(1.06); }
.swatch-cap { padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.swatch-code { font-weight:800; letter-spacing:.05em; color:var(--white); font-size:15px; }
.swatch-line { color:var(--muted); font-size:12px; }
.swatch-card.is-hidden { display:none; }
/* Ô màu sơn nước (màu phẳng từ quạt màu) — cùng khung với swatch ảnh cho hài hoà */
.swatch-media--flat { position:relative; }
.swatch-media--flat::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -26px 34px rgba(0,0,0,.10); }
.swatch-modal-color { grid-column:1 / -1; width:100%; aspect-ratio:16/9; border-radius:12px; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch-modal-hex { grid-column:1 / -1; display:block; text-align:center; margin-top:12px; color:var(--muted); font-size:13px; letter-spacing:.08em; }
/* Modal chi tiết 4 ảnh */
.swatch-modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.swatch-modal.is-open { display:flex; }
.swatch-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(2px); }
.swatch-modal-inner { position:relative; z-index:1; width:min(920px,100%); max-height:90vh; overflow:auto; padding:30px; background:#0b0b0b; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:16px; }
.swatch-modal-close { position:absolute; top:12px; right:16px; width:40px; height:40px; padding:0; border:0; background:transparent; color:var(--muted); font-size:30px; line-height:1; cursor:pointer; transition:color .3s ease; }
.swatch-modal-close:hover { color:var(--gold); }
.swatch-modal-head { margin:0 0 20px; }
.swatch-modal-code { margin:0; color:var(--gold); font-size:26px; font-weight:800; letter-spacing:.04em; }
.swatch-modal-line { margin:4px 0 0; color:var(--muted); font-size:14px; }
.swatch-modal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.swatch-modal-grid img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#111; }
/* Chứng nhận & Giải thưởng — trang Giới thiệu */
.cert-section { margin-top:66px; }
.cert-head { max-width:800px; margin:0 auto 36px; text-align:center; }
.cert-head .section-title-sm { margin-bottom:14px; }
.cert-lead { color:#dcdcdc; font-size:17px; line-height:1.7; margin:0; }
.cert-group+.cert-group { margin-top:48px; }
.cert-group-title { display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 12px; color:var(--gold); font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif; font-size:17px; font-weight:800; letter-spacing:.04em; line-height:1.5; text-transform:uppercase; text-align:center; }
.cert-group-title::before,.cert-group-title::after { content:""; flex:1; height:1px; background:var(--line); }
.cert-group-desc { max-width:780px; margin:0 auto 26px; color:#cfcfcf; font-size:15px; line-height:1.75; text-align:center; }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,290px)); justify-content:center; gap:22px; }
.cert-card { position:relative; display:flex; flex-direction:column; width:100%; margin:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:12px; overflow:hidden; background:#080808; transition:transform .3s ease,border-color .3s ease; }
.cert-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.cert-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
/* Khung ảnh cố định 3:4 (ảnh đặt tuyệt đối) để mọi chú thích nằm cùng một hàng dù ảnh gốc khác tỉ lệ (khách 30/9). */
.cert-media { position:relative; display:block; aspect-ratio:3/4; background:radial-gradient(circle at 50% 15%,#151515,#070707 72%); }
.cert-media img { position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain; transition:transform .5s ease; }
.cert-card:hover .cert-media img { transform:scale(1.04); }
.cert-cap { padding:14px 16px 18px; border-top:1px solid var(--line); color:#e4e4e4; font-size:14px; line-height:1.55; }
.cert-zoom { position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.62); color:var(--muted); opacity:.75; transition:opacity .3s ease,color .3s ease,border-color .3s ease; }
.cert-card:hover .cert-zoom { opacity:1; color:var(--gold); border-color:var(--gold); }
.cert-lightbox .swatch-modal-inner { width:min(780px,100%); }
.cert-lightbox .swatch-modal-head { padding-right:42px; }
.cert-lightbox .swatch-modal-code { font-size:19px; line-height:1.5; }
.cert-lightbox .swatch-modal-grid { grid-template-columns:1fr; }
.cert-lightbox .swatch-modal-grid img { width:auto; max-width:100%; max-height:70vh; margin-inline:auto; aspect-ratio:auto; object-fit:contain; }
/* Danh mục sản phẩm Fujicolor (từ danh sách xác thực) */
.product-catalog { margin-top:70px; }
.catalog-group { margin-bottom:38px; }
.catalog-group > h3 { margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--gold); font-size:18px; text-transform:uppercase; letter-spacing:.04em; }
.catalog-list { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1024px) { .catalog-list { grid-template-columns:repeat(2,1fr); } }
.catalog-item { position:relative; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#080808; transition:border-color .3s ease,transform .3s ease; }
.catalog-item:hover { border-color:var(--gold); transform:translateY(-2px); }
/* Ảnh sản phẩm trong danh mục — bệ sáng bo góc để ảnh nền trắng tan vào theme tối */
.catalog-media { display:grid; place-items:center; height:150px; margin-bottom:14px; border-radius:10px; background:#f4f3ef; overflow:hidden; }
.catalog-media img { max-height:132px; max-width:82%; width:auto; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease; }
.catalog-item:hover .catalog-media img { transform:scale(1.06); }
.catalog-item h4 { margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--white); }
.catalog-item p { margin:0 0 10px; color:var(--muted); font-size:13.5px; line-height:1.55; }
.catalog-vol { display:inline-block; padding:3px 10px; border-radius:999px; background:rgba(227,180,56,.12); color:var(--gold); font-size:12px; font-weight:600; }
.catalog-code { display:inline-block; margin-left:6px; padding:1px 8px; border:1px solid var(--line); border-radius:6px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.06em; vertical-align:middle; }
/* Giới thiệu loại sơn — bố cục hiện đại: lead + đặc điểm nổi bật */
.product-about { margin-top:66px; display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.about-lead { position:relative; padding-left:24px; }
.about-lead::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:linear-gradient(var(--gold),var(--orange)); }
.about-eyebrow { margin:0 0 16px; color:var(--gold); font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.about-intro { margin:0; color:#eaeaea; font-size:19px; line-height:1.75; }
.about-features h3 { margin:0 0 20px; font-size:20px; color:var(--white); text-transform:uppercase; letter-spacing:.02em; }
.about-features ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.about-features li { position:relative; padding:15px 18px 15px 52px; border:1px solid var(--line); border-radius:12px; background:#0a0a0a; color:#e4e4e4; font-size:15px; line-height:1.55; transition:border-color .3s ease,transform .3s ease,background .3s ease; }
.about-features li::before { content:""; position:absolute; left:18px; top:16px; width:20px; height:20px; border-radius:50%; background:var(--gold); }
.about-features li::after { content:""; position:absolute; left:25px; top:19px; width:5px; height:9px; border:solid var(--black); border-width:0 2px 2px 0; transform:rotate(45deg); }
.about-features li:hover { border-color:var(--gold); background:#0f0f0f; transform:translateX(3px); }
.color-list { width:min(960px,calc(100% - 30px)); }
.color-row { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; margin-bottom:65px; }
.color-row:nth-child(even) img { order:2; }
.color-row img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.color-row h2 { margin:0 0 8px; font-size:27px; text-transform:uppercase; }
.swatches { display:flex; margin:16px 0; }
.swatches i { width:20%; height:15px; }
/* Ảnh nền 2048x1058: chiều cao theo đúng tỉ lệ ảnh trên máy tính để không bị cắt (khách 30/9). */
.contact-hero { min-height:max(490px,calc(100vw * 1058 / 2048)); padding:80px 15px; display:grid; align-items:center; background-size:cover; background-position:center; }
/* Ô form trong suốt 50% (khách 25/9) để thấy ảnh nền phía sau; chữ đậm hơn cho đủ tương phản. */
.contact-form { width:min(790px,100%); margin:auto; padding:52px 115px 62px; display:grid; grid-template-columns:1fr 1fr; gap:20px 30px; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.55); border-radius:14px; color:#1f1f1f; }
.contact-form input,.contact-form textarea { padding:8px 0; border:0; border-bottom:1px solid rgba(0,0,0,.35); outline:0; font:inherit; color:#111; background:transparent; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#333; opacity:1; }
.contact-form input:focus,.contact-form textarea:focus { border-bottom-color:#111; }
.contact-form .outline-button { color:#111; border-color:#111; }
.contact-form .outline-button:hover { background:#111; color:#fff; }
.contact-form .wide { grid-column:1/-1; }
.contact-form button { grid-column:1/-1; justify-self:center; }
.contact-form-msg { grid-column:1/-1; display:block; min-height:18px; font-size:14px; text-align:center; }
.contact-form-msg.ok { color:#15803d; }
.contact-form-msg.err { color:#b91c1c; }
.contact-form-msg.is-sending { color:#777; }
.branches { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding-top:70px; text-align:center; }
.branches h2 { font-size:21px; text-transform:uppercase; }
.branches p { color:#ccc; }
.branch-map { position:relative; display:block; height:220px; margin-bottom:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#111; transition:border-color .3s ease,transform .3s ease; }
.branch-map:hover { border-color:var(--gold); transform:translateY(-3px); }
.branch-map iframe { width:100%; height:100%; border:0; display:block; pointer-events:none; }
.branch-map-cta { position:absolute; right:10px; bottom:10px; padding:6px 12px; border-radius:999px; background:rgba(5,7,15,.82); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.branch-map:hover .branch-map-cta { background:var(--gold); color:var(--black); }
.branches p a:hover { color:var(--gold); }
.contact-lines { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.contact-line { display:flex; flex-direction:column; gap:6px; align-items:center; padding:22px 16px; border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:12px; background:#0a0a0a; text-align:center; }
.contact-line-label { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.contact-line-value { color:var(--white); font-size:17px; font-weight:700; word-break:break-word; }
a.contact-line-value:hover { color:var(--gold); }
.immersive { position:relative; }
.immersive img { width:100%; height:560px; object-fit:cover; opacity:.75; }
.immersive div { position:absolute; left:8%; bottom:15%; max-width:450px; padding:30px; background:rgba(0,0,0,.8); }

/* ===== Rabit SEO: bộ màu chủ đề ===== */
/* Color (mix màu): chữ thương hiệu & tiêu đề chuyển gradient nhiều màu */
.tcolor-mix .brand-script,.tcolor-mix .brand-color,.tcolor-mix .section-title,.tcolor-mix .entry-title { background:linear-gradient(90deg,#ff5ea8,#f5a900,#7b5cff,#22c1c3); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* Trắng (light): đảo nền/chữ cho các vùng dùng màu cố định */
.tcolor-light .brand-script { color:#1b1b1b; }
.tcolor-light .icon-button { color:#1b1b1b; }
.tcolor-light .hamburger,.tcolor-light .hamburger::before,.tcolor-light .hamburger::after { background:#1b1b1b; }
.tcolor-light .cinema-frame { background:#e9e9e9; }
.tcolor-light .post-card { background:#fafafa; }
.tcolor-light .post-card p { color:#555; }
.tcolor-light .entry-content { color:#333; }
.tcolor-light .entry-content h1,.tcolor-light .entry-content h2,.tcolor-light .entry-content h3,.tcolor-light .entry-content h4,.tcolor-light .entry-content h5,.tcolor-light .entry-content h6,.tcolor-light .entry-content strong,.tcolor-light .entry-content b { color:#111; }
.tcolor-light .entry-content th { background:#f0f0f0; color:#111; }
.tcolor-light .site-footer { background:#f0f0f0; }
.tcolor-light .contact-copy { color:#444; }
.tcolor-light .newsletter button { color:#fff; }
/* Mùa thu: lá vẽ SVG rơi + lật xoay 3D (tự dựng, kiểu Google) */
.fuji-leaves { position:fixed; inset:0; z-index:9998; pointer-events:none; overflow:hidden; }
.fuji-leaves .leaf { position:absolute; top:0; will-change:transform; }
.fuji-leaves .leaf-fall { display:block; opacity:0; perspective:600px; will-change:transform; animation:fuji-leaf-fall var(--dur,11s) linear var(--delay,0s) infinite; }
.fuji-leaves .leaf img { display:block; height:auto; transform-origin:center; animation:fuji-leaf-spin var(--spin,4s) ease-in-out var(--delay,0s) infinite; }
@keyframes fuji-leaf-fall {
	0% { transform:translate3d(0,-12vh,0); opacity:0; }
	6% { opacity:1; }
	50% { transform:translate3d(var(--drift,40px),55vh,0); }
	94% { opacity:1; }
	100% { transform:translate3d(calc(var(--drift,40px) * -1),116vh,0); opacity:0; }
}
@keyframes fuji-leaf-spin {
	0% { transform:rotate3d(1,1,.25,0deg); }
	100% { transform:rotate3d(1,1,.25,360deg); }
}
@media (prefers-reduced-motion:reduce) { .fuji-leaves { display:none; } }

/* Ngày tết: ảnh lễ hội làm nền toàn trang + menu đỏ (qua --panel) */
body.tcolor-do { background:linear-gradient(rgba(45,0,0,.32),rgba(35,0,0,.46)),url(assets/tet.png) center top/cover no-repeat fixed; text-shadow:0 1px 3px rgba(0,0,0,.5); }
body.tcolor-do .cinema-frame,
body.tcolor-do .site-footer { background:transparent; }
body.tcolor-do .post-card { background:rgba(40,8,8,.5); }
/* Star night: bầu trời đêm — sao + nhấp nháy + sao băng */
body.tcolor-starnight { background:radial-gradient(130% 100% at 50% -10%, #122046 0%, #070d22 45%, #04050d 100%); }
body.tcolor-starnight .cinema-frame,
body.tcolor-starnight .site-footer { background:transparent; }
body.tcolor-starnight .post-card { background:rgba(10,16,36,.55); }
.fuji-sky { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.fuji-stars i { position:absolute; border-radius:50%; background:#fff; box-shadow:0 0 4px rgba(255,255,255,.55); }
.fuji-stars i.tw { animation:fuji-twinkle var(--dur,3s) ease-in-out var(--delay,0s) infinite; }
@keyframes fuji-twinkle { 0%,100% { opacity:var(--op,.4); transform:scale(1); } 50% { opacity:1; transform:scale(1.7); } }
.fuji-shoot { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.85); opacity:0; animation:fuji-shoot var(--dur,9s) cubic-bezier(.25,.6,.4,1) var(--delay,0s) infinite; }
.fuji-shoot::before { content:""; position:absolute; top:50%; right:2px; width:140px; height:1.6px; transform:translateY(-50%); border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(180,205,255,.35), transparent); }
@keyframes fuji-shoot {
	0% { opacity:0; transform:rotate(var(--rot,33deg)) translateX(0); }
	2% { opacity:1; }
	14% { opacity:1; }
	20% { opacity:0; transform:rotate(var(--rot,33deg)) translateX(560px); }
	100% { opacity:0; transform:rotate(var(--rot,33deg)) translateX(560px); }
}
@media (prefers-reduced-motion:reduce) { .fuji-stars i.tw { animation:none; } .fuji-shoot { display:none; } }
/* Đổ sơn: video làm nền toàn trang thay cho màu nền đặc */
.fuji-bg-video { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.fuji-bg-video video { width:100%; height:100%; object-fit:cover; filter:blur(5px); transform:scale(1.08); }
.fuji-bg-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)),linear-gradient(rgba(255,255,255,.70),rgba(255,255,255,.70)); }
body.tcolor-doson { background:transparent; text-shadow:0 1px 4px rgba(0,0,0,.6); }
body.tcolor-doson .header-search-form input,
body.tcolor-doson .search-panel { text-shadow:none; }
body.tcolor-doson .cinema-frame,
body.tcolor-doson .site-footer,
body.tcolor-doson .post-card { background:transparent; }
body.tcolor-doson .post-card { backdrop-filter:blur(2px); background:rgba(8,8,8,.45); }

@media (max-width:760px) {
	.brand { font-size:28px; }
	.brand-script { font-size:35px; }
	.brand-logo { height:42px; }
	.icon-button { width:34px; height:34px; }
	.cinema { padding-bottom:40px; }
	.contact-copy { max-width:360px; margin-inline:auto; line-height:1.35; }
	.footer-bar { min-height:0; padding:30px 0 10px; flex-direction:column; justify-content:center; }
	.post-grid { grid-template-columns:1fr; }
	.feature-grid,.branches { grid-template-columns:1fr; }
	.feature-card img { aspect-ratio:16/10; }
	/* Mobile: ảnh công trình lên trên, chữ ở dưới; tab xuống dòng, căn giữa. */
	.showcase-pane.is-active { grid-template-columns:1fr; gap:22px; }
	.showcase-media { order:-1; aspect-ratio:4/3; border-radius:14px; }
	.product-panel { max-width:none; }
	.showcase-title { font-size:clamp(30px,9vw,38px); }
	.product-tabs { justify-content:center; gap:8px; margin-bottom:18px; }
	.product-tab { padding:8px 14px; font-size:12px; }
	.product-intro video.is-portrait { height:min(70vh,560px); }
	.product-intro video.is-portrait[style*="aspect-ratio"] { height:auto; width:100%; }
	.system-grid { grid-template-columns:1fr; }
	.video-grid,.cat-grid { grid-template-columns:1fr; }
	.intro-lines { grid-template-columns:1fr; }
	.swatch-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
	.swatch-modal-grid { grid-template-columns:1fr; }
	.swatch-modal-inner { padding:20px; }
	.cert-section { margin-top:48px; }
	.cert-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
	.cert-media { padding:10px; }
	.cert-cap { padding:11px 12px 14px; font-size:12.5px; }
	.cert-group-title { font-size:15px; gap:12px; letter-spacing:.05em; }
	.cert-group+.cert-group { margin-top:36px; }
	.cert-lightbox .swatch-modal-code { font-size:17px; }
	.cert-lightbox .swatch-modal-grid img { max-height:64vh; }
	.contact-lines { grid-template-columns:1fr; }
	.stats-row { grid-template-columns:repeat(2,1fr); }
	.catalog-list { grid-template-columns:1fr; }
	.project-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
	.dealer-grid { grid-template-columns:1fr; }
	.dealer-office { grid-template-columns:1fr; }
	.dealer-map { height:520px; }
	.contact-hero { padding:40px 15px; background-position:28% center; }
	.project-cap { padding:8px 10px 10px; }
	.project-cap strong { font-size:13px; }
	.project-section { scroll-margin-top:80px; }
	.product-about { grid-template-columns:1fr; gap:28px; margin-top:44px; }
	.product-system,.product-videos { margin-top:48px; }
	.color-row { grid-template-columns:1fr; gap:20px; margin-bottom:55px; }
	.color-row:nth-child(even) img { order:0; }
	.contact-form { padding:35px 25px; grid-template-columns:1fr; }
	.contact-form .wide { grid-column:auto; }
	.immersive img { height:420px; }
}
@media (max-width:390px) {
	.brand { font-size:25px; }
	.brand-script { font-size:32px; }
	.brand-logo { height:36px; }
}
@media (prefers-reduced-motion:reduce) {
	*,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* ============================================================
   TRANG CHỦ — dựng theo docs/design-spec-mykolor.md §5, §6.1–6.10
   ============================================================ */
:root {
	--glow: rgba(157,180,255,.35);
	--glow: color-mix(in srgb, var(--gold) 34%, transparent);
	--glow-soft: rgba(157,180,255,.12);
	--glow-soft: color-mix(in srgb, var(--gold) 12%, transparent);
	--sec-sink: rgba(10,16,36,.55);
	--sec-sink: color-mix(in srgb, var(--panel) 55%, transparent);
	--sec-solid: #04060d;
	--sec-solid: color-mix(in srgb, var(--black) 88%, #000 12%);
	--sh-lift: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px var(--glow-soft);
}

/* --- Nút dùng chung --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 30px; border-radius:999px; border:1px solid transparent; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease; }
.btn-primary { background:var(--gold); border-color:var(--gold); color:var(--black); }
.btn-primary:hover { background:var(--orange); border-color:var(--orange); color:var(--black); transform:translateY(-2px); box-shadow:0 10px 26px var(--glow); }
.btn-ghost { background:transparent; border-color:var(--gold); color:var(--gold); }
.btn-ghost:hover { background:var(--gold); border-color:var(--gold); color:var(--black); transform:translateY(-2px); }
.btn:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

/* --- 01 · Hero cinema --- */
.hero-cinema { position:relative; margin-top:-150px; padding-top:150px; min-height:clamp(560px,88vh,840px); display:grid; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media video { width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease-in-out; }
.is-ready .hero-media video { opacity:1; }
.is-animating .hero-media video { opacity:0; }
.hero-veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,7,15,.66) 0%,rgba(5,7,15,.34) 30%,rgba(5,7,15,.72) 68%,rgba(5,7,15,.96) 100%); }
.hero-body { position:relative; z-index:2; align-self:end; padding-bottom:96px; text-align:center; }
.hero-eyebrow { margin:0 0 12px; color:var(--orange); text-shadow:0 1px 10px rgba(5,7,15,.9); }
.hero-title { margin:0 0 16px; color:var(--white); font-size:clamp(34px,6vw,64px); font-weight:800; line-height:1.05; letter-spacing:-.02em; text-transform:uppercase; text-shadow:0 2px 24px rgba(5,7,15,.85); }
.hero-sub { max-width:60ch; margin:0 auto 32px; color:#dfe4f5; font-size:clamp(15px,1.6vw,18px); line-height:1.7; text-shadow:0 1px 12px rgba(5,7,15,.75); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-scroll { position:absolute; left:50%; bottom:24px; z-index:3; transform:translateX(-50%); width:30px; height:48px; border:1px solid var(--line); border-radius:999px; background:rgba(5,7,15,.35); }
.hero-scroll:hover { border-color:var(--gold); }
.hero-scroll span { display:block; width:4px; height:8px; margin:10px auto 0; border-radius:2px; background:var(--gold); animation:fuji-scrollcue 1.8s cubic-bezier(.25,.8,.25,1) infinite; }
@keyframes fuji-scrollcue { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(16px); opacity:0; } 100% { opacity:0; } }

/* --- Khung section trang chủ --- */
.home-sec { padding:56px 0; }
.home-sec--sink { background:linear-gradient(180deg,var(--sec-sink),transparent); }
.home-sec--solid { background:var(--sec-solid); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-head { max-width:760px; margin:0 auto 40px; text-align:center; }
.home-head .eyebrow { display:block; margin:0; }
.home-head .section-title-sm { margin:8px 0 0; }
.home-lead { margin:14px 0 0; color:#cfd6ee; font-size:16px; line-height:1.7; }
.home-foot { margin-top:36px; text-align:center; }

/* --- 02 · Trust bar --- */
.trustbar { padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--sec-sink),transparent); }
.trustbar .stat { border:0; border-top:0; border-radius:0; padding:8px 6px; background:transparent; }
.trustbar .stat+.stat { border-left:1px solid var(--line); }
.trustbar .stat-num { text-shadow:0 0 30px var(--glow); }

/* --- 03 · Dòng sản phẩm --- */
.line-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.line-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.line-card::before { content:""; display:block; height:2px; background:linear-gradient(90deg,var(--gold),var(--orange)); opacity:.55; transition:opacity .3s ease; }
.line-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--sh-lift); }
.line-card:hover::before { opacity:1; }
.line-card:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.line-media { margin:0; aspect-ratio:1/1; overflow:hidden; background:#0d0d0d; }
.line-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.line-card:hover .line-media img { transform:scale(1.06); }
.line-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:20px; }
.line-title { margin:0; color:var(--white); font-size:17px; font-weight:700; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; }
.line-card:hover .line-title { color:var(--gold); }
.line-desc { flex:1; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.line-more { margin-top:8px; color:var(--gold); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.line-card:hover .line-more { color:var(--orange); }

/* --- 04 · Bảng màu nổi bật (dùng lại .swatch-card của trang Bảng màu) --- */
.home-swatches { grid-template-columns:repeat(2,1fr); gap:12px; }

/* --- 05 · Chứng nhận rút gọn: dùng lại .cert-card --- */
.home-sec--solid .cert-grid { grid-template-columns:repeat(2,1fr); gap:14px; }

/* --- 07 · CTA cuối --- */
.cta-band { padding:64px 0; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:radial-gradient(70% 120% at 50% 50%,var(--glow-soft),transparent 70%),var(--sec-solid); }
.cta-band .eyebrow { display:block; margin:0 0 10px; }
.cta-title { margin:0 0 14px; color:var(--white); font-size:clamp(22px,3vw,32px); font-weight:700; line-height:1.25; text-transform:uppercase; letter-spacing:.02em; }
.cta-text { max-width:60ch; margin:0 auto 30px; color:#cfd6ee; font-size:16px; line-height:1.7; }
.cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

@media (min-width:480px) {
	.line-grid { grid-template-columns:repeat(2,1fr); gap:22px; }
	.home-swatches { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:768px) {
	.home-sec { padding:72px 0; }
	.home-swatches { grid-template-columns:repeat(4,1fr); gap:16px; }
	.home-sec--solid .cert-grid { grid-template-columns:repeat(4,1fr); gap:20px; }
}
@media (min-width:1024px) {
	.home-sec { padding:96px 0; }
	.line-grid { grid-template-columns:repeat(3,1fr); gap:28px; }
	.home-swatches { grid-template-columns:repeat(4,1fr); }
	.home-head { margin-bottom:48px; }
	.line-body { padding:24px; }
}
@media (max-width:760px) {
	.hero-body { padding-bottom:74px; }
	.trustbar .stat+.stat { border-left:0; }
	.trustbar .stat:nth-child(n+3) { border-top:1px solid var(--line); padding-top:20px; }
	.home-sec--solid .cert-grid { gap:12px; }
}

/* --- QA v2.8.5: phân trang chạm được trên mobile (trước đây là chữ trần 8×17px) --- */
.pagination { margin:36px 0 8px; }
.pagination .nav-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; letter-spacing:.06em; transition:border-color .3s ease,color .3s ease; }
.pagination a.page-numbers:hover { border-color:var(--gold); color:var(--gold); }
.pagination .page-numbers.current { border-color:var(--gold); color:var(--gold); }
.pagination .page-numbers.dots { border:0; min-width:24px; padding:0; }

/* --- QA v2.8.5: dọn khoảng trắng thẻ công trình (p rỗng + margin lớn) trên mobile --- */
.ux-imgbox-text p:empty { display:none; }
@media (max-width:767px) {
	.ux-imgbox-figure { margin:14px 0 4px; }
	.ux-imgbox-text h4 { margin-top:10px; margin-bottom:8px; }
	.ux-imgbox-text > p { margin-bottom:12px; }
}