/* Xem thương hiệu trên ấn phẩm thật (22/10/2026; trên /cong-cu/ từ 23/10, nguồn ở xem-thuong-hieu/trang/, dung.py chép sang
   assets/cong-cu/xtt/, CẤM sửa bản chép).
   Màu khách đặt qua biến --m-chu --m-dh --m-nhan (JS); mọi màu giao diện đi token hệ v3.10.
   Ảnh nhiều lớp dùng chung cách của khối Thí nghiệm Màu (#216): nền → ba lớp màu (mask) → nội dung uốn theo ô xanh lá → sáng tối nhân. */
:root { --xtt-cong: cubic-bezier(.16, 1, .3, 1); --xtt-vua: 240ms; --xtt-giay: color-mix(in srgb, var(--color-white) 96%, var(--color-off-white)); }

/* bàn làm việc dựng bằng CC.ban của /cong-cu/ (cc-app: trái nhập dính, phải kết quả). Cột nhập ở đây dài hơn màn
   (bốn mục, ba màu, ba bản logo) mà cột phải cuộn qua 49 ấn phẩm: cột trái cuộn riêng trong chiều cao màn, không thì
   phần dưới của nó khuất tới tận cuối trang */
@media (min-width: 980px) {
  .xtt.cc-app .cc-app__vao { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.xtt-ghi { display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-4) 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.xtt-ghi i { translate: 0 1px; }
.xtt-soat { margin-bottom: var(--space-4); }
.xtt-soi { margin-top: var(--space-8); }
.xtt-soi__tieu { margin: 0; font: 600 20px/1.3 var(--font-heading); color: var(--text-primary); }
.xtt .cc-soi { margin: var(--space-3) 0 0; }

.xtt-tha { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--xtt-vua) var(--xtt-cong), background-color var(--xtt-vua) var(--xtt-cong); }
.xtt-tha:hover, .xtt-tha.keo { border-color: var(--color-bordeaux); background: color-mix(in srgb, var(--color-bordeaux) 4%, var(--surface-card)); }
.xtt-tha:focus-within { outline: 2px solid var(--color-signal-red); outline-offset: 2px; }
.xtt-tha__anh { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--xtt-giay); border: 1px solid var(--border-subtle); overflow: hidden; }
.xtt-tha__anh img { max-width: 84%; max-height: 84%; }
.xtt-tha__chu { display: grid; gap: var(--space-1); font-size: 14px; line-height: 1.45; }
.xtt-tha__chu b { font-weight: 600; }
.xtt-tha__chu small { color: var(--text-secondary); font-size: 12px; }
.xtt-bao { margin: 0; font-size: 13px; color: var(--text-status-warning, var(--text-secondary)); }

.xtt-o { display: grid; gap: 6px; }
.xtt-o label, .xtt-mau legend, .xtt-bien legend { font: 600 13px/1.4 var(--font-sans); }
.xtt-o label span { font-weight: 400; color: var(--text-secondary); }
.xtt-o input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); font: 16px/1.4 var(--font-viet, var(--font-sans)); color: var(--text-primary); }
.xtt-o input:focus { outline: 2px solid var(--color-signal-red); outline-offset: 1px; }

.xtt-mau, .xtt-bien { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
.xtt-hs { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.xtt-hs summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 13px/1.4 var(--font-sans); list-style: none; }
.xtt-hs summary::-webkit-details-marker { display: none; }
.xtt-hs summary small { font-weight: 400; color: var(--text-secondary); }
.xtt-hs__o { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.xtt-mau legend, .xtt-bien legend { padding: 0; margin-bottom: var(--space-2); }
.xtt-mau__hang { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-3); align-items: center; }
.xtt-mau__hang input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.xtt-mau__hang input::-webkit-color-swatch-wrapper { padding: 3px; }
.xtt-mau__hang input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.xtt-mau__hang span { display: grid; font-size: 14px; line-height: 1.35; }
.xtt-mau__hang small { color: var(--text-secondary); font-size: 12px; }
.xtt-mau__hang code { font: 12px/1 var(--font-mono); color: var(--text-secondary); text-transform: uppercase; }
.xtt-nut-chu { justify-self: start; display: inline-flex; gap: var(--space-2); align-items: center; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: none; font: 500 14px/1 var(--font-sans); color: var(--text-primary); cursor: pointer; }
.xtt-nut-chu:hover { border-color: var(--border-strong); }

.xtt-bien__ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.xtt-bien__ds figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.xtt-bien__ds div { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); overflow: hidden; }
.xtt-bien__ds img { position: absolute; inset: 18% 12%; width: 76%; height: 64%; object-fit: contain; }
.xtt-bien__ds figcaption { font-size: 12px; color: var(--text-secondary); text-align: center; }
.xtt-chon { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 1.4; }
.xtt-chon input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-bordeaux); }

