/* 1clicktee — APP TẠO MẪU /create (G1, 12/11/2026; 13/11: DA giữ bản gốc, thêm khu chọn 60+ phong cách; FX 13/11:
   app-1211a.css → app-1311b.css — thẻ phong cách "Latin letters only", dòng báo .otc-snote, scroll-padding đáy;
   F3 13/11: app-1311b.css → app-1311e.css — ô gợi ý hình .otc-hint, lưới phong cách tự đổi số cột (ô ≥ 132px, không bẻ
   giữa chữ), tên mẫu nhà 2 dòng, vùng chạm ≥ 40px + chữ ≥ 12px, BỎ phần chừa chỗ thanh dính trong padding section —
   chỗ chừa nằm ở padding-bottom của body qua --ot-stickybar-h (JS đo .otc-go[data-ot-sticky]), khoảng trước footer 32px).
   U2 13/11: app-1311e.css → app-1311g.css — tên phong cách một từ dài (de/fi/ru…) ngắt có gạch nối, ≤ 2 dòng (cuối file).
   Đổi nội dung = đổi tên file (cache tĩnh 7 ngày). Bản DA pastel (bỏ, theo chủ dự án) lưu ở app-1211a.css.sang-1311.
   Chỉ class .otc-*; token/nút/ô nhập/chip/hộp thoại dùng chung ở base-1211a.css (KHÔNG thêm màu ngoài --ot-*).
   Màu áo (--tee) là DỮ LIỆU sản phẩm (bootstrap.colors), JS gán inline; --tee-ink = mực tương phản (ngà/mực).
   Bố cục: ≥1024 hai cột (soạn | phiếu in dính); <1024 một cột, khối nút chính .otc-go dính đáy trên dải menu. */

.otc [hidden],.otc-sbox [hidden]{display:none!important}
.otc-mini{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-muted)}
.otc-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.otc-row .ot-label{margin:0}
@keyframes otc-sk{0%{background-position:100% 0}100%{background-position:0 0}}
.otc .is-sk{pointer-events:none}

/* ═════════ BƯỚC A ═════════ */
.otc-studio{padding:40px 0 32px}
.otc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}
.otc-compose{min-width:0}

/* đầu trang */
.otc-hero{margin:0 0 28px}
.otc-hero .ot-kicker{margin-bottom:18px}
.otc-h1{font-size:clamp(64px,6.6vw,100px);line-height:.88;letter-spacing:0}
.otc-h1 span,.otc-h1 em{display:block;font-style:normal}
.otc-h1 em{color:var(--ot-accent)}
.otc-lede{max-width:46ch;margin:20px 0 0;font-size:17px;line-height:1.5;color:var(--ot-muted)}

/* tab chữ gạch chân (không nền xám) */
.otc-tabs{display:flex;gap:32px;border-bottom:var(--ot-bw) solid var(--ot-ink)}
.otc-tab{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;margin:0;padding:0;border:0;background:none;color:var(--ot-muted);font-size:14px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.otc-tab b{font-family:var(--ot-display);font-size:20px;font-weight:400;letter-spacing:.02em;color:var(--ot-faint)}
.otc-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:4px;background:transparent;transition:background-color .15s}
.otc-tab:hover{color:var(--ot-ink)}
.otc-tab:hover::after{background:var(--ot-ink)}
.otc-tab[aria-selected=true]{color:var(--ot-ink)}
.otc-tab[aria-selected=true] b{color:var(--ot-accent)}
.otc-tab[aria-selected=true]::after{background:var(--ot-accent)}
.otc-tab:focus-visible{outline-offset:-2px}
.otc-panel{padding-top:28px}

/* ô câu lớn */
.otc-line{position:relative}
.otc-line__in{display:block;width:100%;height:172px;margin:0;padding:18px 20px 40px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper);color:var(--ot-ink);font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.01em;resize:none;-webkit-appearance:none;appearance:none;transition:background-color .15s}
.otc-line__in::placeholder{color:var(--ot-faint);opacity:1}
.otc-line__in:hover,.otc-line__in:focus{background:#FFFFFF}
.otc-line__in:focus-visible{outline:2px solid var(--ot-ink);outline-offset:2px}
.otc-line__in[aria-invalid=true]{border-color:var(--ot-accent-2);background:var(--ot-accent-bg)}
.otc-line__count{position:absolute;right:16px;bottom:12px;font-size:12px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ot-muted);pointer-events:none}
.otc-line__count.is-full{color:var(--ot-accent-2)}
.otc-err{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ot-accent-2)}
.otc-err .ot-icon{margin-top:2px}

