/* ============================================================
aoc-wow.css — GIAO DIỆN SẠCH, CHUYÊN NGHIỆP (tham chiếu sonxit.vn):
nền trắng · xanh lá thương hiệu làm màu nhấn · Montserrat cỡ vừa,
không siết ký tự · thẻ bo góc mềm + đổ bóng nhẹ · nút bo tròn màu
đặc · khoảng cách thoáng, đều · chuyển động tối giản.
Nạp SAU bootstrap-theme.css. Lớp phủ ADDITIVE — bỏ 1 dòng
trong index.html là quay lại bản gốc. KHÔNG đổi DOM / luồng / JS.
Bỏ hẳn các thử nghiệm "studio": chữ khổng lồ, số 01–05, cạnh sắc,
gạch chân chạy — thay bằng phong cách trang bán hàng gọn gàng,
đáng tin, dễ nhìn.
============================================================ */
/* ═══ 1 · TOKEN — chuyển hẳn về css/tokens.css (Phase 4j). ═══ */
/* ═══ 2 · BASE ══════════════════════════════════════════════ */
body {
background: var(--bg) !important;
background-image: none !important;
font-family: var(--bs-body-font-family) !important;
font-size: .94rem;
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--green-soft); color: var(--green-ink); }
:focus-visible { outline: 2px solid var(--green) !important; outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
.cmp-zoom-pct, .cmp-ratio, .km-cell-code,
.step3-combo-labels span, #peTotal, .pe-result b {
font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* ═══ 3 · TYPOGRAPHY — Montserrat, cỡ VỪA, không siết ═══════ */
.step3-flow-card-title,
.modal-title,
.zone-modal-title {
font-family: 'Montserrat', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -.005em !important;
color: var(--ink) !important;
background: none !important;
-webkit-text-fill-color: currentColor;
text-transform: none;
}
/* .wz-panel-title → css/components.css (Phase 4h) */
.hero-sub { color: var(--ink-muted) !important; line-height: 1.6 !important; }
.hero-sub { font-size: clamp(.98rem, 1.2vw, 1.08rem) !important; max-width: 46ch; margin: 0 auto var(--s5) !important; font-weight: 400; }
/* nhãn mục nhỏ — hoa, giãn ký tự vừa phải */
.step3-ref-steps,
.step3a-group-title,
.pref-mini-label {
font-family: 'Montserrat', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .09em !important;
font-size: .68rem !important;
font-weight: 700 !important;
color: var(--ink-2) !important;
background: none !important;
-webkit-text-fill-color: currentColor;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); text-decoration: underline; text-underline-offset: .18em; }
/* ═══ 4 · STEPPER ═════════════════════════════════════════════
Đã migrate sang css/components.css (Phase 4) — token, không !important. */
/* ═══ 5 · PANEL — vào bước lướt nhẹ ════════════════════════ */
/* ═══ 6–7 · NÚT + FORM — migrate sang css/components.css (Phase 4g). ═══ */
/* ═══ 8 · VÙNG TẢI ẢNH — migrate sang css/components.css (Phase 4i). ═══ */
/* ═══ 9–10 · THẺ + CHIP MÀU — migrate sang css/components.css (Phase 4d). ═══ */
/* ═══ 11 · BƯỚC 3 — giữ sửa LUỒNG (đã d-none trong HTML) ══ */
#step3Picker { display: none !important; }
#btnPrefApply { display: none !important; }
#step3aBackBtn, .step3a-result-top, .step3a-phase-badge { display: none !important; }
#step3aPhaseResult { margin-top: var(--s3); }
/* ── CÔNG TẮC NGUỒN MÀU (2 chế độ) — segmented switch, chế độ đang dùng
được tô xanh; kèm 1 dòng mô tả để khách hiểu ngay. ── */
.step3-flow-switch {
margin-bottom: var(--s4);
}
.step3-flow-switch-seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 999px;
}
.step3-flow-opt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: .5rem .7rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-2);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: .74rem;
line-height: 1.15;
text-align: center;
cursor: pointer;
transition: background .16s var(--aoc-ease, ease), color .16s var(--aoc-ease, ease), box-shadow .16s var(--aoc-ease, ease);
}
.step3-flow-opt svg { flex-shrink: 0; }
.step3-flow-opt:hover:not(.is-active) { background: var(--green-soft); color: var(--green-deep); }
.step3-flow-opt.is-active {
background: var(--green);
color: #fff;
box-shadow: 0 2px 8px -2px var(--green-ring, rgba(47,125,87,.4));
}
.step3-flow-switch-desc {
margin: .55rem .25rem 0;
font-size: .74rem;
line-height: 1.5;
color: var(--ink-muted);
}
.step3-flow-switch-desc:empty { display: none; }
@media (max-width: 460px) {
.step3-flow-opt { flex-direction: column; gap: .25rem; font-size: .7rem; }
}
.step3a-group { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); background: var(--surface); box-shadow: var(--shadow-card); }
.step3a-group + .step3a-group { margin-top: var(--s3); }
/* Dark: viền --line (#2c2e26) trên nền card --surface (#1b1c16) gần như vô
hình + box-shadow tối trên nền tối cũng mất → 2 khối trông "chìm", khách
không nhận ra bấm/chạm được. Nhích nền card sáng hơn nền trang + viền
--line-2 rõ hơn; hover/mở thì viền xanh. */
[data-bs-theme="dark"] .step3a-group { background: var(--surface-3); border-color: var(--line-2); box-shadow: none; }
[data-bs-theme="dark"] .step3a-group:hover,
[data-bs-theme="dark"] .step3a-group:focus-within,
[data-bs-theme="dark"] .step3a-group.is-open { border-color: var(--green); }
[data-bs-theme="dark"] .step3a-group-title { color: var(--ink) !important; }
.step3a-group-title { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.step3a-group-num { background: var(--green) !important; color: #fff !important; box-shadow: none !important; font-weight: 700; border-radius: 999px !important; }
.cp-tone-btn.active { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.pref-box { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface-2) !important; }
.pref-box-love { box-shadow: inset 3px 0 0 #c15b74 !important; }
.pref-box-hate { box-shadow: inset 3px 0 0 var(--ink-3) !important; }
.cp-family.selected-love, .cp-family.selected-hate { border-color: var(--green) !important; box-shadow: 0 0 0 1px var(--green) !important; }
.step3-assignment { border: 1px solid var(--line) !important; border-radius: var(--radius-lg); background: var(--surface); padding: var(--s4); box-shadow: var(--shadow-card); margin-top: var(--s4); }
.scheme-cell { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface-2) !important; }
.scheme-cell:hover { border-color: var(--green) !important; }
/* ═══ 12 · POPUP TIẾN TRÌNH ══════════════════════════════ */
.ai-pop { border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; background: var(--surface) !important; box-shadow: var(--shadow-pop) !important; }
.ai-pop-backdrop { background: rgba(20, 22, 18, .3) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ai-pop-ring-fill { stroke: var(--green) !important; filter: none !important; }
.ai-pop-ring-track { stroke: var(--line-2) !important; }
.ai-pop-msg { font-weight: 600; color: var(--ink); }
.ai-pop-elapsed { display: block; margin-top: var(--s2); font-size: .72rem; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Lối thoát cho khách không muốn ngồi nhìn: thu nhỏ rồi đi xem chỗ khác, việc vẫn chạy ở máy chủ. */
.ai-pop-minimize { display: block; margin: var(--s3) auto 0; border: 1px solid var(--line); background: transparent;
color: var(--ink-muted); font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: .18s; }
.ai-pop-minimize:hover { color: var(--ink); border-color: var(--ink-muted); }
/* Ba khâu thật máy chủ báo về — chỉ hiện khi có dữ liệu (luồng hàng đợi), không bịa tiến độ. */
.ai-pop-stages { list-style: none; margin: var(--s3) 0 0; padding: 0; text-align: left; font-size: .78rem; line-height: 1.5; }
.ai-pop-stages li { display: flex; align-items: baseline; gap: 8px; color: var(--ink-muted); }
.ai-pop-stage-ico { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; top: 2px; }
.ai-pop-stages .st-done .ai-pop-stage-ico { background: #315d40; border-color: #315d40; }
.ai-pop-stages .st-done .ai-pop-stage-ico::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ai-pop-stages .st-done { color: var(--ink); }
.ai-pop-stages .st-now { color: var(--ink); font-weight: 600; }
.ai-pop-stages .st-now .ai-pop-stage-ico { border-color: #315d40; border-top-color: transparent; animation: aiPopSpin .9s linear infinite; }
.ai-pop-stages .st-skip { color: var(--ink-muted); }
.ai-pop-stages .st-skip .ai-pop-stage-ico { border-style: dashed; }
.ai-pop-stage-note { font-weight: 400; color: var(--ink-muted); }
@keyframes aiPopSpin { to { transform: rotate(360deg); } }
/* ═══ 13 · BƯỚC 5 — thanh so sánh: vạch mảnh mờ 2 đầu + nút kính mờ,
grip canh giữa bằng flex (KHÔNG translate) nên hover không nhảy lệch. ═══ */
.viewer-floatbar {
background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid var(--line) !important; box-shadow: var(--shadow-pop) !important; border-radius: var(--radius-lg) !important;
}
.result-toolbar { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
.vfb-btn { color: var(--ink-2); }
.vfb-btn:hover { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.vfb-primary { background: var(--green) !important; color: #fff !important; box-shadow: none !important; }
.dn-btn.active, .mood-season-btn.active { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
/* ═══ 15 · HERO ═════════════════════════════════════════ */
#heroView { background: var(--bg) !important; background-image: none !important; }
.hero-header { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--line) !important; }
/* HERO cinematic panel — 1 khung ảnh lớn, cross-fade, thanh tab tên bên dưới. */
.hero-floating-bar { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-pop) !important; border-radius: 999px !important; }
.hero-footer { border-top: 1px solid var(--line) !important; }
.hero-footer-brand { font-weight: 700; }
.hero-footer-links a:hover { color: var(--green) !important; }
/* ═══ 16 · HEADER app — migrate sang css/components.css (Phase 4b). ═══ */
/* ═══ 17 · MODAL ════════════════════════════════════════ */
.modal-content { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-pop) !important; }
.modal-header, .zone-modal-head, .pe-dialog-head { border-bottom: 1px solid var(--line) !important; padding: var(--s4) var(--s5) !important; }
.modal-footer { border-top: 1px solid var(--line) !important; padding: var(--s4) var(--s5) !important; }
.modal-body { padding: var(--s5) !important; }
.modal-title { font-size: 1.15rem !important; }
#zoneModalTabs .nav-link { color: var(--ink-2); border-radius: var(--radius); font-weight: 600; font-size: .76rem; }
#zoneModalTabs .nav-link.active { background: var(--green) !important; color: #fff !important; }
.pe-tag, .badge.text-bg-secondary { background: var(--ink-2) !important; color: #fff !important; font-weight: 600; border-radius: var(--radius-sm); }
.pe-result b { font-weight: 700; font-size: 1.1rem; }
/* ═══ 18 · TOAST / NOTIF ════════════════════════════════ */
.toast { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-pop) !important; border: 1px solid var(--line) !important; background: var(--surface) !important; }
/* ═══ 19 · ALERT ═══════════════════════════════════════ */
.alert { border-radius: var(--radius) !important; border: 1px solid var(--line-2) !important; }
.alert-warning { background: var(--green-tint) !important; color: var(--green-ink) !important; border-color: var(--green-bright) !important; }
[data-bs-theme="dark"] .alert-warning { color: var(--green-ink) !important; }
/* ═══ 20 · SKELETON ════════════════════════════════════ */
.skeleton { background: var(--surface-3) !important; border-radius: var(--radius) !important; }
/* ═══ 21 · GIẢM CHUYỂN ĐỘNG ════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.style-card:hover .style-thumb img { transform: none !important; }
* { scroll-behavior: auto !important; }
}
/* ═══ 22 · TƯƠNG THÍCH MÀN HÌNH — điện thoại · tablet · laptop ═══
Chỉ CO LẠI padding/cỡ chữ lớp này tự nới; layout responsive gốc
(panel xếp dọc, chiều cao viewer, 1-màn-hình) do bootstrap-theme.css
lo. Mốc Bootstrap: 576 · 768 · 992 · 1200. */
@media (max-width: 991.98px) {
.step3a-group, .step3-assignment { padding: var(--s3); }
.modal-body { padding: var(--s4) !important; }
.modal-header, .zone-modal-head, .pe-dialog-head, .modal-footer { padding: var(--s3) var(--s4) !important; }
}
@media (max-width: 575.98px) {
body { font-size: .92rem; }
.hero-enter-btn { padding: .4rem .8rem !important; font-size: .8rem; }
.hero-sub { font-size: .95rem !important; max-width: 100%; }
.modal-body { padding: var(--s3) !important; }
}
/* == 18 - CHI TIET MAU (color-detail.js - port bang-mau-toi-thuong) ==
Giu layout goc, doi tong sang he AOC: nen trang, xanh #2f7d57, bo tron,
Montserrat. Modal fixed full-viewport. */
.color-detail {
position: fixed; inset: 0; z-index: 3000;
display: grid; place-items: center;
opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.color-detail.is-open { opacity: 1; pointer-events: auto; }
body.cd-open { overflow: hidden; }
.color-detail__backdrop {
position: absolute; inset: 0;
background: rgba(16, 22, 29, .55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.color-detail__panel {
position: relative;
width: min(1320px, calc(100vw - 24px));
max-height: min(92vh, 840px);
background: var(--surface); color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius-lg, 20px);
box-shadow: var(--shadow-pop, 0 24px 60px -22px rgba(16,22,29,.35));
overflow: hidden;
}
.color-detail__close {
position: absolute; top: 12px; right: 12px; z-index: 5;
border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.18); color: #fff;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
font-size: 18px; line-height: 1; display: grid; place-items: center;
transition: background .15s ease, border-color .15s ease;
}
.color-detail__close:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.6); }
.color-detail__body {
display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; align-items: stretch;
max-height: min(92vh, 840px);
}
/* ── CỘT TRÁI — thẻ màu kiểu Sherwin-Williams ── */
.color-detail__left {
display: flex; flex-direction: column; min-height: 0;
border-right: 1px solid var(--line);
}
.color-detail__hero {
position: relative;
padding: 22px 20px 18px;
background: var(--green); color: #fff;
}
.color-detail__hero.is-dark-ink { color: #17201b; }
.cd-hero-code {
font-family: "Montserrat", sans-serif; font-weight: 700;
font-size: 12px; letter-spacing: .18em; opacity: .85;
}
.cd-hero-name {
font-family: "Montserrat", sans-serif; font-weight: 800;
font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; margin: 3px 0 6px;
}
.cd-hero-sub { font-size: 12px; line-height: 1.5; opacity: .9; }
.color-detail__left .color-detail__tone {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
flex: 0 0 auto;
}
.color-detail__tone-swatch {
width: 100%; height: 26px; border: 0; cursor: pointer;
transition: filter .12s ease;
}
.color-detail__tone-swatch:hover { filter: brightness(1.06); }
.color-detail__tone-swatch.is-active { box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 5px var(--green); }
.cd-tabs {
display: flex; flex: 0 0 auto;
border-bottom: 1px solid var(--line); background: var(--surface);
}
.cd-tab {
flex: 1; padding: 12px 6px; border: 0; background: transparent;
font-family: "Montserrat", sans-serif; font-weight: 700;
font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
color: var(--ink-3); cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.cd-tab:hover { color: var(--ink-2); }
.cd-tab.is-active { color: var(--green-deep); border-bottom-color: var(--green); }
.cd-tabpanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Danh sách màu dạng HÀNG (Coordinating / Similar) */
.cd-list { display: block; }
.cd-row {
display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 12px;
padding: 10px 14px 10px 0;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background .12s ease;
}
.cd-row:hover { background: var(--surface-2); }
.cd-row:hover .cd-row-chev { color: var(--green); transform: translateX(2px); }
.cd-row-sw { width: 44px; height: 46px; border-radius: 0; }
.cd-row-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cd-row-code { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.cd-row-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-row-chev { color: var(--ink-3); margin-right: 8px; transition: color .12s ease, transform .12s ease; }
/* Đáy cột trái — nút hành động chính "Dùng màu này" */
.cd-foot {
flex: 0 0 auto;
padding: 12px 14px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.cd-foot-use {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--green); color: #fff;
border: 1px solid var(--green); border-radius: 999px;
padding: 11px 18px; font-family: "Montserrat", sans-serif;
font-weight: 700; font-size: 13px; cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.cd-foot-use:hover { background: var(--green-hover); border-color: var(--green-hover); }
.cd-list-empty { padding: 20px 14px; font-size: 13px; color: var(--ink-3); }
/* Tab CHI TIẾT */
.cd-details { padding: 6px 0; }
.cd-details-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.cd-details-k { font-size: 12px; color: var(--ink-2); }
.cd-details-v { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); text-align: right; }
.cd-details-note { margin: 12px 16px 16px; font-size: 11.5px; line-height: 1.6; color: var(--ink-muted); }
.color-detail__right { display: grid; gap: 10px; min-height: 0; align-content: start; overflow-y: auto; }
.color-detail__preview {
background: var(--surface); padding: clamp(14px, 2vw, 22px);
display: grid; gap: 12px; align-content: start; min-height: 0;
}
.color-detail__preview canvas {
width: 100%; max-height: 62vh; height: auto; display: block;
border-radius: var(--radius-md, 14px);
border: 1px solid var(--line); background: #fff; object-fit: contain;
}
.color-detail__preview-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.color-detail__preview-label {
font-family: "Montserrat", sans-serif;
font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.color-detail__daynight {
display: inline-flex; align-items: center; gap: 7px;
border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
border-radius: var(--radius-pill, 999px); padding: 7px 14px; font-size: 12.5px;
font-weight: 600; cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.color-detail__daynight:hover { border-color: var(--green); color: var(--green-deep); }
.color-detail__daynight[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.color-detail__daynight .cd-dn-ico { display: inline-flex; }
.color-detail__thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 không gian LUÔN 1 hàng */
gap: 8px;
}
.color-detail__room {
display: flex; flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius-md, 14px); padding: 0; background: var(--surface);
cursor: pointer; overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease;
}
.color-detail__room:hover { border-color: var(--green); }
.color-detail__room.is-active { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-ring, rgba(47,125,87,.28)); }
.color-detail__room canvas {
width: 100%; aspect-ratio: 3 / 2; height: auto; display: block; object-fit: cover;
background-size: cover; background-position: center; flex: 0 0 auto;
}
.color-detail__room-name {
flex: 0 0 auto;
font-size: 11px; color: var(--ink); font-weight: 600;
line-height: 1.35; min-height: 2.4em;
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 6px 6px 7px; border-top: 1px solid var(--line);
white-space: nowrap;
}
@media (max-width: 1100px) {
.color-detail__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.color-detail__body { grid-template-columns: 1fr; overflow-y: auto; max-height: 92vh; }
.color-detail__left { border-right: 0; border-bottom: 1px solid var(--line); }
.cd-tabpanel { max-height: 320px; }
}
@media (max-width: 560px) {
.color-detail__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* == 19 - NHAN MAU KM: luoi O VUONG kieu bang-mau-toi-thuong == */
/* Container: bo layout row/col cua Bootstrap -> CSS Grid o vuong, CO DINH
5 cot/hang (khong con auto-fill co gian) + phan trang thay vi cuon vo han. */
.km-picker .km-controls {
flex-wrap: nowrap;
}
.km-picker .km-search { flex: 1 1 auto; min-width: 0; }
/* Ẩn tạm hàng chọn HEX trực tiếp (bảng màu trực tiếp/nhập mã/nút Dùng
HEX) — CSS !important phòng khi cache trình duyệt còn giữ bản JS cũ
(thuộc tính "hidden" trong markup lẽ ra đã đủ). */
.km-picker .km-direct { display: none !important; }
.km-picker .km-hex { width: 110px; flex: 0 0 auto; }
@media (max-width: 575.98px) {
.km-picker .km-controls { flex-wrap: wrap; }
.km-picker .km-search { flex: 1 1 100%; }
}
/* Khối lọc (mode tabs + chip nhóm màu/mệnh/tuổi + độ sáng) gộp chung 1
panel nền xám nhạt — tách rõ khỏi thanh tìm kiếm phía trên và lưới kết
quả phía dưới, thay vì các hàng rời rạc dính sát nhau như bản cũ. */
.km-picker .km-filter-block {
background: #f8f9fa;
border: 1px solid #ececec;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 12px;
}
/* Tab chọn phân loại màu (Nhóm màu/Phong thuỷ/Màu cho bé) — segmented
control liền khối bo tròn, cùng kiểu .mode-toggle-group ở Bước 3. */
.km-picker .km-modes {
border: 1.5px solid var(--green);
border-radius: 50px;
padding: 3px;
display: inline-flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
gap: 4px;
margin-bottom: 10px;
}
.km-picker .km-modes .nav-item { display: contents; }
.km-picker .km-mode {
border: none;
background: transparent;
border-radius: 50px;
padding: 6px 16px;
font-size: 0.82rem;
font-weight: 700;
color: var(--green);
white-space: nowrap;
flex-shrink: 0;
}
.km-picker .km-mode.active {
background: var(--green);
color: #fff;
}
.km-picker .km-mode-panel:not(:empty) {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #dcdcdc;
}
.km-picker .km-families .km-fam {
border-radius: 50px;
}
.km-picker .km-families .km-fam.active {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.km-picker .km-filter-label {
font-size: 0.68rem;
font-weight: 700;
color: #999;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
/* Bộ lọc độ sáng — chip liền khối giống .brightness-seg-tabs ở Bước 3. */
.km-picker .km-brightness-tabs {
/* display: flex; */
border: 1px solid #d4d4d4;
border-radius: 8px;
overflow: hidden;
background: #fff;
max-width: 420px;
}
.km-picker .km-brightness-tab {
flex: 1;
text-align: center;
padding: 6px 10px;
font-size: 0.8rem;
font-weight: 700;
color: #555;
background: none;
border: none;
border-right: 1px solid #e0e0e0;
}
.km-picker .km-brightness-tab:last-child { border-right: none; }
.km-picker .km-brightness-tab.active { background: var(--green); color: #fff; }
/* Prev/next chuyển trang nhanh — nổi bật hơn nút số, đặt 2 đầu thanh phân
trang thay vì lẫn trong dãy số. */
.km-picker .km-pagination .page-item[data-role="prev"] .page-link,
.km-picker .km-pagination .page-item[data-role="next"] .page-link {
font-weight: 800;
font-size: 1rem;
}
/* Cặp prev/next gọn cạnh bộ lọc độ sáng — khỏi cuộn xuống thanh phân
trang đầy đủ ở cuối modal mới đổi được trang. */
.km-picker .km-quick-nav {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.km-picker .km-quick-nav-btn {
width: 28px;
height: 28px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.km-picker .km-quick-nav-label {
font-size: 0.78rem;
font-weight: 700;
color: #555;
white-space: nowrap;
}
.km-picker .km-grid {
display: grid !important;
/* Kích thước CỐ ĐỊNH 50×50px mỗi ô (không co giãn theo bề rộng modal như
trước — auto-fill tự tính số cột vừa khít theo container, mọi ô luôn
đúng 50px). Hệ số phồng khi hover = 150/50 = 3x, xem MAG_PEAK_BOOST
ở JS (km-picker.js) — phải khớp đúng tỉ lệ này. */
grid-template-columns: repeat(auto-fill, minmax(50px, 50px)) !important;
justify-content: start !important;
gap: 2px !important;
--bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important;
margin: 0 !important;
align-items: start !important;
/* Đệm dưới ~100px (nửa chiều cao ô lúc phồng hết cỡ 150px = 75px + biên an
toàn, xem MAG_PEAK_BOOST ở JS) — không có đệm này, hàng CUỐI của lưới
phồng lên sẽ đè trực tiếp lên phân trang (.km-pagination) render ngay
bên dưới, nút (i) rơi đúng vào nút phân trang thay vì cell → bấm hụt
(đã tự kiểm chứng bằng Playwright ở đúng hàng cuối). */
padding-bottom: 100px !important;
/* Hiệu ứng "nổi" (magnify) cần ô phóng to TRÀN ra ngoài ô lưới của nó mà
không bị clip bởi hàng/cột kế bên hay grid cha — overflow:visible +
isolation để mỗi ô tự z-index riêng, không ăn theo thứ tự DOM. */
overflow: visible !important;
isolation: isolate;
}
.km-picker .km-grid > .col,
.km-picker .km-grid > * {
width: 100% !important; max-width: none !important; flex: none !important;
padding: 0 !important;
overflow: visible !important;
}
.km-picker .km-grid > .km-empty { grid-column: 1 / -1; }
/* CHỈ áp cho lưới km-picker — các .km-cell ở nơi khác (vd
#zoneModalRefColorsList luồng "Lấy màu từ ảnh") giữ style gốc. */
.km-picker .km-grid .km-cell {
position: relative;
display: block !important; /* noi dung absolute -> khong keo cao */
width: 100% !important; min-width: 0 !important;
height: 0 !important; padding: 0 0 100% 0 !important; /* O VUONG chac chan */
border: 1px solid rgba(16, 22, 29, .12) !important;
border-radius: 0 !important; /* hình vuông — mặc định lẫn lúc hover, không bo góc */
box-shadow: none !important;
text-align: left; overflow: hidden;
/* contain:layout bó buộc ô trong đúng kích thước gốc, xung đột với
transform:scale() muốn "tràn" ra ngoài để tạo hiệu ứng nổi — bỏ contain,
giữ lại paint+style cho nhẹ. */
contain: paint style;
transform: scale(var(--mag, 1));
transform-origin: center center;
will-change: transform;
/* Đường cong "nảy nhẹ" (silk pop) mượt hơn ease thường — giống ngón tay
chọc từ dưới rồi thả ra, có chút đàn hồi ở cuối. */
/* Rút ngắn còn 120ms (so với 280ms lúc đầu) — hiệu ứng phồng lệ thuộc vào
hit-test elementFromPoint() tính lại MỖI frame theo vị trí con trỏ thật
(xem applyMagnify() ở km-picker.js); transition càng dài, rect thực tế
càng "trễ" so với đích trong lúc đang chạy → hit-test tại đúng lúc đó có
thể vồ nhầm ô hàng xóm (nhất là gần góc chứa nút (i)). 120ms vẫn đủ mềm
mắt nhưng đuổi kịp chuột di chuyển tốc độ bình thường. */
transition: transform .16s cubic-bezier(.33, 1, .68, 1), border-color .15s ease !important;
}
.km-picker .km-grid .km-cell:hover,
.km-picker .km-grid .km-cell.is-peak {
border-color: var(--green) !important;
outline: 2px solid var(--green);
outline-offset: -2px;
}
/* Tô sáng ngắn khi "nhắm" tới đúng vị trí màu đang gán trong lưới (bấm vào
swatch đang chọn — xem jumpToHex() ở km-picker.js) — z-index riêng, KHÔNG
dùng .is-peak (tránh lệch với biến currentLabel nội bộ của hệ hover). */
.km-picker .km-grid .km-cell.is-jump-highlight {
z-index: 900;
outline: 3px solid var(--highlight-orange, #f27a24);
outline-offset: 1px;
animation: km-jump-pulse 0.6s ease-in-out 2;
}
@keyframes km-jump-pulse {
0%, 100% { outline-color: var(--highlight-orange, #f27a24); }
50% { outline-color: transparent; }
}
/* Cỡ chữ/nút TÍNH THEO TOẠ ĐỘ GỐC của ô 50px (chưa phồng) — ô đỉnh LUÔN
phồng đúng 3 lần cố định (150/50, xem sizeForOffset() ở km-picker.js —
chỉ ô đỉnh mới lộ chữ), nên quy đổi thẳng: giá trị RENDER mong muốn ÷ 3.
Padding 16px thật ÷3 ≈ 5.3px; mã ~13px thật ÷3 ≈ 4.3px; tên ~20px đậm
thật ÷3 ≈ 6.7px — theo đúng tỉ lệ trong ảnh mẫu (SW 6438 / Dill). */
.km-picker .km-grid .km-cell-code {
position: absolute; top: 5.3px; left: 5.3px;
font-family: "Montserrat", sans-serif;
font-size: 4.3px !important; font-weight: 400; letter-spacing: .02em;
opacity: 0; pointer-events: none;
transition: opacity .16s ease .04s;
}
.km-picker .km-grid .km-cell-name {
/* Xếp NGAY DƯỚI mã màu (top, không phải bottom) — khớp ảnh mẫu: mã + tên
dồn lên TRÊN-TRÁI, nút (i) tách riêng ở góc dưới-phải, không chung
dòng với tên. Hiện ĐẦY ĐỦ tên (không cắt "...") — cho phép xuống dòng
thay vì ellipsis/nowrap; chữ thường, không in đậm. */
position: absolute; top: 10.6px; left: 5.3px; right: 5.3px;
font-family: "Montserrat", sans-serif;
font-size: 6.7px; font-weight: 400; line-height: 1.15;
white-space: normal; overflow: visible; word-break: break-word;
opacity: 0; pointer-events: none;
transition: opacity .16s ease .04s;
}
/* Chỉ ô "đỉnh" (đang thực sự ở dưới con trỏ, xem syncMagnify() ở JS) mới lộ
mã/tên — các ô lân cận chỉ phồng lên theo hiệu ứng lụa, không hiện chữ
(giống bảng màu Sherwin-Williams: chỉ ô trung tâm có nhãn). */
.km-picker .km-grid .km-cell.is-peak .km-cell-code,
.km-picker .km-grid .km-cell.is-peak .km-cell-name {
opacity: .92;
}
.km-picker .km-grid .km-cell.is-peak .km-cell-name { opacity: 1; }
/* Nút (i) — vùng bấm RIÊNG: mở "Chi tiết màu" + preview 4 phòng.
Thân nhãn bấm = chọn màu ngay. */
.km-picker .km-grid .km-cell-info {
/* Góc dưới-phải thật (4px lề) — hit area giờ là getBoundingClientRect()
THẬT của currentLabel (xem applyMagnify() ở km-picker.js: "đỉnh" chỉ
đổi khi con trỏ rời hẳn khỏi hình chữ nhật thật của nhãn, không còn
tính theo khoảng cách tâm mỗi frame nữa), nên không còn ràng buộc phải
kéo nút vào gần tâm để tránh "nhảy đỉnh" như bản cũ. Icon 22px thật
÷3 ≈ 7.3px. */
position: absolute; bottom: 4px; right: 4px;
width: 7.3px; height: 7.3px; display: grid; place-items: center;
color: inherit; opacity: 0;
border-radius: 50%;
pointer-events: none; cursor: pointer;
transition: opacity .16s ease .04s, background .12s ease;
}
.km-picker .km-grid .km-cell-info svg {
pointer-events: none;
width: 60%; height: 60%; /* override thuộc tính width/height=14 cố định trên