.xtt-loc { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.xtt-loc__nhom { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.xtt-loc__nhom button, .xtt-loc__canh button { flex: none; display: inline-flex; gap: 6px; align-items: center; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); font: 500 14px/1 var(--font-sans); color: var(--text-primary); cursor: pointer; white-space: nowrap; transition: border-color var(--xtt-vua) var(--xtt-cong), background-color var(--xtt-vua) var(--xtt-cong); }
.xtt-loc__nhom button small { color: var(--text-secondary); font-size: 12px; }
.xtt-loc__nhom button[aria-selected="true"], .xtt-loc__canh button[aria-pressed="true"] { border-color: var(--color-deep-navy); background: var(--color-deep-navy); color: var(--color-white); }
.xtt-loc__nhom button[aria-selected="true"] small { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
.xtt-loc__canh { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* màn rộng: bảy nhóm xuống dòng, đủ cả bảy trong tầm mắt; màn hẹp giữ dải vuốt ngang */
@media (min-width: 720px) { .xtt-loc__nhom { flex-wrap: wrap; overflow: visible; } }

/* lưới ấn phẩm: ô thẻ 4 : 3 (duyệt gac-ui-ux 23/10: ô vuông biến ảnh ngang như danh thiếp 2,1 : 1 thành một dải
   mỏng chiếm khoảng 35% ô; ảnh 3 : 2 nay phủ gần trọn ô, ảnh vuông và ảnh đứng vẫn phủ hết chiều cao) */
.xtt-the .xtt-khung { aspect-ratio: 4 / 3; }
.xtt-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 720px) { .xtt-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.xtt-the { position: relative; display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-page); text-align: left; font: inherit; color: inherit; cursor: zoom-in; transition: border-color var(--xtt-vua) var(--xtt-cong), translate var(--xtt-vua) var(--xtt-cong), box-shadow var(--xtt-vua) var(--xtt-cong); }
.xtt-the:hover { border-color: var(--border-strong); translate: 0 -2px; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-deep-navy) 10%, transparent); }
.xtt-the:focus-visible { outline: 2px solid var(--color-signal-red); outline-offset: 2px; }
.xtt-the > b { padding: 0 var(--space-2); font: 500 14px/1.35 var(--font-sans); }
.xtt-the > small { padding: 0 var(--space-2); margin-top: -6px; font-size: 12px; color: var(--text-secondary); }

