/* hop-phan.css — Header · Chân trang · Thanh đáy điện thoại. Copy từ BỘ CHUẨN GIAO DIỆN. */

/* AN TOÀN TOÀN SITE: mọi SVG không có thuộc tính width (chỉ có viewBox) mà thiếu rule cỡ
   sẽ tràn full khung. Cho cỡ mặc định gọn. :where() = 0 điểm ưu tiên → MỌI rule .class svg
   cụ thể (kể cả .logo svg, .ic svg 24px…) vẫn thắng. Không đụng SVG đã có width="…". */
:where(svg:not([width])){width:1.25em;height:1.25em}

/* ═══════════ HEADER ═══════════ */
.dau-trang{position:sticky;top:0;z-index:80;
  background-color:rgba(42,31,20,.97);
  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 60%);
  background-blend-mode:soft-light,overlay,normal;
  border-bottom:1px solid rgba(195,157,73,.35);
  box-shadow:0 4px 18px rgba(20,13,7,.3);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.dau-trang::after{content:'';position:absolute;left:10px;right:10px;bottom:2.5px;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(236,213,170,.38) 0 4px,transparent 4px 9px)}
/* Chỉ ngang header + thanh đáy: MAY DẦN sau khi rèm mở đầu mở xong.
   (Chỉ của dải số liệu & các khối lớn: may khi CUỘN TỚI — hệ chi-may trong bien.css/luvinus.js) */