/* F3 — ô gợi ý hình (tuỳ chọn): bê .otc-line*, thấp + chữ nhỏ hơn ô câu để rõ là phụ */
.otc-hint{margin-top:24px}
.otc-hint .otc-row .ot-label{margin:0}
.otc-line__in.otc-hint__in{height:88px;padding:12px 16px 28px;font-size:18px;line-height:1.35;letter-spacing:0}
.otc-line--hint .otc-line__count{bottom:8px}
.otc-hint__help{margin:8px 0 0}
.otc-picked__main .otc-hint{margin-top:22px;padding-top:20px;border-top:var(--ot-bw) solid var(--ot-line-soft)}

/* câu gợi ý */
.otc-sugs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.otc-sugs .otc-mini{flex:none;margin-right:4px;white-space:nowrap}
.otc-sug{height:40px;padding:0 11px;font-size:13px;letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .15s,color .15s}
.otc-sug:hover{background:var(--ot-ink);color:var(--ot-on-ink)}

/* phong cách — 60+ kiểu (13/11): hàng đầu "Để AI chọn" + 8 kiểu + thẻ "Xem tất cả" = lưới 5 cột × 2 hàng;
   điện thoại: dải vuốt ngang. Hộp đủ (.otc-sbox) ở cuối mục này. */
.otc-sec{margin-top:36px}
/* F3: số cột theo bề rộng (ô ≥ 132px); JS (fitStyles) chỉ hiện đủ 2 hàng: cột × 2 − 2 kiểu + "Để AI chọn" + "Xem tất cả" */
.otc-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.otc-style{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper);color:var(--ot-ink);text-align:left;overflow:hidden;cursor:pointer}
.otc-style__img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--ot-line-soft)}
.otc-style__img img{position:relative;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ot-ease)}
.otc-style__img.is-noimg img{display:none}
/* thiếu ảnh đại diện → nền ngà đậm + tên chữ Anton */
.otc-style__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;background:var(--ot-paper);font-family:var(--ot-display);font-size:20px;line-height:1;letter-spacing:.01em;text-align:center;text-transform:uppercase;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;color:var(--ot-ink)}
:lang(vi) .otc-style__ph{line-height:1.2}
.otc-style:hover .otc-style__img img{transform:scale(1.05)}
.otc-style__n{display:flex;flex:1 0 auto;align-items:center;min-height:44px;padding:6px 10px;border-top:var(--ot-bw) solid var(--ot-ink);font-size:12px;font-weight:800;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;transition:background-color .15s,color .15s}
/* F3: không bẻ giữa chữ (TYPOGRAPH/Y); nhãn dài xuống tối đa 2 dòng cân nhau */
/* F3: nhãn KHÔNG bị cắt — dài thì xuống dòng (ô nhãn giãn đều theo hàng lưới, các thẻ cùng hàng vẫn thẳng) */
.otc-style__name{display:block;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
/* tiếng Việt in hoa: dấu trên chữ hoa (Ể, Ì, Ổ, Ữ) bị cắt bởi overflow của line-clamp → chừa chỗ trên đầu dòng */
:lang(vi) .otc-style__name{padding-top:.22em;line-height:1.28}
.otc-style__ck{position:absolute;z-index:1;top:6px;right:6px;display:none;align-items:center;justify-content:center;width:24px;height:24px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-accent);color:var(--ot-ink)}
.otc-style:hover .otc-style__n{background:var(--ot-accent-soft)}
.otc-style[aria-pressed=true] .otc-style__n{background:var(--ot-ink);color:var(--ot-on-ink)}
.otc-style[aria-pressed=true] .otc-style__ck{display:inline-flex}
.otc-style--surprise .otc-style__img{display:grid;place-items:center;background:var(--ot-ink)}
.otc-style__q{font-family:var(--ot-display);font-size:72px;line-height:1;color:var(--ot-accent);transform:rotate(-8deg)}
.otc-style--all .otc-style__img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--ot-paper)}
.otc-style__more{max-width:100%;padding:0 8px;font-family:var(--ot-display);font-size:28px;line-height:1;text-align:center;text-transform:uppercase;white-space:nowrap;color:var(--ot-ink)}
.otc-style__more:empty{display:none}
.otc-style__grid{display:grid;grid-template-columns:repeat(2,12px);gap:4px}
.otc-style__grid i{width:12px;height:12px;border:var(--ot-bw) solid var(--ot-ink);background:var(--ot-accent)}
.otc-style__grid i:nth-child(2),.otc-style__grid i:nth-child(3){background:transparent}
.otc-style--all .otc-style__n{justify-content:space-between}
.otc-style--all .otc-style__n::after{content:"";flex:none;width:7px;height:7px;margin-left:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.otc-style[disabled]{opacity:.45;cursor:not-allowed}
/* FX 13/11 — kiểu chỉ hợp chữ Latin khi câu có chữ ngoài Latin: ảnh + tên mờ, nhãn mực rõ chữ, không chọn được */
.otc-style.is-latin-off[disabled]{opacity:1}
.otc-style.is-latin-off .otc-style__img img,.otc-style.is-latin-off .otc-style__ph,.otc-style.is-latin-off .otc-style__n{opacity:.45}
.otc-style.is-latin-off .otc-style__img img{filter:grayscale(1)}
.otc-style.is-latin-off .otc-style__img:has(img):not(.is-noimg) .otc-style__ph{visibility:hidden}
.otc-style.is-latin-off:hover .otc-style__img img{transform:none}
.otc-style.is-latin-off:hover .otc-style__n{background:transparent}
.otc-style__lat{position:absolute;z-index:1;left:6px;right:6px;bottom:6px;padding:4px 6px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-ink);color:var(--ot-on-ink);font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.02em;text-align:center;text-transform:uppercase}
.otc-snote{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;font-weight:700;line-height:1.45;color:var(--ot-ink)}
.otc-snote::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;background:var(--ot-accent)}
.otc-style.is-sk{opacity:1}
.otc-style.is-sk .otc-style__img,.otc-tpl.is-sk .otc-tpl__fig,.otc-chip.is-sk{background:linear-gradient(100deg,var(--ot-line-soft) 40%,rgba(11,11,11,.07) 50%,var(--ot-line-soft) 60%) 0 0/300% 100%;animation:otc-sk 1.4s linear infinite}
.otc-style.is-sk .otc-style__name{display:block;width:60%;height:10px;background:var(--ot-line-soft)}

