/* dich-vu.css — TRANG DỊCH VỤ. Dùng chung biến bien.css. */

.hep{max-width:var(--cot-rong);margin:0 auto;width:100%}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% = 1080px, zoom-out >1500 = 1240px (chỉ trong .noi-dung) */
@media(min-width:981px) and (max-width:1500px){ .noi-dung .khung{max-width:1050px} }
.phan{padding:var(--nhip) 0}
/* Section nhấn = VẢI HỒNG linen + may mí cam (hệ vải trang chủ); section thường = trắng vân mờ của body */
.phan.nen{
  position:relative;
  background-color:#F2E2D6;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n6'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n6)'%20opacity='0.19'/%3E%3C/svg%3E"),
    repeating-linear-gradient(63deg,rgba(155,105,85,.06) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,251,247,.55),transparent 55%),
    radial-gradient(150% 110% at 50% 118%,rgba(130,85,65,.12),transparent 58%);
  background-blend-mode:soft-light,normal,normal,normal}
.phan.nen::before{
  content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
  background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.nen::before{left:16px;right:16px}}

/* ── Section TỐI = DẠ TWEED nâu (điểm nghỉ mắt giữa chuỗi sáng) — thẻ trắng bên trong nổi hẳn ── */
.phan.toi{
  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}
.phan.toi::before{
  content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
  background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.toi::before{left:16px;right:16px}}
/* chữ trên nền tối */
.phan.toi h2{color:var(--kem)}
.phan.toi h2 .so{color:var(--cam-sang);border-color:rgba(245,168,126,.45);background:rgba(245,168,126,.1)}
.phan.toi > .khung > p,.phan.toi .dan-mo{color:var(--chu-phu-toi)}
.phan.toi .kh{box-shadow:0 3px 8px rgba(0,0,0,.28),0 12px 22px -10px rgba(0,0,0,.32)}
h2{font-family:var(--font-tieu-de);font-size:clamp(22px,3.1vw,33px);font-weight:600;line-height:1.28;margin-bottom:24px;display:flex;align-items:baseline;gap:12px}
/* ══ Ô SỐ — CHỮ SỐ CAO ĐÚNG BẰNG CHỮ HOA (sửa lần 2, 19/08/2026) ═══════════
   Lần 1 em hiểu hụt: chỉ làm HỘP cao 24px bằng chữ hoa, còn CHỮ SỐ giữ nguyên
   .44em nên chỉ cao 11px — bằng 46% chữ hoa. Hộp to ra mà bên trong toàn
   khoảng trống, mắt bám vào CHỮ SỐ chứ không bám vào đường viền, nên anh Hưng
   xem vẫn thấy y như cũ. Lần này phóng chính chữ số.

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

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

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

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

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

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

   position/top thay vì margin hay transform: KHÔNG đụng bố cục và KHÔNG đụng
   hiệu ứng hiện (hiệu ứng đó dùng scale/rotate riêng).
   inline-flex + align-items:center để chữ số nằm giữa hộp; cố ý KHÔNG khai
   justify-content để chữ chảy tự nhiên như bản gốc. */
h2 .so{font-family:var(--font-noi-dung);font-size:.9em;letter-spacing:.07em;color:var(--cam-tram);font-weight:700;flex:none;
  height:1.2em;line-height:1;padding:0 .36em;display:inline-flex;align-items:center;
  position:relative;top:.14em;
  border:1.2px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.07);transform:rotate(-2deg)}
/* Tiêu đề hiện dần khi lướt tới (JS gắn .td-cho lúc chờ, .td-hien khi vào khung nhìn) */
h2.td-cho{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1) .38s,transform .85s cubic-bezier(.16,1,.3,1) .38s}
h2.td-hien{opacity:1;transform:none}
.dv-page p{color:var(--chu-phu);margin-bottom:16px;line-height:1.8}
.dv-page strong{color:var(--chu-chinh)}
.ds{list-style:none;display:grid;gap:12px}
.ds li{display:flex;gap:13px;color:var(--chu-phu);line-height:1.7}
.ds li::before{content:'';flex:none;width:14px;height:1.5px;border-radius:2px;background:var(--cta);opacity:.5;margin-top:13px}

