/* lien-he.css — TRANG LIÊN HỆ. Dùng chung biến bien.css. */

.phan{padding:var(--nhip) 0}
/* Section nhấn = VẢI HỒNG linen + may mí cam (hệ vải trang chủ) */
.phan.nen{
  position:relative;
  background-color:#F2E2D6;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n6'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n6)'%20opacity='0.19'/%3E%3C/svg%3E"),
    repeating-linear-gradient(63deg,rgba(155,105,85,.06) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,251,247,.55),transparent 55%),
    radial-gradient(150% 110% at 50% 118%,rgba(130,85,65,.12),transparent 58%);
  background-blend-mode:soft-light,normal,normal,normal}
.phan.nen::before{
  content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
  background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.nen::before{left:16px;right:16px}}
h2{font-family:var(--font-tieu-de);font-size:clamp(22px,3.1vw,32px);font-weight:600;line-height:1.28;display:flex;align-items:baseline;gap:12px}
/* ══ Ô SỐ — CHỮ SỐ CAO ĐÚNG BẰNG CHỮ HOA (sửa lần 2, 19/08/2026) ═══════════
   Lần 1 em hiểu hụt: chỉ làm HỘP cao 24px bằng chữ hoa, còn CHỮ SỐ giữ nguyên
   .44em nên chỉ cao 11px — bằng 46% chữ hoa. Hộp to ra mà bên trong toàn
   khoảng trống, mắt bám vào CHỮ SỐ chứ không bám vào đường viền, nên anh Hưng
   xem vẫn thấy y như cũ. Lần này phóng chính chữ số.

   ĐO PHÔNG CHỮ SỐ (Montserrat) — tỉ lệ mực khác hẳn phông tiêu đề:
     Montserrat        mực chữ số = 0,720 × cỡ chữ
     Playfair Display  mực chữ hoa = 0,727 × cỡ chữ
   Muốn chữ số cao bằng chữ hoa:  0,727 / 0,720 = 1,01em của tiêu đề.
   Đúng vậy — cỡ chữ số gần bằng cỡ chữ tiêu đề, dù nhìn thì nhỏ hơn nhiều.
   Đây là lý do đoán bằng mắt luôn sai: hai phông có tỉ lệ mực khác nhau.

   ĐO LẠI SAU KHI SỬA (tiêu đề 33px):
     chữ hoa H      24,0px
     chữ số 03      24,0px   = 100% chữ hoa      (cũ 11,0px = 46%)
     hộp            34 × 60px                    (cũ 24 × 40px)

   letter-spacing .16em → .07em: khoảng cách chữ tính theo em nên khi phóng
   cỡ chữ lên 2,3 lần thì khe giữa "0" và "3" cũng giãn từ 2,3px lên 5,3px,
   nhìn rời rạc. .07em giữ lại đúng khe 2,3px như bản cũ.

   padding đổi từ 9px sang .27em: để lề trong co giãn theo cỡ chữ, không bị
   bóp lại khi tiêu đề nhỏ đi trên điện thoại.

   top .16em: hộp nay CAO HƠN chữ hoa (34 so với 24) nên căn theo TÂM — tâm
   hộp trùng tâm chữ hoa. Đo được cần dịch xuống 5,34px = 0,16em.

   ĐÃ BỎ luật đổi cỡ ở khổ ≤760px của khoa-hoc.css: luật đó ép về .5em, tức
   là kéo ngược ô số về nhỏ đúng như cũ. Nay mọi thứ tính bằng em nên tiêu đề
   co xuống 21px thì ô số tự co theo đúng tỉ lệ, không cần luật riêng.

   position/top thay vì margin hay transform: KHÔNG đụng bố cục và KHÔNG đụng
   hiệu ứng hiện (hiệu ứng đó dùng scale/rotate riêng).
   inline-flex + align-items:center để chữ số nằm giữa hộp; cố ý KHÔNG khai
   justify-content để chữ chảy tự nhiên như bản gốc. */