/* hộp "Xem tất cả phong cách" (.ot-modal cũ): cao cố định (lọc không làm hộp co giãn), ô tìm + chip đứng yên, lưới cuộn */
.ot-modal__panel.otc-smodal{max-width:880px;height:min(760px,calc(100vh - 48px))}
.otc-smodal .ot-modal__body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;padding-bottom:0;overflow:hidden}
.otc-sbox{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
.otc-sbox__top{flex:none;display:flex;flex-direction:column;gap:6px;padding:2px 0 12px;border-bottom:var(--ot-bw) solid var(--ot-ink)}
.otc-sbox__f{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0 -24px;padding:2px 24px 6px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.otc-sbox__f>*{flex:none}
.otc-sbox__fl{min-width:72px;margin-right:4px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ot-muted)}
.otc-sbox .otc-chip{height:40px;padding:0 12px}
.otc-sbox__n{margin:0}
.otc-sbox__scroll{flex:1 1 auto;min-height:0;margin:0 -24px;padding:14px 24px 24px;overflow-y:auto;overscroll-behavior:contain}
.otc-sbox__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.otc-sbox__grid .otc-style__n{min-height:44px;font-size:12px}
.otc-sbox__grid .otc-style__q{font-size:56px}
.otc-sbox__none{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:20px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper)}
.otc-sbox__none p{margin:0;font-weight:700}

/* tab mẫu: công cụ lọc */
.otc-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.otc-search{position:relative;display:block}
.otc-search .ot-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ot-muted);pointer-events:none}
.otc-search .ot-input{padding-left:46px}
.otc-search .ot-input::-webkit-search-cancel-button{cursor:pointer}
.otc-themes{display:flex;flex-wrap:wrap;gap:8px;min-height:40px}
.otc-chip{display:inline-flex;align-items:center;gap:6px;height:40px;margin:0;padding:0 12px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:transparent;color:var(--ot-ink);font-size:12px;font-weight:800;line-height:1;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.otc-chip small{font-size:12px;font-weight:700;color:var(--ot-muted);font-variant-numeric:tabular-nums}
.otc-chip:hover{background:var(--ot-accent-soft)}
.otc-chip[aria-pressed=true]{background:var(--ot-ink);color:var(--ot-on-ink)}
.otc-chip[aria-pressed=true] small{color:var(--ot-accent)}
.otc-chip.is-sk{border-color:transparent}

/* lưới mẫu nhà */
.otc-row--grid{margin-bottom:12px}
/* F3: ô ≥ 150px để tên mẫu dài vừa 2 dòng (1024: 3 cột, ≥1180: 4 cột) */
.otc-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px}
.otc-tpl{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0;background:none;color:var(--ot-ink);text-align:left;cursor:pointer}
.otc-tpl__fig{display:block;aspect-ratio:1/1;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);overflow:hidden;background:var(--ot-paper)}
.otc-tpl__fig img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ot-ease)}
.otc-tpl:hover .otc-tpl__fig img{transform:scale(1.06)}
/* F3: tên mẫu nhà 2 dòng (không cắt "…"), ô tên luôn cao 2 dòng → thẻ cùng chiều cao */
.otc-tpl__t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.6em;overflow:hidden;font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
:lang(vi) .otc-tpl__t{min-height:2.76em;line-height:1.38}
.otc-tpl:hover .otc-tpl__t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.otc-tpl:focus-visible{outline:none}
.otc-tpl:focus-visible .otc-tpl__fig{outline:2px solid var(--ot-accent);outline-offset:2px}
.otc-tpl.is-sk .otc-tpl__fig{border-color:transparent}
.otc-tpl.is-sk .otc-tpl__t{width:70%;background:var(--ot-line-soft)}
.otc-nores{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:20px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper)}
.otc-nores p{margin:0;font-weight:700}
.otc-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px 32px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper)}
.otc-empty__t{margin:0;font-size:40px}
.otc-empty__b{margin:0 0 8px;font-size:16px;color:var(--ot-muted)}