/* BÌA */
/* Dải .dai của tab này đo được 52px (thấp hơn .stats 63px của trang chủ),
   nên khai lại để bìa cao thêm đúng phần chênh — không thì hở chân màn hình.
   55 = 52 + 3, xem giải thích ở --cao-dai-bia trong bien.css. */
:root{--cao-dai-bia:55px;--cao-dai-dt:91px}   /* dải .dai trên điện thoại đo được 89px, +2 dư */
.bia{position:relative;min-height:clamp(380px,54vh,480px);display:grid;align-items:end;justify-items:center;text-align:center;overflow:hidden;isolation:isolate}
@media(min-width:761px){.bia{min-height:var(--bia-vua-man)}}  /* PC: nâng bìa lên 500px (giữ nguyên mobile) */
.bia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.02);z-index:-2}
.bia::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(31,28,25,.9),rgba(31,28,25,.66) 20%,rgba(31,28,25,.3) 42%,transparent 62%)}
.bia .noi{padding:0 22px 20px}
.bia .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--chu-phu-toi);margin-bottom:14px;font-weight:500}
.bia .gach{width:52px;height:2px;background:var(--cta);margin:16px auto 0;border-radius:2px}
/* dùng --font-bia như mọi trang khác; trước đây khai nhầm --font-tieu-de
   nên đổi phông bìa toàn web mà hai trang này không đổi theo (sửa 19/08/2026) */
.bia h1{text-wrap:balance;font-family:var(--font-bia);font-weight:600;color:#fff;font-size:clamp(26px,5.4vw,44px);line-height:1.15;letter-spacing:.02em;text-transform:uppercase;white-space:normal;max-width:21em;margin:0 auto;text-shadow:0 2px 22px rgba(31,28,25,.55)}
/* Câu dẫn dưới tiêu đề bìa: chia đều hai dòng thay vì nhồi đầy dòng trên rồi
   quăng phần thừa xuống. Đo thấy trước khi sửa:
     "…thành phẩm / tại Luvinus."      dòng dưới còn 2 chữ
     "…sự kiện tại / Luvinus."          dòng dưới còn 1 chữ
   balance chia đều số chữ nên chỗ ngắt rơi vào khe tự nhiên giữa hai cụm. */
/* ══ CÂU DẪN BÌA: MỘT DÒNG TRÊN PC (sửa 19/08/2026) ════════════════════════
   Anh Hưng: hai dòng nhìn cụt xấu, muốn xuống dòng hợp lý.

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

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

   Trên điện thoại 38em vượt bề ngang màn nên khung mẹ chặn lại, câu tự xuống
   dòng như thường — vẫn có text-wrap:balance và dấu · đã buộc nên chia gọn. */
.bia .phu{text-wrap:balance;color:var(--chu-phu-toi);font-size:clamp(13px,1.6vw,15.5px);margin:14px auto 0;max-width:38em;line-height:1.6}
/* (Miếng vá căn giữa câu dẫn bìa đã bỏ — nay xử tận gốc ở hop-phan.css.) */
.bia .cta-bia{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:var(--cta);color:#fff;padding:14px 30px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-shadow:var(--bong-nhe);transition:.18s}
.bia .cta-bia:hover{background:var(--cta-dam);transform:translateY(-1px)}
.dai{background:var(--chan-trang)}
.dai .khung{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;padding:14px 22px;font-size:13.5px;font-weight:500;color:var(--kem)}
.dai span{display:flex;align-items:center;gap:8px}
.dai span svg{width:15px;height:15px;flex:none;color:var(--cam-sang)}
.anh-noi-dung{width:100%;border-radius:12px;box-shadow:var(--bong-nhe);margin:22px 0 6px}

/* thẻ dịch vụ */
.luoi-dv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.the-dv{position:relative;background:#fff;border:0;border-radius:12px;padding:22px 24px;transition:.18s;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:3px;align-items:center;
  box-shadow:var(--bong-1)}
.the-dv::after{content:'';position:absolute;inset:5px;border:1.2px dashed var(--vang-nghe);border-radius:8px;opacity:.55;pointer-events:none}
.the-dv:hover{box-shadow:var(--bong-nhe);transform:translateY(-2px)}
.the-dv .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;grid-row:1 / span 2;align-self:center;background:var(--trang);border:1px solid var(--vien)}
.the-dv .ic svg{width:24px;height:24px}
.the-dv h3{grid-column:2;font-family:var(--font-tieu-de);font-size:17.5px;font-weight:600;margin:0;line-height:1.3}
.the-dv p{grid-column:2;font-size:14px;color:var(--chu-phu);margin:0;line-height:1.55}
@media(max-width:720px){.luoi-dv{grid-template-columns:1fr}}

/* quy trình */
.quy-trinh{margin-top:4px}
.buoc{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--vien);align-items:start}
.buoc:first-child{border-top:0}
.buoc .stt{width:44px;height:44px;border-radius:50%;background:var(--nau-am);color:var(--kem);font-family:var(--font-tieu-de);font-size:18px;font-weight:600;display:grid;place-items:center}
.buoc h3{font-size:16px;font-weight:600;margin-bottom:4px}
.buoc p{font-size:14px;color:var(--chu-phu);margin:0;line-height:1.6}

