/* ══ site-j26-duoi.css — BẢN 12.0.0: phần DƯỚI NẾP GẤP của giao diện "Joyce 2026" ══
   Nạp bằng <link rel="stylesheet"> đặt trong <body> ngay sau khối mở đầu Trang chủ (page.php):
     · 0 byte vào trần 102.400 B HTML Trang chủ (chỉ ~90 B cho thẻ link);
     · trình duyệt vẽ màn đầu NGAY (CSS màn đầu đã nhúng), chỉ phần đứng SAU thẻ link chờ file này;
     · LUÔN nạp — kể cả giảm chuyển động / Chuyển động tắt / khung xem trước CMS. Đây là HÌNH, không phải
       hoạt cảnh (bẫy #188): hoạt cảnh vẫn ở site-hieu-ung.css.
   Trang con (/dich-vu, /ve-joyce…) NHÚNG luôn file này (không có trần byte ở trang con, đỡ một lượt mạng).
   ⚠ Mọi luật bắt đầu bằng .j26 ⇒ file có lỡ được nạp ở giao diện khác cũng không khớp gì. */

/* 12.0.6 — chữ chỉ cho trình đọc màn hình (dời từ site-j26.css: chỉ dùng dưới nếp gấp) */
.j26 .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
/* ══ 12.0.6 — HÌNH CỦA CHUYỂN TRANG (View Transitions; bật ở site-j26.css) ══
   Phần tử giả ::view-transition-* nằm ở TRANG MỚI ⇒ luật lấy từ CSS trang mới (trang con nhúng file này; Trang chủ là
   <link> — chưa tải kịp thì trình duyệt mờ chéo mặc định). Không mở đầu bằng .j26 được (phần tử giả gắn vào <html>), nhưng
   file này chỉ có ở Joyce 2026 ⇒ hai giao diện kia không có luật nào.
   · Gốc: trang cũ mờ đi nhanh, trang mới hiện lên — KHÔNG dời gốc (thanh menu cố định nằm trong ảnh gốc: dời là menu nhảy).
   · H1 trang con (j-h1): trượt từ chỗ H1 cũ tới chỗ H1 mới, chữ giữ cỡ thật (không méo), cũ mờ đi / mới hiện lên; đi từ
     Trang chủ (không có H1 cũ — :only-child) thì H1 mới trồi lên 48px. (12.0.6 vòng 2 — sua_G_1206.)
   · Ảnh: thẻ dự án được bấm (site.js gắn j-anh lúc pageswap) bay thành ảnh lớn trang chi tiết; ảnh cắt cover, không méo.
   Chỉ transform / opacity. Trình duyệt chưa hỗ trợ ⇒ không luật nào có tác dụng. */