/* mẫu đã chọn + độ giống */
.otc-picked{display:grid;grid-template-columns:208px minmax(0,1fr);gap:28px;align-items:start}
.otc-picked__side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.otc-picked__fig{width:100%;aspect-ratio:1/1;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);overflow:hidden;background:var(--ot-line-soft)}
.otc-picked__fig img{width:100%;height:100%;object-fit:cover}
.otc-picked__main .ot-kicker{margin-bottom:10px}
.otc-picked__t{margin:0;font-size:44px;line-height:.95}
.otc-picked__s{margin:8px 0 20px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ot-muted)}
.otc-picked__main .ot-label{margin-bottom:8px}
.otc-sim{margin-top:22px;padding-top:20px;border-top:var(--ot-bw) solid var(--ot-line-soft)}
.otc-sim__cur{font-family:var(--ot-display);font-size:22px;line-height:1;text-transform:uppercase;color:var(--ot-accent-2)}
.otc-rail{--th:22px;position:relative;height:32px}
.otc-rail__line,.otc-rail__fill{position:absolute;top:50%;left:calc(var(--th) / 2);height:3px;margin-top:-1.5px;background:var(--ot-ink)}
.otc-rail__line{right:calc(var(--th) / 2);opacity:.2}
.otc-rail__fill{width:calc((100% - var(--th)) * var(--pf, .3333));background:var(--ot-ink)}
.otc-rail__mark{position:absolute;top:50%;left:calc(var(--th) / 2 + (100% - var(--th)) * var(--i) / 3);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--ot-bg);border:var(--ot-bw) solid var(--ot-ink)}
.otc-range{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.otc-range:focus-visible{outline:none}
.otc-range::-webkit-slider-runnable-track{height:32px;background:transparent;border:0}
.otc-range::-moz-range-track{height:32px;background:transparent;border:0}
.otc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--th);height:var(--th);margin-top:5px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-accent);transform:rotate(45deg);transition:transform .15s var(--ot-ease)}
.otc-range::-moz-range-thumb{width:var(--th);height:var(--th);border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-accent);transform:rotate(45deg)}
.otc-range:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.12)}
.otc-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ot-ink);outline-offset:3px}
.otc-range:focus-visible::-moz-range-thumb{outline:2px solid var(--ot-ink);outline-offset:3px}
.otc-ticks{position:relative;height:40px;margin-top:2px}
.otc-tick{position:absolute;top:0;left:calc(11px + (100% - 22px) * var(--i) / 3);height:40px;margin:0;padding:0 2px;border:0;background:none;color:var(--ot-muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%);cursor:pointer}
.otc-tick:first-child{transform:translateX(-11px)}
.otc-tick:last-child{transform:translateX(calc(-100% + 11px))}
.otc-tick:hover{color:var(--ot-ink)}
.otc-tick[aria-current=true]{color:var(--ot-ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ot-accent);text-underline-offset:5px}
.otc-sim__desc{display:flex;align-items:center;min-height:56px;margin:10px 0 0;padding:0 0 0 16px;border-left:4px solid var(--ot-accent);font-size:20px;font-weight:800;line-height:1.3}