/* khung ảnh: tỉ lệ cố định, ảnh nằm vừa, đáy thẳng hàng; lớp đêm nhân đều lên cả khung */
.xtt-khung { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; isolation: isolate; background: var(--surface-page); }
.xtt-khung::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--color-deep-navy) 80%, var(--color-white)); mix-blend-mode: multiply; transition: opacity 480ms var(--xtt-cong); }
[data-canh="dem"] .xtt-khung::after { opacity: 1; }
.xtt-anh { position: absolute; left: 50%; bottom: 0; translate: -50% 0; overflow: hidden; isolation: isolate; mix-blend-mode: multiply; }
.xtt-anh--sang { display: none; z-index: 2; mix-blend-mode: normal; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
[data-canh="dem"] .xtt-anh--sang { display: block; }
/* quầng sáng ban đêm quanh vùng tự sáng (biển hộp đèn, màn hình): bộ lọc đặt ở lớp bọc vì mặt nạ cắt bộ lọc của chính lớp */
.xtt-khung { --xtt-quang: color-mix(in srgb, var(--color-warm-cream) 55%, transparent); }
.xtt-quang { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
[data-canh="dem"] .xtt-quang { filter: drop-shadow(0 0 4px var(--xtt-quang)) drop-shadow(0 0 14px var(--xtt-quang)); }
.xtt-lon__san[data-canh="dem"] .xtt-quang { filter: drop-shadow(0 0 8px var(--xtt-quang)) drop-shadow(0 0 32px var(--xtt-quang)); }
.xtt-anh > img, .xtt-anh > i, .xtt-anh > .l-oc { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.xtt-anh .l-mau, .xtt-anh .l-oc { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.xtt-anh .l-mau { transition: background-color var(--xtt-vua) var(--xtt-cong); }
.xtt-anh .l-mau[data-z="chu"] { background: var(--m-chu); }
.xtt-anh .l-mau[data-z="dh"] { background: var(--m-dh); }
.xtt-anh .l-mau[data-z="nhan"] { background: var(--m-nhan); }
.xtt-anh .l-o { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.xtt-anh .l-bong { mix-blend-mode: multiply; pointer-events: none; }

/* khuôn ấn phẩm (khuon.js): đơn vị em, cạnh ngắn ô = 10em (JS đặt). Màu chữ, nền đọc biến --k-* do JS tính theo
   tương phản với mặt vật liệu; màu thương hiệu khách là BRAND ASSET, đi qua --m-*. Không khung viền, không bóng. */
/* tràn nền .6em ra ngoài ô: mặt nạ xanh lá rộng hơn tứ giác ô vài điểm ảnh, không tràn thì lộ một viền sáng quanh ô;
   lớp .l-oc vẫn cắt theo mặt nạ nên phần tràn không ra khỏi vùng xanh lá */
.k { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 0 0 .6em var(--k-nen); background: var(--k-nen); color: var(--k-chu); font-family: var(--font-viet, var(--font-sans)); line-height: 1.2; letter-spacing: 0; }
.k b { font-weight: 700; }
.k i { font-style: normal; }
.k-logo { display: block; flex: none; }
/* --k-co: hệ số co CHUNG của cả khuôn (xtt.js khop), co cả thang một lượt, không co từng dòng */
.k-t1 { font-size: calc(.42em * var(--k-co, 1)); } .k-t2 { font-size: calc(.55em * var(--k-co, 1)); } .k-t3 { font-size: calc(.75em * var(--k-co, 1)); }
.k-t4 { font-size: calc(1.05em * var(--k-co, 1)); } .k-t5 { font-size: calc(1.6em * var(--k-co, 1)); line-height: 1.08; } .k-t6 { font-size: calc(2.4em * var(--k-co, 1)); line-height: 1; }
/* tiêu đề lớn chia dòng đều, không để rớt một chữ xuống dòng cuối */
.k-t5, .k-t6 { text-wrap: balance; }
.k-phu { color: color-mix(in srgb, var(--k-chu) 68%, transparent); }
.k-dam { color: var(--k-dam); }
.k-hoa { text-transform: uppercase; letter-spacing: .14em; }
.k-gach { display: block; width: 1.6em; height: .14em; background: var(--k-nhan); }
.k [data-vua] { white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; }
.k-cd { display: flex; align-items: center; gap: .5em; min-width: 0; max-width: 100%; }
.k-cd--doc { flex-direction: column; gap: .3em; text-align: center; }
/* mảng khối: chỗ đặt ảnh sản phẩm, mang biểu tượng phóng lớn cùng tông tràn mép (siêu đồ hoạ) */
.k-khoi { position: relative; overflow: hidden; background: var(--k-khoi); }
.k-anh { display: grid; place-items: center; border-radius: .5em; background: var(--k-khoi); }
.k-anh .k-logo { opacity: .35; }
/* biểu tượng trên mảng khối: căn giữa, ĐẶC (bản sáng tối do banTheo chọn theo nền khối; làm mờ thì ra mảng xám lục đục
   trên nền kem), chiếm 60% cạnh ngắn khối, không cắt mép (cắt mép đọc như ảnh hỏng) */
/* một ô lưới 1fr x 1fr: chiều cao phần trăm của biểu tượng mới tính theo khối (hàng tự động thì ảnh bung cỡ gốc) */
.k-khoi { display: grid; place-items: center; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.k-khoi .k-sieu { width: 60% !important; height: 60% !important; object-fit: contain; }
/* biểu tượng đặc trên mặt ấn phẩm: đứng ở một phần ba dưới của vùng giữa (khung đứng), hoặc giữa vùng (vách, màn, web) */
.k-hinh { display: flex; align-items: flex-end; justify-content: center; min-height: 0; padding: .6em 1em 1.2em; }
.k-hinh--giua { align-items: center; padding: .6em; }
.k-hinh .k-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.k-co { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); justify-items: center; padding: .8em; text-align: center; }
.k-co__dau { grid-row: 1; align-self: center; display: flex; justify-content: center; max-width: 100%; }
.k-co__hinh { grid-row: 3; align-self: center; display: flex; justify-content: center; min-height: 0; }
.k-co__hinh .k-logo { max-height: 100%; object-fit: contain; }

.k-dau { display: flex; align-items: center; justify-content: safe center; }
.k-dau-trai { display: flex; align-items: flex-start; justify-content: flex-start; padding: .6em; }
.k-cot { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .55em; text-align: center; padding: .8em; }

.k-dt { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: .5em; padding: .9em 1em; }
.k-dt > * { max-width: 56%; }
.k-dt__nguoi { align-self: end; display: flex; flex-direction: column; gap: .25em; }
.k-dt__nguoi .k-gach { margin-top: .35em; }
.k-dt__lh { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }

.k-hu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 0 1.2em; }
.k-hu__logo { display: flex; align-items: center; }
.k-hu__giua { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.k-hu__qc { display: flex; flex-direction: column; align-items: flex-end; gap: .2em; }

.k-nhd { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding: 1.1em .9em .9em; }
.k-nhd__giua { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .35em; min-width: 0; max-width: 100%; }
.k-nhd__ten { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; max-width: 100%; }
.k-gon { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .5em; text-align: center; padding: .8em; }
.k-nhd__qc { display: flex; flex-direction: column; align-items: center; gap: .15em; }

.k-bia { display: flex; flex-direction: column; justify-content: space-between; padding: .9em 1em; }
.k-bia > div:last-child { display: flex; flex-direction: column; gap: .2em; }
.k-can { text-wrap: balance; }

.k-lich { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: 1em; padding: .8em 1.1em; }
.k-lich__thang { display: flex; flex-direction: column; gap: .2em; }
.k-lich__luoi { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .55em; text-align: center; }
.k-lich__luoi b { font-weight: 600; color: color-mix(in srgb, var(--k-chu) 68%, transparent); }
.k-lich__luoi .k-cn { color: var(--k-nhan); }
.k-lich__luoi .k-le { color: var(--k-dam); font-weight: 700; }

.k-nw { white-space: nowrap; }
.k-td { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: .9em; padding: 1em 1.1em; }
.k-td__dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.k-td__dau span { text-align: right; line-height: 1.5; }
.k-td__than { display: flex; flex-direction: column; gap: .7em; line-height: 1.55; }
.k-td__than p { margin: 0; }
.k-td__ky { display: flex; flex-direction: column; gap: .2em; margin-top: .6em; }
.k-td__chan { display: flex; flex-direction: column; gap: .45em; }
.k-pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1em 1.2em; }
.k-pb__gui { display: flex; flex-direction: column; gap: .4em; }
.k-pb__nhan { align-self: start; display: flex; flex-direction: column; gap: .25em; }
.k-nv { display: flex; flex-direction: column; align-items: center; gap: .35em; text-align: center; }
.k-nv__dau { align-self: stretch; display: flex; justify-content: center; padding: 1em 0 .9em; background: var(--m-chu); margin-bottom: .6em; }
.k-nv__anh { width: 42%; aspect-ratio: 3 / 4; border-radius: .4em; background: var(--k-khoi); color: var(--k-khoi-chu); display: grid; place-items: center; margin-bottom: .4em; }
.k-nv__ma { font-family: var(--font-mono); letter-spacing: .08em; color: color-mix(in srgb, var(--k-chu) 68%, transparent); }
.k-nv .k-gach { margin-top: .4em; }
.k-tv { display: flex; flex-direction: column; justify-content: space-between; padding: .9em 1.1em; }
.k-tv__dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.k-tv__chan { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.k-tv__chan > span { display: flex; flex-direction: column; gap: .3em; }
.k-tv__so { font-family: var(--font-mono); letter-spacing: .12em; font-weight: 600; }
.k-tv__hang { color: var(--k-nhan); }
.k-bt { display: flex; align-items: center; gap: 1em; padding: 0 1.4em; }
.k-bt__nguoi { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.k-thiep { gap: .45em; }

.k-hs { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.k-hs__dau { display: flex; flex-direction: column; gap: .3em; padding: .9em 1.6em .8em 1em; }

.k-po { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.k-po__dau { display: flex; flex-direction: column; gap: .35em; padding: 1em 1em .8em; }
.k-po--man .k-po__dau { padding: 3em 2.67em 1.4em; gap: .6em; }
/* màn sảnh 1080 điểm ảnh: tiêu đề 120, đọc từ xa */
.k-po--man .k-t6 { font-size: calc(4em * var(--k-co, 1)); }
/* màn sảnh: logo đầy đủ đầu màn, khối ảnh tối đa 45% màn, phần chữ chiếm phần còn lại */
.k-po--man { grid-template-rows: minmax(0, 1fr) minmax(0, 45%) auto; }
.k-po--man .k-po__dau { justify-content: safe center; }
.k-po--man .k-po__dau .k-logo { margin-bottom: 1.6em; }
.k-po--man .k-po__chan { padding: 1.4em 2.67em 2em; }
.k-po__chan { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em 1em; }

.k-vach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.k-vach__chu { display: flex; flex-direction: column; justify-content: safe center; min-width: 0; gap: .4em; padding: 1em 1.2em; }

.k-bien { display: flex; align-items: center; justify-content: safe center; padding: 0 .8em; }
.k-bien__ten { font-weight: 700; font-size: calc(3.2em * var(--k-co, 1)); line-height: 1; color: var(--k-chu); }
.k-quay { gap: .5em; }
.k-quay__web { margin-top: .6em; }

.k-tru { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 1.4em .8em; text-align: center; }
.k-tru__chan { margin-top: auto; }
.k-tru__dau { display: flex; flex-direction: column; align-items: center; gap: .55em; max-width: 100%; }
.k-tru .k-hinh { flex: 1 1 0; width: 100%; }

.k-xe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1em; padding: .9em 1.1em; }
.k-xe__logo { align-self: start; display: flex; flex-direction: column; gap: .4em; min-width: 0; }
.k-xe__goi { display: flex; flex-direction: column; align-items: flex-end; gap: .15em; }

.k-cd-bien { display: flex; align-items: center; gap: 1.2em; padding: 0 1.2em; }
.k-cd-bien__muc { display: flex; align-items: center; gap: .5em; white-space: nowrap; }
.k-cd-bien__muc + .k-cd-bien__muc { margin-left: auto; }
.k-mui { width: 2.2em; height: 2.2em; flex: none; color: var(--k-nhan); }

.k-hoa-van { display: grid; place-items: center; background-color: var(--k-nen); background-size: 100% 100%; background-repeat: no-repeat; }
/* nền logo giữa loang mờ ra mép, không cắt đôi biểu tượng hoa văn quanh nó thành một khung chữ nhật */
.k-hoa-van__giua { padding: 1.6em 2.6em; }

.k-man { display: flex; flex-direction: column; gap: .6em; }
/* khổ 390 x 844, 1em = 30 điểm ảnh màn: vùng an toàn trên 54, dưới 34; lề ngang 16 */
/* thanh trạng thái 87 điểm ảnh, lề ngang 96: ô xanh lá trên ảnh rộng hơn mặt màn vài phần trăm, nên giờ đặt sát đáy thanh
   (ngang tai thỏ) để viền và góc bo của máy không che */
.k-man__tt { display: flex; justify-content: space-between; align-items: flex-end; height: 2.9em; padding: 0 3.2em .6em; }
/* bộ ba thiết bị: ô màn điện thoại lấn dưới viền máy bên trái và góc trên khoảng một chữ (đo ảnh 52, 23/10); nền màn
   vẫn phủ trọn ô, chỉ nội dung lùi vào cho viền không xén chữ. Lớp gắn trên khuôn (khuon.js), không theo vật cha: ảnh
   xuất chép riêng ô ra khỏi khung */
.k-man--le { padding: .3em 0 0 1.1em; }
.k-man__tt i { width: 2em; height: .5em; border-radius: .2em; background: color-mix(in srgb, var(--k-chu) 40%, transparent); }
.k-man__dau { display: flex; align-items: center; gap: .4em; min-height: 1.87em; padding: 0 .7em; background: var(--m-chu); color: var(--m-chu-chu); }
.k-man__chao { display: flex; flex-direction: column; gap: .15em; padding: 0 .7em; }
.k-man__the { margin: 0 .7em; padding: .6em .67em; border-radius: .67em; background: var(--k-khoi); color: var(--k-khoi-chu); display: flex; flex-direction: column; gap: .3em; }
.k-man__the i { align-self: flex-start; margin-top: .4em; padding: .45em .9em; border-radius: 2em; background: var(--k-nhan); color: var(--k-nhan-chu); font-weight: 600; }
.k-man__hang { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .5em; align-items: center; margin: 0 .7em; }
.k-man__hang span { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.k-man__goi { display: flex; flex-direction: column; gap: .4em; margin: .2em .7em 0; }
.k-man__o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.k-man__day { margin-top: auto; flex: none; display: flex; justify-content: space-around; padding: .6em 0 1.13em; }
.k-man__day i { width: .8em; height: .8em; border-radius: .4em; background: color-mix(in srgb, var(--k-chu) 18%, transparent); }
.k-man__day i:first-child { background: var(--m-chu); }

.k-web { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
/* khổ 1280 x 800 (máy bảng 1024), 1em = 32 điểm ảnh màn: thanh menu 77, lề ngang 80 */
.k-web__nav { display: flex; align-items: center; gap: 1.1em; height: 2.4em; padding: 0 2.5em; white-space: nowrap; }
.k-web__nav .k-logo { margin-right: auto; }
.k-web__nav i { padding: .5em 1em; border-radius: .4em; background: var(--m-chu); color: var(--m-chu-chu); font-weight: 600; }
.k-web__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--m-chu); color: var(--m-chu-chu); }
.k-web__chu { display: flex; flex-direction: column; justify-content: safe center; gap: .45em; padding: 0 1.4em 0 2.5em; min-width: 0; }
.k-web__chu .k-phu { color: color-mix(in srgb, var(--m-chu-chu) 72%, transparent); }
.k-web__chu i { align-self: flex-start; margin-top: .5em; padding: .55em 1.1em; border-radius: .4em; background: var(--k-nhan); color: var(--k-nhan-chu); font-weight: 600; }
.k-web__hero .k-khoi { background: var(--m-dh); }
/* lề đáy 1.4em (khoảng 4% màn): mép đáy ô nằm sát viền máy và mặt nạ, chữ sát đáy bị che mà khop() không đo được */
.k-web__the { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; padding: .8em 2.5em 1.4em; }
.k-web__the span { display: flex; flex-direction: column; gap: .35em; }
.k-mt { gap: .7em; }
.k-mt__chan { position: absolute; bottom: 1em; left: 0; right: 0; color: color-mix(in srgb, var(--k-chu) 68%, transparent); }

.xtt-chan { display: grid; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.xtt-chan p { margin: 0; max-width: 640px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.xtt-gui { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); background: var(--color-bordeaux); color: var(--color-white); font: 600 15px/1 var(--font-sans); text-decoration: none; }
.xtt-gui:hover { background: color-mix(in srgb, var(--color-bordeaux) 86%, var(--color-charcoal)); }
.xtt-gui:hover i { translate: 3px 0; }
.xtt-gui i { transition: translate var(--xtt-vua) var(--xtt-cong); }

/* xem lớn */
.xtt-lon { width: min(1040px, calc(100vw - var(--space-8))); max-height: calc(100vh - var(--space-8)); padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-page); color: var(--text-primary); }
.xtt-lon::backdrop { background: color-mix(in srgb, var(--color-deep-navy) 64%, transparent); }
.xtt-lon__dau, .xtt-lon__chan { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.xtt-lon__dau p { margin: 0; display: grid; }
.xtt-lon__dau b { font: 600 18px/1.3 var(--font-heading); }
.xtt-lon__dau span { font-size: 13px; color: var(--text-secondary); }
.xtt-lon__chan { justify-content: center; }
.xtt-lon__nut { display: flex; gap: var(--space-2); align-items: center; }
.xtt-lon__nut .xtt-nut-chu, .xtt-loc__canh [data-xtt-tai-bo] { min-height: 44px; }
.xtt-nut-chu:disabled, .xtt-loc__canh button:disabled { cursor: progress; opacity: .7; }
.xtt-lon__chan span { min-width: 64px; text-align: center; font: 13px/1 var(--font-mono); color: var(--text-secondary); }
.xtt-lon__san { padding: 0 var(--space-4); }
.xtt-lon__san .xtt-khung { aspect-ratio: 4 / 3; max-height: calc(100vh - 220px); margin: 0 auto; }
.xtt-nut-tron { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-subtle); border-radius: 50%; background: var(--surface-card); color: var(--text-primary); font-size: 18px; cursor: pointer; }
.xtt-nut-tron:hover { border-color: var(--border-strong); }

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

/* duyệt gac-ui-ux 23/10 */
/* thẻ kết luận lúc đang xem logo mẫu: trung tính, không mang màu cảnh báo */
.xtt .cc-ket[data-muc="mau"] { border-left-color: var(--border-strong); }
.xtt .cc-ket[data-muc="mau"] .cc-ket__muc { color: var(--text-primary); }
.xtt .cc-ket[data-muc="mau"] .cc-ket__dot { background: var(--border-strong); }
/* ô cuối lưới: tải trọn bộ, lấp chỗ trống của hàng lẻ */
.xtt-the--a4 { grid-column: span var(--s2, 1); align-content: center; justify-items: center; text-align: center; gap: var(--space-2); min-height: 120px; padding: var(--space-4); border: 1px solid var(--border-subtle); }
.xtt-the--a4 i { font-size: 32px; color: var(--text-brand); }
/* vòng 2: danh thiếp nhỏ trong ô đầu lưới, phóng riêng ở lưới (tấm xem lớn giữ cỡ gốc) */
.xtt-the .xtt-anh[data-vat="danh-thiep"] { scale: 1.25; transform-origin: 50% 75%; }
@media (min-width: 720px) { .xtt-the--a4 { grid-column: span var(--s3, 1); } }
.xtt-hs summary small { font-size: 13px; }
/* màn hẹp: chạm từ 44px; xem lớn thành tấm trồi từ đáy */
@media (max-width: 719px) {
  .xtt-loc__nhom button, .xtt-loc__canh button, .xtt-nut-chu { min-height: 44px; }
  .xtt-lon { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; inset: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .xtt-lon__dau { padding-bottom: var(--space-2); }
  .xtt-lon__san { padding-top: 0; }
}