@media(prefers-reduced-motion:no-preference){
  @keyframes luvChiNgang{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .dau-trang::after{transform-origin:left center;animation:luvChiNgang 2.2s cubic-bezier(.3,.6,.3,1) 2.5s backwards}
  .day::before{transform-origin:left center;animation:luvChiNgang 2.2s cubic-bezier(.3,.6,.3,1) 2.5s backwards}
}
.dau-trang.an{transform:translateY(-100%)}
.dau-trang .khung{display:flex;align-items:center;gap:20px;height:var(--cao-header);max-width:var(--cot-rong);margin:0 auto;padding:0 clamp(22px, 2vw, 36px)}
.logo svg{height:44px;width:auto;display:block}
.mo-menu{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.mo-menu span{display:block;width:24px;height:2px;background:var(--kem);border-radius:2px}
.mo-menu span+span{margin-top:5px}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none}
.menu>li{position:relative;list-style:none}
.muc-dong{display:none}
/* padding ngang 8px (không phải 11px): ở màn rộng >1500px khung nội dung là 1240px,
   mà hàng ngang cần 1202px với padding 11px → nút GỌI NGAY lòi ra khỏi cột 34px,
   lệch hẳn so với chân trang & các khối bên dưới. 8px thì vừa, còn dư ~20px. */
.menu>li>a{display:block;padding:10px 8px;font-size:12.5px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;white-space:nowrap;border-radius:6px;transition:.18s;text-decoration:none;color:var(--kem)}
.menu>li>a:hover{color:var(--cam-sang);background:rgba(245,168,126,.12)}
.menu>li>a[aria-current]{color:var(--cam-sang)}
.menu>li>a[aria-current]::after{content:'';display:block;height:2px;margin-top:4px;background:var(--cta);border-radius:2px}
/* ══ CHẤT LIỆU MENU SỔ TRÊN PC (sửa 21/08/2026) ═══════════════════════════
   Tấm menu dùng nền LINEN HỒNG của mục "Các Khóa Học" trên trang chủ, lấy
   qua biến --linen-* ở bien.css chứ không chép tay, để không bao giờ lệch
   màu so với mục gốc.

   Ô ĐANG RÊ CHUỘT = CÙNG TẤM VẢI, CHỈ ĐẬM SẮC HƠN. Không đổi chất liệu, chỉ
   đổi sắc: --linen-dam #E2C7B3 thay cho #F2E2D6, vân giữ nguyên. Nhìn ra
   như một chỗ trên vải bị ấn đậm màu xuống, không phải một miếng dán khác.

   Ô rê CHỈ lấy --linen-van (vân), KHÔNG lấy --linen-sang (hai lớp toả sáng).
   Hai lớp đó tính theo kích thước khối mang nó: đắp lên một dòng menu bé sẽ
   thành quầng sáng tròn trong từng dòng, rất bẩn.

   ĐO TRÊN VÙNG SÁNG NHẤT CỦA TẤM (chỗ khắt khe nhất để "nổi"):
     ô rê đậm hơn nền   1.43 lần  ✓ nhìn ra ngay
     chữ lúc thường  --chu-phu #63594C trên linen   5.43:1 ✓
     chữ lúc rê      --nau-am  #5C4739 trên ô đậm   5.40:1 ✓
   KHÔNG dùng chữ cam lúc rê: --cta-dam trên nền này chỉ 2.80:1, --cam-tram
   còn thấp hơn. Cam trung tính về độ sáng nên trên nền hồng đậm là không
   đọc nổi. Hai màu chữ #63594C và #5C4739 gần như một, nên mắt không thấy
   chữ đổi màu — chỉ thấy nền đậm lên, đúng ý. */
.con{position:absolute;top:100%;left:0;min-width:236px;
  background-color:var(--linen-mau);
  background-image:var(--linen-anh);
  background-blend-mode:var(--linen-hoa);
  border:1px solid var(--vien);border-radius:10px;box-shadow:var(--bong);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.menu>li:hover .con,.menu>li:focus-within .con{opacity:1;visibility:visible;transform:none}
.con li{list-style:none}
.con a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;font-weight:500;
  color:var(--chu-phu);white-space:nowrap;text-decoration:none}
.con a:hover{background-color:var(--linen-dam);background-image:var(--linen-van);
  background-blend-mode:var(--linen-van-hoa);color:var(--nau-am)}
/* Mũi tên chỉ báo mục có submenu (Đào tạo · Hình ảnh · Góc chia sẻ) */
.co-con>a::after{content:'';display:inline-block;margin-left:7px;vertical-align:middle;border:5px solid transparent;border-top-color:currentColor;border-bottom:0;transition:transform .2s;opacity:.65}
.co-con.mo>a::after{transform:rotate(180deg)}
/* Nút GỌI NGAY = DA THUỘC cam đất + chỉ may kem (đồng bộ các nút da) */
/* Nút "Gọi ngay" (chữ) ở header: ĐÃ ẨN theo yêu cầu (PC). Mobile vốn dùng .goi-icon
   (icon điện thoại) nên không ảnh hưởng. Đổi lại 'inline-flex' nếu muốn hiện lại. */
.nut-goi{display:none;align-items:center;gap:8px;color:var(--trang);
  padding:11px 20px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;white-space:nowrap;transition:.18s;text-decoration:none;
  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:-3px;
  box-shadow:0 3px 10px rgba(210,105,74,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.nut-goi:hover{background-color:var(--cta-dam);transform:translateY(-1px)}
.dau-trang .nut-goi{margin-left:14px}
.goi-mobile{display:none}
/* Icon điện thoại TRÒN (da cam đất + chỉ may kem) — HIỆN CẢ PC lẫn mobile.
   PC: order:1 đưa ra CUỐI hàng header (sau menu). Mobile (≤1080): media dưới định vị tuyệt đối góc phải. */
.goi-icon{display:grid;place-items:center;order:1;flex:none;width:40px;height:40px;border-radius:50%;border:0;color:#fff;text-decoration:none;transition:.18s;
  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:-3px;
  box-shadow:0 3px 10px rgba(210,105,74,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.goi-icon:hover,.goi-icon:active{background-color:var(--cta-dam);color:#fff}
/* PC RỘNG (≥1200px): icon nằm GIỮA khoảng trống cuối thanh header — tức khoảng từ mục
   menu cuối cùng ra tới MÉP MÀN HÌNH (vùng tối bên phải, ngoài cột nội dung).
   Cách làm: neo icon vào chính thanh .dau-trang (position:sticky nên nó là mốc), thoát
   khỏi hàng flex của .khung; nhờ vậy menu chạy hết cột nội dung và icon tự do ra ngoài.
   Công thức: mép phải cột nội dung cách mép màn (100% - --cot-rong)/2, cộng nửa lề trong
   của khung, trừ nửa bề ngang icon → icon rơi đúng tâm khoảng trống. Tự đúng ở mọi bề
   ngang màn hình, không cần JS đo.
   <1200px: giữ nguyên icon trong hàng (khoảng trống hẹp, ra ngoài sẽ đè lên menu). */
@media(min-width:1200px){
  .dau-trang .goi-icon{position:absolute;top:50%;translate:0 -50%;
    right:calc((100% - var(--cot-rong))/4 + clamp(22px, 2vw, 36px)/2 - 20px)}
}
/* Lớp nền mờ sau menu mobile — chạm ra ngoài để đóng menu */
.menu-nen{position:fixed;inset:0;z-index:78;background:rgba(31,28,25,.42);opacity:0;visibility:hidden;transition:opacity .22s ease;pointer-events:none}
.menu-nen.hien{opacity:1;visibility:visible;pointer-events:auto}
@media(min-width:1081px){.menu-nen{display:none}}
/* Laptop phổ biến (≤1500px): menu 9 mục + nút gọn lại để header vừa khung, không tràn ngang */
@media(max-width:1500px){
  .menu{gap:0}
  .menu>li>a{padding:10px 8px;font-size:11.5px;letter-spacing:.2px}
  .dau-trang .khung{gap:14px}
  .dau-trang .nut-goi{padding:11px 16px;margin-left:8px}
}
/* ≤1160px: bóp thêm menu. Vì sao 1160 chứ không 1080 như trước: với cỡ chữ 11,5px
   + padding 8px, hàng ngang (logo 129 + menu 755 + nút gọi 124 + khoảng cách 36)
   cần 1044px, mà khung chỉ cho 1022px ở bề ngang 1081px → nút GỌI NGAY ăn hết
   padding phải, dính sát mép cửa sổ. Bóp sớm từ 1160 thì dải 1081–1160 mới thoáng. */
@media(max-width:1160px){.menu>li>a{padding:10px 6px;font-size:11px}}
/* ≤1080px: CHUYỂN SANG MENU ☰. Trước đây mốc này là 960px, nhưng menu 9 mục
   (đã bóp hết cỡ: chữ 11px, padding 6px) vẫn cần 984px trong khi bề ngang 961px
   chỉ còn 902px chỗ trống → nút GỌI NGAY thò ra ngoài, cả trang bị cuộn ngang.
   Ép vừa 961px sẽ phải hạ chữ xuống 10,5px + padding 4px + thu nhỏ logo — chật
   và xấu. Nên từ 1080px trở xuống dùng thẳng menu ☰ (vốn đã đẹp sẵn). */
@media(max-width:1080px){
  /* Header mobile: ☰ góc trái · logo giữa · icon gọi tròn góc phải */
  .dau-trang .khung{position:relative;justify-content:center}
  .mo-menu{display:block;position:absolute;left:14px;top:50%;transform:translateY(-50%);margin:0;z-index:2}
  .logo{margin:0 auto}
  /* Icon điện thoại (mobile) = DA THUỘC cam đất + chỉ may kem viền tròn */
  .goi-icon{display:grid;place-items:center;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;color:#fff;z-index:2;text-decoration:none;transition:.18s;
    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:-3px;
    box-shadow:0 3px 10px rgba(210,105,74,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  .goi-icon:hover,.goi-icon:active{background-color:var(--cta-dam);color:#fff}
  /* ── MENU MOBILE — tấm vải DẠ TWEED liền khối với header + mục lục lookbook (số vàng, chỉ may) ── */
  .menu{display:none;position:absolute;top:var(--cao-header);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;counter-reset:muc;
    background-color:#33271A;
    background-image:var(--vai-tweed),var(--vai-cheo),
      linear-gradient(180deg,rgba(0,0,0,.2),transparent 30%,transparent 80%,rgba(0,0,0,.24));
    background-blend-mode:soft-light,overlay,normal;
    border-top:1px solid rgba(195,157,73,.4);
    box-shadow:0 24px 52px rgba(20,13,7,.55);padding:0;
    max-height:calc(100vh - var(--cao-header) - var(--cao-day));
    max-height:calc(100dvh - var(--cao-header) - var(--cao-day));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .menu.hien{display:flex}
  .menu>li{position:relative}
  /* mỗi mục hiện dần so le như lật trang lookbook */
  @keyframes luvMucHien{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
  .menu.hien>li{animation:luvMucHien .34s cubic-bezier(.2,.7,.3,1) backwards}
  .menu.hien>li:nth-child(1){animation-delay:.02s}.menu.hien>li:nth-child(2){animation-delay:.05s}
  .menu.hien>li:nth-child(3){animation-delay:.08s}.menu.hien>li:nth-child(4){animation-delay:.11s}
  .menu.hien>li:nth-child(5){animation-delay:.14s}.menu.hien>li:nth-child(6){animation-delay:.17s}
  .menu.hien>li:nth-child(7){animation-delay:.20s}.menu.hien>li:nth-child(8){animation-delay:.23s}
  .menu.hien>li:nth-child(9){animation-delay:.26s}.menu.hien>li:nth-child(n+10){animation-delay:.29s}
  @media(prefers-reduced-motion:reduce){.menu.hien>li{animation:none}}
  .menu>li>a{position:relative;padding:16px 26px;font-size:12px;font-weight:600;letter-spacing:2.2px;
    text-transform:uppercase;color:var(--kem);display:flex;align-items:center;
    border-bottom:1px solid rgba(236,213,170,.1);
    transition:color .22s}
  /* sợi chỉ cam ngắn "may" ra trước mục đang chọn / đang chạm — chi tiết duy nhất */
  .menu>li>a::before{content:'';width:0;height:1.5px;flex:none;margin-right:0;
    background:repeating-linear-gradient(90deg,var(--cam-sang) 0 4px,transparent 4px 8px);
    transition:width .28s cubic-bezier(.2,.7,.3,1),margin-right .28s cubic-bezier(.2,.7,.3,1)}
  .menu>li>a:hover,.menu>li>a:active,.menu>li.co-con.mo>a,.menu>li>a[aria-current]{color:var(--cam-sang)}
  .menu>li>a:hover::before,.menu>li>a:active::before,.menu>li.co-con.mo>a::before,.menu>li>a[aria-current]::before{width:20px;margin-right:12px}
  /* mũi tên submenu đẩy sang phải, tông cam sáng */
  .co-con>a::after{margin-left:auto;border-top-color:var(--cam-sang);opacity:.9}
  /* submenu — nền tối hơn, chữ kem dịu, dấu gạch cam */
  .con{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:rgba(15,10,5,.28);padding:0;margin:0;
    max-height:0;overflow:hidden;transition:max-height .32s ease}
  .co-con.mo>.con{max-height:680px}
  .con a{position:relative;padding:13px 24px 13px 44px;font-size:12.5px;font-weight:500;
    letter-spacing:.4px;text-transform:none;color:var(--chu-phu-toi);border-bottom:1px solid rgba(245,168,126,.08)}
  .con li:last-child a{border-bottom:0}
  .con a::before{content:'';position:absolute;left:26px;top:50%;transform:translateY(-50%);
    width:9px;height:1.5px;background:var(--cam-sang);border-radius:2px;transition:width .18s}
  .con a:hover,.con a:active{color:var(--cam-sang)}
  .con a:hover::before,.con a:active::before{width:16px}
  .dau-trang .nut-goi{display:none}
  .logo svg{height:40px}
  /* Nút Đóng menu — pill cam nổi */
  .muc-dong{display:block;margin:16px 16px 20px}
  /* Nút Đóng — da thuộc cam đất + chỉ may kem (đồng bộ nút thanh đáy) */
  .dong-menu{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    color:#fff;border:0;border-radius:999px;
    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:-4px;
    padding:14px;font-family:inherit;font-weight:700;font-size:12px;letter-spacing:1.2px;
    text-transform:uppercase;cursor:pointer;transition:.18s;
    box-shadow:0 8px 22px rgba(210,105,74,.34),inset 0 1px 0 rgba(255,255,255,.25)}
  .dong-menu:hover,.dong-menu:active{background-color:var(--cta-dam)}
  /* Gấu vải — mũi may yên ngựa chỉ vàng khép mép dưới tấm menu */
  .muc-dong::after{content:'';display:block;height:14px;margin:18px -16px -20px;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='14'%3E%3Cline%20x1='2.2'%20y1='3.4'%20x2='5.8'%20y2='11.4'%20stroke='rgba(0,0,0,.35)'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3Cline%20x1='1.9'%20y1='2.8'%20x2='5.5'%20y2='10.8'%20stroke='%23c39d49'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:repeat-x;background-position:center;opacity:.55}
  .dong-menu svg{width:15px;height:15px}
}

/* ═══════════ CHÂN TRANG ═══════════ */
.chan{
  background-color:#352718;
  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(--chu-phu-toi);padding:56px 0 12px;font-size:13.5px;
  line-height:1.6;margin-top:var(--nhip);position:relative}
/* Mũi may yên ngựa VẮT NGAY ĐƯỜNG GHÉP mép trên footer — nửa trên nền sáng, nửa dưới footer nâu */
.chan::before{
  content:'';position:absolute;left:26px;right:26px;top:-7px;height:14px;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='14'%3E%3Cline%20x1='2.2'%20y1='3.4'%20x2='5.8'%20y2='11.4'%20stroke='rgba(60,38,14,.5)'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cline%20x1='1.9'%20y1='2.8'%20x2='5.5'%20y2='10.8'%20stroke='%23E68C60'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center}
@media(max-width:760px){.chan::before{left:16px;right:16px;height:10px;top:-5px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='10'%3E%3Cline%20x1='1.7'%20y1='2.6'%20x2='4.5'%20y2='8.1'%20stroke='rgba(60,38,14,.46)'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3Cline%20x1='1.5'%20y1='2.2'%20x2='4.3'%20y2='7.7'%20stroke='%23E08355'%20stroke-width='1.3'%20stroke-linecap='round'/%3E%3C/svg%3E")}}
.chan-luoi{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:36px}
/* Đổi h5 → h3 ngày 17/08/2026 (mục 16): h5 sau h2 là nhảy bậc trên CẢ 10 trang.
   Kiểu chữ giữ NGUYÊN 100%, chỉ đổi cấp thẻ. */
.chan h2{font-family:var(--font-noi-dung);color:var(--trang);font-size:11px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;margin-bottom:13px}
.chan li{list-style:none;margin-bottom:6px}
.chan a{color:var(--chu-phu-toi);text-decoration:none}
.chan a:hover{color:var(--cam-sang)}
.chan .logo-chan svg{height:44px;width:auto;margin-bottom:12px}
.slogan-chan{font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--cam-sang);margin:0}
/* Khe hở 8px → 6px khi thêm Zalo (17/08/2026). Đo cụ thể:
     dòng "SỐNG ĐAM MÊ · TRUYỀN CẢM HỨNG" rộng 264,8px (cỡ chữ cố định nên
     rộng bằng nhau ở mọi khổ màn).
     6 biểu tượng cũ  : 6×32 + 5×8 = 232px  → thừa 33px, không sao
     7 cái, khe 8px   : 7×32 + 6×8 = 272px  → LÒI RA 7,2px khỏi dòng chữ
     7 cái, khe 6px   : 7×32 + 6×6 = 260px  → gọn trong dòng chữ, hụt 4,8px
   Giữ nguyên đường kính 32px chứ không thu nhỏ — thu nhỏ thì khó bấm trên
   điện thoại, mà 6px vẫn đủ tách bạch (không có lớp nới vùng chạm nào ở đây
   nên hai nút cạnh nhau không chồng lấn). */
.mang-xh{display:flex;gap:6px;margin-top:16px}
.mang-xh a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(210,191,168,.28);
  display:grid;place-items:center;transition:.18s;color:var(--chu-phu-toi)}
.mang-xh a:hover{background:var(--cta);border-color:var(--cta);color:var(--trang);transform:translateY(-2px)}
.chan .lien-he li{display:flex;gap:9px;align-items:flex-start}
.chan .lien-he svg{flex:none;margin-top:3px;color:var(--cam-sang)}
.chan .xem-duong{display:inline-flex;align-items:center;gap:7px;margin:0 0 16px;padding:8px 16px;background:rgba(245,168,126,.12);border:1.5px solid var(--cam-sang);border-radius:999px;color:var(--cam-sang);font-size:12.5px;font-weight:700;text-decoration:none;transition:.18s}
.chan .xem-duong:hover{background:var(--cta);border-color:var(--cta);color:#fff}
.chan .xem-duong svg{width:15px;height:15px;flex:none;margin:0;color:currentColor}
.ban-quyen{border-top:1px solid rgba(210,191,168,.14);margin-top:36px;padding-top:12px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;opacity:.72;flex-wrap:wrap}
.ban-quyen span{white-space:nowrap}
@media(max-width:900px){
  .chan-luoi{grid-template-columns:1fr 1fr;gap:28px 24px}
  .chan-luoi > :first-child,.chan-luoi > :last-child{grid-column:1 / -1}
  .chan{padding-bottom:10px}
  .ban-quyen{justify-content:center;text-align:center;gap:6px;padding-top:10px;font-size:clamp(9px,2.7vw,12px)}
  .ban-quyen .luv-sao{letter-spacing:.5px}
}

/* ═══════════ THANH ĐÁY ĐIỆN THOẠI (chỉ hiện mobile) ═══════════ */
.day{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background-color:rgba(42,31,20,.97);
  background-image:var(--vai-tweed),var(--vai-cheo);
  background-blend-mode:soft-light,normal;
  border-top:1px solid rgba(195,157,73,.4);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(20,13,7,.35)}
.day::before{content:'';position:absolute;left:10px;right:10px;top:2.5px;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(236,213,170,.38) 0 4px,transparent 4px 9px)}
.day .in{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 14px;height:var(--cao-day)}
.day a,.day button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;transition:.16s ease}
.day a svg{width:14px;height:14px}
.day .dk{color:#fff;
  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;
  box-shadow:0 3px 12px rgba(210,105,74,.35),inset 0 1px 0 rgba(255,255,255,.25);
  outline:1px dashed rgba(255,244,224,.6);outline-offset:-3px}
.day .gl{color:#332416;border:0;
  background-color:#C2A97D;
  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,.5),rgba(255,255,255,0) 42%,rgba(120,90,55,.14));
  background-blend-mode:soft-light,normal;
  box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.8);
  outline:1px dashed rgba(122,88,50,.55);outline-offset:-3px}
.day .dk:active{background:var(--cta-dam);box-shadow:none}
.day .gl:active{background:#fff;color:var(--cam-tram)}
.day a:focus-visible,.day button:focus-visible{outline:2px solid #FFE9D2;outline-offset:2px}
@media(max-width:960px){ .day{display:block} }

/* ═══════════ ĐƯỜNG DẪN PHÂN CẤP — sát mép trên ảnh bìa, căn giữa, mảnh & kín đáo ═══════════ */
.bia,.bia-blog,.bia-cm{position:relative}
.bia .duong-dan,.bia-blog .duong-dan,.bia-cm .duong-dan{
  position:absolute;top:0;left:0;right:0;z-index:3;padding:15px 0 22px;margin:0}
/* Lớp nhoà tối ở đỉnh CHỈ dành cho bìa là ẢNH CHỤP (.bia) — ảnh mỗi trang một
   sáng tối khác nhau, cần nhoà tối thì chữ đường dẫn mới luôn đọc rõ.
   KHÔNG áp cho bìa Góc chia sẻ (.bia-blog/.bia-cm): nền đó là VẢI NÂU ĐỀU MÀU,
   phủ thêm lớp tối lên đỉnh không hoà vào đâu cả mà hiện thành một VỆT ĐẬM cắt
   ngang đầu trang. Chữ ở đó vốn đã sáng (kem + cam), đọc rõ sẵn trên nền nâu. */
.bia .duong-dan{background:linear-gradient(180deg,rgba(28,22,17,.42),rgba(28,22,17,.14) 55%,transparent)}
.bia .duong-dan .khung,.bia-blog .duong-dan .khung,.bia-cm .duong-dan .khung{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
  font-size:12px;line-height:1.4;color:rgba(247,235,220,.62);letter-spacing:.01em}
.bia .duong-dan a,.bia-blog .duong-dan a,.bia-cm .duong-dan a{
  color:var(--cam-sang);text-decoration:none;transition:opacity .18s}
.bia .duong-dan a:hover,.bia-blog .duong-dan a:hover,.bia-cm .duong-dan a:hover{
  opacity:.78;text-decoration:underline;text-underline-offset:3px}
.bia .duong-dan span,.bia-blog .duong-dan span,.bia-cm .duong-dan span{opacity:.5}
.bia .duong-dan span:last-child,.bia-blog .duong-dan span:last-child,.bia-cm .duong-dan span:last-child{
  opacity:1;color:rgba(247,235,220,.62)}
@media(max-width:760px){
  .bia .duong-dan,.bia-blog .duong-dan,.bia-cm .duong-dan{padding:11px 0 20px}
  .bia .duong-dan .khung,.bia-blog .duong-dan .khung,.bia-cm .duong-dan .khung{font-size:11px;gap:5px}}

/* ═══════════ Dòng trấn an riêng tư dưới form (dùng chung mọi form) ═══════════ */
.luv-form__riengtu{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--chu-phu);text-align:center}
.luv-form__riengtu svg{width:14px;height:14px;flex:none;opacity:.75}
/* trên nền tối (form tweed) → chữ sáng */
body .form-chinh .luv-form__riengtu{color:var(--chu-phu-toi);opacity:.85}
/* trang Liên hệ: form nền kem sáng → chữ tối lại */
.lh-page .form-chinh .luv-form__riengtu{color:var(--chu-phu);opacity:1}
@media(max-width:600px){.luv-form__riengtu{font-size:11px;gap:6px;align-items:flex-start;text-align:left}
  .luv-form__riengtu svg{margin-top:1px}}

/* ═══════════ NÚT CHAT Zalo/Messenger — "cúc bọc vải tweed" kín đáo, chỉ may vòng quanh ═══════════ */
.lien-chat{position:fixed;right:18px;bottom:22px;z-index:72;display:flex;flex-direction:column;gap:10px}
.lien-chat a{
  position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:#F2E4CC;text-decoration:none;
  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");
  background-blend-mode:soft-light;
  box-shadow:0 3px 8px rgba(40,28,18,.28),0 1px 2px rgba(40,28,18,.2);
  transition:transform .2s ease,box-shadow .2s ease,color .2s ease;
  animation:lcHien .55s ease backwards}
.lien-chat a:nth-child(1){animation-delay:1.1s}
.lien-chat a:nth-child(2){animation-delay:1.25s}
.lien-chat a::after{content:'';position:absolute;inset:3px;border:1px dashed rgba(236,213,170,.7);border-radius:50%;pointer-events:none;transition:border-color .2s ease}
.lien-chat a svg{width:21px;height:21px}
.lien-chat a:hover{transform:translateY(-2px);color:#fff;
  box-shadow:0 7px 14px rgba(40,28,18,.32),0 2px 4px rgba(40,28,18,.22)}
.lien-chat a:hover::after{border-color:rgba(236,213,170,.9)}
@keyframes lcHien{from{opacity:0;transform:translateY(10px)}}
/* nhãn nhỏ hiện khi rê chuột (chỉ máy có chuột) */
@media(hover:hover){
  .lien-chat a::before{content:attr(data-nhan);position:absolute;right:calc(100% + 11px);top:50%;transform:translateY(-50%);
    background:#F6EDDD;color:#5a4636;font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
    padding:5px 12px;border-radius:999px;box-shadow:0 3px 9px rgba(40,28,18,.18);
    opacity:0;visibility:hidden;transition:opacity .18s ease;pointer-events:none}
  .lien-chat a:hover::before{opacity:1;visibility:visible}}
/* mobile: nằm trên thanh đáy, nhỏ gọn hơn */
@media(max-width:960px){
  .lien-chat{right:12px;bottom:calc(var(--cao-day, 58px) + 14px);gap:8px}
  .lien-chat a{width:41px;height:41px}
  .lien-chat a svg{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.lien-chat a{animation:none}}

/* ═══════════ MODAL ĐĂNG KÝ (popup, mở từ mọi nút "ĐĂNG KÝ TƯ VẤN") ═══════════ */
.luv-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.luv-modal.mo{display:flex}
.luv-modal__nen{position:absolute;inset:0;background:rgba(31,28,25,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Hộp = tấm DẠ TWEED nâu + khung chỉ may kem bao quanh trong mép */
.luv-modal__hop{position:relative;z-index:1;border-radius:16px;padding:34px 28px 30px;width:min(460px,100%);max-height:92vh;overflow:auto;
  background-color:#463526;
  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 26%,transparent 80%,rgba(0,0,0,.18));
  background-blend-mode:soft-light,overlay,normal;
  box-shadow:0 30px 70px rgba(0,0,0,.45);animation:luvUp .24s ease}
.luv-modal__hop::before{content:'';position:absolute;inset:8px;border:1.2px dashed rgba(236,213,170,.7);border-radius:11px;pointer-events:none}
@keyframes luvUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.luv-modal__dong{position:absolute;top:12px;right:12px;width:38px;height:38px;border:1px dashed rgba(236,213,170,.7);border-radius:50%;background:rgba(255,255,255,.07);color:var(--kem);cursor:pointer;display:grid;place-items:center;transition:.16s;z-index:2}
.luv-modal__dong svg{width:20px;height:20px}
.luv-modal__dong:hover{background:var(--cta);border-color:var(--cta);color:#fff}
.luv-modal .luv-form{max-width:none}
.luv-modal .luv-form__tieu-de{color:#fff;text-align:center;font-size:21px}
/* mũi chỉ cam ngắn dưới tiêu đề — cùng ngôn ngữ gạch bìa */
.luv-modal .luv-form__tieu-de::after{content:'';display:block;width:58px;height:2px;margin:10px auto 0;
  background:repeating-linear-gradient(90deg,var(--cam-sang) 0 5px,transparent 5px 10px)}
.luv-modal .luv-form__mo-ta{color:var(--chu-phu-toi);text-align:center;font-size:13px;margin:10px 0 16px}
.luv-modal .luv-form__hang{flex-direction:column;align-items:stretch;gap:10px}
.luv-modal .luv-inp{width:100%;flex-basis:auto;background:rgba(255,253,247,.97);border-color:rgba(245,168,126,.28)}
.luv-modal .luv-inp:focus{outline:none;border-color:var(--cam-sang);box-shadow:0 0 0 3px rgba(245,168,126,.18)}
/* Nút gửi = DA THUỘC cam đất + chỉ may kem (đồng bộ nút thanh đáy & nút Đóng menu) */
.luv-modal .nut-dk{width:100%;
  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:-4px;
  box-shadow:0 6px 18px rgba(210,105,74,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.luv-modal .nut-dk:hover,.luv-modal .nut-dk:active{background-color:var(--cta-dam)}
.luv-modal .luv-form__msg{color:var(--kem);text-align:center}

/* ═══════════ FORM ĐĂNG KÝ (thu số điện thoại) ═══════════ */
.luv-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.luv-form{max-width:640px}
.luv-form__dau{margin-bottom:14px}
.luv-form__tieu-de{font-family:var(--font-tieu-de);font-size:22px;color:var(--nau-am);margin:0 0 4px}
.luv-form__mo-ta{color:var(--chu-phu);font-size:14px;margin:0}
.luv-form__hang{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.luv-inp{font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid var(--vien);border-radius:10px;
  background:var(--trang);color:var(--chu-chinh);flex:1 1 180px;min-width:0}
.luv-inp::placeholder{color:var(--chu-phu);opacity:.7}
/* Ô CHỌN KHÓA trong form: mũi tên tùy biến + danh sách tông ấm (nâu/kem) */
select.luv-inp{appearance:none;-webkit-appearance:none;padding-right:42px!important;cursor:pointer;accent-color:var(--cta);color-scheme:dark;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25C3E' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:16px!important}
select.luv-inp option{background:var(--nau-am);color:var(--kem);padding:11px 14px;font-size:15px}
select.luv-inp option:checked,select.luv-inp option:hover{background:var(--cta);color:#fff}
select.luv-inp option:first-child{color:var(--chu-phu-toi)}

/* ═══════════ DROPDOWN TÙY BIẾN (JS thay danh sách select gốc — đẹp đồng nhất mọi máy) ═══════════ */
.luv-sel{position:relative;width:100%;flex:1 1 100%}
.luv-sel > select.luv-inp{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.luv-sel__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:100%;text-align:left;cursor:pointer;font-family:inherit}
.luv-sel__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.luv-sel__label.luv-sel__ph{color:var(--chu-phu);opacity:.72}
.luv-sel__mui{flex:none;width:15px;height:15px;color:var(--cta);transition:.2s}
.luv-sel.mo .luv-sel__mui{transform:rotate(180deg)}

/* ══ DROPDOWN CHỌN KHÓA BỊ CHỮ ĐÈ LÊN (sửa 19/08/2026) ═════════════════════
   Anh Hưng: bấm chọn khóa thì chữ đè lên nhau.

   THỦ PHẠM KHÔNG PHẢI z-index CỦA DANH SÁCH — nó vốn đã là 70, thừa cao.
   Thủ phạm là chính cái khung bọc .luv-sel:

     hiệu ứng hiện gán  .luv-sel{translate:0 14px}  lúc chờ
     hiện xong đổi về   .luv-sel{translate:0 0}
     mà "0 0" KHÔNG PHẢI "none" — nên .luv-sel vĩnh viễn mang một translate.

   Bất kỳ phần tử nào có transform/translate/scale/opacity<1 đều TẠO NGỮ CẢNH
   LỚP RIÊNG. Hệ quả: z-index:70 của danh sách chỉ còn so bì với anh em BÊN
   TRONG .luv-sel, còn bản thân .luv-sel thì z-index:auto — tức là vẽ theo thứ
   tự xuất hiện trong trang. Mọi đường may trang trí (z-index:4) hay khối nằm
   sau nó đều vẽ đè lên trên. Nhìn ra thành chữ chồng chữ.

   CÁCH SỬA: khi mở, nâng chính KHUNG BỌC lên z-index 70. Danh sách nằm trong
   nó nên được nhấc lên theo cả cụm.
   CHỌN SỐ 76 chứ không phải 70. Bậc thang tầng lớp của cả web:
       60  thẻ nổi bài viết       70  thanh nút đáy .day
       72  nút chat nổi           75  vạch tiến độ đọc bài
     ► 76  DANH SÁCH ĐANG MỞ ◄    78  màn đen sau menu
       80  đầu trang             120  xem ảnh phóng to
   76 vượt qua mọi thứ có thể nằm chồng lên biểu mẫu, nhưng vẫn nằm dưới menu
   và đầu trang — mở menu ra thì menu vẫn che, đúng như mong đợi.
   (Để 70 thì hòa với .day, mà .day đứng sau trong trang nên vẫn đè lên;
    nút chat 72 cũng đè. Trên điện thoại là thấy ngay.)

   Chỉ nâng lúc .mo (đang mở) — đóng lại thì trả về auto, không tranh chấp
   với header hay lightbox nữa.

   KHÔNG sửa hiệu ứng hiện thành translate:none vì đang chuyển động dở dang
   mà đổi sang none thì trình duyệt không nội suy mượt được. */
.luv-sel.mo{z-index:76}
.luv-sel.mo .luv-sel__btn{border-color:var(--cta)}
/* Danh sách khóa sổ ra = tấm DẠ TWEED nhỏ + chỉ may kem phân cách từng khóa */
.luv-sel__list{position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;overflow:visible;
  margin:0;padding:7px;list-style:none;
  background-color:#463526;
  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);
  background-blend-mode:soft-light,normal;
  border:1px solid rgba(195,157,73,.35);
  border-radius:12px;box-shadow:0 20px 48px rgba(31,28,25,.5);animation:luvUp .16s ease}
.luv-sel__opt{position:relative;padding:12px 14px;border-radius:8px;color:var(--kem);font-size:15px;line-height:1.35;cursor:pointer;transition:.15s}
/* mũi chỉ kem mảnh phân cách giữa các khóa */
.luv-sel__opt + .luv-sel__opt{background-image:var(--chi-kem);background-repeat:no-repeat;
  background-size:calc(100% - 20px) 1px;background-position:10px top}
.luv-sel__opt:hover{background-color:rgba(245,168,126,.14);color:var(--cam-sang)}
/* khóa đang chọn: sợi chỉ cam ngắn "may" trước tên — cùng ngôn ngữ menu mobile */
.luv-sel__opt.chon{color:var(--cam-sang);font-weight:600;padding-left:38px}
.luv-sel__opt.chon::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:1.5px;
  background:repeating-linear-gradient(90deg,var(--cam-sang) 0 4px,transparent 4px 8px)}
.luv-sel__opt--ph{color:var(--chu-phu-toi)}

/* ═══════════ SAO ĐÁNH GIÁ DÙNG CHUNG (.luv-sao — SVG) ═══════════ */
/* Sao vẽ SVG: sao đầy tô đặc, sao cuối vơi = nửa trái đặc + viền cả sao (chia dọc qua đỉnh).
 * Màu theo currentColor — tự lấy đúng màu chữ tại nơi đặt. Cỡ sao = 1em (theo cỡ chữ). */
.luv-sao{display:inline-flex;align-items:center;gap:.08em;vertical-align:-.14em;line-height:1}
.luv-sao__i{width:1em;height:1em;display:block;flex:none;overflow:visible}
.luv-inp:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(210,105,74,.15)}
.luv-ta{width:100%;margin-top:10px;resize:vertical;flex-basis:100%}
/* Nút gửi form = DA THUỘC cam đất + chỉ may kem (đồng bộ nút thanh đáy & modal) */
.nut-dk{font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;border:0;border-radius:999px;padding:13px 26px;cursor:pointer;
  white-space:nowrap;transition:.18s;flex:0 0 auto;
  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:-4px;
  /* ══ ĐỘ NỔI CỦA NÚT (chỉnh 21/08/2026) ═══════════════════════════════════
     Anh Hưng thấy nút cam ở biểu mẫu trang chủ trên điện thoại nổi hơi nhẹ.

     Đo ra nguyên nhân: nút màu rgb(156,66,40) độ sáng 0,111 nằm trên tấm
     .form-chinh màu rgb(69,52,37) độ sáng 0,039 — tức NỀN TỐI HƠN NÚT. Mà
     bóng cũ lại là một quầng CAM SÁNG (rgba(210,105,74,.3)). Đặt vệt sáng
     lên nền tối thì không ra cảm giác nổi, chỉ thành một quầng mờ nhạt.
     Thiếu hẳn cái bóng tối đổ xuống — thứ tạo ra chiều dày thật.

     Nay thêm hai lớp bóng TỐI, giữ nguyên quầng cam làm hơi ấm:
       · lớp sát mép (1px)  — tạo cạnh, làm nút có độ dày
       · lớp toả (6px)      — đổ bóng xuống nền, tách nút khỏi tấm nền
       · quầng cam .30      — giữ nguyên như cũ, không tăng
       · mép trên bắt sáng  — .25 lên .30, nhích rất nhẹ cho mặt nút hơi vồng

     Cố ý dừng ở mức này: anh dặn "đừng làm nổi quá".

     DÙNG BÓNG TỐI CHỨ KHÔNG TĂNG QUẦNG CAM còn vì lý do khác: có một nút
     nằm trên nền kem sáng (trang Liên hệ, nền rgb(247,235,220)). Quầng cam
     tăng lên sẽ chìm nghỉm ở đó, còn bóng tối thì hợp cả hai loại nền. */
  box-shadow:0 1px 2px rgba(26,15,9,.38),
             0 6px 16px rgba(26,15,9,.26),
             0 3px 14px rgba(210,105,74,.30),
             inset 0 1px 0 rgba(255,255,255,.30)}
.nut-dk:hover{background-color:var(--cta-dam);transform:translateY(-1px)}
.nut-dk:disabled{opacity:.6;cursor:wait;transform:none}
.luv-form__msg{font-size:14px;margin-top:10px;min-height:1em}
.luv-form__msg.ok{color:var(--xanh-reu);font-weight:600}
.luv-form__msg.loi{color:var(--cta-dam);font-weight:600}
@media(max-width:560px){ .luv-form__hang{flex-direction:column;align-items:stretch} .nut-dk{width:100%} }

/* ═══════════ FORM NỀN NÂU CÓ TIÊU ĐỀ: 2 CỘT LẤP ĐẦY TRÊN PC ═══════════ */
/* Lời mời/tiêu đề bên trái · các ô nhập bên phải. Chỉ khi form có tiêu đề (__dau),
   nên Liên hệ/Dịch vụ/blog (không tiêu đề) không bị ảnh hưởng. ≤980 tự xếp dọc như cũ. */
@media(min-width:981px){
  .khung.hep:has(.form-chinh .luv-form__dau){max-width:1120px}
  .form-chinh:has(.luv-form__dau){max-width:1040px;margin-left:auto;margin-right:auto}
  /* CỘT TRÁI: lời mời + dòng bảo mật · CỘT PHẢI: chỉ ô nhập & nút · DƯỚI CÙNG: "hoặc gọi" */
  .form-chinh .luv-form:has(.luv-form__dau){display:grid;grid-template-columns:1fr 1fr;column-gap:46px;align-items:center}
  .form-chinh .luv-form:has(.luv-form__dau) .luv-form__dau{grid-column:1;grid-row:1;align-self:end;text-align:left;margin:0}
  .form-chinh .luv-form:has(.luv-form__dau) .luv-form__riengtu{
    grid-column:1;grid-row:2;align-self:start;justify-content:flex-start;text-align:left;margin-top:10px}
  .form-chinh .luv-form:has(.luv-form__dau) .luv-form__hang{grid-column:2;grid-row:1 / span 2}
  .form-chinh .luv-form:has(.luv-form__dau) .luv-form__msg{grid-column:1 / -1;grid-row:3}
}

/* ═══════════ FORM ĐẦY ĐỦ GỌN: Họ tên + SĐT chung 1 hàng ═══════════ */
/* Từ ≥601px: 2 ô đầu (Họ tên · SĐT) xếp ngang; ô Chọn khóa & nút full-width.
   Áp dụng mọi form nền nâu day-du (trừ .gon của blog đã gọn sẵn). ≤600 xếp dọc. */
@media(min-width:601px){
  .form-chinh:not(.gon) .luv-form--day-du .luv-form__hang{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
  .form-chinh:not(.gon) .luv-form--day-du .luv-form__hang > select.luv-inp,
  .form-chinh:not(.gon) .luv-form--day-du .luv-form__hang > .luv-sel,
  .form-chinh:not(.gon) .luv-form--day-du .luv-form__hang > .nut-dk{grid-column:1 / -1}
}
@media(max-width:600px){
  .form-chinh:not(.gon) .luv-form__dau{margin-bottom:12px}
  .form-chinh:not(.gon) .luv-form__hang{gap:9px}
}

/* ═══════════ 6.0 · Dải số liệu (chân bìa) → VÂN DA LỘN (SUEDE) SANG TRỌNG + hiệu ứng hiện dần cho các tab ═══════════ */
/* Dải số liệu DẠ TWEED nâu ĐẬM (#352718 — giống dải số liệu trang chủ). Dùng chung: tab (.dai) + trang chủ & Liên hệ (.stats) */
body .dai, body .stats{background-color:#352718;
  background-image:
    /* 1 · sợi dạ tweed (slub) — GIỐNG nền phần Đội ngũ (section.dark) */
    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"),
    /* 2 · sợi dệt chéo mờ */
    repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px),
    /* 3 · đổ bóng trên/dưới cho chiều sâu */
    linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 82%,rgba(0,0,0,.17));
  background-blend-mode:soft-light,overlay,normal}
/* ĐƯỜNG MAY chỉ kem mảnh sát mép trên — cùng nét & màu chỉ với header (áp mọi tab) */
body .dai,body .stats{position:relative}
body .dai::before,body:not(.home) .stats::before{
  content:'';position:absolute;left:14px;right:14px;top:4px;height:1px;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(236,213,170,.38) 0 4px,transparent 4px 9px)}
@media(max-width:760px){
  body .dai::before,body:not(.home) .stats::before{left:10px;right:10px}}

/* ═══════════════════ TẦNG 1 · HƠI THỞ — nền chuyển động dùng chung mọi tab ═══
   MỘT chuyển động duy nhất cho cả web: mờ → rõ, trồi lên 16px, trong 0,45 giây.
   Không thu phóng, không làm mờ, không trượt ngang.

   Vì sao 16px chứ không 32px như trước: chữ trồi càng xa thì mắt càng phải ĐUỔI
   THEO nó. Với tab 3.500 từ, đuổi theo là mỏi. 16px chỉ đủ tạo cảm giác "vừa
   được đặt xuống" — khách cảm thấy trang sống mà không ý thức được vì sao.

   Ảnh bìa (.bia/.bia-blog/.bia-cm) KHÔNG nằm trong hệ này: bìa phải có sẵn ngay
   khi rèm mở, hiện dần sẽ thành "trang chưa tải xong". */
/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  A2 · NÂNG BIÊN ĐỘ CÁC TAB NGANG TRANG CHỦ                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Đo được: trang chủ trồi 32px trong 0,68s — các tab chỉ 16px trong 0,45s,
   ĐÚNG MỘT NỬA. Đó là lý do các tab luôn nhìn nhạt hơn trang chủ dù cùng một
   kiểu hiệu ứng. Nay kéo lên 30px / 0,66s, sát trang chủ.

   VÌ SAO 30 CHỨ KHÔNG 32: các tab có khối cao gấp nhiều lần trang chủ (khóa
   học 13.473px = 17 màn hình). Quãng đường dài hơn một chút mà lặp lại hàng
   chục lần thì thành mệt mắt. 30px là chỗ vừa đủ mạnh mà không mỏi.
      cũ:  16px / 0,45s   ·   mobile 12px / 0,35s
      mới: 30px / 0,66s   ·   mobile 22px / 0,52s                            */
html.js-on body:not(.home) section:not(.bia):not(.bia-blog):not(.bia-cm),
html.js-on body:not(.home) .dai{
  opacity:0;transform:translateY(30px);
  /* NHỊP MỀM — đây là chuyển động khách gặp NHIỀU NHẤT trên web: mỗi tab có
     9–14 mục, riêng trang khóa học 12 mục. Nhịp cũ .16,1,.3,1 bung 6,24 lần,
     vọt 49% quãng đường trong 1/10 thời gian đầu rồi bò nốt — mỗi mục là một
     cú SNAP. Lặp 12 lần liền thì đọc ra là khô cứng.
     Nhịp chữ bung 2,15 lần và dành 56% thời gian cho 20% quãng cuối, nên khối
     TRÔI VÀO rồi LẮNG LẠI. Nới thời gian cho có chỗ mà lắng. */
  transition:opacity .8s ease-out,transform .95s var(--chu-nhip)}
html.js-on body:not(.home) .rvl-in{opacity:1 !important;transform:none !important}
/* Điện thoại nhẹ hơn: khách vuốt nhanh hơn, màn ngắn hơn → cùng một hiệu ứng
   sẽ có cảm giác ì và trễ. Giảm quãng đường ~25%, giảm thời gian ~20%. */
@media(max-width:760px){
  html.js-on body:not(.home) section:not(.bia):not(.bia-blog):not(.bia-cm),
  /* Nới theo đúng tỉ lệ đã nới ở bản PC (0,6→0,8 và 0,66→0,95), để nhịp mềm
     có chỗ mà lắng. Giữ nguyên quãng ngắn hơn 22px như thiết kế cũ. */
  html.js-on body:not(.home) .dai{transform:translateY(22px);transition-duration:.66s,.75s}}
/* ╚══════════════════════════ HẾT A2 ══════════════════════════╝ */

/* ═══════════════════ TẦNG 2 · NHỊP — nhóm nhiều phần tử giống nhau ══════════
   So le 60ms giữa các phần tử, LẶP LẠI theo chu kỳ 4 → không phần tử nào phải
   chờ quá 0,18 giây dù lưới có 58 ảnh. Tạo cảm giác lật trang lookbook thay vì
   bật đèn cả phòng.

   LUẬT VÀNG: khối nào đã có nhịp con thì BẢN THÂN nó không tự hiện nữa —
   tránh chồng hai lớp chuyển động lên cùng một chỗ. */
html.js-on body:not(.home) section:has(> .khung > .nhip),
html.js-on body:not(.home) section:has(> .khung > .hep > .nhip),
html.js-on body:not(.home) section:has(> .nhip),
/* Mục 04 "Nội dung chi tiết khóa học": khối này cao tới 5–6 màn hình (khóa Dài
   hạn: 56 buổi, 4.424px). Để nguyên thì cả 56 buổi hiện CÙNG MỘT LÚC ngay khi
   mép trên khối lọt vào màn hình — khách cuộn 5 màn tiếp theo không thấy gì
   chuyển động nữa. Nay tắt lớp hiện của cả khối, giao cho từng buổi tự hiện. */
html.js-on body:not(.home) section:has(> .khung > .ds30){
  opacity:1 !important;transform:none !important;transition:none !important}
/* NÂNG NHỊP CŨ NGANG NHỊP NHÓM MỚI (phần C).
   Nhịp này có sẵn ở vài chỗ trong HTML (lưới video 10 ô, chip chuyên mục Góc
   chia sẻ, các dịch vụ…) và vốn chỉ 14px/0,45s — bằng nửa mọi thứ vừa nâng.
   Nâng thẳng nó lên 20px/0,58s thay vì chồng thêm một hệ nữa lên cùng phần tử;
   chồng hệ đúng là loại lỗi đã phải đi gỡ ở tab Liên hệ.
   So le cũng nới 60ms → 70ms cho khớp nhịp nhóm mới. */
html.js-on body:not(.home) .nhip > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .66s ease-out,transform .8s var(--chu-nhip)}
html.js-on body:not(.home) .nhip.rvl-in > *{opacity:1;transform:none}
html.js-on body:not(.home) .nhip.rvl-in > *:nth-child(4n+2){transition-delay:.07s}
html.js-on body:not(.home) .nhip.rvl-in > *:nth-child(4n+3){transition-delay:.14s}
html.js-on body:not(.home) .nhip.rvl-in > *:nth-child(4n){transition-delay:.21s}
@media(max-width:760px){
  html.js-on body:not(.home) .nhip > *{transform:translateY(15px);transition-duration:.45s}}

@media(prefers-reduced-motion:reduce){
  html.js-on body:not(.home) section,html.js-on body:not(.home) .dai,
  html.js-on body:not(.home) .nhip > *{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ═══════════ 6.0 · TAB DỊCH VỤ & LIÊN HỆ — hiện TỪNG KHỐI, có nhịp cascade ═══════════ */
@media(prefers-reduced-motion:no-preference){
  /* tắt fade cả-section (để từng khối con lo, tránh chồng chuyển động) */
  html.js-on .dv-page section:not(.bia),
  html.js-on .lh-page section:not(.bia):not(.bia-blog){opacity:1 !important;transform:none !important}
  /* từng khối / thẻ: mờ nhẹ + trồi lên + nét dần */
  /* ĐÃ BỎ filter:blur(4px) — làm mờ là hiệu ứng nặng nhất cho máy yếu, và
     nó làm CHỮ NHOÈ đúng lúc đang hiện ra. Còn lại 2 lớp: mờ dần + trồi lên. */
  .dv-page.rvtab .rv-i,.lh-page.rvtab .rv-i{
    opacity:0;transform:translateY(28px);
    transition:opacity .8s ease-out,transform .95s var(--chu-nhip)}
  .dv-page.rvtab .rv-i.rv-on,.lh-page.rvtab .rv-i.rv-on{opacity:1;transform:none}
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  A1 · BÌA SỐNG — khối này có thể GỠ NGUYÊN VẸN để hoàn tác            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Vì sao làm: 9 tab đều có bìa, và bìa là thứ khách nhìn NHIỀU NHẤT trên cả
   web (khách bấm xem vài tab mới đọc kỹ một tab). Nhưng chữ trên bìa lại là
   chỗ duy nhất chưa có gì — ảnh đã tự zoom sẵn, riêng chữ đứng chết.

   Bìa blog (.bia-cm/.bia-blog) ĐÃ có kim chạy chỉ ở gạch + hai mũi chỉ eyebrow,
   hẹn giờ 2,45–2,6s cho khớp lúc rèm mở. Nên ở đây em dùng ĐÚNG mốc giờ đó để
   cả web thành một nhịp, không phải hai hệ lệch nhau. */

/* ── ① ẢNH BÌA — settle rồi THỞ ────────────────────────────────────────────
   Cũ: zoom 1,18 → 1,03 trong 12 giây rồi ĐỨNG YÊN. Khách nào ở lại lâu hơn
   12 giây (đọc bìa, chờ ảnh) sẽ thấy ảnh chết cứng.
   Nay: hết cú settle thì chuyển sang thở rất chậm 1,03 ↔ 1,075 mỗi 22 giây —
   chậm tới mức không ai bắt được nó đang đổi, chỉ thấy tấm ảnh 'có sức sống'. */
@media(prefers-reduced-motion:no-preference){
  html.js-on .bia > img,
  html.js-on .bia-bg{
    /* CHỜ RÈM TAN MỚI PHÓNG (sửa 21/08/2026) — trước đây bắt đầu từ giây 0,
       tức phóng sau lưng tấm rèm. Lúc rèm vén lên thì ảnh đã đi hết 44%
       quãng đường, khách chỉ còn thấy phần đuôi. Nay lấy mốc rèm tan làm
       gốc nên khách xem được TRỌN cú settle. */
    animation:biaZoom 12s ease-out var(--tre-rem) both,
              biaTho 22s ease-in-out calc(var(--tre-rem) + 12s) infinite alternate;
    will-change:transform;transform-origin:50% 44%}
}
@keyframes biaZoom{from{transform:scale(1.18)}to{transform:scale(1.03)}}
@keyframes biaTho{from{transform:scale(1.03)}to{transform:scale(1.075)}}

/* ══ NGỦ ĐÔNG — tạm dừng hoạt ảnh CHẠY MÃI khi nó ra khỏi màn hình ══════════
   Cả web có đúng ba hoạt ảnh vô hạn, và cả ba đều không có chỗ dừng:
     · biaTho    22s  ảnh bìa "thở"      — mọi tab có bìa
     · vidGoiBam 2,8s hai vòng sóng nút play — trang chủ
     · newsChay  34s  bảng tin cuộn      — CHỈ mobile, tức đúng máy yếu nhất
   Chúng vẽ lại liên tục kể cả khi khách đã cuộn qua từ lâu và không ai nhìn.
   JS gắn .ngu-dong khi khối ra khỏi vùng nhìn (xem luvinus.js §9), gỡ khi
   cuộn về. Nhả luôn cả will-change: giữ lệnh ghim cho một lớp đang đứng im
   là giữ bộ nhớ không để làm gì.
   KHÔNG đổi gì về mặt nhìn — khách chỉ thấy hoạt ảnh khi nó ở trên màn. */
.ngu-dong,.ngu-dong::before,.ngu-dong::after,
.ngu-dong *,.ngu-dong *::before,.ngu-dong *::after{
  animation-play-state:paused !important}
.ngu-dong,.ngu-dong *{will-change:auto !important}

/* ── ② CHỮ TRÊN BÌA — dựng cảnh 3 nhịp ─────────────────────────────────────
   JS gắn .bia-song (dựng sẵn) → .bia-chay (chạy, đúng lúc rèm sạch màn).
      nhịp 1 · 2,10s  eyebrow trồi lên + hiện
      nhịp 2 · 2,24s  TIÊU ĐỀ trồi lên TỪ SAU MỘT ĐƯỜNG CẮT  ← ngôi sao
      nhịp 3 · 2,45s  gạch cam kẻ chạy ra từ giữa (khớp đúng bìa blog)

   VÌ SAO TIÊU ĐỀ DÙNG ĐƯỜNG CẮT CÒN EYEBROW THÌ KHÔNG: cắt là động tác mạnh,
   để dành cho chỗ mắt dừng lại. Eyebrow là chữ nhỏ có hai mũi chỉ hai bên
   (bìa blog), cắt vào đó sẽ xén mất mũi chỉ. */
/* ══ HAI THỨ ĐÃ SỬA SAU KHI XEM TRÊN MÁY THẬT ══════════════════════════════

   ① HẾT NHÁY CHỮ. Trước đây trạng thái chờ khoá vào lớp .bia-song — mà lớp
      đó do luvinus.js gắn, và tệp JS nạp Ở CUỐI TRANG (in_footer). Nên trình
      tự thực tế là: trang vẽ ra CHỮ HIỆN ĐỦ → JS chạy → chữ TẮT PHỤT → mới
      hiện lại. Cái nháy đó là "vệt chữ trắng" nhìn thấy trước khi chạy.
      Nay trạng thái chờ khoá vào CHÍNH LỚP BÌA có sẵn trong HTML, nên nó có
      hiệu lực ngay từ khung hình đầu tiên, không đợi JS. Lớp .js-on cũng đã
      được gắn bằng thẻ <script> trong <head> (header.php) nên khớp thời điểm.
      .bia-song giữ lại cho tương thích, nhưng không còn thứ gì phụ thuộc nó.

      LƯU Ý ĐỘ ƯU TIÊN — đã đo và sửa: nhánh trong :is() phải TOÀN LÀ MỘT LỚP.
      Bản đầu viết ':is(...,.blog-single .bai)', mà :is() nhận độ ưu tiên của
      nhánh NẶNG NHẤT, nên vế chờ thành (0,4,1) — đè luôn vế chạy (0,3,1) và
      chữ không bao giờ hiện lại. Nay dùng '.bai' trần (lớp này chỉ có đúng ở
      single.php, index.php dùng .bai-viet khác hẳn), hai vế bằng nhau và vế
      chạy nằm sau nên thắng. Thêm nhánh mới phải giữ đúng quy tắc một lớp.

   ② NHỊP MỀM HƠN. Nhịp cũ cubic-bezier(.16,1,.3,1) vọt lên 49% quãng đường
      chỉ trong 1/10 thời gian đầu, đỉnh tốc gấp 6,24 lần trung bình — đó là
      một cú GIẬT, không phải chữ trồi lên. Nhịp mới --chu-nhip bung 2,15 lần
      và dành 56% thời gian cho 20% quãng cuối, nên có đuôi dài, êm.
      Thời lượng cũng nới ~1,5 lần và các nhịp giãn ra cho đỡ dồn.  */
/* SỬA 21/08/2026 — anh Hưng: "chữ phụ trên h1 hiện trước và nhanh quá,
   như kiểu nằm sẵn ở đó".

   Đã dựng lại trục thời gian để loại trừ khả năng chữ chạy sau lưng rèm:
       rèm vén xong      2,05s
       lớp phủ tan hẳn   2,10s
       bìa bắt đầu chạy  2,10s   (LUV_TRE_REM)
   Ba mốc KHÍT NHAU — chữ không hề chạy khi còn bị che. Vậy lỗi nằm ở
   chính nhịp của dòng này, do hai nguyên nhân:

     ① ĐI QUÁ NGẮN — chỉ dời 12px. Với dòng chữ hoa nhỏ 10–11px thì 12px
        là quãng mắt không kịp nhận ra có chuyển động: nó "hiện ra" chứ
        không "trồi lên". Nới lên 18px.

     ② KHỞI ĐỘNG NGAY LẬP TỨC — trễ 0, tức đúng khoảnh khắc rèm biến mất
        thì nó đã đang chạy dở. Mắt còn đang hồi từ tấm rèm nên bỏ lỡ mấy
        khung hình đầu; ngẩng lên thì chữ đã nằm đó rồi. Cho nghỉ 0,14s để
        mắt kịp đặt vào tấm bìa TRƯỚC KHI có thứ gì nhúc nhích. */
html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) :is(.eyebrow,.nhan-cm){
  opacity:0;translate:0 18px}
html.js-on .bia-chay :is(.eyebrow,.nhan-cm){opacity:1;translate:0 0;
  transition:opacity .72s ease .14s,translate .9s var(--chu-nhip) .14s}

/* Đường cắt: chính thẻ h1 che, chữ bên trong trồi lên từ dưới mép che.
   padding + margin ÂM bằng nhau: nới chỗ cho phần đuôi chữ g, y, ạ khỏi bị
   xén, mà KHÔNG đẩy gạch cam xuống — cộng lại đúng bằng 0.
   h1 phải MỜ SẴN từ đầu: thẻ .luv-dong do JS tạo ra, trước lúc đó chưa có gì
   để giấu chữ — không cho h1 mờ thì riêng tiêu đề vẫn nháy một cái. */
html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) h1{
  overflow:hidden;
  padding-bottom:.18em;margin-bottom:-.18em;
  /* ĐỆM TRÊN — CHỮ TIẾNG VIỆT BẮT BUỘC PHẢI CÓ.
     Bản trước chỉ nới phía DƯỚI cho đuôi chữ g, y, ạ; phía trên để 0. Nhưng
     tiếng Việt còn có dấu CHỒNG LÊN NHAU — "VỀ" là mũ cộng huyền, "Ố" là mũ
     cộng sắc — vươn cao hơn thân chữ. Đo trên bìa Về Luvinus: chữ vượt lên
     3px trên hộp cắt, nên overflow:hidden xén mất dấu, thành ra "VE".
     Dùng em chứ không dùng px để tự co theo cỡ chữ: bìa chạy từ 26px trên
     điện thoại tới 44px trên máy tính. Cộng lề âm bằng đúng số đệm nên KHÔNG
     đẩy gạch cam xuống, và không đụng tới mép cắt phía dưới — chữ vẫn trồi
     lên từ sau đường cắt y như cũ. */
  padding-top:.2em;margin-top:-.2em;
  opacity:0}
html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) h1 .luv-dong{
  display:block;translate:0 106%}
/* Giãn nhịp 21/08/2026: các dòng vào cách nhau ÍT NHẤT 0,16s. Dưới ngưỡng
   đó mắt gộp thành "tất cả cùng lúc" chứ không đọc ra thứ tự — đó chính là
   cảm giác "nằm sẵn ở đó". Tổng chuỗi vẫn ~1,8s như trước. */
html.js-on .bia-chay h1{opacity:1;transition:opacity .66s ease .34s}
html.js-on .bia-chay h1 .luv-dong{translate:0 0;
  transition:translate 1.05s var(--chu-nhip) .34s}

/* Gạch cam CHỈ cho bìa tab chính — bìa blog đã tự may sẵn, đụng vào là chồng */
html.js-on .bia .gach{transform:scaleX(0);transform-origin:center}
html.js-on .bia.bia-chay .gach{transform:scaleX(1);
  transition:transform .9s var(--rem-nhip) .56s}

/* ── ②b NỬA DƯỚI CỦA BÌA — nối tiếp cho hết cảnh ──────────────────────────
   Cảnh dựng cũ dừng ở gạch chỉ (nhịp 3). Nhưng bìa Góc chia sẻ và các bìa
   chuyên mục còn ba thứ CHỮ nữa nằm dưới: đường dẫn, đoạn mô tả, ô tìm kiếm.
   Ba thứ đó xưa nay nằm sẵn từ khung hình đầu tiên — nên nửa trên bìa diễn,
   nửa dưới đứng im, nhìn ra ngay là hiệu ứng làm dở dang.

   Các nhịp tính TỪ LÚC .bia-chay được gắn (trang chủ là 2,10s sau khi rèm
   mở; các tab con không có rèm nên là ngay lập tức):

      nhịp 0 · +0,00s  đường dẫn hiện (CHỈ mờ dần, không trồi)
      nhịp 1 · +0,00s  eyebrow / nhãn chuyên mục trồi lên
      nhịp 2 · +0,18s  TIÊU ĐỀ trồi từ sau đường cắt   ← ngôi sao
      nhịp 3 · +0,36s  dòng thông tin đầu bài (chỉ có ở bài viết)
      nhịp 4 · +0,44s  gạch chỉ kẻ ra
      nhịp 5 · +0,54s  đoạn mô tả trồi lên
      nhịp 6 · +0,72s  ô tìm kiếm trồi lên             ← chốt cảnh

   Đường dẫn cố ý KHÔNG trồi: nó là thanh chỉ đường, không phải nội dung.
   Cho nó động đậy là tranh mất chỗ của tiêu đề — thứ mắt phải dừng lại. */
html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) .duong-dan{opacity:0}
html.js-on .bia-chay .duong-dan{opacity:1;transition:opacity .8s ease}

/* Dòng thông tin đầu bài (tác giả · ngày · số phút đọc) — nhịp ngay sau
   tiêu đề, trước khi mắt rơi xuống ảnh tiêu điểm. */
html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) .meta-top{
  opacity:0;translate:0 12px}
html.js-on .bia-chay .meta-top{opacity:1;translate:0 0;
  transition:opacity .72s ease .5s,translate .95s var(--chu-nhip) .5s}

html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) .phu{
  opacity:0;translate:0 14px}
html.js-on .bia-chay .phu{opacity:1;translate:0 0;
  transition:opacity .78s ease .72s,translate .95s var(--chu-nhip) .72s}

html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) .tim{
  opacity:0;translate:0 16px}
html.js-on .bia-chay .tim{opacity:1;translate:0 0;
  transition:opacity .78s ease .88s,translate .95s var(--chu-nhip) .88s}

/* ── ③ DẢI SỐ LIỆU dưới bìa — ba ô vào lần lượt + số tự đếm ────────────────
   Cả dải đang mờ dần thành MỘT KHỐI. Tắt lớp đó đi, giao cho từng ô — nếu
   không sẽ là hai lớp chồng lên nhau, phạm luật vàng. */
html.js-on body:not(.home) .dai{opacity:1 !important;transform:none !important;transition:none !important}
html.js-on body:not(.home) .dai > .khung > span{opacity:0;translate:0 11px}
html.js-on body:not(.home) .dai.rvl-in > .khung > span{opacity:1;translate:0 0;
  transition:opacity .68s ease,translate .85s var(--chu-nhip)}
html.js-on body:not(.home) .dai.rvl-in > .khung > span:nth-child(2){transition-delay:.11s,.11s}
html.js-on body:not(.home) .dai.rvl-in > .khung > span:nth-child(3){transition-delay:.22s,.22s}
/* JS bọc con số vào thẻ <b class=n> để đếm được — phải giữ nguyên nét chữ */
.dai .n{font-weight:inherit;font-size:inherit;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  html.js-on :is(.bia,.bia-blog,.bia-cm,.bai)
    :is(.eyebrow,.nhan-cm,.meta-top,.duong-dan,.phu,.tim,h1,h1 .luv-dong),
  html.js-on .bia .gach,
  html.js-on body:not(.home) .dai > .khung > span{
    opacity:1 !important;translate:none !important;transform:none !important;transition:none !important}
  html.js-on :is(.bia,.bia-blog,.bia-cm,.bai) h1{
    overflow:visible;padding-bottom:0;margin-bottom:0}}
/* ╚══════════════════════════ HẾT A1 ══════════════════════════╝ */

/* ═══════════════════ 6.0 · MÀN MỞ ĐẦU (INTRO) — rèm nâu tách ra · chữ vàng dựng cảnh ═══════════════════ */
.luv-mo-man{position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:hidden}
/* hai tấm rèm nâu (nửa trên / nửa dưới) */
.luv-mo-man::before,.luv-mo-man::after{content:'';position:absolute;left:0;right:0;height:50.6%;
  background:linear-gradient(180deg,#4a3729,#38291d)}
.luv-mo-man::before{top:0;box-shadow:0 1px 0 rgba(185,138,50,.35)}
.luv-mo-man::after{bottom:0;box-shadow:0 -1px 0 rgba(185,138,50,.35)}
.luv-mo-man__giua{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:0 24px}
.luv-mo-man__ten{font-family:var(--font-tieu-de);font-weight:600;color:var(--kem);
  font-size:clamp(30px,7vw,66px);letter-spacing:.34em;text-indent:.34em;opacity:0}
.luv-mo-man__chi{display:block;height:1px;width:0;
  background:linear-gradient(90deg,transparent,var(--vang-nghe) 20%,var(--vang-nghe) 80%,transparent)}
.luv-mo-man__cham{font-size:clamp(9px,2.2vw,12px);letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--vang-nghe);opacity:0}

/* Không JS hoặc người dùng tắt chuyển động → bỏ hẳn màn mở đầu */
html:not(.js-on) .luv-mo-man{display:none}
@media(prefers-reduced-motion:reduce){.luv-mo-man{display:none}}
@media(prefers-reduced-motion:no-preference){
  html.js-on .luv-mo-man{animation:moManTat .55s ease 1.55s forwards}
  html.js-on .luv-mo-man::before{animation:remLen 1s cubic-bezier(.76,0,.24,1) 1.05s forwards;will-change:transform}
  html.js-on .luv-mo-man::after{animation:remXuong 1s cubic-bezier(.76,0,.24,1) 1.05s forwards;will-change:transform}
  html.js-on .luv-mo-man__ten{animation:moManHien .85s cubic-bezier(.16,1,.3,1) .12s forwards}
  html.js-on .luv-mo-man__chi{animation:moManChi .7s cubic-bezier(.16,1,.3,1) .5s forwards}
  html.js-on .luv-mo-man__cham{animation:moManHien .7s cubic-bezier(.16,1,.3,1) .46s forwards}
}
@keyframes moManHien{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes moManChi{from{width:0;opacity:0}to{width:min(240px,58vw);opacity:1}}
@keyframes remLen{to{transform:translateY(-100%)}}
@keyframes remXuong{to{transform:translateY(100%)}}
@keyframes moManTat{to{opacity:0;visibility:hidden}}

/* ═══════════════════ 6.0 · VIỀN CHỈ VÀNG — khung "may đo" sang trọng cho khối nổi bật ═══════════════════ */
/* Đường chỉ vàng = border gạch (dashed) như mũi may, ôm sát trong mép khối. */
.reg-card .form-chinh,
.why .wcard,
.ds-ic li,
.vl-page .loi,
.vl-page .the-hoc,
.vl-page .ket,
.vl-page .anh,
.pframe{position:relative}

body .form-chinh::after,
.why .wcard::after,
.ds-ic li::after,
.rv::after,
.vl-page .loi::after,
.vl-page .the-hoc::after{
  content:'';position:absolute;inset:7px;border:1.4px dashed var(--vang-nghe);
  border-radius:inherit;opacity:.55;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(185,138,50,.14);
  transition:opacity .35s ease,inset .35s ease}
/* Form nền DẠ TWEED (tối) → đổi sang CHỈ KEM cho nổi (quy tắc hệ chỉ: nền tối = chỉ kem) */
body .form-chinh::after{border-color:rgba(236,213,170,.7);opacity:1;box-shadow:none}

/* Khối nền tối (form đăng ký) → chỉ vàng dịu để không chói */

/* ═══════════ MỌI FORM: nền DẠ TWEED + đường may giống form trang chủ ═══════════ */
/* Nội dung từng form giữ nguyên; chỉ đồng bộ NỀN tweed + VIỀN MAY + chữ sáng để đọc rõ. */
body .form-chinh{
  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}
/* chữ form luôn SÁNG trên nền tweed (kể cả trang Liên hệ vốn nền sáng chữ tối) */
body .form-chinh .luv-form__tieu-de,body .form-chinh h2,body .form-chinh h3{color:var(--kem)}
body .form-chinh .luv-form__mo-ta,body .form-chinh .xong,body .form-chinh .xong p,body .form-chinh .hoac{color:var(--chu-phu-toi)}

/* Kết bài "Hành trình": BỎ khung chỉ vàng (theo yêu cầu) */

/* Khung ảnh sản phẩm học viên (trang chủ) → chỉ vàng liền, mảnh như khung tranh */
.pframe::after{
  content:'';position:absolute;inset:5px;border:1px solid rgba(185,138,50,.5);
  border-radius:8px;pointer-events:none;z-index:2}

/* Rê chuột → đường chỉ ánh lên, siết nhẹ vào */
.reg-card .form-chinh:hover::after,
.why .wcard:hover::after,
.ds-ic li:hover::after,
.vl-page .loi:hover::after,
.vl-page .the-hoc:hover::after,
.vl-page .anh:hover::after{opacity:.85;inset:5px}

/* ═══════════════════ TẦNG 3 · ĐIỂM NHẤN ══════════════════════════════════════
   Mỗi tab 1–2 chỗ, đặt ở nơi khách CẦN WOW hoặc CẦN BỊ THUYẾT PHỤC.
   Cả bộ chỉ dùng BA động tác nghề may, để 8 tab nghe như một người làm:

     ① TRẢI VẢI  — khối mở ra từ một mép   (clip-path)
     ② MAY CHỈ   — đường viền tự vẽ ra     (scaleX / clip-path trên ::before)
     ③ LẬT XEM   — phóng hoặc nghiêng nhẹ  (transform)

   JS gắn .nhan-cho (chờ) → .nhan-hien (chạy) — xem luvinus.js §6.2.
   Mọi luật đều tắt sạch khi khách bật chế độ giảm chuyển động. */

/* ── ① TRẢI VẢI — ảnh mở ra từ mép trái ─────────────────────────────────────
   Nay chỉ còn dùng cho ảnh bài nổi bật Góc chia sẻ.
   (Lưới trang Hình ảnh đã chuyển sang "lóe flash" — xem hinh-anh.css.
    Ảnh mục 08–10 trang Khóa học đã chuyển sang "đặt ảnh vào khung" — xem dưới.) */
/* Quãng đo được 642px (ảnh tiêu điểm đầu bài viết) — bậc VỪA.
   Trước là 0,78s = 823 px/s, tấm rèm nhanh thứ nhì cả web. */
html.js-on .trai-vai.nhan-cho{clip-path:inset(0 100% 0 0)}
html.js-on .trai-vai.nhan-hien{clip-path:inset(0 0 0 0);
  transition:clip-path var(--rem-vua) var(--rem-nhip)}

/* Phần tử vừa nằm trong lưới có NHỊP vừa mang điểm nhấn TRẢI VẢI thì
   nhịp nhường chỗ: bỏ mờ+trồi, chỉ còn động tác trải — đúng luật vàng
   "một khối tối đa 2 lớp". Nhưng vẫn giữ SO LE để không bật đèn cả phòng. */
html.js-on .nhip > .trai-vai{opacity:1 !important;transform:none !important}
/* So le theo chu kỳ 3 — KHỚP ĐÚNG lưới 3 cột, nên mắt đọc được là
   "trái → giữa → phải" trong từng hàng. Bản trước dùng chu kỳ 4 (lệch nhịp
   với lưới) và độ trễ chỉ 70ms — bằng 9% thời lượng, mắt không kịp nhận ra. */
html.js-on .trai-vai.nhan-hien:nth-child(3n+2){transition-delay:.18s}
html.js-on .trai-vai.nhan-hien:nth-child(3n){transition-delay:.36s}
/* Ảnh nằm TRONG lưới có nhịp: luật nhịp (chu kỳ 4) có độ ưu tiên cao hơn nên
   ĐÈ MẤT luật so le ở trên — kết quả là độ trễ lộn xộn 0/.06/.12/.18/.15/.06,
   ảnh thứ 6 nổ trước ảnh thứ 4, mắt không đọc ra trật tự nào. Ba dòng dưới
   nâng độ ưu tiên lên cao hơn để giành lại quyền, và xoá độ trễ thừa. */
/* (Luật giành quyền cho lưới ảnh đã bỏ — lưới ảnh nay dùng hệ
   "ảnh hiện khi tải xong", xem hinh-anh.css) */

/* ── ①b ĐẶT ẢNH VÀO KHUNG — mục 08 Bằng cấp · 09 Lớp học · 10 Sản phẩm ──────
   Ý tưởng: .khung-anh vốn ĐÃ là một tấm bo giấy kem viền chỉ vàng đứt nét —
   tức là một bức ảnh rọi dán lên bo, không phải ảnh trôi nổi. Nên cho nó hiện
   ra đúng như vậy: từng tấm được ĐẶT XUỐNG BO — hơi nghiêng, hơi nhấc lên —
   rồi lắng phẳng vào khung với một nhịp nảy rất nhẹ lúc chạm.

   BA CHIỀU NGHIÊNG KHÁC NHAU trên một hàng (−2° · +1,6° · −1,1°) và đặt xuống
   lệch nhau 0,1 giây → đọc ra như có người lần lượt xếp ba tấm ảnh xuống bàn,
   không phải máy trải đều. Góc để RẤT NHỎ: quá 2° là ra chất nhãn dán rẻ tiền.

   VÌ SAO KHÔNG DÙNG transform: .khung-anh đã dùng transform cho hiệu ứng nhấc
   khi trỏ chuột. Dùng ba thuộc tính RỜI rotate/translate/scale thì hai thứ
   nhân với nhau, không giẫm chân nhau. */
html.js-on .dat-khung.nhan-cho{opacity:.3;rotate:-2deg;translate:0 -14px;scale:.955}
html.js-on .dat-khung.nhan-hien{
  opacity:1;rotate:0deg;translate:0 0;scale:1;
  transition:opacity .3s ease-out,
             rotate .75s cubic-bezier(.18,.86,.26,1),
             translate .75s cubic-bezier(.22,1.15,.34,1),   /* >1 = nảy nhẹ lúc chạm bo */
             scale .75s cubic-bezier(.16,1,.3,1),
             transform .18s ease, box-shadow .18s ease}     /* giữ NGUYÊN nhịp nhấc khi trỏ chuột */

/* Mỗi cột một chiều nghiêng và một độ cao khác nhau */
html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n+2){rotate:1.6deg;translate:0 -17px}
html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n){rotate:-1.1deg;translate:0 -11px}

/* So le 0,1s theo cột. Độ trễ phải ghi RIÊNG TỪNG THUỘC TÍNH đúng thứ tự trên:
   ghi một giá trị chung sẽ dính luôn vào transform → trỏ chuột vào phải chờ
   0,2 giây khung mới nhấc, hỏng mất cảm giác nhạy tay. Hai số 0s cuối là để
   transform và box-shadow (việc của trỏ chuột) KHÔNG bị trễ. */
html.js-on .anh-luoi .dat-khung.nhan-hien:nth-child(3n+2){transition-delay:.1s,.1s,.1s,.1s,0s,0s}
html.js-on .anh-luoi .dat-khung.nhan-hien:nth-child(3n){transition-delay:.2s,.2s,.2s,.2s,0s,0s}

@media(max-width:760px){   /* máy hẹp còn 2 cột → góc nhỏ lại, quãng rơi ngắn lại */
  html.js-on .dat-khung.nhan-cho{rotate:-1.4deg;translate:0 -10px;scale:.97}
  html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n+2){rotate:1.2deg;translate:0 -12px}
  html.js-on .anh-luoi .dat-khung.nhan-cho:nth-child(3n){rotate:-.8deg;translate:0 -8px}}

/* ── ② MAY CHỈ — đường viền đứt tự may quanh khối ───────────────────────────
   Dùng cho: khối HỌC PHÍ trang Khóa học (giây khách quyết định xuống tiền).
   Viền vốn đã là nét chỉ đứt sẵn của web — nay nó tự vẽ ra thay vì có sẵn. */
html.js-on .may-chi.nhan-cho::before{clip-path:inset(0 100% 0 0)}
/* Đường chỉ SÁNG HẲN trong lúc đang may (độ mờ 1), may xong mới lắng
   về .55 như bình thường. Bản trước may ở độ mờ .55 suốt — một nét đứt mảnh
   mờ chạy ngang thì gần như không ai thấy. Kéo dài 1,15 → 1,5 giây. */
html.js-on .may-chi.nhan-cho::before{opacity:1}
/* Quãng 1069px — bậc DÀI (2s). Hai mốc đi kèm phải dời theo cho khớp:
   đường chỉ may xong ở giây 2,12 nên nét sáng lắng lại từ 1,85s, và con số
   giá nhún ở 1,75s — vẫn đúng lúc mắt sắp chạm tới cuối đường chỉ. */
html.js-on .may-chi.nhan-hien::before{clip-path:inset(0 0 0 0);opacity:.55;
  transition:clip-path var(--rem-dai) var(--rem-nhip) .12s,opacity .6s ease 1.85s}
/* Nhịp thứ hai: may xong thì CON SỐ GIÁ nhún nhẹ một cái — mắt vừa đi hết
   đường chỉ là rơi đúng vào giá. Không bao giờ ẩn số, chỉ nhún. */
@keyframes luvNhipGia{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
html.js-on .may-chi.nhan-hien .gia b{animation:luvNhipGia .7s cubic-bezier(.34,1.4,.64,1) 1.75s both}

/* ── ③ TRẢI TẤM VẢI — bảng lịch mở xuống từ mép trên ────────────────────────
   Dùng cho: bảng lịch khai giảng (Lịch học + mục 11 Khóa học).

   ĐÃ SỬA sau khi soi trên Chrome thật: bản đầu ẩn RUỘT (các hàng) rồi cho hiện
   dần — nhưng khung ngoài màu nâu sẫm lại hiện đủ ngay, nên suốt 0,4 giây bảng
   trông như một HỘP NÂU RỖNG, chữ không đọc được. Nay cắt cả khối theo chiều
   dọc: khung và hàng lộ ra CÙNG NHAU từ trên xuống — đúng nghĩa trải tấm vải,
   và không có khoảnh khắc nào nhìn thấy hộp rỗng. */
/* ══ ĐÃ ĐỔI LẦN HAI — anh Hưng thấy "hơi thô", muốn mượt hơn ═══════════════
   Ràng buộc ở trên VẪN ĐÚNG và em giữ: khối có nền vải nâu #6f5236, hàng thì
   trắng — cho khung hiện trước rồi hàng hiện sau là thấy hộp nâu rỗng. Nên
   khung và hàng vẫn phải vào CÙNG NHAU.

   Nhưng cách thực hiện cũ có hai chỗ làm nó thô:
     ① clip-path là thứ trình duyệt KHÔNG giao cho card đồ hoạ — mỗi khung
        hình phải vẽ lại cả khối. Đo được: khối cao tới 408px, có 9 khối, nền
        lại là vân nhiễu. Cùng đúng cái bệnh đã phải chữa ở rèm trang chủ.
     ② Nó là một ĐƯỜNG THẲNG CỨNG quét từ trên xuống, ngoài ra không gì động.
        Mắt bắt được cái mép đó, đọc ra là "bị kéo màn che", không phải "lịch
        hiện ra".

   Nay cả khối TRÔI VÀO VÀ LẮNG LẠI: mờ dần + trồi 22px + nở nhẹ từ 0,985.
   Cả ba đều là thứ chạy trên card đồ hoạ, không vẽ lại gì, nên mượt. Không
   còn mép cứng nào để mắt bắt. Vẫn giữ nguyên hướng đi lên như cũ.

   Dùng translate/scale RIÊNG chứ không gộp vào transform, và PHẢI kê lại
   transform + box-shadow trong danh sách transition — .khoi-lich có nhịp
   nhấc 3px khi rê chuột, khai transition mới mà quên là xoá mất nhịp đó. */
html.js-on .do-hang.nhan-cho{opacity:0;translate:0 22px;scale:.985}
html.js-on .do-hang.nhan-hien{opacity:1;translate:0 0;scale:1;
  transition:opacity .8s ease,
             translate 1.05s var(--chu-nhip),
             scale 1.05s var(--chu-nhip),
             transform .18s ease, box-shadow .18s ease}

/* ── ④ SÁNG LẦN LƯỢT — các bước quy trình bật sáng theo đúng thứ tự số ──────
   Dùng cho: 6 bước quy trình trang Dịch vụ. Quy trình LÀ thứ tự — hiệu ứng
   kể đúng thứ tự đó. Ô số nhảy lên trước, chữ theo sau. */
html.js-on .buoc.nhan-cho{opacity:0;transform:translateY(12px)}
/* 6 bước NỐI ĐUÔI nhau. Bản trước không có độ trễ nào giữa các bước —
   cả 6 cùng nằm trong màn hình nên nổ đồng loạt trong 0,45s, thành ra không
   ai kịp thấy có hiệu ứng. Nay mỗi bước cách nhau 0,15s, tổng ~1,3 giây:
   đủ chậm để đọc ra THỨ TỰ — mà thứ tự chính là nội dung của một quy trình. */
html.js-on .buoc.nhan-hien{opacity:1;transform:none;--tre:0s;
  transition:opacity .55s ease var(--tre),transform .55s cubic-bezier(.16,1,.3,1) var(--tre)}
html.js-on .buoc.nhan-hien:nth-child(2){--tre:.15s}
html.js-on .buoc.nhan-hien:nth-child(3){--tre:.30s}
html.js-on .buoc.nhan-hien:nth-child(4){--tre:.45s}
html.js-on .buoc.nhan-hien:nth-child(5){--tre:.60s}
html.js-on .buoc.nhan-hien:nth-child(6){--tre:.75s}
html.js-on .buoc.nhan-cho .stt{transform:scale(.7);opacity:0}
html.js-on .buoc.nhan-hien .stt{transform:none;opacity:1;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1) calc(var(--tre) + .12s),
             opacity .35s ease calc(var(--tre) + .12s)}

/* ── ⑤ LẬT XEM — nút play nảy nhẹ ĐÚNG MỘT LẦN khi thẻ video hiện ───────────
   Lời mời bấm, không phải hiệu ứng chạy mãi. */
/* Dùng thuộc tính `scale` RIÊNG, không dùng transform:scale().
   Lý do: hai nơi gọi hiệu ứng này đều đã có transform của riêng mình —
   nút play căn giữa bằng translate(-50%,-50%), nút "Hỗ trợ tư vấn" nhấc lên
   bằng translateY(-2px) khi rê chuột. Animation có fill `both` nên giá trị
   cuối bám lại vĩnh viễn và ĐÈ CHẾT transform gốc: đo được nút play văng
   xuống phải đúng 23px = nửa thân nó. `scale` riêng thì cộng vào transform
   chứ không thay thế, nên cả hai chỗ giữ nguyên vị trí. */
@keyframes luvMoiBam{0%{scale:.82}55%{scale:1.07}100%{scale:1}}
html.js-on .the-video.nhan-hien .play{animation:luvMoiBam .62s cubic-bezier(.34,1.4,.64,1) .18s both}

/* ── ⑥ MỞ RÈM NGANG — bản đồ hiện rõ dần ───────────────────────────────────
   Dùng cho: bản đồ trang Liên hệ (điểm nhấn thứ 2 của tab). */
/* MỞ RÈM thật: cắt ngang từ trái sang. Bản trước chỉ mờ dần + thu nhỏ
   1,5% — 1,5% thì mắt không thể thấy, nên chỉ còn cảm giác "ảnh tải hơi chậm".
   Nay là một động tác kéo rèm rõ ràng, chậm hơn (1,1 giây). */
/* Quãng 462px — bậc VỪA. Trước 1,1s. */
html.js-on .mo-rem.nhan-cho{clip-path:inset(0 100% 0 0)}
html.js-on .mo-rem.nhan-hien{clip-path:inset(0 0 0 0);
  transition:clip-path var(--rem-vua) var(--rem-nhip)}

/* ── ⑥b GHI TỪNG BUỔI — mục 04 "Nội dung chi tiết khóa học" ────────────────
   Khối này là chỗ khách ĐỌC KỸ NHẤT trước khi quyết định đăng ký, và nó dài
   5–6 màn hình. Nên ở đây hiệu ứng phải phục vụ việc ĐỌC, không phải để đẹp:
   mỗi buổi tự hiện đúng lúc cuộn tới nó, êm và ngắn, tuyệt đối không giữ chữ
   lại lâu. Điểm nhấn nằm ở NHỊP LẦN LƯỢT, không nằm ở động tác.

   Hai lớp, đúng luật vàng:
      ① khối buổi   mờ → rõ .42s  +  trồi 14px .55s
      ② số buổi     "BUỔI 01" trượt vào lề, chậm hơn 0,16s
   Lớp ② là nhịp "ghi vào sổ": khối giấy đặt xuống trước, số buổi điền vào sau.

   Hai cột lệch nhau 0,08s → mắt đọc trái rồi phải, không nổ cả hàng.

   VÌ SAO KHÔNG DÙNG transform: .b1 đã dùng transform cho hiệu ứng trỏ chuột.
   Dùng thuộc tính RỜI translate thì hai thứ không giẫm chân nhau — và hai số
   0s cuối trong transition-delay là để trỏ chuột KHÔNG bị trễ. */
html.js-on .ghi-muc.nhan-cho{opacity:0;translate:0 14px}
html.js-on .ghi-muc.nhan-hien{opacity:1;translate:0 0;
  /* Nhịp mềm: khối này lặp tới 57 lần trên một trang khóa học. Nhịp cũ
     .16,1,.3,1 bung 6,24 lần — 57 cú nảy tanh tách trong lúc khách đang đọc
     thì mệt mắt. Nhịp chữ bung 2,15 lần, lắng lại chứ không nảy. */
  transition:opacity .6s ease-out,
             translate .8s var(--chu-nhip),
             transform .16s ease, box-shadow .16s ease}   /* giữ NGUYÊN nhịp trỏ chuột */
html.js-on .ds30 .ghi-muc.nhan-hien:nth-child(2n){transition-delay:.08s,.08s,0s,0s}

html.js-on .ghi-muc.nhan-cho .n{opacity:0;translate:-9px 0}
html.js-on .ghi-muc.nhan-hien .n{opacity:1;translate:0 0;
  transition:opacity .3s ease .16s,translate .45s cubic-bezier(.16,1,.3,1) .16s}
html.js-on .ds30 .ghi-muc.nhan-hien:nth-child(2n) .n{transition-delay:.24s,.24s}

@media(max-width:760px){   /* máy hẹp còn 1 cột → bỏ so le theo cột, quãng trồi ngắn lại */
  html.js-on .ghi-muc.nhan-cho{translate:0 11px}
  html.js-on .ds30 .ghi-muc.nhan-hien:nth-child(2n){transition-delay:0s,0s,0s,0s}
  html.js-on .ds30 .ghi-muc.nhan-hien:nth-child(2n) .n{transition-delay:.16s,.16s}}

/* ── ⑥c MỞ RÈM — ảnh mục 01 "Giới thiệu" & 02 "Khóa học dành cho ai" ───────
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  DỰNG LẠI TOÀN BỘ 17/08/2026 — cùng cơ chế với rèm đã chạy tốt       ║
   ╚══════════════════════════════════════════════════════════════════════╝

   BẢN CŨ DÙNG clip-path CẮT TẤM ẢNH. Anh Hưng báo 5 lần: trên điện thoại
   "rèm không mở ra 2 bên mà biến mất luôn", trong khi PC vẫn chạy tốt.

   Anh Hưng chỉ ra điểm mấu chốt: rèm khoá học ở TRANG CHỦ và rèm bản đồ ở
   trang LIÊN HỆ đều chạy tốt trên điện thoại. Khác biệt duy nhất là CƠ CHẾ:
       hai chỗ kia : TẤM PHỦ THẬT trượt đi bằng transform
       chỗ này     : CẮT ẢNH bằng clip-path
   clip-path bắt trình duyệt VẼ LẠI tấm ảnh mỗi khung hình — không chạy trên
   bộ tổng hợp đồ hoạ. Thêm nữa <img> là phần tử thay thế: hộp nội dung của nó
   đổi ngay lúc ảnh vừa tải xong, đủ để trình duyệt huỷ hiệu ứng đang chạy.
   transform thì chạy thẳng trên bộ tổng hợp, không vẽ lại pixel nào.

   NAY DÙNG ĐÚNG CƠ CHẾ ĐÓ: hai cánh rèm tweed thật, mỗi cánh phủ nửa khung,
   trượt ra hai bên. Giống hệt trang-chu (.cc .th::after) và lien-he
   (.ban-do-hop::before), chỉ khác là tách làm hai cánh để mở ra hai phía.

   ::before = cánh TRÁI  → trượt sang trái
   ::after  = cánh PHẢI  → trượt sang phải
   (Viền chỉ may đã chuyển sang outline của .anh — xem khoa-hoc.css — để giải
    phóng ::after. Không mất viền, không đổi hình thức.)

   Tấm ảnh bên trong KHÔNG bị đụng tới: không cắt, không lật. Chỉ còn Ken
   Burns lắng zoom bằng scale — cũng là thuộc tính chạy trên bộ tổng hợp.

   MỘT LUẬT DUY NHẤT CHO CẢ PC LẪN ĐIỆN THOẠI. Không còn nhánh riêng cho màn
   hẹp, không còn chỗ nào lệch nhau. */

/* Nẹp vải trôi ngang vào — giữ nguyên như cũ (transform, vốn vẫn chạy tốt).
   Trôi TỪ TRONG RA vì trang này không có chắn tràn ngang: bắt đầu ở phía
   ngoài thì màn 1000px ảnh thò khỏi mép phải 16px và sinh thanh cuộn ngang. */
/* ══ NHỊP — chỉnh cho mượt 17/08/2026 ═════════════════════════════════════
   Bản trước ba chuyển động chạy cùng lúc mà kết thúc lệch nhau:
       khung nẹp 1,20s  ·  rèm 1,00s  ·  ảnh lắng zoom 1,50s
   Rèm mở xong rồi khung MỚI trôi nốt 0,2s → hai nhịp đá nhau, mắt đọc ra là
   khô. Nay xếp lại thành BA CHẶNG NỐI TIẾP, mỗi chặng bắt đầu khi chặng
   trước gần xong — động tác một mạch, không chồng chéo:
       ① khung nẹp về chỗ      0 → 0,90s
       ② rèm mở ra hai bên  0,14 → 1,29s
       ③ ảnh lắng zoom      0    → 1,80s   (đuôi dài nhất, còn nhích khẽ sau
                                            khi rèm đã mở xong → cảm giác sống)
   Quãng trôi của khung hạ 34px → 22px và co 98,5% → 99%: đi ngắn hơn trong
   thời gian gần bằng cũ nên tốc độ chậm lại, êm hơn hẳn.
   Đường cong đổi sang loại RÀ CHẬM VỀ CUỐI (.22,.75,.28,1) thay cho đường
   cong cũ vốn giữ tốc độ đều tới sát đích rồi dừng khựng. */
html.js-on .mo-vai.nhan-cho{translate:-22px 0;scale:.99}
html.js-on .co-anh.dao .mo-vai.nhan-cho{translate:0 0;scale:.994}
html.js-on .mo-vai.nhan-hien{translate:0 0;scale:1;
  transition:translate .9s cubic-bezier(.22,.75,.28,1),
             scale .9s cubic-bezier(.22,.75,.28,1)}

/* Chặn hai cánh rèm không tràn ra ngoài nẹp vải khi trượt. */
html.js-on .mo-vai{overflow:hidden}

/* ══ HAI CÁNH RÈM ══════════════════════════════════════════════════════
   Nền tweed sẫm #2F2317 — cùng công thức với rèm trang chủ và rèm bản đồ,
   để ba chỗ trên web nhìn ra cùng một chất vải. */
html.js-on .mo-vai::before,
html.js-on .mo-vai::after{
  content:'';position:absolute;top:8px;bottom:8px;z-index:2;pointer-events:none;
  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='.9'%20numOctaves='3'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23tw)'%20opacity='.5'/%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;
  transform:translate3d(0,0,0);
  /* Chặng ②: vào sau khung nẹp 0,14s, chạy 1,15s.
     Đường cong .30,.78,.28,1 — rời chỗ dứt khoát rồi RÀ CHẬM DẦN về cuối,
     nên lúc cánh rèm khuất khỏi mép nó đã gần như đứng yên, không có cảm
     giác "biến mất đột ngột" như đường cong cũ giữ tốc độ đều tới sát đích. */
  transition:transform 1.15s cubic-bezier(.30,.78,.28,1) .14s}

html.js-on .mo-vai::before{left:8px;right:50%;border-radius:10px 0 0 10px;
  box-shadow:1px 0 10px rgba(0,0,0,.28)}
html.js-on .mo-vai::after{left:50%;right:8px;border-radius:0 10px 10px 0;
  box-shadow:-1px 0 10px rgba(0,0,0,.28)}

/* Mở: hai cánh trượt ra hai phía.
   ⚠ 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". Phép tính ra nguyên nhân:
     cánh rèm nằm cách mép khung 8px, nên bề rộng nó = (W/2 − 8).
     Trượt 101% là trượt 1,01×(W/2 − 8) — TÍNH THEO BỀ RỘNG CỦA CHÍNH NÓ,
     không phải theo khung. Muốn khuất hẳn thì phải đi đủ W/2.
       1,01×(W/2 − 8) ≥ W/2   ⟺   W ≥ 1616px
     Khung ảnh khoá học chỉ rộng 315–413px → cánh rèm hụt 4–5px, phần hụt đó
     chính là VỆT NÂU ĐẬM còn lại ở mép.
   Rèm trang chủ không dính vì nó dùng inset:0 — bề rộng đúng bằng khung nên
   101% luôn thừa.
   calc(100% + 9px) = đi hết bề rộng của mình CỘNG đúng 8px lề, dư 1px cho
   chắc. Đúng ở MỌI bề rộng khung, không phụ thuộc kích thước màn. */
html.js-on .mo-vai.nhan-hien::before{transform:translate3d(calc(-100% - 9px),0,0)}
html.js-on .mo-vai.nhan-hien::after{transform:translate3d(calc(100% + 9px),0,0)}

/* Ken Burns — ảnh lắng zoom CHẬM HƠN rèm (1,5s so với 1s) nên còn nhích khẽ
   sau khi rèm đã mở xong: động tác có đuôi chứ không cụt.
   scale là thuộc tính rời, chạy trên bộ tổng hợp — an toàn như transform. */
/* Chặng ③: quãng zoom hạ 5,5% → 4% và kéo dài 1,5s → 1,8s.
   Đi ngắn hơn trong thời gian dài hơn = tốc độ chỉ còn khoảng một nửa, nên
   ảnh "thở" chứ không "trôi". Vẫn dài hơn rèm (1,29s) nên còn nhích rất khẽ
   sau khi rèm mở xong — chính cái đuôi đó tạo cảm giác sống. */
html.js-on .mo-vai.nhan-cho img{scale:1.04}
html.js-on .mo-vai.nhan-hien img{scale:1;
  transition:scale 1.8s cubic-bezier(.18,.72,.24,1)}

/* ══ MỤC 02 "KHOÁ HỌC NÀY DÀNH CHO AI" — LẬT CÁNH VẢI ════════════════════
   KHÔNG dùng rèm. Mục 02 có động tác riêng: tấm ảnh dựng gần như quay lưng
   (nghiêng 72° quanh trục dọc, bản lề ở mép trái) rồi xoay về đối diện mắt.
   Vì có phối cảnh 1400px nên trong lúc lật, tấm ảnh CO NGẮN LẠI theo chiều
   sâu đúng như một cánh cửa thật — thứ mà cắt hình không bao giờ làm được.
   Bản lề ở MÉP TRÁI vì mục 02 đảo bố cục (ảnh trái, chữ phải): cánh mở bung
   ra phía chữ, dẫn mắt từ ảnh sang chữ.

   Động tác này dùng transform — CHẠY TRÊN BỘ TỔNG HỢP như rèm, nên không
   dính lỗi của clip-path. Vì vậy dùng CHUNG MỘT LUẬT cho cả PC lẫn điện
   thoại, không tách nhánh, đúng như phần rèm ở trên.

   Đường cong .3,.85,.25,1 — bật nhanh khỏi thế quay lưng rồi rà chậm về đúng
   mặt, như cánh cửa nặng lúc gần đóng khít. */

/* Hai cánh rèm KHÔNG dùng ở mục 02. ::before đổi vai thành NỀN TWEED SẪM
   đứng yên phía sau — chính nó làm hiệu ứng đọc được: lúc ảnh còn quay lưng,
   chỗ trống lộ ra là tấm nền tối, mắt hiểu ngay có một tấm phẳng đang xoay
   chứ không phải ảnh bị xén. ::after tắt hẳn. */
html.js-on .co-anh.dao .mo-vai::before{
  left:8px;right:8px;z-index:0;
  border-radius:10px;
  transform:none;transition:none;
  box-shadow:none}
html.js-on .co-anh.dao .mo-vai::after{display:none}

/* ══ NHỊP MỤC 02 — chỉnh cho mượt 17/08/2026 ══════════════════════════════
   Bản trước lật từ 72° với phối cảnh 1400px trong 1,2s. Vấn đề:
   ở 72° tấm ảnh gần như quay lưng hẳn, bề ngang nhìn thấy chỉ còn cos(72°)
   ≈ 31%. Nửa đầu quãng xoay hầu như không thấy ảnh rộng thêm bao nhiêu, rồi
   nửa sau bung ra rất nhanh → cảm giác "khựng một nhịp rồi vọt".

   Nay:
     · góc hạ 72° → 58°   (bề ngang thấy được từ 31% lên 53% ngay từ đầu →
                           tốc độ bung đều hơn hẳn suốt quãng xoay)
     · phối cảnh 1400 → 1900px  (bớt méo, cánh cửa "xa" hơn nên chuyển động
                                 hiền hơn, không giật ở mép gần)
     · dài 1,2s → 1,45s
     · đường cong .26,.76,.28,1 — rời chỗ vừa phải rồi rà chậm về đúng mặt,
       thay cho .3,.85,… vốn bật rất gắt ngay nhịp đầu */
html.js-on .co-anh.dao .mo-vai.nhan-cho img{
  transform-origin:left center;
  transform:perspective(1900px) rotateY(-58deg)}
html.js-on .co-anh.dao .mo-vai.nhan-hien img{
  transform:perspective(1900px) rotateY(0deg);
  transition:transform 1.45s cubic-bezier(.26,.76,.28,1) .1s,
             scale 1.8s cubic-bezier(.18,.72,.24,1)}

/* Người bật giảm chuyển động: rèm biến mất ngay, cánh không lật, ảnh hiện đủ. */
@media(prefers-reduced-motion:reduce){
  html.js-on .mo-vai::before,
  html.js-on .mo-vai::after{display:none !important}
  html.js-on .mo-vai,html.js-on .mo-vai img{
    translate:none !important;scale:none !important;transition:none !important}
  /* transform là thuộc tính riêng, 'translate/scale:none' không chạm tới —
     phải gỡ riêng thì cánh mục 02 mới không kẹt ở thế quay lưng 72°. */
  html.js-on .co-anh.dao .mo-vai img{transform:none !important}}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  A3 · NHỊP CHƯƠNG — ô số 01 · 02 · 03 đóng dấu vào                    ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Mọi tab đều đánh số mục, và ô số là một CON DẤU viền chỉ đứt nghiêng −2°.
   Nhưng nó đang hiện ra chìm nghỉm cùng cả khối, không ai để ý.

   Nay cho nó ĐÓNG DẤU: từ nhỏ và nghiêng ngược, bật về đúng chỗ với một nhịp
   vượt đà. Lặp lại ở mọi mục của mọi tab → thành nhịp lật chương xuyên suốt
   web, cho khách cảm giác đang lật từng chương một cuốn sách.
   Đếm được: Dịch vụ 8 dấu · Khóa học, Video, Góc chia sẻ 3 · Lịch học, Hình
   ảnh 2 · Liên hệ 1 — cộng cả 11 trang khóa học là hàng trăm nhịp.

   VÌ SAO KHÔNG DÙNG transform: ô số đã dùng transform cho độ nghiêng −2° sẵn
   có. Dùng thuộc tính RỜI rotate/scale thì hai thứ NHÂN với nhau — lúc chờ là
   −2−16 = −18°, lắng về đúng −2° gốc, không mất nét thiết kế.

   VÌ SAO KHÔNG CHO MỜ DẦN RIÊNG: cả khối cha đã mờ dần rồi (A2). Thêm một lớp
   mờ nữa lên chính ô số là chồng lớp — phạm luật vàng. Con dấu chỉ lo động
   tác, việc hiện ra để khối cha lo.

   CHỈ ÁP TRONG <section>: trang Đội ngũ chuyên gia dựng bằng khối .khung nên
   không nhận lớp hiện — áp vào đó thì ô số kẹt bé tí nghiêng ngoẹo vĩnh viễn. */
html.js-on body:not(.home) section h2 > .so{scale:.55;rotate:-16deg;--dau-tre:.18s}
html.js-on body:not(.home) section.rvl-in h2 > .so,
html.js-on body:not(.home) section h2.rv-on > .so,
html.js-on body:not(.home) section h2.td-hien > .so,
html.js-on body:not(.home) section h2.nhan-hien > .so{
  scale:1;rotate:0deg;
  transition:scale .55s cubic-bezier(.34,1.5,.64,1) var(--dau-tre),
             rotate .55s cubic-bezier(.34,1.5,.64,1) var(--dau-tre)}

/* TAB DỊCH VỤ — chỗ này bắt buộc phải chặn, nếu không con dấu MẤT TRẮNG.
   Trang đó có hệ riêng: tiêu đề tự hiện bằng lớp .td-hien và còn trễ thêm
   0,38s. Nếu để lớp hiện của CẢ KHỐI (.rvl-in) kích hoạt con dấu thì dấu đóng
   xong từ lâu trong lúc tiêu đề vẫn còn vô hình — khách không thấy gì hết.
   Hai dòng dưới: giữ dấu chờ cho tới khi chính tiêu đề hiện, rồi đóng sau
   0,52s (= 0,38s của tiêu đề + 0,14s) để dấu rơi đúng lúc chữ vừa rõ. */
html.js-on .dv-page section.rvl-in h2:not(.td-hien) > .so{
  scale:.55;rotate:-16deg;transition:none}
html.js-on .dv-page section h2.td-hien > .so{--dau-tre:.52s}

@media(max-width:760px){   /* máy hẹp: dấu nhỏ hơn nên nghiêng ít lại cho gọn */
  html.js-on body:not(.home) section h2 > .so{scale:.62;rotate:-11deg}}

@media(prefers-reduced-motion:reduce){
  html.js-on body:not(.home) section h2 > .so{
    scale:none !important;rotate:none !important;transition:none !important}}
/* ╚══════════════════════════ HẾT A3 ══════════════════════════╝ */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  B1 · CÂU HỎI THƯỜNG GẶP — có ở 6 tab, cả 6 đều đang trống            ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Từng câu hỏi vào lần lượt 80ms một dòng, và dấu + XOAY VÀO như vừa được
   đặt lên bàn. Dấu + là mỏ neo của mắt trong một khối hỏi–đáp: thấy nó là
   biết bấm được, nên cho nó động tác riêng chứ không hiện chìm cùng dòng.

   VÌ SAO PHẢI GHI transform .22s VÀO DANH SÁCH: dấu + đã dùng transform để
   xoay 45° thành dấu × khi mở câu trả lời. Khai transition mới mà quên nó là
   xoá luôn nhịp xoay đó — bấm vào dấu sẽ nhảy phắt, mất hẳn cảm giác mượt. */
html.js-on .faq-khoi > details{opacity:0;translate:0 14px}
html.js-on .faq-khoi.nhan-hien > details{opacity:1;translate:0 0;
  transition:opacity .68s ease,translate .82s var(--chu-nhip)}
html.js-on .faq-khoi.nhan-hien > details:nth-child(2){transition-delay:.08s,.08s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(3){transition-delay:.16s,.16s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(4){transition-delay:.24s,.24s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(5){transition-delay:.32s,.32s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(n+6){transition-delay:.4s,.4s}

html.js-on .faq-khoi > details .mui{rotate:-90deg;scale:.35}
html.js-on .faq-khoi.nhan-hien > details .mui{rotate:0deg;scale:1;
  transition:rotate .5s cubic-bezier(.34,1.5,.64,1) .14s,
             scale .5s cubic-bezier(.34,1.5,.64,1) .14s,
             transform .22s}                      /* .22s = giữ nguyên nhịp xoay thành dấu × */
html.js-on .faq-khoi.nhan-hien > details:nth-child(2) .mui{transition-delay:.22s,.22s,0s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(3) .mui{transition-delay:.3s,.3s,0s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(4) .mui{transition-delay:.38s,.38s,0s}
html.js-on .faq-khoi.nhan-hien > details:nth-child(n+5) .mui{transition-delay:.46s,.46s,0s}

/* Câu trả lời ĐỔ XUỐNG CÓ ĐÀ khi bấm mở — trước đây bật ra cứng đơ.
   Dùng animation chứ không transition: thẻ <details> mở ra là đổi chiều cao
   tức thì, transition không bắt được; animation thì chạy độc lập, luôn mượt. */
@keyframes faqDapXuong{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
html.js-on .faq details[open] .tl{animation:faqDapXuong .4s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){
  html.js-on .faq-khoi > details,html.js-on .faq-khoi > details .mui{
    opacity:1 !important;translate:none !important;rotate:none !important;
    scale:none !important;transition:none !important}
  html.js-on .faq details[open] .tl{animation:none !important}}
/* ╚══════════════════════════ HẾT B1 ══════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  B2 · KHỐI FORM ĐĂNG KÝ — 9 chỗ trên web, tất cả đang trống           ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Đây là CHỖ RA TIỀN của cả web mà lại là khối nhạt nhất. Nay: tiêu đề lên
   trước, rồi từng ô nhập trượt vào lần lượt, nút ĐĂNG KÝ nảy lên sau cùng.

   ══ NGUYÊN TẮC AN TOÀN, KHÔNG ĐÁNH ĐỔI ══
   Ô NHẬP VÀ NÚT BẤM TUYỆT ĐỐI KHÔNG ĐƯỢC MỜ VỀ 0.
   Mọi thứ khác trên web hỏng thì chỉ xấu; form hỏng thì MẤT KHÁCH. Nếu vì
   bất kỳ lý do gì mà lớp .nhan-hien không tới nơi (JS lỗi, máy lạ, bộ gác
   cửa im), thì với opacity:0 khách sẽ nhìn thấy một cái form TRỐNG RỖNG
   không điền được. Nên ô nhập và nút CHỈ trượt vị trí, luôn nhìn thấy được,
   luôn bấm được — hỏng cỡ nào cũng chỉ lệch 14px chứ không bao giờ biến mất.
   Riêng tiêu đề và dòng cam kết bảo mật là chữ trang trí → cho mờ dần thoải mái. */
html.js-on .may-form .luv-form__dau,
html.js-on .may-form .luv-form__lb,
html.js-on .may-form .luv-form__riengtu{opacity:0;translate:0 12px}
html.js-on .may-form.nhan-hien .luv-form__dau,
html.js-on .may-form.nhan-hien .luv-form__lb,
html.js-on .may-form.nhan-hien .luv-form__riengtu{opacity:1;translate:0 0;
  transition:opacity .68s ease,translate .82s var(--chu-nhip)}
html.js-on .may-form.nhan-hien .luv-form__riengtu{transition-delay:.42s,.42s}

/* Ô nhập — CHỈ trượt, không mờ (xem nguyên tắc an toàn ở trên) */
html.js-on .may-form .luv-form__hang > .luv-inp,
html.js-on .may-form .luv-form__hang > .luv-sel{translate:0 14px}
html.js-on .may-form.nhan-hien .luv-form__hang > .luv-inp,
html.js-on .may-form.nhan-hien .luv-form__hang > .luv-sel{translate:0 0;
  transition:translate .55s cubic-bezier(.16,1,.3,1) .12s}
html.js-on .may-form.nhan-hien .luv-form__hang > *:nth-child(2){transition-delay:.2s}
html.js-on .may-form.nhan-hien .luv-form__hang > *:nth-child(3){transition-delay:.28s}
html.js-on .may-form.nhan-hien .luv-form__hang > *:nth-child(4){transition-delay:.36s}

/* Nút ĐĂNG KÝ — nảy lên sau cùng.
   Dùng ANIMATION chứ không transition: nút đã có 'transition:.18s' cho nhịp
   nhấc khi trỏ chuột. Khai transition mới là xoá mất nhịp đó; animation thì
   chạy song song, không đụng gì tới nó. */
@keyframes nutDangKyVao{
  from{translate:0 16px;scale:.94}
  60% {translate:0 -3px;scale:1.02}
  to  {translate:0 0;scale:1}}
html.js-on .may-form.nhan-hien .nut-dk{
  animation:nutDangKyVao .62s cubic-bezier(.34,1.4,.64,1) .44s backwards}

/* Nút ĐĂNG KÝ Ở TRANG CHỦ — nảy y hệt trang khoá học (thêm 17/08/2026).
   VÌ SAO PHẢI VIẾT RIÊNG: luvinus.js dòng 925 gắn lớp .may-form bằng bộ chọn
   'body:not(.home) .luv-form' — cố tình LOẠI TRỪ trang chủ, vì trang chủ có
   hệ hiện riêng. Nên luật trên không bao giờ chạm tới nút ở trang chủ.

   ⚠ LẦN ĐẦU MÓC NHẦM VÀO '.reg-card.chi-may' (hệ đường may) → trên MOBILE
   không thấy nảy. Nguyên nhân: .chi-may gắn lên .reg-card khi CẢ KHỐI vào
   khung nhìn, còn form chỉ hiện khi .form-chinh nhận .rvl-in — hai mốc khác
   nhau. Màn nhỏ khối cao hơn nên hai mốc lệch xa: nút nảy xong xuôi lúc form
   vẫn đang opacity:0, khách không thấy gì.

   CÁCH ĐÚNG: móc vào ĐÚNG lớp làm form hiện — .form-chinh.rvl-in. Lớp này do
   ĐOẠN MÃ NGAY TRONG front-page.php (dòng ~280) gắn, KHÔNG phải luvinus.js
   (§6.0 của luvinus.js cũng loại trừ trang chủ). Nút và form dùng chung một
   mốc nên mọi cỡ màn đều đúng nhịp.

   ⚠ ĐỘ TRỄ PHẢI KHÁC TRANG KHOÁ HỌC (.44s → .72s). Vì sao:
     · Trang khoá học: các ô nhập hiện SO LE (.2s → .28s → .36s), nút nảy ở
       .44s là thứ CUỐI CÙNG động → cú nảy nổi bật.
     · Trang chủ: cả thẻ (tiêu đề + mô tả + 3 ô + nút) trồi lên CÙNG MỘT KHỐI
       trong .68s. Nảy ở .44s là đang lúc cả thẻ còn trôi → cú nảy 16px của
       nút bị hoà vào chuyển động 32px của thẻ, mắt không tách ra được.
       Anh Hưng báo "mobile không thấy nảy" chính là hiện tượng này.
     · .72s = ngay sau khi thẻ đứng yên (.68s) → cú nảy tách bạch, rõ ràng.
   NHỊP RIÊNG (anh Hưng yêu cầu 17/08/2026: "nảy nhanh quá, muốn chậm và mượt
   hơn, đủ để cảm nhận"). Nên trang chủ dùng khung hình RIÊNG, chậm hơn và có
   hai nhịp lún — KHÔNG đụng gì tới nút trang khoá học.

   Khác biệt so với bản trang khoá học — CHỈ ĐỔI NHỊP, giữ nguyên dáng:
     · vẫn ĐÚNG 2 nhịp (trồi lên quá đà → lùi về) y như cũ, biên độ gần như cũ
       (16px→-4px, 94%→102,5%). KHÔNG làm mạnh hơn, không thêm nhịp lún.
     · dài .9s thay vì .62s   → mắt kịp bắt trọn, không thấy "giật một phát"
     · ĐƯỜNG CONG RIÊNG CHO TỪNG NHỊP thay vì một đường cong nảy dùng chung:
         nhịp 1 (trồi lên): cong mượt, tăng tốc rồi giảm dần
         nhịp 2 (lùi về)  : cong mềm hơn nữa, tan dần vào chỗ đứng
       Bản cũ dùng cubic-bezier(.34,1.4,…) — bản thân đường cong đã nảy, cộng
       với khung hình cũng nảy → chồng hai cái nảy, ra chuyển động gằn. Đây
       chính là chỗ làm anh Hưng thấy "nhanh quá, không mượt".
     · chờ .85s thay vì .72s  → thẻ đứng yên (.68s) rồi NGƯNG một nhịp ngắn
                                mới nảy, thành động tác mời bấm rõ ràng. */
/* Biên độ hạ nhẹ một nấc theo yêu cầu 17/08/2026 ("nảy nhẹ hơn 1 chút"):
   trồi 16px→13px · vọt quá đà -4px→-2,5px · phóng 102,5%→101,5%.
   Giữ nguyên 2 nhịp, 0,9s và cặp đường cong — chỉ nhỏ biên độ lại. */
@keyframes nutMoiBamNhe{
  0%  {translate:0 13px;  scale:.955; animation-timing-function:cubic-bezier(.22,.68,.30,1)}
  60% {translate:0 -2.5px;scale:1.015;animation-timing-function:cubic-bezier(.33,0,.30,1)}
  100%{translate:0 0;     scale:1}}
html.js-on body.home .reg-card .form-chinh.rvl-in .nut-dk{
  animation:nutMoiBamNhe .9s .85s backwards}

@media(max-width:560px){   /* máy hẹp: form xếp dọc, rút quãng cho gọn */
  html.js-on .may-form .luv-form__hang > .luv-inp,
  html.js-on .may-form .luv-form__hang > .luv-sel{translate:0 10px}}

@media(prefers-reduced-motion:reduce){
  html.js-on .may-form .luv-form__dau,html.js-on .may-form .luv-form__lb,
  html.js-on .may-form .luv-form__riengtu,
  html.js-on .may-form .luv-form__hang > *{
    opacity:1 !important;translate:none !important;transition:none !important}
  html.js-on .may-form.nhan-hien .nut-dk,
  /* nút trang chủ dùng móc khác (.form-chinh.rvl-in) nên phải gỡ riêng */
  html.js-on body.home .reg-card .form-chinh.rvl-in .nut-dk{animation:none !important}}
/* ╚══════════════════════════ HẾT B2 ══════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  C · NHỊP NHÓM — quét sạch mọi nhóm phần tử lặp còn trống              ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Sau A1–A3 và B1–B2, chỗ trống còn lại trên các tab đều CÙNG MỘT HÌNH DẠNG:
   một nhóm phần tử lặp lại (lưới thẻ, danh sách có icon, danh sách khóa…).
   Nên thay vì bịa ra 15 hiệu ứng khác nhau — vừa tốn vừa rối — em làm MỘT
   nhịp nhóm đủ mạnh rồi trỏ nó vào tất cả. Cả web giữ đúng một ngôn ngữ.

   Đã quét được:
      Khóa học ×11  .luoi 6 thẻ · .ds-ic 4+6 dòng · .ds-khoa 12 · .nghe-luoi 4
      Dịch vụ       .luoi-kh 4 · .ly-do 6 · .yeuto 5 · .lh-thongtin ul 4
      Góc chia sẻ   .luoi-bai 8 thẻ bài · .luoi-noibat 6
      Video         .luoi-v 10 (đã có sẵn nhịp cũ, nay lên nhịp mạnh)

   SO LE THEO CHU KỲ 3 — khớp lưới 3 cột, nên mắt đọc được là trái→giữa→phải
   trong từng hàng. Danh sách 1–2 cột thì chu kỳ 3 vẫn cho cảm giác chảy đều,
   và không phần tử nào phải chờ quá 0,14s dù danh sách có 12 mục.

   QUÃNG 18px chứ không 30px như khối lớn: nhóm nằm TRONG khối lớn vốn đã trồi
   30px rồi. Cho nhóm cùng quãng nữa là cộng thành 48px — đọc ra thành nhấp
   nhô hai tầng, mệt mắt. 18px đủ để thấy nhịp mà không đánh nhau với khối cha. */
html.js-on .nhom > *{opacity:0;translate:0 18px}
html.js-on .nhom.nhan-hien > *{opacity:1;translate:0 0;
  transition:opacity .68s ease,translate .85s var(--chu-nhip)}
html.js-on .nhom.nhan-hien > *:nth-child(3n+2){transition-delay:.07s,.07s}
html.js-on .nhom.nhan-hien > *:nth-child(3n){transition-delay:.14s,.14s}

/* Chip icon trong từng mục — nảy vào sau mục của nó 0,14s.
   Dùng thuộc tính RỜI 'scale': nhiều chip đã dùng transform cho nhịp phóng to
   khi trỏ chuột, đụng vào transform là giẫm chân. */
html.js-on .nhom > * > .ic{scale:.62}
html.js-on .nhom.nhan-hien > * > .ic{scale:1;
  transition:scale .5s cubic-bezier(.34,1.45,.64,1) .14s}
html.js-on .nhom.nhan-hien > *:nth-child(3n+2) > .ic{transition-delay:.21s}
html.js-on .nhom.nhan-hien > *:nth-child(3n) > .ic{transition-delay:.28s}

@media(max-width:760px){   /* máy hẹp thường về 1 cột → rút quãng, bỏ bớt so le */
  html.js-on .nhom > *{translate:0 14px}
  html.js-on .nhom.nhan-hien > *:nth-child(3n+2){transition-delay:.05s,.05s}
  html.js-on .nhom.nhan-hien > *:nth-child(3n){transition-delay:.1s,.1s}}

@media(prefers-reduced-motion:reduce){
  html.js-on .nhom > *,html.js-on .nhom > * > .ic{
    opacity:1 !important;translate:none !important;scale:none !important;transition:none !important}}
/* ╚══════════════════════════ HẾT C · nhịp nhóm ══════════════════════════╝ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  C · BÀI VIẾT — nhẹ tay có chủ ý                                      ║
   ║  Khối này có thể GỠ NGUYÊN VẸN để hoàn tác                            ║
   ╚═══════════════════════════════════════════════════════════════════════╝
   Bài đo được: 6.804px, 6.050 chữ, 40 đoạn văn, 5 tiêu đề, 2 danh sách.

   LUẬT TUYỆT ĐỐI: KHÔNG BAO GIỜ GẮN HIỆU ỨNG VÀO ĐOẠN VĂN.
   40 đoạn mà đoạn nào cũng nhấp nháy thì đọc hết bài là mỏi mắt — người ta
   vào đây để ĐỌC, không phải để xem trình diễn. Chỉ ba thứ được động vào:
      · 5 tiêu đề  → mốc chương, giúp mắt biết mình đang ở đâu
      · 2 danh sách → vốn đã tách khỏi mạch đọc
      · 4 ảnh      → đã có sẵn từ trước
   Tổng cộng 11 điểm động trên 6.804px — trung bình 600px mới có một cái.
   Đủ để bài không khô, thưa đủ để không ai thấy phiền. */
html.js-on .chu-bai.nhan-cho{opacity:0;translate:0 16px}
html.js-on .chu-bai.nhan-hien{opacity:1;translate:0 0;
  transition:opacity .55s ease,translate .65s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){
  html.js-on .chu-bai{opacity:1 !important;translate:none !important;transition:none !important}}
/* ╚══════════════════════════ HẾT C · bài viết ══════════════════════════╝ */


/* ── ⑦ ẢNH TRONG BÀI — mờ → rõ. Điểm nhấn DUY NHẤT của trang bài viết ───────
   2.331 từ: đây là chỗ khách ĐỌC, tuyệt đối không đụng vào chữ. */
html.js-on .than-bai img.nhan-cho{opacity:0;transform:translateY(10px)}
html.js-on .than-bai img.nhan-hien{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){
  html.js-on .trai-vai,html.js-on .may-chi::before,html.js-on .mo-rem,
  html.js-on .do-hang,html.js-on .buoc,html.js-on .buoc .stt,
  html.js-on .than-bai img,html.js-on .dat-khung,
  html.js-on .ghi-muc,html.js-on .ghi-muc .n,
  html.js-on .mo-vai img{
    clip-path:none !important;opacity:1 !important;transform:none !important;
    /* Phải gỡ CẢ translate/scale riêng: các hiệu ứng ở đây dùng thuộc tính
       rời chứ không gộp vào transform, nên "transform:none" không chạm tới
       chúng. Thiếu hai dòng này thì người bật giảm chuyển động sẽ thấy khối
       lịch kẹt lệch 22px và nhỏ hơn 1,5%. */
    translate:none !important;scale:none !important;rotate:none !important;
    transition:none !important;animation:none !important}
  /* ba thuộc tính RỜI phải gỡ riêng — 'transform:none' không chạm tới chúng */
  html.js-on .dat-khung{rotate:none !important;translate:none !important;scale:none !important}
  html.js-on .ghi-muc,html.js-on .ghi-muc .n{translate:none !important}
  /* .mo-vai đã có khối gỡ riêng ngay sau phần dựng rèm (mục ⑥c) — không lặp
     lại ở đây. Mục 02 không còn lật 3D nữa nên cũng bỏ luôn dòng gỡ transform. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MỤC 18 — NỚI VÙNG CHẠM CHO NÚT NHỎ TRÊN ĐIỆN THOẠI  (rà soát 17/08/2026)

   VẤN ĐỀ: đo trên màn 375px, một số nút nhỏ hơn mức Google khuyến nghị (48×48):
        nút mở menu 40×32  ·  mũi tên slider 38×38  ·  chấm chuyển 8×8
        nút Zalo/Messenger nổi 41×41  ·  thanh dưới cùng cao 32px

   CÁCH LÀM: phủ một lớp TRONG SUỐT bằng ::after (hoặc ::before) định vị tuyệt
   đối. Nút vẫn trông y hệt, bố cục không xê dịch một pixel — chỉ vùng nhận
   ngón tay rộng ra.

   KÍCH THƯỚC ĐÃ ĐO ĐỂ KHÔNG LẤN NÚT BÊN CẠNH:
        mở menu   40×32 → 48×48   (khối cha .khung cao 52px, vừa)
        mũi tên   38×38 → 44×44   (khe giữa 2 mũi tên 8px → tối đa 46)
        chấm      8×8   → 15×36   (khe giữa 2 chấm 7px → tối đa 15 ngang;
                                   trên/dưới trống ≥182px nên 36 dọc thoải mái)
        Zalo/Mess 41×41 → 48×48   (bước dọc 49px → vừa khít, không chồng)
        thanh dưới  cao 32 → 44   (cách cụm Zalo/Mess phía trên 13px → an toàn)

   ⚠ .lien-chat a ĐÃ dùng ::after cho việc khác → phải dùng ::before.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* nút mở menu — vốn đã position:absolute nên ::after tự neo đúng */
  .mo-menu::after{content:'';position:absolute;top:50%;left:50%;
    width:48px;height:48px;transform:translate(-50%,-50%)}

  /* mũi tên trái/phải của slider */
  .nb{position:relative}
  .nb::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}

  /* chấm chuyển ảnh — nới ngang tối đa 15px để không ăn sang chấm kế bên */
  .dot{position:relative}
  /* Vùng chạm đã được nới sẵn từ trước: 15x36px, CỐ Ý không rộng hơn theo
     chiều ngang để vùng bấm hai chấm cạnh nhau không đè lên nhau. Rà soát
     21/08/2026 đã kiểm và giữ nguyên thiết kế này. */
  .dot::after{content:'';position:absolute;top:50%;left:50%;
    width:15px;height:36px;transform:translate(-50%,-50%)}
  /* chấm đang chọn rộng 22px — vùng chạm bám theo đúng bề ngang thật của nó */
  .dot.on::after,.dot[aria-current="true"]::after{width:100%}

  /* nút Zalo / Messenger nổi cạnh phải */
  .lien-chat a::before{content:'';position:absolute;top:50%;left:50%;
    width:48px;height:48px;transform:translate(-50%,-50%)}

  /* hai nút thanh dưới cùng — nới chiều cao, bề ngang vốn đã 169px */
  .day a{position:relative}
  .day a::after{content:'';position:absolute;top:50%;left:0;right:0;
    height:44px;transform:translateY(-50%)}
}

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  CĂN ĐỀU HAI BÊN — LUẬT CHUNG TOÀN WEB               19/08/2026         ║
   ╚═════════════════════════════════════════════════════════════════════════╝
   Anh Hưng: "tất cả các tab còn lại căn cho anh cả PC và mobile cho tối ưu và
   thông minh, vừa nhìn thẩm mĩ đẹp nhưng vẫn giữ được nội dung và phải hợp lý
   không cưỡng ép gây xấu cho cảm nhận đọc của người xem".

   Đặt ở hop-phan.css vì tệp này nạp trên MỌI trang và nạp TRƯỚC css riêng của
   từng trang — nên chỉ cần một chỗ khai, và trang nào muốn phá lệ vẫn phá được.

   ── CÁCH QUYẾT ĐỊNH: ĐO, KHÔNG ĐOÁN ──
   Căn đều hai bên chạm mép phải bằng cách GIÃN KHOẢNG TRỐNG GIỮA CÁC CHỮ. Cột
   càng hẹp thì càng ít khe để chia phần giãn, nên phần giãn dồn vào vài khe —
   đọc ra thành những "dòng sông trắng" chạy dọc giữa đoạn. Đó chính là kiểu
   "cưỡng ép gây xấu" mà anh Hưng dặn tránh.

   Em đã đo SỨC CHỨA THẬT của từng cột trên khổ điện thoại 375px (khổ hẹp nhất,
   quyết định tất cả — PC luôn rộng gấp 2–3 lần nên chắc chắn đạt). Phép đo:
   gom các hộp chữ theo toạ độ dòng → bề rộng chữ trung bình → sức chứa cột.
   Ngưỡng chọn: 34 ký tự/dòng. Tiếng Việt chữ ngắn (~4 ký tự + dấu cách) nên
   34 ký tự còn khoảng 7 khe để chia — đủ để giãn đều mà mắt không thấy.

   ── ĐO ĐƯỢC (khổ 375px) ──
     Trang chủ         nhận xét 36 · vì sao 37 · bìa 47 · giảng viên 46
     Về Luvinus        thân bài 37–38 · mục 36 · môn 40 · điểm 42 · chú ảnh 35
     Khóa học          ghi mục 45 · thẻ 46 · chữ 40–41 · hẹp 41–42
     Bài viết blog     thân bài 37 · mục 35            (đã căn sẵn từ trước)
     Góc chia sẻ       tóm tắt 44 · dẫn 45–49
     Dịch vụ           bước 38 · khách 44 · dẫn 41 · phụ 51
     Liên hệ           kết nối 39 · xong 43 · dẫn 34
     Lịch học          dẫn 41 · ý 43 · đọc mã 51
     Hình ảnh · Video  dẫn 39–43 · phụ 52
     Biểu mẫu          mô tả 42–46 · dẫn 49–56

   ── SÁU CHỖ CỐ Ý KHÔNG CĂN ──
   Không phải bỏ sót — mỗi chỗ đều có lý do đo được:
     .cot blockquote.loi   30 ký tự   lời trích Về Luvinus
     .cot p.cau            29         câu nhấn Về Luvinus
     .tru p                33         cột trụ Về Luvinus
     .khung.hep li         22         mục ngắn trong khung hẹp khóa học
     .than-bai blockquote  23         lời trích trong bài viết
     .the-dv p             33         thẻ dịch vụ
   Riêng LỜI TRÍCH thì kể cả có rộng cũng không nên căn: nghề in xưa nay để
   lời trích so le bên phải cho nó tách hẳn khỏi mạch văn xung quanh.

   Tiêu đề, nhãn, nút, số liệu cũng không đưa vào: chữ ngắn 1–2 dòng, căn đều
   không có tác dụng mà chỉ thêm rủi ro khi đổi cỡ chữ.

   ── BA THUỘC TÍNH, KHÔNG BỎ CÁI NÀO ──
   text-align-last:left   Dòng CUỐI của đoạn giữ nguyên bên trái. Dòng cuối
     thường chỉ vài chữ; kéo giãn cho chạm mép phải thì trông như lỗi.
   hyphens:none           Cấm tự chèn gạch nối khi ngắt chữ. Tiếng Việt không
     có luật ngắt âm tiết bằng gạch nối, trình duyệt đoán sẽ ra sai.
   text-justify:inter-word  Bắt buộc giãn ở KHOẢNG TRỐNG GIỮA CHỮ, không được
     giãn bên trong một chữ. Không khai thì vài trình duyệt tự ý giãn trong
     chữ, làm chữ tiếng Việt rời ra từng ký tự. */

/* ── TRANG CHỦ ── */
.hero .in > p,
.team ul li,
.rv p,
.news .nc p,
.why .wcard p,
/* ── VỀ LUVINUS ── (trừ blockquote.loi · p.cau · .tru p) */
.cot > p:not(.cau),
.cot .muc > p,
.cot .muc > ul > li,
.cot ul.gia-tri li,      /* 41–44 ký tự — sót ở lượt đầu, bổ sung sau khi đối soát */
.mon p,
.diem p,
/* ── BỎ figcaption KHỎI LUẬT CĂN ĐỀU (sửa 19/08/2026) ─────────────────────
   Anh Hưng: phụ đề ảnh trang Về Luvinus phải căn giữa.

   ve-luvinus.css vốn đã khai .anh figcaption{text-align:center} rồi, nhưng
   hai phụ đề trong khối .doi vẫn hiện ra LỆCH TRÁI. Nguyên nhân là luật căn
   đều của em: text-align-last:left kéo DÒNG CUỐI về trái — mà phụ đề chỉ có
   MỘT dòng, nên chính nó là dòng cuối, thành ra bị kéo trái hết.

   (Bốn phụ đề còn lại không dính vì chúng nằm trong <figure>, mà selector
   ".khung > figcaption" đòi con TRỰC TIẾP của .khung — không khớp. Đúng kiểu
   lỗi chỉ hỏng một nửa, khó thấy.)

   Phụ đề vốn là nhãn ngắn một dòng, căn đều hai bên không có tác dụng gì.
   Gỡ hẳn ra khỏi danh sách. */
/* ── KHÓA HỌC ── (trừ .khung.hep li) */
.ghi-muc li,
.ds-ic li,               /* 43–44 ký tự — danh sách có biểu tượng, khóa học */
.the > p,
.chu > p,
.chu > ul > li,
.khung.hep > p,
/* ── BÀI VIẾT & GÓC CHIA SẺ ── (trừ blockquote · .tac-gia p) */
.than-bai > p,
.than-bai > ul > li,
.than-bai > ol > li,
.luoi-cm p.mt,
.dau-phan p,
/* ── DỊCH VỤ ── (trừ .the-dv p) */
.buoc p,
.kh p,
.box-gia p.mo,
/* ── LIÊN HỆ ── */
.ket-noi > p,
.xong > p,
/* ── LỊCH HỌC ── */
.y > p,
p.doc-ma,
/* ── DÙNG CHUNG NHIỀU TRANG ── */
.hep > p,
.dan-mo p, p.dan-mo,
.mo-dau p, p.mo-dau,
/* ── BỎ CÂU DẪN DƯỚI TIÊU ĐỀ BÌA KHỎI LUẬT CĂN ĐỀU (sửa 19/08/2026) ───────
   Anh Hưng: câu phụ dưới tiêu đề bìa trang Hình ảnh bị lệch trái, muốn căn giữa.

   ĐÚNG CÁI BẪY VỪA GẶP Ở PHỤ ĐỀ ẢNH: khối bìa vốn khai text-align:center cho
   cả cụm, nhưng luật căn đều của em kèm text-align-last:left kéo DÒNG CUỐI về
   trái. Câu dẫn chỉ có 2 dòng nên dòng thứ hai — dòng cuối — bị đẩy sang trái,
   nhìn ra thành lệch hẳn.

   Dấu hiệu cho thấy bẫy này đã cắn từ trước: dich-vu.css phải vá riêng một
   dòng .bia .noi > p.phu{text-align:center;text-align-last:center} để chống.
   Nay gỡ tận gốc ở đây thì bỏ luôn được miếng vá đó.

   Câu dẫn bìa là một câu ngắn nằm giữa, căn đều hai bên không hợp — chữ giãn
   ra chạm hai mép rồi dòng cuối cụt, xấu hơn hẳn để nó tự cân. */
.wg.cta-nho > p,
.lh-thongtin > p{
  text-align:justify;
  text-align-last:left;
  text-justify:inter-word;
  hyphens:none}

/* ── HAI CHỖ CHỈ CĂN TRÊN PC ──────────────────────────────────────────────
   Đây là chỗ "thông minh" mà anh Hưng dặn: cùng một khối chữ nhưng PC rộng
   gấp ba mobile, nên PC căn được mà mobile thì không.

     .tru p     (cột trụ Về Luvinus)   PC ~110 ký tự  ·  mobile ~33  ← hẹp
     .the-dv p  (thẻ dịch vụ)          PC  ~53 ký tự  ·  mobile ~33  ← hẹp

   Trên mobile cả hai tụt xuống 33 ký tự, dưới ngưỡng 34 — căn ở đó sẽ giãn
   chữ thấy rõ. Trên PC thì thừa sức. Nên chia mốc thay vì bỏ hẳn: được cái
   đẹp ở khổ rộng mà không phải trả giá ở khổ hẹp.

   Mốc 981px chọn theo đúng mốc bố cục sẵn có của theme, không đặt mốc mới. */
@media(min-width:981px){
  .tru p,
  .the-dv p{
    text-align:justify;
    text-align-last:left;
    text-justify:inter-word;
    hyphens:none}
}

/* ══ DẢI DƯỚI BÌA TRÊN ĐIỆN THOẠI — SIẾT GIÃN DÒNG (sửa 19/08/2026) ════════
   Anh Hưng: dải nâu dưới bìa có 3 dòng thì dày quá trên điện thoại, muốn thấp
   gọn hơn nhưng ĐỪNG chen chúc.

   ĐO ĐƯỢC (trang Dịch vụ, màn 375px): dải cao 119px
     lề trên+dưới        28px
     3 mục × 24px        72px
     2 khe × 10px        20px
   Mỗi mục cao 24px trong khi chữ chỉ 13,5px — vì giãn dòng thừa hưởng 1,75 từ
   thân bài. 1,75 là nếp cho ĐOẠN VĂN nhiều dòng; mỗi mục ở đây chỉ MỘT dòng
   nên phần đệm đó thành khoảng trống trên dưới chữ, ăn 10px mỗi mục mà không
   ai nhìn thấy.

   Hạ về 1,4: mục còn 19px, vẫn cao hơn biểu tượng 15px nên không bó chữ.
   Ba mục tiết kiệm 15px. KHÔNG đụng lề và khe — đó mới là thứ tạo cảm giác
   thoáng, siết vào là chen chúc ngay.

   Đặt ở đây vì line-height không tệp tab nào khai, và dùng "body ." để thắng
   luật .dai .khung của từng tab (nạp sau tệp này). Giống cách body .dai đang
   làm với nền vải ở phía trên. */
@media(max-width:760px){
  body .dai .khung{line-height:1.4}
}

/* ══ CHÂN CHỮ TRÊN BÌA — ĐIỆN THOẠI (sửa 21/08/2026) ═══════════════════════
   Từ khi bìa trên điện thoại được kéo cao lên (--bia-vua-man-dt, ~623px trên
   máy 375×812 thay vì ~380px như trước), khoảng trống dưới khối chữ không còn
   hợp tỉ lệ: chữ bị dồn sát mép đáy của một tấm ảnh cao gần gấp đôi.

   Đo trước khi sửa — khoảng trống dưới khối chữ, tính theo % chiều cao bìa:
       Hình ảnh · Hình ảnh sự kiện   23px = 3,7%   ← dính sát nhất
       Về Luvinus                    40px = 6,4%
       Khóa học · Lịch học           56px = 9,0%
       Dịch vụ                       59px = 9,4%
   Vừa quá thấp, vừa mỗi trang một kiểu.

   Nay gom về MỘT tỉ lệ chung, tính theo chính chiều cao bìa nên máy to máy
   nhỏ đều cân: 12,5% chiều cao, chặn trong khoảng 52–104px.

   VÌ SAO KHÔNG NÂNG CAO HƠN: lớp phủ tối trên bìa nhạt dần từ dưới lên và
   TẮT HẲN ở mốc 62% chiều cao (đặc 90% ở đáy → 66% ở mốc 20% → 30% ở mốc
   42% → trong suốt ở 62%). Đẩy chữ vượt mốc 42% là chữ bắt đầu nằm trên
   vùng ảnh chưa đủ tối: vừa khó đọc, vừa che mất phần ảnh đẹp. Với khối chữ
   cao nhất (Hình ảnh, phụ đề 3 dòng), mức 12,5% đặt đỉnh khối vào khoảng
   38% — vẫn trong vùng tối và còn dư biên an toàn.

   CÁCH LÀM: dồn hết khoảng trống vào khối chữ và xoá đệm dưới của .bia.
   Phải gom về một chỗ vì mỗi trang đang có đệm trong khác nhau (0 đến 23px);
   để nguyên thì bốn trang không thể ra cùng một con số.
   .bia dùng box-sizing:border-box nên việc này KHÔNG đổi chiều cao bìa —
   ảnh vẫn cao đúng như đã chốt, chỉ có chữ nhích lên. */
@media(max-width:760px){
  body .bia{padding-bottom:0}
  body .bia .noi,
  body .bia > .khung{padding-bottom:clamp(52px,calc(var(--bia-vua-man-dt) * .125),104px)}
}

/* ══ XEM ẢNH PHÓNG TO — lưới ảnh trong trang khóa học (thêm 21/08/2026) ══════
   Ba mục "Bằng cấp & chứng chỉ", "Hình ảnh lớp học", "Sản phẩm của học viên"
   đều dùng chung khối .anh-luoi. Trước đây ảnh hiển thị bé (~300px) và không
   bấm vào được, học viên không xem rõ được sản phẩm hay tấm bằng.

   KHÔNG dùng lại bộ xem ảnh của trang Hình ảnh: bộ đó bám chặt vào .luoi và
   một khối HTML viết sẵn trong hinh-anh.php. Bộ này tự dựng bằng JS nên không
   phải sửa nội dung trang nào.

   ẢNH KHÔNG BAO GIỜ BỊ PHÓNG QUÁ KHỔ THẬT — đây là điều anh Hưng dặn.
   Cách bảo đảm: để width/height:auto rồi chỉ chặn TRÊN bằng max-width/height.
   Thẻ ảnh mặc định hiện đúng khổ thật, max-* chỉ có thể thu nhỏ chứ không
   phóng to. Nên ảnh 800px sẽ dừng ở 800px dù màn hình rộng bao nhiêu — không
   bao giờ vỡ hạt. Đo trước khi làm: ảnh lớp học 1200–1400px, sản phẩm 800px,
   bằng cấp 800–900px.

   z-index 120 — bằng bộ xem ảnh trang Hình ảnh, trên đầu trang (80) và màn
   đen sau menu (78). Hai bộ không bao giờ cùng xuất hiện trên một trang. */
.anh-luoi .khung-anh{cursor:zoom-in}
.anh-luoi .khung-anh:focus-visible{outline:2px solid var(--cta);outline-offset:3px}

.luv-xem{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(24,20,16,.93);
  padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
.luv-xem.mo{display:grid}
.luv-xem__khung{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%}
/* width/height:auto = không phóng quá khổ thật (xem lời giải thích ở trên) */
.luv-xem__anh{display:block;width:auto;height:auto;max-width:min(92vw,1400px);max-height:76vh;
  border-radius:10px;box-shadow:0 26px 64px rgba(0,0,0,.55)}
.luv-xem__cap{color:var(--kem);font-size:14px;line-height:1.5;text-align:center;
  max-width:min(92vw,760px);margin:0}
.luv-xem__dem{color:var(--chu-phu-toi);font-size:12.5px;letter-spacing:.08em}
.luv-xem__nut{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(236,213,170,.32);background:rgba(31,28,25,.62);color:var(--kem);
  cursor:pointer;display:grid;place-items:center;transition:.16s;font-size:0}
.luv-xem__nut::before{content:'';width:11px;height:11px;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor}
.luv-xem__truoc::before{rotate:45deg;margin-left:4px}
.luv-xem__sau::before{rotate:-135deg;margin-right:4px}
.luv-xem__nut:hover{background:rgba(31,28,25,.9);border-color:rgba(236,213,170,.6)}
.luv-xem__truoc{left:-60px}
.luv-xem__sau{right:-60px}
.luv-xem__dong{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(236,213,170,.32);background:rgba(31,28,25,.62);color:var(--kem);
  cursor:pointer;display:grid;place-items:center;font-size:22px;line-height:1;transition:.16s}
.luv-xem__dong:hover{background:rgba(31,28,25,.9);border-color:rgba(236,213,170,.6)}
html.luv-khoa-cuon{overflow:hidden}
/* Màn hẹp: hai nút lật nằm ngoài ảnh sẽ lòi ra — kéo vào trong mép ảnh */
@media(max-width:1024px){
  .luv-xem__truoc{left:6px}
  .luv-xem__sau{right:6px}
  .luv-xem__anh{max-width:96vw;max-height:68vh}
}
@media(prefers-reduced-motion:reduce){ .luv-xem__nut,.luv-xem__dong{transition:none} }

/* ══ NHỊP BÌA TRÊN ĐIỆN THOẠI — RÚT NGẮN CHO VỪA VÀI GIÂY (21/08/2026) ═══════
   Anh Hưng: trên điện thoại khách bấm vào chỉ xem bìa vài giây rồi kéo xuống,
   hiệu ứng dài thì không ai ngồi chờ xem hết.

   ĐO TRƯỚC KHI SỬA (khổ 375×812):
     ảnh bìa   biaZoom 12s ease-out  → đi được 90% quãng đường ở giây thứ 6,4
     chuỗi chữ tổng 1,54–1,64s tuỳ trang
   Tức là khách đã kéo đi từ lâu, tấm ảnh mới phóng xong. Công sức làm hiệu
   ứng đổ đi hết.

   (Đối chiếu trang chủ: fpHeroZoom 11s — gần như y hệt, KHÔNG nhanh hơn. Sở dĩ
    trang chủ không bị để ý vì có màn rèm che 2,1 giây đầu, khách vào là đã qua
    đoạn phóng mạnh nhất. Tab con không có rèm nên lộ ra.)

   CHỌN 5 GIÂY CHO ẢNH — tính theo mốc "đi được 90% quãng đường":
       12s → 6,4s   (đang dùng, quá muộn)
        8s → 4,3s   (vẫn hơi dài)
     ►  5s → 2,7s   ✓ xong trong tầm khách còn nhìn bìa
        3s → 1,6s   (quá nhanh, thành cú giật)
   Giữ nguyên ease-out và biên độ phóng, chỉ đổi thời lượng — nên vẫn là cùng
   một cú settle mềm, chỉ là gọn lại.

   CHUỖI CHỮ rút còn ~1,2s: chờ × 0,62 và chạy × 0,72. Giữ nguyên THỨ TỰ vào
   của các dòng, chỉ dồn lại gần nhau hơn — không đảo nhịp, không bỏ dòng nào.

   CHỈ ÁP CHO ĐIỆN THOẠI. Trên máy tính khách ngồi lâu hơn, nhịp thong thả
   vẫn hợp — giữ nguyên. Trang chủ cũng không đụng tới. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  html.js-on .bia > img,
  html.js-on .bia-bg{
    /* Cùng lý do như bản máy tính. Ở đây còn nặng hơn: rút xuống 5s khiến
       lúc rèm tan ảnh đã đi 80%, khách chỉ thấy 20% cuối — gần như đứng im
       rồi nhích một cái rồi dừng, đúng cảm giác "khựng". */
    animation:biaZoom 5s ease-out var(--tre-rem) both,
              biaTho 22s ease-in-out calc(var(--tre-rem) + 5s) infinite alternate}
}
/* Bản điện thoại — GIỮ ĐÚNG HÌNH DÁNG NHỊP của máy tính, chỉ gọn hơn.
   Sửa 21/08/2026: bản trước dồn các nhịp cách nhau chỉ 0,11s, dưới ngưỡng
   mắt đọc ra thứ tự nên nhìn như tất cả bật ra cùng lúc. Nay giãn về
   0,14–0,18s — vẫn nhanh hơn bản gốc mà từng dòng lại thấy rõ. */
@media(max-width:760px){
  /* đường dẫn chỉ mờ dần, không trồi — cho vào từ mốc 0 để dòng chữ phụ
     ngay sau nó có trọn 0,14s khoảng nghỉ, mắt tách bạch được hai nhịp */
  html.js-on .bia-chay .duong-dan{transition:opacity .55s ease}
  html.js-on .bia-chay :is(.eyebrow,.nhan-cm){
    transition:opacity .58s ease .14s,translate .72s var(--chu-nhip) .14s}
  html.js-on .bia-chay h1{transition:opacity .54s ease .32s}
  html.js-on .bia-chay h1 .luv-dong{transition:translate .85s var(--chu-nhip) .32s}
  html.js-on .bia-chay .meta-top{
    transition:opacity .56s ease .46s,translate .72s var(--chu-nhip) .46s}
  html.js-on .bia.bia-chay .gach{transition:transform .72s var(--rem-nhip) .5s}
  html.js-on .bia-chay .phu{
    transition:opacity .58s ease .64s,translate .74s var(--chu-nhip) .64s}
  html.js-on .bia-chay .tim{
    transition:opacity .58s ease .78s,translate .74s var(--chu-nhip) .78s}
}

/* ═══════════ VÙNG CHẠM CHO DÃY "KHÁM PHÁ THÊM" (≤760px) ═══════════
   Đo ngày 22/08/2026 trên màn 375px: mỗi mục .xt-item chỉ cao 31px, trong khi
   ngón tay cần khoảng 44px mới bấm chắc. Dãy này nằm cuối hầu hết các tab nên
   khách hay dùng nó để đi tiếp — bấm trượt sang mục bên cạnh là mất một lượt.

   KHÔNG phóng to chữ hay đệm, vì làm thế là đổi bố cục cả 8 mục. Thay vào đó
   nới khoảng cách giữa các hàng lên 14px rồi phủ một vùng chạm vô hình rộng
   ±7px. Kết quả: vùng bấm cao 45px mà nhìn vẫn y như cũ.

   Cộng 7+7=14 = đúng bằng khoảng cách hàng, nên vùng chạm hai hàng liền nhau
   chỉ chạm mép. Đo thật: chồng 0,375px — do chiều cao dòng lẻ 31,375px, tức
   chưa tới nửa điểm ảnh, không đủ để bấm nhầm sang hàng khác.
   Đã thử bấm đúng giữa mục thứ 4 trên màn 375px: ra đúng mục 4.

   Dùng 'body ...' để thắng luật gốc nằm trong blog.css / video.css /
   hinh-anh.css — ba tệp đó nạp SAU tệp này nên nếu cùng độ ưu tiên sẽ thua. */
@media (max-width:760px){
  body .xt-luoi{row-gap:14px}
  body .xt-item{position:relative}
  body .xt-item::after{
    content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;
    /* không nền, không viền — chỉ để nhận ngón tay */
  }
}

/* ── Sửa chữ chìm trong HỘP ĐĂNG KÝ bật lên ────────────────────────────────
   Đo trên trang đang chạy 22/08/2026 (độ tương phản chữ / nền):

        trang chủ (.form-chinh)   6,64 : 1   ✓ đọc tốt
        hộp bật lên (.luv-modal)  1,70 : 1   ✗ gần như không đọc được

   Nền hộp bật lên là vải tweed nâu #463526, nhưng luật đổi chữ sáng ở trên chỉ
   nhắm .form-chinh — hộp bật lên không mang lớp đó nên rơi về màu chữ tối
   #63594C. Nâu đậm trên nâu đậm.

   Đây là lỗi CÓ SẴN, phát hiện khi rà soát: dòng "cam kết bảo mật"
   cũng chìm y hệt trong hộp này từ trước.

   Mức đọc được tối thiểu theo chuẩn WCAG là 4,5:1. Dùng --chu-phu-toi cho
   đúng 6,64:1 như trang chủ. */
.luv-modal .luv-form__riengtu{color:var(--chu-phu-toi)}
.luv-modal .luv-form__riengtu{opacity:.85}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  HUY HIỆU reCAPTCHA — CÚC TWEED NÂU, XẾP DƯỚI ZALO      22/08/2026      ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Anh Hưng: "trên mobile anh thấy rất xấu, đổi thành nền nâu và màu khác trên
   nền nâu vừa đủ thấy theo luật; đổi vị trí sang góc phải, đẩy nút mess và zalo
   lên để nút huy hiệu dưới cùng."

   ── VÌ SAO GIỮ HUY HIỆU CHỨ KHÔNG ẨN ──
   Google cho hai lựa chọn: để huy hiệu hiện, HOẶC ẩn nó rồi bù bằng một dòng
   chữ ghi công trong luồng người dùng. Giữ huy hiệu thì KHÔNG cần dòng chữ nào.

   ── KHÓ Ở CHỖ NÀO ──
   Ruột huy hiệu là <iframe> của google.com. KHÔNG đọc/sửa được gì bên trong,
   kể cả màu. Chỉ tác động được từ ngoài: dời, thu, lọc màu, và hoà trộn.

   ── CÁCH ĐỔI SANG NỀN NÂU (đây là mấu chốt) ──
   Ba bước, đều là phép toán màu xác định nên tính trước được kết quả:

     ① lọc  grayscale(1) → invert(1) → sepia(.65)   áp cho iframe
            nền trắng #FFFFFF  →  đen #000000
            biểu tượng #1C3AA9 →  kem sáng
     ② nền  .grecaptcha-badge nhận background #453425 (đúng màu nút Zalo)
     ③ trộn mix-blend-mode:screen cho iframe
            screen(đen, nâu)      = nâu       → nền chip thành #453425
            screen(kem, nâu)      = kem sáng  → biểu tượng thành #F4E4C5

   Kết quả tính được, đã đối chiếu công thức screen 1−(1−a)(1−b):
        nền chip    #453425   ← trùng khít nền nút Zalo/Messenger
        biểu tượng  #F4E4C5   ← lệch 2 đơn vị so với icon nút Zalo #F2E4CC
        tương phản  9,46 : 1  ← ngưỡng cho hình/biểu tượng chỉ là 3,0 : 1

   Vì tương phản dư nhiều nên KHÔNG cần làm mờ. Bản trước phải mờ 0,55 vì nền
   trắng của huy hiệu chìm vào nền kem của web; giờ nền đã là nâu nên hết chìm.

   ── CẮT LẤY PHẦN BIỂU TƯỢNG ──
   ⚠ ĐÃ TÍNH NHẦM CHIỀU MỘT LẦN (22/08/2026) — chip ra chữ "CAPTCHA" thay vì
     hình hai mũi tên. Ghi lại cho khỏi sai lại:

     Google đặt  right:-186px  trên khung rộng 256px. Dấu ÂM nghĩa là đẩy khung
     SANG PHẢI 186px, ra ngoài mép màn hình. Nên phần còn nhìn thấy là 70px
     ĐẦU khung (toạ độ 0–70), KHÔNG PHẢI 70px cuối. Biểu tượng nằm ở ĐẦU.
     Bản đầu kéo iframe sang trái 191px → cửa sổ rơi vào vùng chữ
     "protected by reCAPTCHA", cắt trúng mấy chữ cuối thành "CAPTCHA".

   Cách đúng: ép khung còn 60×60 + overflow:hidden, kéo iframe sang trái 5px để
   dải biểu tượng 70px nằm giữa cửa sổ 60px (5–65, tâm 35 trùng tâm cửa sổ).
   Dùng cách này chứ KHÔNG dùng clip-path vì clip-path cắt mất cả bóng đổ.

   ── CĂN TRỤC: THEO TÂM, KHÔNG THEO MÉP ──
   Anh Hưng: "cho 2 nút bên trên và nút huy hiệu thẳng trục với nhau chứ đừng
   lệch vào trong nhìn hơi mất cân đối".
   Chip nhỏ hơn nút chat, nên nếu cho chung MÉP PHẢI thì TÂM chip thụt vào —
   mắt nhìn ra ngay là ba vật không thẳng hàng dọc. Phải căn theo TÂM:
        right chip = right nút + (rộng nút − rộng chip) / 2
   máy tính   nút 46 tại right:18 → tâm 41,0  ·  chip 38 → right:22px
   điện thoại nút 41 tại right:12 → tâm 32,5  ·  chip 34 → right:15,5px
   Trước khi sửa lệch 4,0px và 3,5px.

   ── XẾP CHỒNG ──
   Cụm .lien-chat (Messenger trên, Zalo dưới) bị đẩy lên để chừa chỗ cho chip
   nằm dưới cùng. Ba số phải khớp nhau, đổi một cái là phải đổi cả ba:
        máy tính   chip 38px · khe 10px → .lien-chat{bottom:70px}   (22+38+10)
        điện thoại chip 34px · khe  8px → bottom:calc(--cao-day + 56px)

   ⚠ BA CHỖ BẮT BUỘC PHẢI CÓ !important, thiếu một là hỏng:
        right + left:auto   Google khai right:-186px ngay trong style nội tuyến
        transition          ĐÂY LÀ CHỖ DỄ SÓT NHẤT. Google khai
                            transition:right .3s nội tuyến. Luật transition của
                            mình mà KHÔNG có !important thì nội tuyến thắng,
                            right bị chạy hiệu ứng trượt và không bao giờ về
                            đúng chỗ — chip đứng lì ngoài mép phải màn hình.
                            Đã dính đúng lỗi này lúc thử ngày 22/08.
        width/height        Google khai 256×60 nội tuyến

   ⚠ NẾU TRÌNH DUYỆT KHÔNG HỖ TRỢ mix-blend-mode (rất hiếm, bản cũ) thì chip ra
     nền đen thay vì nâu — vẫn nhìn rõ, vẫn đúng luật, chỉ kém đẹp. Không vỡ. */

/* đẩy cụm Zalo/Messenger lên, chừa chỗ cho chip ở dưới cùng */
.lien-chat{bottom:70px}

.grecaptcha-badge{
  right:22px !important;
  left:auto !important;
  bottom:22px !important;
  width:60px !important;
  height:60px !important;
  overflow:hidden !important;
  border-radius:17px !important;
  /* ── NỀN: LẤY ĐÚNG CỦA DẢI SỐ LIỆU, KHÔNG PHẢI CỦA NÚT ZALO ──
 Anh Hưng 22/08 (kèm ảnh chụp dải số liệu): "sao trên nền da của dải số
 liệu nó vẫn sáng màu hơn nhỉ, em cho trùng màu và chất liệu với màu nền
 dải số liệu".
 Đo ra: dải số liệu dùng #352718, nút Zalo dùng #453425 — chênh hẳn một
 bậc. Chip đang mượn màu nút Zalo nên nổi lên khi trôi qua dải số liệu.
 Đổi sang đúng bộ nền của .stats:
      #352718  +  lớp 1 vân dạ tweed  +  lớp 2 sợi dệt chéo
 BỎ lớp 3 của .stats (đổ bóng dọc 24%/82%) — lớp đó tính cho dải cao cả
 trăm px; đắp lên chip 60px thì thành hai vệt tối ở mép trên và mép dưới. */
  background-color:#352718 !important;
  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) !important;
  background-blend-mode:soft-light,overlay !important;
  box-shadow:0 3px 8px rgba(40,28,18,.28),0 1px 2px rgba(40,28,18,.2) !important;
  transform:scale(.6333) !important;
  transform-origin:100% 100% !important;
  isolation:isolate;
  transition:transform .2s ease !important;
}
.grecaptcha-badge iframe{
  margin-left:-5px;
  /* brightness(.55) — anh Hưng muốn "ít nổi hơn". Đo tương phản biểu tượng
     trên nền #352718:  1,00 → 11,34:1 (chói) · 0,55 → 4,50:1 (kín, vẫn dư
     chuẩn) · 0,42 → 3,26:1 (SÀN, đừng xuống thấp hơn — luật cần 3,0:1).
     brightness chỉ ăn vào biểu tượng; nền chip vẫn đen tuyền nên sau khi
     hoà screen vẫn ra đúng màu nền bên dưới, không bị nhạt đi. */
  filter:grayscale(1) invert(1) sepia(.65) brightness(.55);
  mix-blend-mode:screen;
}
/* rê chuột: nhô lên đúng nhịp nút Zalo (translateY -2px, nhưng đang scale nên
   phải gộp vào cùng một transform) */
.grecaptcha-badge:hover{transform:scale(.6333) translateY(-3px) !important}

@media(max-width:960px){
  .lien-chat{bottom:calc(var(--cao-day, 58px) + 56px)}
  .grecaptcha-badge{
    right:15.5px !important;
    bottom:calc(var(--cao-day, 58px) + 14px) !important;
    transform:scale(.5667) !important;
  }
  .grecaptcha-badge:hover{transform:scale(.5667) translateY(-3px) !important}
}