h2 .so{font-family:var(--font-noi-dung);font-size:.9em;letter-spacing:.07em;color:var(--cam-tram);font-weight:700;flex:none;
  height:1.2em;line-height:1;padding:0 .36em;display:inline-flex;align-items:center;
  position:relative;top:.14em;
  border:1.2px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.07);transform:rotate(-2deg)}

/* HERO */
.bia-blog{position:relative;min-height:clamp(380px,54vh,480px);display:grid;align-items:end;background:var(--nau-am);color:#fff;overflow:hidden;isolation:isolate}
@media(min-width:761px){.bia-blog{min-height:var(--bia-vua-man)}}  /* PC: nâng bìa lên 500px (giữ nguyên mobile) */
.bia-blog .khung{padding-bottom:24px}
.bia-blog .bia-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.82) contrast(1.02);z-index:-2}
.bia-blog::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(31,28,25,.9),rgba(31,28,25,.66) 20%,rgba(31,28,25,.3) 42%,transparent 62%)}
.bia-blog .khung{position:relative;padding:0 22px 18px;text-align:center}
section.bia-blog h1{font-size:clamp(26px,5.4vw,44px)}  /* đồng bộ cỡ tiêu đề bìa với các tab khác */
.bia-blog .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--chu-phu-toi);font-weight:500;margin-bottom:14px}
.bia-blog .gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
.bia-blog h1{text-wrap:balance;font-family:var(--font-bia);font-weight:600;text-transform:uppercase;letter-spacing:.01em;color:#fff;font-size:clamp(25px,4.7vw,43px);line-height:1.14;max-width:21em;margin:0 auto}
/* Câu dẫn dưới tiêu đề bìa: chia đều hai dòng thay vì nhồi đầy dòng trên rồi
   quăng phần thừa xuống. Đo thấy trước khi sửa:
     "…thành phẩm / tại Luvinus."      dòng dưới còn 2 chữ
     "…sự kiện tại / Luvinus."          dòng dưới còn 1 chữ
   balance chia đều số chữ nên chỗ ngắt rơi vào khe tự nhiên giữa hai cụm. */
/* ══ CÂU DẪN BÌA: MỘT DÒNG TRÊN PC (sửa 19/08/2026) ════════════════════════
   Anh Hưng: hai dòng nhìn cụt xấu, muốn xuống dòng hợp lý.

   VÌ SAO KHÔNG CHIA ĐÔI CHO ĐỀU ĐƯỢC: câu này gồm BA VẾ ngăn bằng dấu ·
       "Không khí lớp học cắt may"   25 ký tự
       "học viên thực hành"          18
       "thành phẩm tại Luvinus."     23
   Cắt ở vế 1 → 25/47. Cắt ở vế 2 → 45/23. Không mối nối nào cho hai dòng
   bằng nhau. Muốn đều thì phải cắt GIỮA một vế ("học viên / thực hành") —
   chữ đều nhưng ý bị đứt, đọc ra càng cụt.

   Nên bỏ hẳn chuyện hai dòng: để nguyên MỘT dòng trên máy tính. Đo được câu
   cần 571px mà chỗ chặn cũ 48ch chỉ cho 493px — thiếu 78px, ép nó xuống dòng
   một cách vô cớ. Nới lên 38em (589px ở cỡ 15,5px) là vừa đủ, còn dư 18px.

   Trên điện thoại 38em vượt bề ngang màn nên khung mẹ chặn lại, câu tự xuống
   dòng như thường — vẫn có text-wrap:balance và dấu · đã buộc nên chia gọn. */
.bia-blog .phu{text-wrap:balance;color:var(--chu-phu-toi);font-size:clamp(13px,1.6vw,15.5px);margin:14px auto 0;max-width:38em;line-height:1.6}
.bia-tin{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.bia-tin span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--kem);background:rgba(255,255,255,.07);border:1px solid rgba(245,168,126,.2);border-radius:999px;padding:7px 15px}
.bia-tin svg{width:15px;height:15px;flex:none;color:var(--cam-sang)}
.chi-khau{display:flex;justify-content:center;margin-bottom:14px}
.chi-khau svg{width:42px;height:42px;color:var(--cam-sang)}

