/* Lớp responsive cuối — co bố cục về 1 cột và thu padding khi màn hình < 768px.
Link CUỐI cùng để chắc chắn override các rule cũ. */
/* ── Tablet (≤ 980px): xếp dọc các 2-cột hero/formats còn sót ─── */
@media (max-width: 980px) {
/* "Hình thức học" — Offline/Online dạng flex 2 cột → 1 cột dọc */
.fmode-row { flex-direction: column; min-height: 0; }
.fmode-row--reverse { flex-direction: column; }
.fmode-visual { flex: 0 0 auto; min-height: 260px; padding: 36px 32px; }
.fmode-visual-title { font-size: 40px; }
.fmode-content { padding: 36px 32px 40px; }
.fmode-row--reverse .fmode-content { order: 0; }
.formats-section .sec-head { padding: 0 32px; }
}
/* ── Phone (≤ 768px): single column + tight padding ─────────── */
@media (max-width: 768px) {
/* Stack mọi grid 2-cột phổ biến ở mức bảo hiểm */
.hero,
.osd-panel,
.st-top,
.stats2-top,
.mc-bottom,
.osd2-grid,
.proof-featured,
.form-grid,
.services-layout {
grid-template-columns: 1fr !important;
}
/* Hero hai cột → ảnh dưới copy */
.hero { gap: 32px; }
.hero-img-col { order: 2; }
/* Strengths bar (4 cột) → 2 hàng 2 cột */
.st-bar { grid-template-columns: 1fr 1fr; }
.st-bar .st-item { border-right: 1px solid var(--border-s); border-bottom: 1px solid var(--border-s); }
.st-bar .st-item:nth-child(2n) { border-right: 0; }
.st-bar .st-item:nth-last-child(-n+2) { border-bottom: 0; }
/* Strengths labels nhỏ hơn */
.st-bar--strengths .st-item { padding: 22px 14px; gap: 8px; }
.st-bar--strengths .st-ic { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
.st-bar--strengths .st-tt { font-size: 16px; }
/* Stats numbers cũ */
.st-num { font-size: 32px; }
/* OSD creds → 2x2 */
.osd-creds { flex-wrap: wrap; gap: 14px 0; padding-top: 14px; }
.osd-cred { flex: 1 1 50%; border-left: 0; padding: 0; }
.osd-body { padding: 22px 22px 24px; gap: 14px; }
.osd-top h2 { font-size: 22px; }
/* Services 4-col → 2-col on phone */
.svc2-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.svc2-title { font-size: 15px; }
/* Results albums: rule cũ `.row.c6/c5/c2 → 1-2 cột grid` ĐÃ GỠ — results.css @media
≤768px chuyển .row sang dải vuốt ngang gallery (flex + overflow-x). Giữ rule
này gỡ để khỏi đè ngược specificity tương đương. */
/* Stat photo badge — pull inside ảnh, không tràn */
.st-photo > img { aspect-ratio: 4/3; }
.st-badge { left: 14px; bottom: 14px; padding: 10px 12px; gap: 10px; }
/* Formats row already collapsed at 980; tighten padding */
.fmode-visual { padding: 28px 20px; min-height: 220px; }
.fmode-visual-title { font-size: 34px; margin-bottom: 14px; }
.fmode-content { padding: 28px 20px 32px; }
.fmode-content-title { font-size: 22px; }
/* Footer — giảm padding mobile (desktop 60px 64px 28px ép nội dung sát mép trên phone).
#129: nền xám footer PHỦ luôn khoảng chừa cho thanh CTA — margin-bottom ÂM = body padding-bottom
(home-pne.css:1723) nên gray tràn xuống lấp dải trắng "trống"; padding-bottom giữ © cách thanh CTA
+ safe-area iPhone. body padding-bottom GIỮ NGUYÊN (an toàn cho trang không có footer dài). */
footer { padding: 36px 18px calc(96px + env(safe-area-inset-bottom)); margin-bottom: calc(-84px - env(safe-area-inset-bottom)); }
.footer-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
.footer-col h4 { margin-bottom: 0; }
.footer-col ul { gap: 9px; }
.footer-legal { padding: 18px 0 12px; }
/* #134: badge Bộ Công Thương LÊN ĐẦU, riêng 1 hàng (cột: badge trên · cụm 3 link dưới) — hết kẹp giữa link. */
.footer-legal-top { flex-direction: column; gap: 12px; margin-bottom: 10px; }
.footer-bottom { padding-top: 14px; }
/* #129: 3 link pháp lý XẾP DỌC hình tháp (ngắn→dài), bỏ dấu "·" lơ lửng, mỗi link ≥44px (hợp #126).
DOM: 1=Chính sách bảo mật(dài) · 2=Hình thức thanh toán · 3=Quy định chung(ngắn) → đảo `order`
để hiện Quy định chung → Hình thức thanh toán → Chính sách bảo mật. GIỮ href/route + chữ. */
/* #134: 3 link SÁT LẠI — gap nhỏ + min-height 38px (vẫn đủ chạm, gần nhau hơn 44px). Thứ tự + ẩn · giữ nguyên. */
.footer-legal-links { flex-direction: column; gap: 4px; }
.footer-legal-links .sep { display: none; }
.footer-legal-links a { min-height: 38px; display: flex; align-items: center; justify-content: center; }
.footer-legal-links a:nth-of-type(1) { order: 3; }
.footer-legal-links a:nth-of-type(2) { order: 2; }
.footer-legal-links a:nth-of-type(3) { order: 1; }
/* Khối giấy phép gọn đều: mỗi giấy phép 1 đoạn, gap 8px, hẹp ~290px, căn giữa (hết lổm chổm). */
/* #134: NỚI RỘNG khối giấy phép để mỗi đoạn gói còn 2 DÒNG (290px → 3 dòng lổm chổm). Giữ 2 đoạn riêng, gap đều. */
.footer-legal-license { gap: 8px; max-width: 340px; margin: 0 auto; }
/* Accordion footer mobile (Khoá học · Thông tin · Góc học tập gập). Liên hệ + brand
KHÔNG có class is-collapsible nên hiện sẵn. Bấm h4 → toggle Alpine .is-open. */
.footer-col.is-collapsible { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 12px; }
.footer-col.is-collapsible .footer-col-toggle {
cursor: pointer; justify-content: space-between; padding: 10px 0;
}
.footer-col.is-collapsible .footer-col-toggle .footer-chev {
display: inline-block; font-size: 16px; color: rgba(0,0,0,.45);
transition: transform .2s ease;
}
.footer-col.is-collapsible.is-open .footer-col-toggle .footer-chev {
transform: rotate(180deg); color: var(--red);
}
.footer-col.is-collapsible ul { display: none; padding-top: 8px; }
.footer-col.is-collapsible.is-open ul { display: flex; }
/* Liên hệ (cột cuối, không is-collapsible) — h4 mb tăng nhẹ để tách khỏi accordion ở trên */
.footer-col:not(.is-collapsible) h4 { margin-bottom: 10px; margin-top: 6px; }
/* Eco labels: KHÔNG đè eco.css (eco.css @media max-width:920px đã set 2 cột mobile
từ 15/06). Để rule dưới cùng nhưng GIỮ NGUYÊN giá trị từ eco.css để khỏi mâu thuẫn. */
.eco-stage .phone { width: 140px; }
/* Form section */
.form-section { padding-left: 18px; padding-right: 18px; }
.form-trust { flex-wrap: wrap; justify-content: center; gap: 12px; }
.form-card { padding: 28px 20px; }
/* Trust strip cũ — không bao giờ vỡ */
.trust-strip-inner { flex-direction: column; gap: 10px; padding: 14px 16px; }
.trust-divider { display: none; }
/* Topbar already shrunk in nav.css; reaffirm */
.topbar { font-size: 12px; }
/* Khoảnh khắc — viewer ttv nhỏ lại */
.ttv-stage { height: 80vh; max-width: 92vw; }
.ttv-nav { display: none; }
/* TIN TỨC */
.ps-hero { padding: 36px 18px 24px; }
.ps-grid-wrap { padding: 0 18px 48px; margin: 24px auto; }
.ps-grid { grid-template-columns: 1fr; gap: 18px; }
.ps-show { padding: 28px 18px 40px; }
.ps-related-grid { grid-template-columns: 1fr; }
/* THƯ VIỆN ẢNH */
.gp-hero { padding: 32px 18px 22px; }
.gp-hero h1 { font-size: 24px; }
.gp-tabs { padding: 18px 18px 4px; }
.gp-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px 48px; gap: 10px; }
/* Path A1→C1 — đã có CSS riêng phức tạp; ẩn connectors thưa */
.lpath-row { flex-wrap: wrap; }
.lpath-conn { display: none !important; }
.lpath-card { flex: 1 1 calc(50% - 8px); }
/* Type scale */
.hero h1 { font-size: clamp(28px, 9vw, 44px); line-height: 1.1; }
.sec-title { font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
.sec-title.editorial { font-size: clamp(24px, 7vw, 32px); }
.sec-sub { font-size: 14px; }
/* Chống RỚT CHỮ tiêu đề mobile: balance hay cắt giữa từ ghép TV (vd "minh/chứng").
Mobile chuyển sang `pretty` (tránh orphan, ít cắt giữa từ hơn). Desktop GIỮ
balance — chỉ override @media mobile. */
h1, h2, .sec-title, .h-1, .h-2,
.kh-fmt h2, .lth-sec h2, .kh-sec h2,
.tt-feat h2, .tt-card h3,
.hz-head .sec-title, .eco-head h2,
.form-card .sec-title {
text-wrap: pretty;
}
/* (1) NÚT CTA HERO mobile: 2 nút xếp DỌC 100% width — hết gãy "tư vấn" giữa nút */
.hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
.hero-ctas > .btn,
.hero-ctas .btn-primary,
.hero-ctas .btn-outline,
.hero-ctas .btn-red,
.hero-ctas .btn-lg { width: 100%; justify-content: center; }
/* Horizontal padding cho mọi section chính */
.hero,
.rdo,
.services-section,
.st,
.proof-section,
.path-section,
.hz,
.formats-section,
.eco,
.kk,
.form-section,
.gallery-section { padding-left: 18px; padding-right: 18px; }
/* Override section-rhythm tighter */
.hero,
.rdo,
.services-section,
.st,
.proof-section,
.path-section,
.hz,
.formats-section,
.eco,
.kk,
.form-section { padding-top: 48px; padding-bottom: 48px; }
}
/* ── Phone nhỏ (≤ 420px): squeeze hẳn 1 cột cho services ─────── */
@media (max-width: 420px) {
.svc2-grid { grid-template-columns: 1fr; }
/* `.row.c6/c5 → 1 cột` ĐÃ GỠ — results.css ≤768px đã chuyển .row sang dải vuốt ngang. */
/* 15/06: KHÔNG còn rớt .st-bar về 1 cột ở ≤420px — giữ lưới 2×2 cho 4 ô số liệu
(15+ năm · GV bản ngữ · 95,1% · Đồng hành 1:1) cho gọn, đỡ 4 hàng dài. */
/* Footer 1 cột trên phone: gap phải KHÍT (≤ giá trị ≤768px là 14px), không nới lên 22px —
22px làm hở lớn bất thường giữa socials và "Khoá học". */
.footer-grid { gap: 12px; }
.hero-stats { flex-wrap: wrap; }
.hero-stat { flex: 1 1 calc(50% - 8px); }
/* Padding ngang còn hẹp hơn */
.hero,
.rdo,
.services-section,
.st,
.proof-section,
.path-section,
.hz,
.formats-section,
.eco,
.kk,
.form-section,
.gallery-section { padding-left: 16px; padding-right: 16px; }
}
/* ── Tránh ảnh / video / iframe tràn ngang ──────────────────── */
@media (max-width: 768px) {
img, video, iframe { max-width: 100%; height: auto; }
.pw-row { gap: 10px; }
.pw-item { width: 180px; height: 124px; }
.kk-rail { padding-left: 18px; padding-right: 18px; }
.ticker-track { animation-duration: 35s; }
}
/* ============================================================
4 LỖI MOBILE — feedback Khanh 15/06
M1 header sticky iOS · M2 hành trình · M3 section app · M4 form lead
============================================================ */
@media (max-width: 900px) {
/* M1 — HEADER STICKY iOS: bỏ rgba + backdrop-filter (gây stacking context lỗi
trên iOS Safari, chữ nội dung lú lên đè logo/hamburger khi scroll). Dùng nền
ĐẶC token --bg + z-index cao + isolation. */
nav {
background: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 1000;
isolation: isolate;
/* Safe-area cho notch iOS */
padding-top: env(safe-area-inset-top, 0);
}
}
@media (max-width: 768px) {
/* M2 — HÀNH TRÌNH A1→C1: chuẩn hoá padding trong thẻ + gap đều giữa các thẻ */
.lpath-row { gap: 12px; row-gap: 12px; }
.lpath-card {
padding: 18px 14px 16px;
border-radius: var(--r-m);
}
.lpath-card .lpath-code { font-size: 22px; }
.lpath-card .lpath-lv { font-size: 11.5px; margin-top: 6px; }
.lpath-card .lpath-name { font-size: 14px; margin-top: 8px; }
.lpath-card .lpath-desc { font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
.lpath-card .lpath-unlock { font-size: 11.5px; margin-top: 10px; padding-top: 10px; }
/* M3 — SECTION APP eco-stage: chỉ hiện 1 ảnh điện thoại đại diện.
ẨN laptop (.laptop) + 1 phone phụ (.pw.right) — giữ 1 phone .pw.left,
phóng to vừa khung. (CSS chính ở eco.css; rule ở đây phòng cascade.) */
.eco-stage .laptop { display: none !important; }
.eco-stage .pw.right { display: none !important; }
.eco-stage { flex-direction: column; align-items: center; gap: 0; }
.eco-stage .pw.left { margin: 0; transform: none; }
.eco-stage .pw.left .phone { width: clamp(220px, 60vw, 320px); }
/* M4 — FORM LEAD: rút gọn chữ phía trên để input gọn ~1 màn.
Ẩn dải USP (.form-trust: 15+ năm/100+ trường/4.9★/ÖSD) + dải tin cậy dưới
nút (.form-meta: Tư vấn 30 phút/Hoàn toàn miễn phí/Q.10); giảm cỡ tiêu đề
+ khoảng cách + cỡ input để các ô nhập gọn ~1 màn. */
.form-section .form-trust { display: none; }
.form-section .form-meta { display: none; }
.form-card { padding: 22px 18px; }
.form-card .sec-title { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.2; margin-bottom: 6px; }
.form-card .sec-sub { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.form-card .tag { margin-bottom: 10px !important; font-size: 11px; padding: 4px 10px; }
.form-grid { gap: 12px; }
.form-grid .field label { font-size: 12.5px; }
.form-grid .field input,
.form-grid .field select,
.form-grid .field textarea { font-size: 16px; padding: 11px 12px; } /* #115: 14→16 để iOS không tự zoom */
.form-footer .btn { padding: 13px 26px !important; font-size: 14px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
REDESIGN TRANG CHỦ MOBILE v4 — theo designs/mockup-trangchu-mobile.html
CHỈ mobile (≤768 / ≤600). KHÔNG đụng desktop. Kế thừa desktop: tiêu đề section,
màu nền section, footer pháp lý/chính sách/badge BCT/copyright. Thư viện ảnh .hz giữ nguyên.
Màu vàng dùng tone hợp lệ (#FFDF55 #FFCC00 #E1BD00 #7C6500 #5F4800) — KHÔNG dùng vàng mockup.
══════════════════════════════════════════════════════════════════════════ */
/* Phần tử CHỈ-mobile ẩn mặc định ở desktop (media query bên dưới bật lại) */
.path-forms-m,
.form-sub-m,
.eco-lab-ic,
.eco-showcase-m,
.eco-more-m { display: none; }
@media (max-width: 768px) {
/* ── 1) HERO: nén · tiêu đề ~23px · ảnh banner bo góc + bóng · 2 nút dọc full-width
· 2 mảng màu brand mờ trang trí. Dùng display:contents cho khối copy để xếp lại
thứ tự (text → ảnh → nút) mà KHÔNG đổi DOM desktop. ── */
.hero {
display: flex; flex-direction: column; align-items: stretch; /* đè align-items:center của desktop → ảnh full-width, chữ căn trái */
padding: 20px 16px 22px; gap: 0;
position: relative; overflow: hidden;
}
.hero > div:first-child { display: contents; } /* hoà tan khối copy → children xếp theo order */
.hero-eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-img-col { position: relative; z-index: 1; }
/* item 1b: nút "Xem lịch khai giảng" LÊN TRƯỚC ảnh banner (thứ tự: eyebrow→h1→sub→nút→ảnh) */
.hero-ctas { order: 2; margin: 14px 0 0; flex-direction: column; align-items: stretch; gap: 9px; }
.hero-img-col { order: 3; margin: 13px 0 0; }
/* eyebrow → pill nền hồng nhạt (đồng bộ eyebrow các section) — align-self để pill ôm chữ, không full-width */
.hero-eyebrow {
align-self: flex-start; width: auto;
background: var(--red-light); color: var(--red);
border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 600;
}
.hero h1 { font-size: 23px; line-height: 1.18; letter-spacing: -.3px; margin-bottom: 9px; }
.hero-sub { font-size: 12.5px; line-height: 1.45; margin: 0; max-width: none; }
/* item 8: dùng aspect-ratio (ảnh up sau không lệch crop) thay chiều cao cố định */
.hero-img { aspect-ratio: 16 / 9; height: auto; border-radius: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.hero-ctas .btn { width: 100%; margin: 0; padding: 13px; font-size: 14px; }
/* item 3: ẩn nút "Đăng ký tư vấn miễn phí" trong hero (đã có sticky CTA), giữ "Xem lịch khai giảng" */
.hero-ctas .btn-red { display: none; }
/* 2 mảng màu brand mờ (đỏ trên-phải, vàng dưới-trái) */
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.hero::before { top: -45px; right: -45px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(209,32,38,.13), transparent 68%); }
.hero::after { bottom: -35px; left: -40px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(255,204,0,.16), transparent 68%); }
/* ── 2) SỐ LIỆU: 3 thẻ 1 hàng · icon nhỏ TRÊN số · bo tròn + bóng mềm ── */
.strengths-strip { padding: 0 14px 30px; margin-top: -20px; }
.strengths-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.strengths-strip__card {
display: flex; flex-direction: column; align-items: center; text-align: center;
grid-template-areas: none; grid-template-columns: none;
padding: 14px 6px; gap: 0; border-radius: 14px; box-shadow: 0 4px 13px rgba(0,0,0,.05);
}
.strengths-strip__ic { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; margin-bottom: 7px; }
.strengths-strip__tt { font-size: 15px; }
.strengths-strip__lbl { font-size: 11.5px; line-height: 1.3; margin-top: 3px; } /* item 2: 9.5 → 11.5px */
/* ── 3) ÖSD (.rdo): 3 ô đặc trưng PHẢI có icon badge (trước đây trông trống) ── */
.osd-creds { flex-direction: column; gap: 0; }
.osd-cred { flex: 1 1 auto; align-items: center; gap: 10px; padding: 8px 0; border-left: none; border-top: 1px solid #f2f2f4; }
.osd-cred > i {
width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
background: var(--red-light); color: var(--red); border-radius: 8px; font-size: 16px;
}
.osd-cred b { font-size: 12px; } .osd-cred span { font-size: 10.5px; }
/* ── 4) MỤC TIÊU: lưới 2×2 thấp (giữ ảnh thật, bỏ thẻ cao) ── */
/* item 3: ratio dọc khớp hướng desktop (portrait) — ảnh up sau không lệch crop; nới chữ khỏi chật */
.svc2-card { aspect-ratio: 4 / 5; min-height: 0; border-radius: 14px; }
.svc2-pad { padding: 13px; }
.svc2-goal { font-size: 10.5px; margin-bottom: 2px; }
.svc2-title { font-size: 13px; line-height: 1.22; }
.svc2-link { margin-top: 7px; font-size: 10.5px; }
.svc2-link .ti { font-size: 12px; }
/* ── 5) LỘ TRÌNH: timeline dọc liên kết · thẻ trắng · 8 TUẦN pill vàng · tag pill xám ✓
· 2 pill Offline/Online dưới mô tả (ẩn 2 thẻ dài) · giữ nút Test ── */
.path-forms-m { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.path-fpill {
display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
border: 1px solid var(--border-s); border-radius: 22px; padding: 7px 14px;
font-size: 11.5px; font-weight: 600; color: var(--text); background: #fff; white-space: nowrap;
}
.path-fpill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.path-fpill.off::before { background: var(--red); }
.path-fpill.on::before { background: var(--blue); }
.path-fmt-grid { display: none; } /* ẩn 2 thẻ dài trên mobile (desktop giữ) */
/* vòng 6 — CỘT LỀ TRÁI cho chấm+đường (NGOÀI thẻ), khớp mockup .lpath-row padding-left:56 */
.lpath-row { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 18px; margin-left: 0; text-align: left; position: relative; padding-left: 56px; }
.lpath-card {
flex: 1 1 auto; width: 100%; flex-direction: column; align-items: stretch;
position: relative; overflow: visible; background: #fff; border: 1px solid var(--border-s);
border-radius: 12px; box-shadow: none; padding: 11px 14px 12px 14px; margin-bottom: 12px; /* bỏ 46px lề: chấm ra ngoài thẻ */
}
.lpath-card::before { content: none; } /* vòng 6 (2): bỏ vạch màu mép trên thẻ (desktop-only) */
.lpath-card:last-child { margin-bottom: 0; }
/* ĐÃ XOÁ rule cũ .lpath-row::before (đường tuyệt đối top:21/bottom:90 — mong manh theo nội dung).
Đường nối PER-CARD (robust, tự co theo chiều cao thẻ):
mỗi thẻ vẽ 1 đoạn từ tâm chấm NÀY (top:20) xuống tâm chấm KẾ (qua khe 12px → bottom:-32), ở cột lề
trái (left:-28 = tâm chấm, card-rel). Thẻ cuối C1 KHÔNG có đoạn. Đường z-index auto < chấm z-index:2
→ nằm SAU chấm. Ở cột lề (viewport ~44) nên KHÔNG bị nền thẻ (viewport ≥72) che, không đè chữ. */
.lpath-card::after {
content: ''; position: absolute; left: -28px; top: 20px; bottom: -32px; width: 2px;
background: linear-gradient(#FFCE3A, #9A6200);
}
.lpath-card:last-child::after { display: none; }
/* chấm A1→C1: dùng .lpath-code làm chấm tròn, viền trắng + bóng, vàng đậm dần; ĐÈ trên đường.
(KHÔNG đặt z-index cho .lpath-card để nó không tạo stacking-context nhốt chấm dưới đường.) */
/* chấm nằm trong CỘT LỀ TRÁI, NGOÀI thẻ: card bắt đầu ở 56px (row padding); left:-48 → chấm ở
viewport ~8px (cột lề 0–56), tâm ~28px. 40px viền trắng + bóng + vàng đậm dần. ĐÈ trên đường. */
.lpath-card .lpath-code {
position: absolute; left: -48px; top: 0; width: 40px; height: 40px; margin: 0;
border-radius: 50%; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
border: 3px solid #fff; box-shadow: 0 2px 8px rgba(95,72,0,.4); z-index: 2;
}
.lpath-row .lpath-card:nth-child(1) .lpath-code { background: #FFDF55; color: #5F4800; }
.lpath-row .lpath-card:nth-child(3) .lpath-code { background: #FFCC00; color: #5F4800; }
.lpath-row .lpath-card:nth-child(5) .lpath-code { background: #E1BD00; color: #5F4800; }
.lpath-row .lpath-card:nth-child(7) .lpath-code { background: #7C6500; color: #fff; }
.lpath-row .lpath-card:nth-child(9) .lpath-code { background: #5F4800; color: #fff; }
/* "8 TUẦN" pill vàng nhạt góc phải-trên */
.lpath-card .lpath-lv {
position: absolute; right: 12px; top: 12px; margin: 0;
font-size: 9.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase;
color: var(--gold-deep); background: var(--gold-soft); padding: 3px 9px; border-radius: 20px;
}
.lpath-card .lpath-name { font-size: 13.5px; font-weight: 800; margin: 0 60px 0 0; }
.lpath-card .lpath-desc { font-size: 10.5px; line-height: 1.35; margin: 5px 0 6px; }
/* vòng 6 (3): "ý đầu ra" = PILL xám ÔM SÁT CHỮ (align-self:flex-start để KHÔNG bị stretch full
trong cột flex align-items:stretch). Giá trị đúng mockup .lpath-unlock. */
.lpath-card .lpath-unlock {
display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; border-top: none; margin: 0;
background: #f2f3f5; color: #556170; font-size: 11px; font-weight: 600;
padding: 6px 11px; border-radius: 20px;
}
.lpath-card .lpath-unlock > i { display: none; } /* item 5: bỏ icon ổ khoá */
.lpath-card .lpath-unlock::before { content: '✓'; color: #C97F00; font-weight: 800; font-size: 11px; } /* → ✓ vàng */
.lpath-card .lpath-unlock strong { font-weight: 700; }
/* B) khối Test (.path-cta) gọn theo mockup .testcta: box padding 13/15; câu hỏi flex:1 · 13px
→ nằm 2 dòng bên trái; nút bo góc chữ nhật (radius 10, KHÔNG pill 99), 13px, nowrap 1 dòng, flex:none. */
.path-cta { padding: 13px 15px; gap: 12px; margin-top: 16px; } /* tách khối Test khỏi C1, không dính sát */
.path-cta p { flex: 1; font-size: 13px; line-height: 1.35; margin: 0; }
.path-cta .btn { flex: none; border-radius: 10px; padding: 11px 16px; font-size: 13px; white-space: nowrap; }
.tt-mf-m { display: none; } /* mobile: nút còn "Test trình độ →" (desktop giữ "… miễn phí →") */
/* ── 5) HỆ SINH THÁI — dựng lại theo mockup-eco-mobile.html (v2) ── */
/* Ẩn phần bản desktop trên mobile: 2 nút head · dàn thiết bị · 2 store trong head · 4 quyền lợi */
.eco-ctas { display: none; }
.eco-store-badges { display: none; }
.eco-stage { display: none; }
.eco-feats { display: none; } /* BỎ HẲN khối 4 quyền lợi (mobile) */
/* showcase: ảnh app FIT KHÍT khung máy (object-fit:cover) + store badge CẠNH NHAU */
.eco-showcase-m { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.eco-pho-m { position: relative; flex: none; width: 138px; }
.eco-pho-m > img {
width: 138px; height: 250px; object-fit: cover; display: block;
border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.eco-tag-m {
position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 2;
background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.eco-stores-m { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.eco-dl-m { font-size: 13.5px; color: #fff; font-weight: 800; margin-bottom: 1px; }
/* item 2 — store badge GỌN đúng mockup .stores a: nền đen · viền #333 · radius 11 · padding 9/11
· icon 20 · "Tải trên" 9px #b3b3b3 · tên 12.5px trắng (xếp dọc trong span). */
.eco-stores-m a {
display: flex; gap: 8px; align-items: center; text-decoration: none;
background: #000; border: 1px solid #333; border-radius: 11px; padding: 9px 11px;
}
.eco-stores-m a > i { font-size: 20px; color: #fff; flex: none; }
.eco-stores-m a span { display: flex; flex-direction: column; min-width: 0; }
.eco-stores-m a small { font-size: 9px; color: #b3b3b3; line-height: 1.1; }
.eco-stores-m a b { display: block; font-size: 12.5px; color: #fff; line-height: 1.15; }
/* 3 app 1 cột (mockup .apps) — màu token */
.eco-labels { grid-template-columns: 1fr; gap: 8px; max-width: none; margin: 0 0 14px; }
.eco-labels > .eco-lab:nth-child(3) { grid-column: auto; }
/* item 3 — nền 3 khối app XÁM-ĐEN trung tính (hết tím) đúng mockup .app: bg #1e1f24 · viền #2a2b31 */
.eco-lab {
display: flex; align-items: center; gap: 11px; text-align: left;
background: #1e1f24; border: 1px solid #2a2b31; border-radius: 13px; padding: 10px 12px;
}
.eco-lab-ic {
display: flex; align-items: center; justify-content: center; flex: none;
width: 38px; height: 38px; border-radius: 11px; font-size: 19px; color: #fff;
background: linear-gradient(135deg, var(--red), var(--red-deep));
}
.eco-lab-tx b { font-size: 12.5px; color: #fff; display: block; line-height: 1.2; }
.eco-lab-tx span { font-size: 10px; color: rgba(255,255,255,.6); display: block; margin-top: 1px; }
/* link "Tìm hiểu hệ sinh thái →" ở CUỐI (mockup) */
.eco-more-m { display: block; text-align: center; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.eco-more-m::after { content: ' →'; }
/* ── 7) BẢNG VÀNG (.proof-section): gộp gọn ── */
.mc-inner { margin-top: 18px; }
.mc-bottom { gap: 12px; }
.mc-video { aspect-ratio: 16 / 9; min-height: 0; } /* item 8: ratio thay min-height cố định */
/* ── 9) KHOẢNH KHẮC (.kk): rút tiêu đề + mô tả ── */
/* item 4 — "Những khoảnh khắc đáng nhớ tại PNE" gọn 1 dòng (giảm cỡ + nowrap, không tràn 390px) */
.kk-head .sec-title { font-size: 16px; line-height: 1.25; white-space: nowrap; }
.kk-head .sec-sub { font-size: 12px; line-height: 1.4; }
/* ── 10) FORM: đổi câu mô tả gọn (mobile) · nén khoảng cách · giữ đủ field ── */
.form-card > .sec-sub { display: none; } /* ẩn câu dài (desktop giữ, admin sửa) */
.form-sub-m { display: block; text-align: center; font-size: 12px; color: var(--text-2); line-height: 1.4; margin: 0 auto 14px; }
/* ── 11) FOOTER LIÊN HỆ: mỗi mục 1 dòng · icon xám (giữ logo đỏ, giữ khối pháp lý desktop) ── */
.footer-col:not(.is-collapsible) ul li span { align-items: flex-start; font-size: 12.5px; }
.footer-col:not(.is-collapsible) ul li span i { color: #98a1b0; font-size: 15px; margin-top: 1px; }
/* ══ 1) ĐỒNG BỘ TYPOGRAPHY — 1 thang mobile duy nhất cho MỌI section ══ */
/* Heading section: 19px / 800 / lh 1.25 (đè các clamp 22–25px lộn xộn) */
/* (.kk-head .sec-title tách khỏi thang chung: vòng 4 cho về 16px/1 dòng — xem rule .kk-head .sec-title ở trên) */
.services-section .sec-title, .path-section .sec-title, .proof-section .sec-title,
.hz-head .sec-title, .form-card .sec-title,
.osd-body h2, .eco-head h2, #avGridTitle {
font-size: 19px !important; font-weight: 800; line-height: 1.25;
}
/* Mô tả section: 12.5px / xám / lh 1.4 */
.sec-sub { font-size: 12.5px !important; line-height: 1.4; }
.eco-head p { font-size: 12.5px; line-height: 1.45; }
.osd-desc { font-size: 12.5px; line-height: 1.45; }
/* Eyebrow "Giá trị cộng thêm" (eco) → pill vàng-nhạt (nền eco tối) cho đồng bộ dạng pill */
.eco-head .eyebrow {
display: inline-block; background: rgba(255,204,0,.14); color: var(--gold);
border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; margin-bottom: 11px;
}
/* ══ 9) KHOẢNG CÁCH SECTION — nén padding dọc 36px → 22px (nhịp gọn như mockup) ══ */
.rdo, .services-section, .path-section, .proof-section,
.hz, .eco, .kk, .form-section {
padding-top: 22px; padding-bottom: 22px;
}
/* ══ 3+6) GAP tiêu-đề → nội dung: .sec-head margin-bottom 60px → 18px (Mục tiêu + Bảng vàng) ══ */
.sec-head { margin-bottom: 18px; }
/* ══ 8) THƯ VIỆN ẢNH .hz — subtitle nhóm về 1 dòng (không tràn) ══ */
/* item 4 — tiêu đề + phụ đề nhóm mỗi cái 1 dòng; .ch-tt co được (min-width:0) để KHÔNG đẩy nút
"Xem tất cả" tràn mép; ellipsis chỉ là chốt an toàn (chữ hiện tại vẫn vừa, không bị cắt). */
.ch-tt { min-width: 0; }
.ch-tt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tt span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ══ 9form) FORM — rút gọn dòng bảo mật: chỉ còn "PNE cam kết bảo mật thông tin của bạn" + icon ══ */
.priv-extra-m { display: none; }
/* ══ 7) CAPTCHA Turnstile — KHÔNG cắt cụt (#63): bỏ overflow:hidden ở đây (nó cắt widget min~300px
ở cột hẹp → user không tick được). Fit responsive chuyển sang wrapper .cf-ts-fit + JS scale trong
partials/turnstile.blade.php (áp MỌI form, mọi bề rộng). Giữ max-width iframe cho an toàn. ══ */
.cf-turnstile { max-width: 100%; margin-left: auto; margin-right: auto; }
.cf-turnstile iframe { max-width: 100% !important; }
}
@media (max-width: 600px) {
/* 4b) MỤC TIÊU giữ 2×2 ở phone nhỏ (đè rule ≤420px 1 cột) */
.svc2-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
/* item 1a: h1 4 dòng desktop (3
). Mobile GIỮ
thứ 2 (trước "Thi") → 2 dòng:
"Học tiếng Đức đúng chuẩn." | "Thi chứng chỉ tại trung tâm." — ẩn
1 và 3.
(KHÔNG xoá
ở markup; desktop giữ 4 dòng.) */
.hero h1 br:nth-of-type(1),
.hero h1 br:nth-of-type(3) { display: none; }
}