/* đối tượng */
.luoi-kh{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.kh{position:relative;background:var(--trang);border:0;border-radius:10px;padding:22px 18px;text-align:center;
  box-shadow:var(--bong-1)}
.kh::after{content:'';position:absolute;inset:5px;border:1.2px dashed var(--vang-nghe);border-radius:7px;opacity:.55;pointer-events:none}
.kh .ic{width:34px;height:34px;margin:0 auto 12px}
.kh .ic svg{width:34px;height:34px}
.kh h3{font-size:15.5px;font-weight:600;margin-bottom:5px}
.kh p{font-size:13px;color:var(--chu-phu);margin:0;line-height:1.55}
@media(max-width:520px){.luoi-kh{grid-template-columns:1fr}}

/* vì sao */
.ly-do{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:4px}
.ly-do .m{display:flex;gap:12px;align-items:flex-start}
.ly-do .m svg{flex:none;width:22px;height:22px;color:var(--xanh-reu);margin-top:2px}
.ly-do .m b{display:block;font-size:15px;margin-bottom:2px;color:var(--chu-chinh)}
.ly-do .m span{font-size:13.5px;color:var(--chu-phu);line-height:1.55}
@media(max-width:720px){.ly-do{grid-template-columns:1fr}}

/* box báo giá */
.box-gia{background:#fff;border:0;border-radius:12px;padding:26px 28px;position:relative;overflow:hidden;
  box-shadow:var(--bong-1)}
.box-gia::before{content:'';position:absolute;inset:6px;border:1.4px dashed var(--vang-nghe);border-radius:8px;opacity:.55;pointer-events:none}
.box-gia h3{font-family:var(--font-tieu-de);font-size:20px;font-weight:600;margin-bottom:8px}
.box-gia .mo{font-size:14.5px;color:var(--chu-phu);margin-bottom:16px}
.box-gia .yeuto{list-style:none;display:grid;gap:9px;margin:0}
.box-gia .yeuto li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--chu-phu)}
.box-gia .yeuto svg{flex:none;width:17px;height:17px;color:var(--cam-tram);margin-top:3px}
.box-gia .lienhe-gia{margin-top:18px;font-size:14px;color:var(--chu-phu)}
.box-gia .lienhe-gia a{color:var(--cam-tram);font-weight:700;text-decoration:none}

/* liên hệ + bản đồ (mục 08) */
.lh-luoi{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:stretch}
.lh-thongtin{position:relative;background:#F8F0E0;border:0;border-radius:12px;padding:26px 26px;
  box-shadow:var(--bong-1)}
.lh-thongtin::after{content:'';position:absolute;inset:5px;border:1.2px dashed var(--vang-nghe);border-radius:8px;opacity:.55;pointer-events:none}
.lh-thongtin h3{font-family:var(--font-tieu-de);font-size:19px;margin-bottom:16px}
.lh-thongtin ul{list-style:none;display:grid;gap:13px}
.lh-thongtin li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--chu-phu);line-height:1.5}
.lh-thongtin li svg{flex:none;width:17px;height:17px;color:var(--cam-tram);margin-top:3px}
.lh-thongtin a{color:var(--cam-tram);text-decoration:none;font-weight:600}
.lh-map{border-radius:12px;overflow:hidden;border:1px solid var(--vien);min-height:310px;background:var(--kem)}
.lh-map iframe{width:100%;height:100%;min-height:310px;border:0;display:block}
@media(max-width:820px){.lh-luoi{grid-template-columns:1fr}.lh-map{min-height:260px}}