/* 4 Ô LIÊN HỆ (đè lên hero) */
.lh-tt{margin-top:-36px;position:relative;z-index:5}
.lh-box{display:grid;grid-template-columns:repeat(4,1fr);background:var(--trang);border:1px solid var(--vien);border-radius:14px;overflow:hidden;box-shadow:var(--bong)}
.lh-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 18px;text-decoration:none;transition:.18s}
.lh-item + .lh-item{border-left:1px solid var(--vien)}
.lh-item::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc,var(--cta));transform:scaleX(0);transition:.2s}
.lh-item:hover::before{transform:scaleX(1)}
.lh-item:hover{background:color-mix(in srgb,var(--acc,var(--cta)) 7%,#fff)}
/* Chip icon = CHẤT LIỆU DA: vân hạt da + ánh sáng trên + chỉ khâu viền — giữ nguyên màu từng chip (--acc) */
.lh-item .ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;transition:.2s;
  background-color:var(--acc,var(--cta));
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23d)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 45%,rgba(0,0,0,.18));
  background-blend-mode:soft-light,normal;
  box-shadow:0 2px 7px rgba(58,46,34,.22),inset 0 1px 0 rgba(255,255,255,.28);
  outline:1px dashed rgba(255,244,224,.6);outline-offset:-3.5px}
.lh-item:hover .ic{transform:scale(1.08) rotate(-4deg)}
.lh-item .ic svg{width:24px;height:24px}
.lh-item .nhan-tt{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--chu-phu)}
.lh-item .gt{display:block;font-size:15px;font-weight:700;color:var(--chu-chinh);margin-top:4px}
.lh-item .gt small{display:block;font-weight:500;font-size:12.5px;color:var(--chu-phu);margin-top:3px}
@media(max-width:900px){.lh-box{grid-template-columns:1fr 1fr}.lh-item:nth-child(3){border-left:0}.lh-item:nth-child(n+3){border-top:1px solid var(--vien)}}
@media(max-width:460px){.lh-tt{margin-top:-24px}.lh-box{grid-template-columns:1fr}.lh-item+.lh-item{border-left:0;border-top:1px solid var(--vien)}}