/* ═════════ phiếu in ═════════ */
.otc-tag{position:sticky;top:calc(var(--ot-header-h) + 24px);padding:26px 24px 24px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-ink);color:var(--ot-on-ink)}
.otc-tag__hole{position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border:var(--ot-bw) solid rgba(244,241,234,.5);border-radius:50%;background:var(--ot-bg)}
.otc-tag__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.otc-tag__top .ot-kicker{color:var(--ot-on-ink)}
.otc-tag__no{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.65);font-variant-numeric:tabular-nums}
.otc-swatch{position:relative;display:grid;place-items:center;aspect-ratio:5/4;margin:18px 0 0;padding:28px 22px 34px;border:var(--ot-bw) solid rgba(244,241,234,.3);border-radius:var(--ot-r-sm);background:var(--tee);color:var(--tee-ink);overflow:hidden;transition:background-color .25s var(--ot-ease)}
.otc-swatch__line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-width:100%;margin:0;overflow:hidden;font-family:var(--ot-display);font-size:40px;line-height:1;text-align:center;text-transform:uppercase;white-space:pre-line;overflow-wrap:anywhere;text-wrap:balance}
:lang(vi) .otc-swatch__line{line-height:1.3;padding-top:.16em;padding-bottom:.08em}
:lang(vi) .otc-h1{line-height:1.12}
/* tiêu đề có thể xuống dòng (câu khách / tên mẫu): dấu dòng dưới không chạm dấu nặng / chữ dòng trên */
:lang(vi) .otc-out__h,:lang(vi) .otc-picked__t{line-height:1.32}
/* chữ Việt IN HOA: dấu dòng 2 (Ì Ẽ…) không chạm dấu dưới / dấu phẩy dòng 1 (Ạ ,) — đo mực thật, ui-int/kiem.py */
:lang(vi) .otc-h1 em{margin-top:.22em}
.otc-swatch[data-size="2"] .otc-swatch__line{font-size:32px}
.otc-swatch[data-size="3"] .otc-swatch__line{font-size:25px}
.otc-swatch[data-size="4"] .otc-swatch__line{font-size:19px;-webkit-line-clamp:6}
.otc-swatch.is-empty .otc-swatch__line{opacity:.38}
.otc-swatch__cap{position:absolute;left:12px;bottom:9px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.otc-tag__rows{margin:14px 0 0;padding:0}
.otc-tag__rows div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:var(--ot-bw) solid rgba(244,241,234,.16)}
.otc-tag__rows dt{flex:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.6)}
.otc-tag__rows dd{min-width:0;margin:0;overflow:hidden;font-size:13px;font-weight:800;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.otc-colors{margin:16px 0 0;padding:0;border:0;min-width:0}
.otc-colors__lg{display:flex;align-items:baseline;justify-content:space-between;width:100%;margin:0 0 10px;padding:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.6)}
.otc-colors__lg b{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ot-on-ink)}
/* U1 14/11 (QM L4/P1/P2): số ô màu theo dữ liệu (8 ô × 40px + gap > bề rộng thẻ) → xuống dòng, không làm khung nhìn di động nở ngang */
.otc-colors__row{display:flex;flex-wrap:wrap;gap:10px}
.otc-color{position:relative;flex:none;width:40px;height:40px;border:var(--ot-bw) solid rgba(244,241,234,.55);border-radius:50%;background:var(--c);cursor:pointer;transition:transform .15s var(--ot-ease)}
.otc-color:hover{transform:scale(1.08)}
.otc-color__in:checked+.otc-color{box-shadow:0 0 0 3px var(--ot-ink),0 0 0 5px var(--ot-accent)}
.otc-color__in:focus-visible+.otc-color{outline:2px solid var(--ot-on-ink);outline-offset:6px}
.otc-ink{margin:10px 0 0;font-size:12px;line-height:1.45;color:rgba(244,241,234,.65)}
.otc-go{margin-top:20px}
.otc-go__msg{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border:var(--ot-bw) solid var(--ot-accent-2);border-left-width:6px;border-radius:var(--ot-r-sm);background:var(--ot-accent-bg);color:var(--ot-ink);font-size:13px;font-weight:700;line-height:1.45}
.otc-go__msg .ot-icon{margin-top:1px;color:var(--ot-accent-2)}
.otc-tag .otc-cta:hover{background:var(--ot-on-ink);border-color:var(--ot-on-ink);color:var(--ot-ink)}
.otc-tag .otc-cta{border-color:var(--ot-accent)}
.otc-cta__t{text-transform:none}
.otc-go__st{display:flex;align-items:center;gap:8px;min-height:20px;margin:12px 0 0;font-size:13px;font-weight:700;line-height:1.4;color:rgba(244,241,234,.8)}
.otc-go__dot{flex:none;width:8px;height:8px;background:var(--ot-accent)}
.otc-go__st.is-out .otc-go__dot{background:transparent;border:var(--ot-bw) solid currentColor}
.otc-go__retry{min-height:40px;margin:-10px 0 -10px auto;font-size:12px;color:inherit}