/* form mỏng (bar) — bọc form-dang-ky */
.mong{position:relative;border:1px solid rgba(245,168,126,.22);border-radius:14px;padding:16px 22px;display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin:26px auto;max-width:none;box-shadow:var(--bong-nhe);
  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}
.mong::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)}
.mong .lb{flex:1 1 240px;font-size:14.5px;color:var(--chu-phu-toi);line-height:1.55;font-weight:500}
.mong .lb b{color:var(--cam-sang);font-weight:700}
.mong .luv-form{background:none!important;padding:0!important;margin:0!important;max-width:none;flex:2 1 320px;min-width:0}
.mong .luv-form__hang{display:flex;gap:10px;flex-wrap:nowrap}
.mong .luv-inp{flex:1 1 auto;min-width:0;height:48px;border:1px solid rgba(245,168,126,.3);border-radius:999px;padding:0 20px;background:rgba(255,255,255,.95);color:var(--chu-chinh)}
.mong .luv-inp:focus{outline:none;border-color:var(--cam-sang);box-shadow:0 0 0 3px rgba(245,168,126,.2)}
.mong .nut-dk{flex:none;height:48px;padding:0 20px;color:#fff;border-radius:999px;font-size:12px;letter-spacing:.04em}
.mong .nut-dk:hover{background-color:var(--cta-dam)}
.mong .luv-form__msg{flex-basis:100%;color:var(--kem);font-weight:600;margin-top:2px}
@media(max-width:620px){.mong .lb{flex-basis:100%}.mong .luv-form{flex-basis:100%}}

/* form chính (nền nâu) */
.form-chinh{background:var(--nau-am);border-radius:10px;padding:40px 34px;box-shadow:var(--bong)}
.form-chinh .dan{text-align:center;color:var(--chu-phu-toi);font-size:13px;font-style:italic;margin-bottom:22px}
.form-chinh h2{color:var(--kem);text-align:center;justify-content:center}
.form-chinh .luv-form{max-width:none}
.form-chinh .luv-form__hang{flex-direction:column;align-items:stretch}
.form-chinh .luv-inp{width:100%;flex-basis:auto;background:rgba(255,255,255,.95)}
.form-chinh .luv-ta{background:rgba(255,255,255,.95)}
.form-chinh .nut-dk{width:100%}
.xong{display:none}

/* FAQ */
.faq{border-top:1px solid var(--vien)}
.faq details{border-bottom:1px solid var(--vien)}
.faq summary{padding:13px 0;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cam-tram)}
.faq .mui{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .22s;color:var(--chu-phu)}
.faq details[open] .mui{transform:rotate(45deg)}
.faq .tl{padding:0 0 14px;color:var(--chu-phu);font-size:14px;line-height:1.7}

@media(max-width:760px){:root{--nhip:44px} h2{font-size:21px;margin-bottom:16px} .form-chinh{padding:26px 18px} .the-dv{padding:20px 18px} .box-gia{padding:22px 18px}}

/* Tiêu đề form "Gửi yêu cầu · Nhận báo giá" — cỡ chữ CO GIÃN theo bề ngang máy.
   PC giữ nguyên 26px; xuống máy hẹp thì tự nhỏ dần vừa đúng một dòng, thay vì
   xuống 2 dòng. Trước đây cỡ chữ ghi thẳng trong thẻ (style="font-size:26px")
   nên CSS không chỉnh được — đã chuyển ra đây.
     máy 320px → ~15,7px · máy 360px → ~17,6px   ·   máy 390px → ~19,1px   ·   từ 530px trở lên → 26px */
.form-chinh h2.tt-form{font-size:clamp(15px,4.9vw,26px)}

/* Mốc điện thoại cho dải dưới bìa. Ba tab Hình ảnh · Khóa học · Lịch học vốn
   đã có mốc này, ba tab còn lại (Dịch vụ · Về Luvinus · Video) thì chưa — nên
   dải ở đây dày hơn hẳn mà không ai để ý. Lấy đúng con số của ba tab kia cho
   cả sáu tab giống nhau. */
@media(max-width:640px){
  .dai .khung{padding:11px 16px;gap:7px 18px;font-size:12.5px}
}

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