::view-transition-old(root){animation:.3s cubic-bezier(.4,0,1,1) both jVtRa}
::view-transition-new(root){animation:.55s cubic-bezier(.16,1,.3,1) .05s both jVtVao}
@keyframes jVtRa{to{opacity:0}}
@keyframes jVtVao{from{opacity:0}}
@keyframes jVtLen{from{opacity:0;transform:translateY(48px)}}
.j26 .phead h1,.j26 .j-ct h1{view-transition-name:j-h1}
::view-transition-group(j-h1){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(j-h1),::view-transition-new(j-h1){height:100%;object-fit:none;object-position:0 0}
::view-transition-old(j-h1){animation:.25s ease-out both jVtRa}
::view-transition-new(j-h1){animation:.45s ease-out .1s both jVtVao}
::view-transition-new(j-h1):only-child{animation:.8s cubic-bezier(.16,1,.3,1) .12s both jVtLen}
.j26 .j-ct-anh{view-transition-name:j-anh}
::view-transition-group(j-anh){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(j-anh),::view-transition-new(j-anh){height:100%;object-fit:cover}

/* ---------- đầu khối: nhãn + tiêu đề trái, nút / liên kết phải ---------- */
.j26 .j-dau{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:40px}
.j26 .j-dau h2{margin:0}
.j26 .j-tatca{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--display);font-weight:600;color:var(--flame)}
.j26 .j-tatca:hover{color:var(--ember)}
.j26 .j-dv,.j26 .j-da{padding-top:clamp(72px,8.3vw,120px);padding-bottom:0}

/* ---------- DỊCH VỤ: hai khối nhãn ---------- */
.j26 .j-mang{display:grid;gap:clamp(40px,4.5vw,64px)}
@media(min-width:900px){.j26 .j-mang{grid-template-columns:repeat(2,minmax(0,1fr))}}
.j26 .j-mo{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:24px;padding-bottom:8px}
/* vạch ngang 10px sau tên mảng + lưới caro góc phải — trang trí, không chữ */
.j26 .j-mo::before{content:"";position:absolute;left:0;right:0;top:40px;height:10px;background:var(--mau)}
.j26 .j-mo::after{content:"";position:absolute;right:0;top:110px;width:308px;max-width:46%;height:196px;
  background-image:linear-gradient(var(--luoi) 1px,transparent 1px),linear-gradient(90deg,var(--luoi) 1px,transparent 1px);
  background-size:28px 28px;border-right:1px solid var(--luoi);border-bottom:1px solid var(--luoi)}
.j26 .j-mo--1{--mau:var(--flame);--chu:#FFF;--luoi:rgba(239,65,38,.6)}
.j26 .j-mo--2{--mau:var(--paper);--chu:var(--ink);--luoi:rgba(245,245,245,.35)}
.j26 .j-mo-dau{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.j26 .j-mo h3{margin:0;display:inline-block;padding:14px 26px;background:var(--mau);color:var(--chu);text-transform:uppercase;
  font-weight:800;line-height:1;letter-spacing:.01em;font-size:calc((clamp(24px,3.35vw,48px)) * var(--fs-scale-d));max-width:100%;overflow-wrap:anywhere}
.j26 .j-so{font-family:var(--display);font-variation-settings:"wdth" 112.5;font-weight:700;font-size:15px;color:var(--dim);padding-top:4px}
.j26 .j-chip{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:200px}
/* chip: chữ 20px nét 700 trên cam ⇒ chữ lớn theo WCAG (≥ 18,66px đậm) ⇒ 3,85:1 đạt AA.
   ⚠ sàn 19px: Cỡ chữ 70% (CMS) cho 14px — hết là chữ lớn. */
.j26 .j-chip li{display:inline-block;padding:8px 16px;background:var(--mau);color:var(--chu);font-family:var(--display);
  font-size:max(19px,calc(20px * var(--fs-scale)));font-weight:700;line-height:1.2}
@media(min-width:1100px){
  .j26 .j-chip li:nth-child(4n+1){margin-left:176px}.j26 .j-chip li:nth-child(4n+2){margin-left:56px}
  .j26 .j-chip li:nth-child(4n+3){margin-left:232px}.j26 .j-chip li:nth-child(4n){margin-left:96px}
}
@media(max-width:1099px){.j26 .j-chip{flex-direction:row;flex-wrap:wrap;min-height:0}.j26 .j-mo::after{display:none}}

/* ---------- DỰ ÁN: lưới 3fr 2fr, rồi 3 cột ---------- */
.j26 .j-luoi{display:grid;gap:16px;margin-top:16px}
.j26 .j-dau+.j-luoi{margin-top:0}
@media(min-width:760px){.j26 .j-luoi--2{grid-template-columns:3fr 2fr}.j26 .j-luoi--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.j26 .j-the{display:flex;flex-direction:column;gap:14px;color:var(--paper)}
.j26 .j-anh{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sf);aspect-ratio:16/10}
.j26 .j-luoi--2 .j-anh{aspect-ratio:auto;height:clamp(220px,27.8vw,400px)}
.j26 .j-luoi--3 .j-anh{aspect-ratio:auto;height:clamp(200px,18vw,260px)}
.j26 .j-anh img,.j26 .j-anh picture{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--quint)}
.j26 a.j-the:hover .j-anh img{transform:scale(1.03)}
.j26 .j-the--trong .j-anh{display:flex;align-items:flex-end;padding:20px;border:1px solid var(--line)}
.j26 .j-the--trong .j-anh span{font-family:var(--display);font-variation-settings:"wdth" 112.5;font-weight:700;font-size:28px;color:var(--dim)}
.j26 .j-meta{margin:0;font-size:14px;font-weight:500;color:var(--ash)}
.j26 .j-the h3{margin:0;font-size:calc((clamp(18px,1.7vw,24px)) * var(--fs-scale-d));line-height:1.3;font-weight:700}
.j26 .j-luoi--3 .j-the h3{font-size:calc((clamp(17px,1.4vw,20px)) * var(--fs-scale-d))}
/* 390 px: thẻ đầu giữ ảnh lớn, bốn thẻ sau thành danh sách gọn (ảnh 96 px + tên) — trang ngắn lại, đọc nhanh. */
@media(max-width:759px){
  .j26 .j-luoi--2 .j-the+.j-the,.j26 .j-luoi--3 .j-the{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:center}
  .j26 .j-luoi--2 .j-the+.j-the .j-anh,.j26 .j-luoi--3 .j-anh{grid-row:1 / span 2;height:72px;aspect-ratio:auto}
  .j26 .j-luoi--2 .j-the+.j-the .j-anh span,.j26 .j-luoi--3 .j-anh span{display:none}
  .j26 .j-luoi--2 .j-the+.j-the h3,.j26 .j-luoi--3 .j-the h3{font-size:16px;align-self:start}
  .j26 .j-luoi--2 .j-the+.j-the .j-meta,.j26 .j-luoi--3 .j-meta{align-self:end;font-size:13px}
}

/* ---------- DẢI CAM (khách hàng · khối tự do "dải cam") — tối đa 2 dải mỗi trang (anh chốt 22/10) ---------- */
.j26 .j-kh{margin-top:clamp(72px,8.3vw,120px);background:var(--flame);color:#FFF;padding:44px 0 48px}
.j26 .j-kh h2{color:#FFF;margin:0 var(--pad) 28px;font-size:calc(32px * var(--fs-scale-d));letter-spacing:.04em;line-height:1.1}
.j26 .j-chay{border:0;padding:8px 0;margin:0 var(--pad);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent)}
.j26 .j-chay .track{animation-duration:80s}
/* tên khách trắng trên cam 3,85:1 ⇒ PHẢI là chữ lớn WCAG: ≥ 18,66px ĐẬM (nét ≥ 700 — 600 không tính là đậm).
   ⚠ 12.0.0 (Lighthouse bản sạch): nét 600 ở 18–23px trượt 4,5:1. Sàn 19px bằng max() — kể cả khi kéo Cỡ chữ 70%. */
.j26 .j-chay .cli{font-family:var(--display);font-variation-settings:"wdth" 112.5;font-size:max(19px,calc((clamp(19px,1.7vw,24px)) * var(--fs-scale-d)));
  font-weight:700;text-transform:none;color:#FFF;padding:0 56px 0 0}
.j26 .j-chay .cli::after{display:none}
.j26 .j-chay .cli:hover{color:var(--ink)}
.j26 .tudo--dai-cam{margin-top:clamp(72px,8.3vw,120px);padding:clamp(64px,7.8vw,112px) var(--pad);background:var(--flame);color:var(--ink)}
.j26 .tudo--dai-cam .tudo-in{display:block}
.j26 .tudo--dai-cam .tudo-txt{max-width:1100px;margin:0 auto;text-align:center}
.j26 .tudo--dai-cam .eyebrow{color:var(--ink);justify-content:center}
/* câu lớn: chữ TRẮNG ≥ 24px (chữ lớn, 3,85:1); chữ nhỏ (nhãn, đoạn) ĐEN #010001 (5,44:1) — G4 */
.j26 .tudo--dai-cam h2{color:#FFF;text-transform:none;font-weight:400;line-height:1.12;margin:0;
  font-size:max(24px,calc((clamp(26px,3.05vw,44px)) * var(--fs-scale-d)))}
.j26 .tudo--dai-cam h2 b{font-weight:700;font-style:italic}
.j26 .tudo--dai-cam .tudo-van p{color:var(--ink);margin-left:auto;margin-right:auto}
.j26 .tudo--dai-cam .more{color:var(--ink)}
.j26 .tudo h2 b,.j26 .j-dau h2 b,.j26 .phead h1 b{color:var(--flame);font-weight:inherit}
.j26 .tudo--dai-cam h2 b{color:#FFF}

/* ---------- LIÊN HỆ: thẻ tối bo 24 ---------- */
.j26 #contact{background:none;color:var(--paper);padding-top:clamp(72px,8.3vw,120px);padding-bottom:0}
.j26 #contact h2{color:var(--paper);margin:0 0 18px;font-size:calc((clamp(30px,3.35vw,48px)) * var(--fs-scale-d))}
.j26 #contact p,.j26 #contact .lede{color:var(--ash)}
.j26 #contact .eyebrow{color:var(--flame)}
.j26 .j-lh-the{background:var(--sf);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4.4vw,64px);display:flex;flex-direction:column;gap:clamp(28px,3.3vw,48px)}
.j26 .j-lh-tren{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.j26 .j-lh-tren>div{max-width:720px}
.j26 .j-lh-tren .lede{margin:0}
.j26 .j-lh-cot{display:grid;gap:24px 32px;margin:0;border-top:1px solid var(--line);padding-top:32px}
@media(min-width:820px){.j26 .j-lh-cot{grid-template-columns:repeat(3,minmax(0,1fr))}}
.j26 .j-lh-cot dt{font-size:13px;font-weight:600;color:var(--ash);margin-bottom:6px}
.j26 .j-lh-cot dd{margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ash)}
.j26 .j-lh-cot b{font-size:20px;font-weight:700;color:var(--paper)}
.j26 .j-lh-cot a{color:var(--flame);min-height:24px}
.j26 .j-lh-cot a b{color:var(--paper)}
@media(max-width:560px){.j26 .j-lh-tren .btn{flex:1 1 100%}}

/* ---------- chân trang: logo · pháp nhân · mạng xã hội ---------- */
.j26 .j-ft{margin-top:clamp(72px,8.3vw,120px);padding:48px var(--pad);border-top:1px solid var(--line);font-family:var(--display);letter-spacing:0;text-transform:none;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px;font-size:13px;line-height:1.6;color:var(--ash)}
.j26 .j-ft-logo img{display:block;height:28px;width:auto}
.j26 .j-ft-phap{flex:1 1 360px;text-align:center}
.j26 .j-ft-phap span+span::before{content:" · "}
.j26 .j-ft-mxh{display:flex;gap:10px}
.j26 .j-ft-mxh a{width:44px;height:44px;border-radius:50%;border:1px solid #404040;display:inline-flex;align-items:center;justify-content:center;color:var(--paper)}
.j26 .j-ft-mxh a:hover{border-color:var(--flame);color:var(--flame)}
.j26 .j-ft-mxh a::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.j26 .x-facebook{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3c-2.8 0-4.5 1.8-4.5 4.6V11H7v4h2.5v9h4v-9h3l.5-4h-3.5V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E")}
.j26 .x-instagram{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E")}
.j26 .x-youtube{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 8.2a3 3 0 00-2.1-2.1C18 5.6 12 5.6 12 5.6s-6 0-7.9.5A3 3 0 002 8.2 31 31 0 001.6 12a31 31 0 00.4 3.8 3 3 0 002.1 2.1c1.9.5 7.9.5 7.9.5s6 0 7.9-.5a3 3 0 002.1-2.1 31 31 0 00.4-3.8 31 31 0 00-.4-3.8zM10 15V9l5.2 3z'/%3E%3C/svg%3E")}
.j26 .x-linkedin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4v12H4zM6 3a2 2 0 110 4 2 2 0 010-4zM10 9h3.8v1.7c.6-1 1.9-2 3.9-2 4 0 4.3 2.6 4.3 6V21h-4v-5.4c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4z'/%3E%3C/svg%3E")}
.j26 .x-tiktok{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 3c.4 2.2 1.7 3.6 3.9 3.8v3.3c-1.4.1-2.7-.3-3.9-1v6.2c0 3.7-3 6.2-6.4 5.6-2.7-.5-4.6-3-4.3-5.8.3-3 3-5.1 6-4.6v3.4c-1.3-.4-2.8.3-3 1.7-.3 1.5.9 2.8 2.4 2.7 1.3 0 2.2-1.1 2.2-2.4V3z'/%3E%3C/svg%3E")}
@media(max-width:759px){.j26 .j-ft{flex-direction:column;text-align:center}}

/* ---------- Thước phim + khối tự do kiểu cũ trên nền đen phẳng ---------- */
.j26 .tudo h2{font-variation-settings:"wdth" 112.5;font-weight:700;text-transform:none}
.j26 .tudo-anh{border-color:var(--line);border-radius:var(--r)}

/* BẢN 12.1.0 — viền tiêu điểm nút VI/EN (rà demo 25/10: đi bằng Tab tới VI/EN không thấy viền). Viền chung :focus-visible
   (site.css: 2px cam lệch RA NGOÀI 3px) bị .lang{overflow:hidden} cắt mất ⇒ vẽ VÀO TRONG nút; nút đang chọn nền cam ⇒ viền
   màu chữ của nút. Mỗi giao diện một bản trong file của riêng nó (byte HTML Trang chủ) — xem sua_W_1210.py. */
.j26 .lang a:focus-visible{outline-offset:-3px;border-radius:999px}
.j26 .lang a[aria-current="true"]:focus-visible{outline-color:currentColor}