/* ═════════ BƯỚC B + C ═════════ */
.otc-out{padding:40px 0 32px}
.otc-out__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-bottom:22px;border-bottom:var(--ot-bw) solid var(--ot-ink)}
.otc-out__hl{min-width:0}
.otc-out__hl .ot-kicker{margin-bottom:14px}
.otc-out__h{font-size:clamp(52px,6.4vw,96px);line-height:.9}
.otc-out__h:focus,.otc-picked__t:focus{outline:none}
.otc-out__q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:14px 0 0;overflow:hidden;font-size:20px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.otc-out__pct{margin:0;font-family:var(--ot-display);font-size:clamp(64px,8vw,120px);line-height:.85;color:var(--ot-accent);font-variant-numeric:tabular-nums}
.otc-out__pct small{font-size:.42em;color:var(--ot-ink)}
.otc-out[data-state=results] .otc-out__pct,.otc-out[data-state=failed] .otc-out__pct{display:none}
.otc-prog{margin:22px 0 28px}
.otc-prog__bar{position:relative;height:14px;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r-sm);background:var(--ot-paper);overflow:hidden}
.otc-prog__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ot-accent);border-right:var(--ot-bw) solid var(--ot-ink);transition:width .6s var(--ot-ease)}
.otc-prog__fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(11,11,11,.14) 8px 16px);background-size:22.6px 22.6px;animation:otc-stripe .8s linear infinite}
@keyframes otc-stripe{to{background-position:22.6px 0}}
.otc-prog__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:12px}
.otc-prog__step{margin:0;font-size:16px;font-weight:800}
.otc-prog__n{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ot-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.otc-out[data-state=results] .otc-prog{display:none}
.otc-out[data-state=results] .otc-out__head{margin-bottom:28px}
.otc-fail{margin:24px 0}
.otc-fail__in{flex:1;min-width:0}
.otc-fail__t{margin:0 0 4px;font-size:16px;font-weight:800}
.otc-out[data-state=failed] .otc-fail__t{display:none}
.otc-fail__b{font-size:16px}
.otc-fail__b{margin:0 0 14px;color:var(--ot-ink)}
.otc-fail__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.otc-out[data-state=failed] .otc-cards,.otc-out[data-state=failed] .otc-dots,.otc-out[data-state=failed] .otc-prog{display:none}

/* thẻ phương án */
.otc-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.otc-cards.is-partial{grid-template-columns:repeat(var(--n),calc((100% - 64px) / 5));justify-content:center}
.otc-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.otc-card__print{margin-top:auto}
.otc-card__fig{position:relative;aspect-ratio:4/5;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--tee);color:var(--tee-ink);overflow:hidden;perspective:900px}
.otc-card__no{position:absolute;top:10px;left:12px;z-index:2;font-family:var(--ot-display);font-size:22px;line-height:1;opacity:.85;pointer-events:none}
.otc-card__sk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(127,127,127,.12) 10px 20px);background-size:28.28px 28.28px;animation:otc-stripe 1.2s linear infinite;opacity:.85}
.otc-card__sk .ot-spin{width:20px;height:20px}
.otc-card[data-state=ready] .otc-card__sk{display:none}
.otc-card__zoom{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:11% 10% 9%;border:0;background:none;cursor:zoom-in}
.otc-card__zoom[disabled]{cursor:default}
.otc-card__zoom img{width:100%;height:100%;object-fit:contain}
.otc-card.is-in .otc-card__zoom img{animation:otc-flip .55s var(--ot-ease) both}
@keyframes otc-flip{from{opacity:0;transform:rotateY(80deg) scale(.92)}to{opacity:1;transform:none}}
.otc-card__zoom:focus-visible{outline:2px solid var(--ot-accent);outline-offset:-5px}
.otc-card__peek{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:var(--ot-r-sm);background:var(--ot-ink);color:var(--ot-on-ink);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.otc-card[data-state=ready] .otc-card__zoom:hover .otc-card__peek,.otc-card[data-state=ready] .otc-card__zoom:focus-visible .otc-card__peek{opacity:1;transform:none}
@media (hover:none){.otc-card[data-state=ready] .otc-card__peek{opacity:1;transform:none}}
.otc-card__meta{display:flex;flex-direction:column;gap:3px;min-height:38px}
.otc-card__lbl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.otc-card__warn{display:flex;align-items:flex-start;gap:5px;font-size:12px;font-weight:700;line-height:1.3;color:var(--ot-accent-2)}
.otc-card__warn .ot-icon{margin-top:1px}
.otc-dots{display:none}
.otc-partial{margin:20px 0 0;font-size:14px;font-weight:700;color:var(--ot-muted)}
.otc-out__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px;padding-top:22px;border-top:var(--ot-bw) solid var(--ot-line-soft)}
.otc-out__hint{margin:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
/* F3: hai nút cùng hàng cùng cao (MAKE 5 MORE 48px ↔ Change my line) */
.otc-out__foot .ot-textbtn{min-height:var(--ot-h)}
/* F3: "Style picked from your idea: …" (bê khuôn .otc-snote) */
.otc-out__sm{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ot-ink)}
.otc-out__sm::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;background:var(--ot-accent)}

/* hộp xem trên áo */
.otc-zoom{position:relative;width:min(100%,calc(100vh - 250px));aspect-ratio:1/1;margin:0 auto;border:var(--ot-bw) solid var(--ot-ink);border-radius:var(--ot-r);background:var(--ot-paper);overflow:hidden}
.otc-zoom img{position:relative;width:100%;height:100%;object-fit:cover}
.otc-zoom__wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ot-muted)}
.otc-zoom.is-ok .otc-zoom__wait{display:none}
.otc-zoom.is-err .otc-zoom__wait .ot-spin{display:none}
.otc-zoom__cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:14px;font-weight:700}
.otc-zoom__cap span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otc-zoom__warn{color:var(--ot-accent-2)}