/* 2 CỘT: FORM + MAP */
.hai-cot{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
@media(max-width:940px){.hai-cot{grid-template-columns:1fr;gap:22px}}
/* PC: ô bản đồ cao bằng ô form — bản đồ tự giãn lấp đầy phần còn lại */
@media(min-width:941px){
  .ban-do-hop{display:flex;flex-direction:column}
  .hai-cot .ban-do-hop iframe{flex:1 1 0;aspect-ratio:auto;min-height:0}
  .ban-do-hop .map-tomtat{flex:none}
}
.form-chinh{position:relative;background:var(--kem);border:1px solid var(--vien);border-radius:14px;padding:30px 28px;box-shadow:var(--bong-nhe)}
.form-chinh h2{margin-bottom:14px;color:var(--nau-am);justify-content:flex-start;font-size:24px}
.form-chinh .luv-form{max-width:none}
.form-chinh .luv-form__hang{flex-direction:column;align-items:stretch}
.form-chinh .luv-inp{width:100%;flex-basis:auto;background:var(--trang)}
.form-chinh .luv-ta{background:var(--trang)}
.form-chinh .nut-dk{width:100%}
/* Ghi chú trấn an dưới form — gọn, không thừa khoảng trống */
.form-chinh .xong{margin-top:14px;padding-top:13px;border-top:1px solid var(--vien);font-size:13px;color:var(--chu-phu);line-height:1.6}
.form-chinh .xong p{margin:0}
/* Trang Liên hệ: form GIỮ NGUYÊN như cũ — KHÔNG áp nền tweed/đường may toàn cục (hop-phan) */
.lh-page .form-chinh{background:var(--kem);background-image:none}
.lh-page .form-chinh::after{content:'';position:absolute;inset:6px;border:1.4px dashed var(--vang-nghe);border-radius:9px;opacity:.55;pointer-events:none}
.lh-page .form-chinh h2{color:var(--nau-am)}
.lh-page .form-chinh .xong,.lh-page .form-chinh .xong p{color:var(--chu-phu)}

/* MAP FACADE — hộp bản đồ BỌC VẢI TWEED nâu + chỉ may kem mảnh quanh viền */
.ban-do-hop{position:relative;border-radius:16px;overflow:hidden;padding:8px;scroll-margin-top:80px;
  background-color:#6f5236;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,rgba(255,240,220,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.ban-do-hop::after{content:'';position:absolute;inset:4px;border:1.2px dashed rgba(236,213,170,.7);border-radius:12px;pointer-events:none;z-index:3}

/* ══ RÈM BẢN ĐỒ — MỘT TẤM VẢI THẬT TRƯỢT ĐI ═══════════════════════════════
   Bản cũ vén bản đồ bằng clip-path. Hai chỗ hỏng, đều đo được:
     ① Nó khai 'transition:clip-path' nên XOÁ MẤT nhịp mờ + trồi của hệ .rv-i
        vốn đã có sẵn trên chính khối này → khối NHẢY TỨC THÌ vào vị trí, rồi
        mới có một mép cứng quét ngang. Đó là cái khô cứng.
     ② clip-path là thứ trình duyệt phải VẼ LẠI mỗi khung hình — mà ở đây nó
        cắt ngang một IFRAME Google Maps, thứ tốn nhất để vẽ lại.

   Nay rèm là ::before mang ĐÚNG CHẤT VẢI của khung (cùng màu #6f5236, cùng
   vân), nên mắt đọc ra là MỘT MẢNH VẢI LIỀN rồi mới hé ra để lộ bản đồ.
   Nó trượt bằng transform — chạy thẳng trên card đồ hoạ, không vẽ lại, và
   không đụng vào iframe một chút nào.
   inset:8px = đúng bề dày nẹp vải, nên rèm chỉ phủ phần ruột; nẹp và viền
   chỉ đứt (::after, z-index 3) vẫn đứng yên tại chỗ suốt. */
.ban-do-hop::before{
  content:'';position:absolute;inset:8px;border-radius:10px;z-index:2;pointer-events:none;
  /* CHẤT VẢI T4 — sao đúng nguyên bản từ rèm khóa học trang chủ (trang.css),
     để hai tấm rèm trên web là CÙNG MỘT loại vải. Trước đây rèm này dùng màu
     nẹp #6f5236 và một vân nhiễu khác, nên nhìn ra hai chất vải khác nhau. */
  background-color:#2F2317;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='tw'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23tw)'%20opacity='0.35'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,240,220,.04) 0 1px,transparent 1px 4px),
    radial-gradient(120% 120% at 50% -12%,rgba(255,226,186,.14),transparent 62%);
  background-size:240px 240px,auto,auto,auto;
  background-blend-mode:soft-light,normal,normal,normal;
  /* vệt sáng ở mép rèm đang kéo — để mắt bám được vào nếp vải */
  box-shadow:inset -1px 0 0 rgba(255,226,186,.20), 3px 0 12px rgba(0,0,0,.30);
  transform:translate3d(0,0,0);
  /* Trễ 0,3s: đợi khối đậu vào chỗ (nhịp .rv-i chạy 0,95s) rồi rèm mới kéo.
     Đọc ra là "thẻ tới — rồi rèm mở", một mạch chứ không phải hai thứ cùng
     động một lúc. */
  transition:transform var(--rem-vua) var(--rem-nhip) .3s}
/* ⚠ KHÔNG DÙNG 101% — anh Hưng báo 17/08/2026 "kéo rèm xong viền ảnh có vệt
   nâu đậm". Rèm nằm cách mép khung 8px (inset:8px) nên bề rộng nó = W−16.
   Trượt 101% là 1,01×(W−16), tính theo bề rộng CỦA CHÍNH NÓ chứ không phải
   theo khung — muốn khuất hẳn phải đi đủ W−8:
       1,01×(W−16) ≥ W−8   ⟺   W ≥ 816px
   Khung bản đồ trên điện thoại chỉ ~315px → rèm hụt 5px, đó chính là vệt nâu
   còn lại ở mép phải. Rèm khoá học trang chủ không dính vì dùng inset:0.
   calc(100% + 9px) = đi hết bề rộng mình CỘNG đúng 8px lề, dư 1px cho chắc.
   Đúng ở mọi bề rộng khung. */
.ban-do-hop.rv-on::before{transform:translate3d(calc(100% + 9px),0,0)}
@media(prefers-reduced-motion:reduce){.ban-do-hop::before{display:none}}
.map-facade,.ban-do-hop>iframe{border-radius:10px 10px 0 0;overflow:hidden}
.map-tomtat{background:var(--trang);border-radius:0 0 10px 10px}
.map-facade{position:relative;width:100%;aspect-ratio:4/3;background:var(--cam-nhat);border:0;cursor:pointer;display:block}
.map-facade .noi-map{position:relative;z-index:1;display:grid;justify-items:center;gap:12px;padding:20px}
.map-facade .ghim{width:56px;height:56px;border-radius:50%;background:var(--cta);display:grid;place-items:center;color:#fff}
.map-facade .ghim svg{width:28px;height:28px}
.map-facade .nhac{font-size:13.5px;font-weight:600;color:var(--nau-am)}
.map-facade .xem-bd{display:inline-flex;align-items:center;gap:8px;background:var(--nau-am);color:#fff;padding:9px 18px;border-radius:999px;font-size:12.5px;font-weight:700;transition:.18s}
.map-facade:hover .xem-bd{background:var(--cta)}
.map-facade iframe,.ban-do-hop iframe{width:100%;aspect-ratio:4/3;border:0;display:block}
.map-tomtat{padding:18px 20px 20px}
.map-tomtat .dia{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--chu-chinh);font-weight:600}
.map-tomtat .dia svg{flex:none;margin-top:3px;color:var(--cta);width:17px;height:17px}
.map-tomtat .phu-dc{font-size:12.5px;color:var(--chu-phu);font-weight:500;margin:6px 0 14px 27px}
/* Nút chỉ đường = DA THUỘC cam đất + chỉ may kem */
.map-tomtat .chi-duong{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;color:#fff;padding:12px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;transition:.16s;
  background-color:#9C4228;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23d)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 42%,rgba(0,0,0,.16));
  background-blend-mode:soft-light,normal;
  outline:1px dashed rgba(255,244,224,.6);outline-offset:-3.5px;
  box-shadow:0 4px 12px rgba(210,105,74,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.map-tomtat .chi-duong:hover{background-color:var(--cta-dam)}
.map-tomtat .chi-duong svg{width:18px;height:18px}
.map-gio{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--vien);font-size:13px;color:var(--chu-phu)}
.map-gio span{display:flex;align-items:center;gap:7px}
.map-gio svg{width:15px;height:15px;flex:none;color:var(--xanh-reu)}
.map-gio a{color:var(--cam-tram);font-weight:700;text-decoration:none}

/* KẾT NỐI (social) */
.ket-noi{position:relative;
  background-color:#453425;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px),linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 82%,rgba(0,0,0,.17));
  background-blend-mode:soft-light,overlay,normal;
  color:var(--kem);border-radius:14px;padding:34px 28px;text-align:center}
.ket-noi::after{content:'';position:absolute;inset:7px;border:1.4px dashed rgba(236,213,170,.7);border-radius:9px;opacity:1;pointer-events:none}
.ket-noi h2{color:#fff;justify-content:center;margin-bottom:8px;font-size:24px}
.ket-noi p{color:var(--chu-phu-toi);font-size:14px;max-width:56ch;margin:0 auto 22px}
.ket-noi .kn-mang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:640px;margin:0 auto}
/* minmax(0,1fr) chứ KHÔNG phải 1fr trơn — sửa 19/08/2026.
   Trong lưới CSS, "1fr" trơn mang một mức tối thiểu ngầm là bề rộng nội dung,
   nên cột KHÔNG CO ĐƯỢC dưới bề ngang của cái nút. Trên máy 320px (iPhone SE
   đời đầu, Android nhỏ): khung chứa chỉ có 220px mà hai cột đòi 134,8 + 129,8
   + 12 khe = 276,6px → ba nút Instagram/YouTube/Zalo lòi ra tới 327px, quá mép
   màn 7px. minmax(0,...) bỏ mức tối thiểu ngầm đó đi, cột co về 104px vừa khít,
   chữ trong nút tự xuống dòng. Dòng 182 ngay trên đã viết đúng kiểu này rồi —
   đây chỉ là chỗ bị bỏ sót khi thu nhỏ xuống 2 cột. */
@media(max-width:600px){.ket-noi .kn-mang{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:400px}}
.ket-noi .kn-mang a{justify-content:center}
.ket-noi .kn-mang .goi{grid-column:1 / -1;justify-self:center;padding-left:30px;padding-right:30px;border:1.5px solid var(--cam-sang,#F5A87E);color:var(--cam-sang,#F5A87E)}
.ket-noi a{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(245,168,126,.2);color:var(--kem);border-radius:999px;padding:11px 18px;font-size:13px;font-weight:600;text-decoration:none;transition:.18s}
.ket-noi a:hover{background:var(--cta);border-color:var(--cta);color:#fff;transform:translateY(-2px)}
.ket-noi a svg{width:16px;height:16px}

/* FAQ */
.faq{border-top:1px solid var(--vien)}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% = 1080px, zoom-out >1500 = 1240px (chỉ trong .noi-dung) */
@media(min-width:981px) and (max-width:1500px){ .noi-dung .khung{max-width:1050px} }
.faq details{border-bottom:1px solid var(--vien)}
.faq summary{padding:13px 0;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cam-tram)}
.faq .mui{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .22s;color:var(--chu-phu)}
.faq details[open] .mui{transform:rotate(45deg)}
.faq .tl{padding:0 0 14px;color:var(--chu-phu);font-size:14px;line-height:1.7}

@media(max-width:760px){:root{--nhip:44px} h2{font-size:21px}}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HỘP 4 Ô LIÊN HỆ — gỡ trùng lặp + chạy ngang như dải số liệu trang chủ ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   LỖI TÌM RA: bốn ô .lh-item đang bị HAI hệ hiệu ứng cùng điều khiển —
      · hệ riêng của trang Liên hệ  (.lh-page.rvtab .rv-i)  → trồi 28px / 0,70s
      · nhịp chung của mọi tab       (.nhip > *)            → trồi 14px / 0,45s
   Nhịp chung có độ ưu tiên CAO HƠN nên nó thắng. Kết quả: trang Liên hệ tự
   viết cho mình một hệ đàng hoàng, rồi bị nhịp chung đè xuống còn ĐÚNG MỘT
   NỬA. Đó là lý do khối nổi bật nhất trang lại nhìn hụt nhất.

   Cách sửa: KHÔNG thêm hệ thứ ba. Chỉ tước quyền mở của nhịp chung, giao lại
   cho hệ riêng của trang làm chủ duy nhất, rồi nâng biên độ ngang trang chủ.

   Ba dòng dưới phải giữ ĐÚNG THỨ TỰ này: dòng 2 chặn nhịp chung mở, dòng 3
   cho .rv-on mở. Hai dòng cùng độ ưu tiên nên dòng sau thắng. */
html.js-on body:not(.home) .lh-box.nhip > .lh-item{
  opacity:0;transform:translateY(32px);            /* 32px = đúng biên độ trang chủ */
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .68s cubic-bezier(.16,1,.3,1)}
html.js-on body:not(.home) .lh-box.nhip.rvl-in > .lh-item{opacity:0;transform:translateY(32px)}
html.js-on body:not(.home) .lh-box.nhip > .lh-item.rv-on{opacity:1;transform:none}

/* Chip icon nảy vào sau ô mình 0,12s — nhịp nhỏ làm khối thành có bàn tay.
   KHÔNG đụng vào transform: chip đã dùng transform cho hiệu ứng nghiêng khi
   trỏ chuột (scale 1.08 rotate -4deg). Dùng thuộc tính RỜI 'scale' thì hai
   thứ nhân với nhau, không giẫm chân nhau. */
html.js-on body:not(.home) .lh-box .lh-item .ic{scale:.72;opacity:0}
html.js-on body:not(.home) .lh-box .lh-item.rv-on .ic{scale:1;opacity:1;
  transition:scale .55s cubic-bezier(.34,1.45,.64,1) .12s,opacity .35s ease .12s}
/* Chip phải BÁM THEO Ô CỦA NÓ. Độ trễ so le của ô do JS ghi thẳng vào thẻ
   (0/70/140/210ms) nên CSS không đọc được để cộng thêm — phải chép lại đúng
   nhịp 70ms đó rồi cộng 0,12s. Không làm thì bốn chip nảy CÙNG MỘT LÚC trong
   khi bốn ô đang chạy so le, nhìn ra ngay là lệch nhịp. */
html.js-on body:not(.home) .lh-box .lh-item:nth-child(2).rv-on .ic{transition-delay:.19s,.19s}
html.js-on body:not(.home) .lh-box .lh-item:nth-child(3).rv-on .ic{transition-delay:.26s,.26s}
html.js-on body:not(.home) .lh-box .lh-item:nth-child(4).rv-on .ic{transition-delay:.33s,.33s}

/* ── VẠCH MÀU QUÉT NGANG — thứ để MẮT THƯỜNG NHÌN THẤY ────────────────────
   VÌ SAO PHẢI THÊM: hộp này nằm ở y≈602px, tức SÁT MÉP DƯỚI màn hình đầu, và
   nó chạy đúng giây 2,1 — cùng lúc rèm mở và chữ bìa đang trồi lên. Khách đang
   nhìn tiêu đề bìa thì phía dưới đã chạy xong. Mà "mờ dần + trồi lên" lại là
   động tác kín tiếng nhất. Kết quả: làm đúng nhưng không ai thấy.

   Vạch màu thì khác hẳn: bốn vạch cam đất · cam · xanh · vàng quét ngang mặt
   một hộp trắng — bắt mắt ngay cả khi đang nhìn chỗ khác. Và nó dùng ĐÚNG cái
   vạch đã có sẵn của từng ô (--acc), không bịa thêm màu nào.

   QUÉT VÀO RỒI QUÉT ĐI, không đọng lại: vạch này vốn chỉ hiện khi trỏ chuột.
   Nếu để nó nằm luôn là đổi diện mạo lúc bình thường của hộp. Nên nửa đầu chạy
   từ trái vào, nửa sau thoát ra bên phải — hết là sạch, trỏ chuột vẫn nguyên. */
@keyframes lhQuetVach{
  0%  {transform:scaleX(0);transform-origin:left}
  52% {transform:scaleX(1);transform-origin:left}
  53% {transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}}
html.js-on body:not(.home) .lh-box .lh-item.rv-on::before{
  animation:lhQuetVach 1.05s cubic-bezier(.5,0,.3,1) .08s}
html.js-on body:not(.home) .lh-box .lh-item:nth-child(2).rv-on::before{animation-delay:.15s}
html.js-on body:not(.home) .lh-box .lh-item:nth-child(3).rv-on::before{animation-delay:.22s}
html.js-on body:not(.home) .lh-box .lh-item:nth-child(4).rv-on::before{animation-delay:.29s}
/* Vạch dày hơn trong lúc quét cho rõ, xong trả lại 3px như cũ cho trỏ chuột */
html.js-on body:not(.home) .lh-box .lh-item::before{height:3px}

@media(prefers-reduced-motion:reduce){
  html.js-on body:not(.home) .lh-box.nhip > .lh-item,
  html.js-on body:not(.home) .lh-box .lh-item .ic{
    opacity:1 !important;transform:none !important;scale:none !important;transition:none !important}
  html.js-on body:not(.home) .lh-box .lh-item.rv-on::before{animation:none !important}}
/* ╚══════════════════ HẾT khối hộp 4 ô liên hệ ══════════════════╝ */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  DẢI SỐ LIỆU trên trang Liên hệ — kiểu dáng + nhịp nảy như trang chủ  ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Markup dùng chung template-parts/dai-so-lieu.php với trang chủ.
   Nền vải nâu + chỉ may đã có sẵn từ 'body .dai, body .stats' (hop-phan.css,
   nạp mọi trang) nên KHÔNG cần chép lại. Chỉ chép phần bố cục + cỡ chữ,
   vốn nằm trong trang.css mà file đó chỉ nạp ở trang chủ. */
/* Siết mỏng — xem giải thích đầy đủ ở trang.css */
.stats .g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;padding-block:11px}
.stats .g > div{display:flex;flex-direction:column}
/* mọi ô số cùng chiều cao + canh giữa → nhãn hàng dưới thẳng mốc, không lệch */
.stats .n{font-size:23px;font-weight:600;line-height:1.1;letter-spacing:.2px;
  display:flex;align-items:center;min-height:1.2em;color:#fff}
.stats .n.hl{color:var(--cam-sang)}
.stats .l{font-size:11.5px;color:var(--on-dark);margin-top:1px}
/* ══ HAI CHỖ SIẾT CHỈ ÁP CHO MÁY TÍNH (sửa 19/08/2026) ═════════════════════
   Anh Hưng: "mobile để lại như cũ".

   Lúc đầu em khai thẳng vào luật gốc, mà mốc ≤760px chỉ đè font-size và
   margin-top chứ không đè line-height với min-height — nên hai chỗ này LỌT
   xuống điện thoại, làm dải mobile mỏng đi 13px ngoài ý muốn (94px → 81px).

   Nay bọc vào mốc ≥761px. Điện thoại giữ nguyên số cũ từng byte:
     nhãn line-height 19,25px · số min-height 20,4px · dải 94px

   ⚠ KHÔNG dùng line-height:inherit để trả lại cho mobile — body khai
   line-height ra giá trị TUYỆT ĐỐI 28px, kế thừa thẳng sẽ thành 28px chứ
   không phải 19,25px. Cách đúng là đừng khai ở luật gốc ngay từ đầu. */
@media(min-width:761px){
  .stats .l{line-height:1.3}
  .stats .n{min-height:1.1em}
}
.stats .sao-n{display:flex;align-items:center;gap:8px}
.stats .sao-n .luv-sao{color:var(--cam-sang);font-size:21px}
.stats .sao-n .sao-diem{font-size:23px;font-weight:600;color:var(--cam-sang);line-height:1}
@media(max-width:760px){
  .stats .g{grid-template-columns:1fr 1fr;gap:3px 16px;padding-block:6px}
  .stats .n{font-size:17px}
  .stats .l{font-size:11px;margin-top:0}
  .stats .sao-n{gap:6px}
  .stats .sao-n .sao-diem{font-size:17px}
  .stats .sao-n .luv-sao{font-size:16px}}

/* Nhịp NẢY TỪ NHỎ — chép đúng của trang chủ (trang.css): scale .5 → 1 với
   đường cong vượt đà 1.56, bốn ô lệch nhau 0,1s. Đây là động tác mạnh nhất
   trên cả web, và nó đúng chỗ: bốn con số thành tích là thứ cần đập vào mắt. */
html.js-on body:not(.home) .stats .g > div{
  opacity:0;transform:scale(.5);
  transition:opacity .7s ease,transform .9s cubic-bezier(.34,1.56,.64,1)}
html.js-on body:not(.home) .stats.rvl-in .g > div{opacity:1;transform:none}
html.js-on body:not(.home) .stats.rvl-in .g > div:nth-child(2){transition-delay:.1s}
html.js-on body:not(.home) .stats.rvl-in .g > div:nth-child(3){transition-delay:.2s}
html.js-on body:not(.home) .stats.rvl-in .g > div:nth-child(4){transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  html.js-on body:not(.home) .stats .g > div{
    opacity:1 !important;transform:none !important;transition:none !important}}
/* ╚══════════════════ HẾT khối dải số liệu Liên hệ ══════════════════╝ */

/* Bìa cao gần full màn trên điện thoại — xem --bia-vua-man-dt ở bien.css.
   Dùng "body " để thắng mấy luật mobile khai sẵn trong tệp này (con số cứng
   hoặc tỉ lệ khung ảnh), khỏi phải đi sửa từng chỗ. */
@media(max-width:760px){
  body .bia-blog{min-height:var(--bia-vua-man-dt)}
}