/* hộp hết lượt thử */
.otc-gate__list{margin:4px 0 8px;padding:0;list-style:none;border-top:var(--ot-bw) solid var(--ot-line-soft)}
.otc-gate__list li{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:var(--ot-bw) solid var(--ot-line-soft);font-size:15px;font-weight:700}
.otc-gate__list b{flex:none;width:28px;font-family:var(--ot-display);font-size:20px;font-weight:400;color:var(--ot-accent)}

/* vùng chọn áo (G2) */
.otc-shop{min-height:60vh}

/* ═════════ iPad / màn hẹp (<1024): một cột, nút chính dính đáy ═════════ */
@media (max-width:1023px){
  /* FX 13/11: cuộn tới phần tử (Tab, scrollIntoView) chừa chỗ cho nút chính dính đáy + dải menu — không bị che */
  html{scroll-padding-bottom:calc(140px + var(--ot-dock-h) + var(--ot-safe-b))}
  .otc-studio{padding:32px 0 32px}
  .otc-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .otc-tpls{grid-template-columns:repeat(4,minmax(0,1fr))}
  .otc-tag{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .otc-tag__top{grid-column:1/-1}
  .otc-tag .otc-swatch{grid-row:2/span 3}
  .otc-tag__rows{margin-top:18px}
  .otc-go{position:fixed;left:0;right:0;bottom:calc(var(--ot-dock-h) + var(--ot-safe-b));z-index:var(--ot-z-header);margin:0;padding:12px var(--ot-gutter);background:var(--ot-bg);border-top:var(--ot-bw) solid var(--ot-ink);color:var(--ot-ink)}
  .otc-go__in{display:flex;flex-direction:row-reverse;align-items:center;gap:20px;max-width:var(--ot-container);margin:0 auto}
  .otc-go__in .otc-cta{flex:0 0 340px;width:340px}
  .otc-go__st{flex:1;min-width:0;margin:0;color:var(--ot-ink)}
  .otc-go__msg{max-width:var(--ot-container);margin:0 auto 10px}
  .otc-tag .otc-cta{border-color:var(--ot-ink)}
  .otc-tag .otc-cta:hover{background:var(--ot-ink);border-color:var(--ot-ink);color:var(--ot-on-ink)}
  .otc-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px}
  .otc-card{grid-column:span 2}
  .otc-cards:not(.is-partial) .otc-card:nth-child(4){grid-column:2/span 2}
  .otc-cards.is-partial{grid-template-columns:repeat(6,minmax(0,1fr))}
  .otc-cards.is-partial .otc-card:nth-child(4):last-child{grid-column:3/span 2}
  .otc-out__head{grid-template-columns:minmax(0,1fr) auto}
}

/* ═════════ điện thoại (≤743, có dải menu đáy) ═════════ */
@media (max-width:743px){
  .otc-studio{padding:22px 0 32px}
  .otc-hero{margin-bottom:22px}
  .otc-hero .ot-kicker{margin-bottom:12px}
  .otc-h1{font-size:60px}
  :lang(vi) .otc-h1{font-size:54px}
  .otc-lede{margin-top:14px;font-size:15px}
  .otc-tabs{gap:0}
  .otc-tab{flex:1 1 0;justify-content:center;height:52px;padding:0 4px;font-size:12px;letter-spacing:.06em}
  .otc-tab b{display:none}
  .otc-panel{padding-top:22px}
  .otc-line__in{height:140px;padding:14px 16px 36px;font-size:22px}
  .otc-sugs{flex-wrap:nowrap;margin:14px calc(-1 * var(--ot-gutter)) 0;padding:0 var(--ot-gutter);overflow-x:auto;scrollbar-width:none}
  .otc-sugs::-webkit-scrollbar{display:none}
  .otc-sug{flex:none}
  .otc-sec{margin-top:28px}
  .otc-styles{display:flex;gap:10px;margin:0 calc(-1 * var(--ot-gutter));padding:0 var(--ot-gutter) 4px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--ot-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .otc-styles::-webkit-scrollbar{display:none}
  .otc-styles .otc-style{flex:0 0 104px;scroll-snap-align:start}
  .otc-style__ph{font-size:17px}
  .otc-style__more{font-size:20px}
  .ot-modal__panel.otc-smodal{height:calc(100vh - 56px);max-height:calc(100vh - 56px)}
  .otc-sbox__f{scrollbar-width:none}
  .otc-sbox__f::-webkit-scrollbar{display:none}
  .otc-sbox__fl{min-width:0}
  .otc-sbox__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .otc-style__n{min-height:44px;padding:6px;font-size:12px;letter-spacing:.02em}
  .otc-hint__in.otc-line__in{height:84px;padding:12px 14px 26px;font-size:16px}
  .otc-style__q{font-size:56px}
  .otc-themes{flex-wrap:nowrap;margin:0 calc(-1 * var(--ot-gutter));padding:0 var(--ot-gutter);overflow-x:auto;scrollbar-width:none}
  .otc-themes::-webkit-scrollbar{display:none}
  .otc-chip{flex:none}
  .otc-tpls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .otc-picked{grid-template-columns:minmax(0,1fr);gap:16px}
  .otc-picked__side{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:end;gap:14px}
  .otc-picked__t{font-size:34px}
  .otc-sim__desc{min-height:52px;font-size:17px}
  .otc-tag{display:block;padding:22px 18px 20px}
  .otc-swatch{aspect-ratio:16/10}
  .otc-go{padding:10px var(--ot-gutter) 12px}
  .otc-go__in{flex-direction:column;align-items:stretch;gap:8px}
  .otc-go__in .otc-cta{flex:none;width:100%}
  .otc-go__st{order:2;justify-content:center;font-size:12px}
  .otc-out{padding:24px 0 32px}
  .otc-out__head{gap:12px}
  .otc-out__h{font-size:48px}
  .otc-out__q{font-size:16px}
  .otc-out__pct{font-size:56px}
  .otc-cards,.otc-cards.is-partial{display:flex;gap:12px;margin:0 calc(-1 * var(--ot-gutter));padding:0 var(--ot-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--ot-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .otc-cards::-webkit-scrollbar{display:none}
  .otc-card,.otc-cards:not(.is-partial) .otc-card:nth-child(4){flex:0 0 76%;scroll-snap-align:center}
  .otc-cards.is-partial .otc-card:only-child{flex-basis:100%}
  .otc-dots{display:flex;justify-content:center;gap:2px;margin-top:10px}
  .otc-dot{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;background:none;cursor:pointer}
  .otc-dot::before{content:"";width:8px;height:8px;border:var(--ot-bw) solid var(--ot-ink);background:transparent;transition:width .2s var(--ot-ease),background-color .2s}
  .otc-dot[aria-current=true]::before{width:22px;background:var(--ot-accent)}
  .otc-out__foot{flex-direction:column;align-items:stretch}
  .otc-out__foot .ot-btn{width:100%}
  .otc-out__foot .ot-textbtn{justify-content:center}
  .otc-out__foot--press{align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.otc-card.is-in .otc-card__zoom img{animation:none}.otc-prog__fill::after,.otc-card__sk{animation:none}}

/* ── U2 13/11: chữ dài ở /create không tràn ngang (mọi ngữ trừ en/vi — en/vi giữ nguyên luật F3 + số đo cũ) ──
   Tên phong cách một từ dài (de/fi/ru…): ngắt có gạch nối theo html[lang] (bí quá mới bẻ giữa chữ), tối đa 2 dòng trong vùng nhãn
   44px → ô không đổi cỡ, hàng không nhảy. Ngữ có từ dài: chữ nhãn 11px (không nhỏ hơn). */
/* gạch nối chỉ cho từ ≥ 10 chữ (từ ngắn vừa dòng thì xuống nguyên từ, không "ДРЕВ-НИЙ") */
html:not([lang=en]):not([lang=vi]) .otc-style .otc-style__name{min-width:0;max-width:100%;overflow-wrap:anywhere;hyphens:auto;hyphenate-limit-chars:10 4 4}
html:not([lang=en]):not([lang=vi]) .otc-style .otc-style__ph{overflow-wrap:anywhere;hyphens:auto;hyphenate-limit-chars:10 4 4}
html:is([lang=de],[lang=fi],[lang=hu],[lang=pl],[lang=nl],[lang=sv],[lang=da],[lang=nb],[lang=et],[lang=lt],[lang=lv],[lang=cs],[lang=sk],[lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-style .otc-style__n{font-size:11px;letter-spacing:.01em}
html:is([lang=de],[lang=fi],[lang=hu],[lang=pl],[lang=nl],[lang=sv],[lang=da],[lang=nb],[lang=et],[lang=lt],[lang=lv],[lang=cs],[lang=sk],[lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-style .otc-style__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Kirin + Hy Lạp (Noto 800, rộng hơn Anton): tiêu đề /create co theo bề ngang chính nó (cqi, trần = cỡ gốc 1em), chữ trong ô
   phong cách / "+N nữa" nhỏ một nấc */
html:not([lang=en]):not([lang=vi]) .otc-h1 :is(span,em){overflow-wrap:anywhere;hyphens:auto}
html:is([lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-h1{container-type:inline-size}
html:is([lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-h1 :is(span,em){font-size:min(1em,12cqi)}
html:is([lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-style__ph{font-size:15px}
html:is([lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-style__more{font-size:23px}
@media (max-width:743px){html:is([lang=ru],[lang=uk],[lang=bg],[lang=sr],[lang=kk],[lang=mn],[lang=el]) .otc-style__more{font-size:17px}}