/* ========================================================================== Dạy Lái Xe HCM — giao diện element UX Builder trên nền Flatsome Mốc thiết kế: ≥1100 máy tính · 1000–1099 · 640–999 máy tính bảng · <640 điện thoại (kiểu app). Header: menu ngang ≥1250, icon menu <1250. Lưới Row/Col của Flatsome đổi cột ở 850 / 550. ========================================================================== */ :root { --dlx-primary: #0B45D1; --dlx-primary-h: #0836A8; --dlx-tint: #EAF0FD; --dlx-ink: #0B1B4D; /* Cam thiết kế #D24A00 chỉ đạt 4.45:1 trên nền trắng, 4.1:1 trên nền xanh nhạt → hạ độ sáng cùng họ màu. */ --dlx-accent: #C24400; --dlx-accent-h: #A33900; --dlx-focus: #F05A0F; --dlx-text: #1F2A44; --dlx-text-2: #4A5878; --dlx-muted: #5F6B85; --dlx-alt: #F3F6FD; --dlx-line: #E3E8F2; --dlx-line-2: #D5DCE8; --dlx-divider: #EEF1F6; --dlx-rating: #F5A400; --dlx-pad: clamp(16px, 5vw, 80px); /* Thiết kế dùng 64px trên + 64px dưới (2 khối cách 128px), quá thưa khi xếp 10 khối liền nhau → 44 / 32px mỗi phía. */ --dlx-sy: clamp(32px, 4.5vw, 44px); --dlx-head-gap: clamp(24px, 3vw, 32px); --dlx-shadow: 0 6px 20px rgba(11, 27, 77, .06); --dlx-shadow-lg: 0 16px 36px rgba(11, 27, 77, .12); --dlx-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---------- Nền trang & chữ ---------- */ html { scroll-behavior: smooth; } body.dlx, .dlx #wrapper, .dlx #main { background-color: #fff; } body.dlx { color: var(--dlx-text); font-family: var(--dlx-font); -webkit-font-smoothing: antialiased; } .dlx a { color: var(--dlx-primary); } .dlx a:hover { color: var(--dlx-primary-h); } .dlx :focus-visible { outline: 3px solid var(--dlx-focus); outline-offset: 2px; border-radius: 4px; } .dlx-accent { color: var(--dlx-primary); } .dlx-icon { display: block; flex: none; } .dlx [class*="dlx-"] ul, .dlx ul[class*="dlx-"] { list-style: none; margin: 0; padding: 0; } .dlx [class*="dlx-"] li, .dlx li[class*="dlx-"] { margin: 0; } /* ---------- Khung Section / Row của Flatsome ---------- */ .dlx .section.dlx-sec { padding: var(--dlx-sy) 0 !important; background-color: #fff; } .dlx .section.dlx-sec--alt { background-color: var(--dlx-alt); } .dlx .section.dlx-sec--top40 { padding-top: min(32px, var(--dlx-sy)) !important; } .dlx .section.dlx-sec--flush-top { padding-top: 0 !important; } .dlx .section.dlx-sec-hero { padding: 0 !important; background-color: #fff; } /* Trang chủ dùng mẫu "Transparent Header" để điện thoại có header phẳng đè ảnh; máy tính/máy tính bảng đẩy hero xuống dưới header trắng. */ @media (min-width: 850px) { .dlx .section.dlx-sec-hero { padding-top: 72px !important; } } @media (max-width: 849px) and (min-width: 640px) { .dlx .section.dlx-sec-hero { padding-top: 64px !important; } } .dlx [class*="dlx-sec"] .section-content > .row, .dlx .dlx-footer .section-content > .row { --g: 24px; max-width: calc(1280px + 2 * var(--dlx-pad)); padding-left: calc(var(--dlx-pad) - var(--g) / 2); padding-right: calc(var(--dlx-pad) - var(--g) / 2); } .dlx [class*="dlx-sec"] .section-content > .row > .col, .dlx .dlx-footer .section-content > .row > .col { padding: 0 calc(var(--g) / 2) var(--g); } .dlx [class*="dlx-sec"] .section-content > .row:last-child { margin-bottom: calc(var(--g) * -1); } .dlx .row > .col:has(> .col-inner > .dlx-heading:only-child) { padding-bottom: 0; } .dlx [id].dlx-heading, .dlx [id].dlx-rail, .dlx [id].dlx-prices, .dlx [id].dlx-sched, .dlx [id].dlx-cta, .dlx [id].dlx-why { scroll-margin-top: 90px; } /* ---------- Ô giữ chỗ ảnh ---------- */ .dlx-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; padding: 12px; background: repeating-linear-gradient(135deg, #e6ecf7 0 12px, var(--dlx-tint) 12px 24px); color: var(--dlx-muted); font-size: 13px; text-align: center; } /* ---------- Nút ---------- */ .dlx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 12px; font: 700 16px/1 var(--dlx-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; } .dlx-btn:hover { text-decoration: none; } .dlx-btn--sm { height: 40px; padding: 0 16px; font-size: 15px; } .dlx a.dlx-btn--primary, .dlx-btn--primary { background: var(--dlx-accent); color: #fff; } .dlx a.dlx-btn--primary:hover, .dlx a.dlx-btn--primary:focus-visible { background: var(--dlx-accent-h); color: #fff; } .dlx-btn--glow { box-shadow: 0 8px 20px rgba(210, 74, 0, .25); } .dlx a.dlx-btn--outline, .dlx-btn--outline { border-color: var(--dlx-primary); background: #fff; color: var(--dlx-primary); } .dlx a.dlx-btn--outline:hover, .dlx a.dlx-btn--outline:focus-visible { background: var(--dlx-tint); color: var(--dlx-primary); } .dlx a.dlx-btn--ghost, .dlx-btn--ghost { border-color: rgba(255, 255, 255, .4); background: transparent; color: #fff; padding: 0 20px; } .dlx a.dlx-btn--ghost:hover, .dlx a.dlx-btn--ghost:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; } .dlx-btn--block { display: flex; width: 100%; } .dlx-btn-wrap { display: flex; margin-top: var(--dlx-head-gap); } .dlx-btn-wrap--center { justify-content: center; } /* ---------- Tiêu đề khối ---------- */ .dlx-heading { display: flex; flex-direction: column; gap: 12px; } .dlx-heading__main { display: flex; flex-direction: column; gap: 12px; } .dlx-heading--center { align-items: center; text-align: center; } .dlx-heading--center .dlx-heading__main { align-items: center; max-width: 720px; } .dlx-heading--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; } .dlx-heading--mb-md { margin-bottom: var(--dlx-head-gap); } .dlx-heading--mb-sm { margin-bottom: 20px; } .dlx-heading--mb-none { margin-bottom: 0; } .dlx-eyebrow { font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; color: var(--dlx-accent); } .dlx .dlx-title { margin: 0; padding: 0; font: 800 clamp(26px, 2.6vw, 36px)/1.25 var(--dlx-font); letter-spacing: -.6px; color: var(--dlx-ink); text-wrap: balance; } .dlx-heading__text { margin: 0; max-width: 400px; font-size: 16px; line-height: 1.65; color: var(--dlx-text-2); text-wrap: pretty; } .dlx .dlx-heading__link { font-size: 15px; font-weight: 700; color: var(--dlx-primary); white-space: nowrap; } /* ---------- Header (Header Builder của Flatsome) ---------- */ .dlx #header .header-bg-color { background-color: #fff !important; } .dlx #header .header-main { box-shadow: none; border-bottom: 1px solid var(--dlx-line); } .dlx #header .header-wrapper.stuck { box-shadow: 0 6px 20px -14px rgba(11, 27, 77, .35); } .dlx #header .top-divider { display: none; } /* Header cùng khung với nội dung trang: logo thẳng hàng tiêu đề hero, nút phải thẳng mép phải lưới thẻ (Flatsome mặc định chỉ lề 15px). */ .dlx #masthead .header-inner { max-width: calc(1280px + 2 * var(--dlx-pad)) !important; padding-left: var(--dlx-pad); padding-right: var(--dlx-pad); } .dlx #masthead #logo img { width: auto; max-height: 50px; padding: 0; } .dlx #masthead .flex-col.flex-left { flex: 1 1 auto; } .dlx #masthead .header-nav-main.nav-left { justify-content: center; gap: clamp(16px, 2vw, 28px); } .dlx #masthead .header-nav-main > li { margin: 0; } .dlx #masthead .header-nav-main > li > a { display: flex; align-items: center; padding: 6px 0; border-bottom: 2px solid transparent; font: 500 15px/1.4 var(--dlx-font); color: var(--dlx-text); text-transform: none; letter-spacing: 0; white-space: nowrap; } .dlx #masthead .header-nav-main > li > a:hover { color: var(--dlx-primary); } .dlx #masthead .header-nav-main > li > a.is-current, .dlx #masthead .header-nav-main > li.current-menu-item > a, .dlx #masthead .header-nav-main > li.current-menu-ancestor > a, .dlx #masthead .header-nav-main > li.current-page-ancestor > a { color: var(--dlx-primary); font-weight: 700; border-bottom-color: var(--dlx-primary); } .dlx #masthead .header-nav-main > li > a::before { display: none; } .dlx #masthead .html_top_right_text { margin: 0; } .dlx #masthead .html_top_right_text, .dlx .mobile-sidebar .html_top_right_text { display: flex; align-items: center; gap: 14px; } .dlx #masthead .html_top_right_text .dlx-btn-wrap { margin: 0; } /* Cụm bên phải cũng mang class header-nav-main nên rule "li không lề" của menu áp vào cả icon menu → cần độ đặc hiệu cao hơn. */ .dlx #masthead .nav-icon, .dlx #masthead .header-nav-main > li.nav-icon { margin-left: 12px; } /* Thêm "li.nav-icon" để thắng rule link menu ở trên (viền đáy trong suốt + flex) — nút bị mất cạnh dưới, icon lệch trái. */ .dlx #masthead .nav-icon > a, .dlx #masthead .header-nav-main > li.nav-icon > a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--dlx-line-2); border-radius: 12px; background: #fff; color: var(--dlx-ink); } .dlx #masthead .nav-icon .icon-menu { display: block; margin: 0; font-size: 20px; line-height: 1; color: var(--dlx-ink); } .dlx #masthead .nav-icon .menu-title { display: none !important; } /* Hotline là thẻ a con trực tiếp của li trong header → bỏ kiểu ".nav > li > a" của Flatsome (xuống dòng, đệm). */ .dlx .dlx-hotline { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; padding: 0; white-space: nowrap; text-decoration: none; } .dlx-hotline__ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-hotline__tx { display: flex; flex-direction: column; line-height: 1.3; } .dlx-hotline__tx span { font-size: 13px; color: var(--dlx-muted); } .dlx-hotline__tx strong { font-size: 16px; font-weight: 800; color: var(--dlx-accent); } /* Menu 7 mục: khoảng cách giữa mục 16px dưới 1400px thì chữ menu cách logo / hotline ≥ 30px từ 1250px (1280px: 76 / 46px) → menu ngang từ 1250px (laptop 14" để 100%, Windows phóng 150% = 1280px). Dưới đó icon menu. */ @media (min-width: 1250px) { .dlx #masthead .flex-right .nav-icon { display: none; } } @media (min-width: 1250px) and (max-width: 1399px) { .dlx #masthead .header-nav-main.nav-left { gap: 16px; } } @media (max-width: 1249px) { .dlx #masthead .header-nav-main.nav-left { display: none; } } /* Header máy tính bảng / điện thoại 64px như thiết kế (Flatsome dùng chiều cao Transparent Header cho mọi cỡ). */ @media (max-width: 849px) { .dlx #header.transparent .header-main { height: 64px; } } @media (max-width: 759px) { .dlx #masthead .dlx-hotline { display: none; } } /* Ngăn kéo menu (bên phải). */ .dlx .mobile-sidebar .nav-sidebar > li > a { min-height: 48px; padding: 0 12px; border-radius: 12px; font: 600 16px/48px var(--dlx-font); color: var(--dlx-text); text-transform: none; letter-spacing: 0; } .dlx .mobile-sidebar .nav-sidebar > li { border: 0; } .dlx .mobile-sidebar .html_top_right_text { flex-direction: column; align-items: stretch; padding: 16px 12px 0; } .dlx .mobile-sidebar .dlx-hotline { min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--dlx-alt); } .dlx .mobile-sidebar .dlx-btn-wrap { margin: 0; } .dlx .mobile-sidebar .dlx-btn { display: flex; width: 100%; height: 48px; font-size: 16px; } /* ---------- Hero ---------- */ .dlx-hero { position: relative; display: flex; min-height: clamp(480px, calc(100vh - 112px), 620px); } .dlx-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--dlx-tint); } .dlx-hero__media img, .dlx-hero__media .dlx-ph { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .dlx-hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .94) 30%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 58%), linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 22%); } @media (max-width: 899px) { .dlx-hero__media::after { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, 0) 85%), linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 22%); } } .dlx-hero__body { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; max-width: calc(1280px + 2 * var(--dlx-pad)); margin: 0 auto; padding: 40px var(--dlx-pad) 96px; } /* Thiết kế: khối chữ rộng 700px trừ lề hai bên. */ .dlx-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.2vh, 20px); max-width: calc(700px - 2 * var(--dlx-pad)); } .dlx .dlx-hero__title { margin: 0; padding: 0; font: 800 clamp(30px, 3.6vw, 52px)/1.15 var(--dlx-font); letter-spacing: -1px; color: var(--dlx-ink); text-wrap: balance; } .dlx-hero__text { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--dlx-text-2); text-wrap: pretty; } .dlx-hero__mtext { display: none; } .dlx-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .dlx .dlx-hero__checks { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 8px; } .dlx .dlx-hero__checks li { display: flex; align-items: center; gap: 9px; } .dlx-hero__tick { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-hero__checks li > span:last-child { display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; } .dlx-hero__checks strong { color: var(--dlx-ink); } .dlx-hero__checks li > span:last-child > span { color: var(--dlx-muted); } /* ---------- Thẻ chỉ số nổi đè hero ---------- */ .dlx-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; margin: 0 0 36px; padding: 24px 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow-lg); } .dlx-stats--overlap { margin-top: -56px; } .dlx-stat { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 clamp(12px, 2.4vw, 34px); border-left: 1px solid var(--dlx-line); } .dlx-stat:first-child { border-left: 0; } .dlx-stat__ic { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 12px; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-stat__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dlx-stat__tx strong { font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; color: var(--dlx-ink); white-space: nowrap; } .dlx-stat__tx span { font-size: 14px; line-height: 1.4; color: var(--dlx-muted); } @media (max-width: 899px) { .dlx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlx-stat:nth-child(odd) { border-left: 0; } } /* ---------- Dải thẻ: lưới / vuốt ngang ---------- */ /* Khe giữa các thẻ 16px (thiết kế 24px): thẻ trong một hàng đọc thành một nhóm. */ .dlx-rail { display: grid; gap: 16px; counter-reset: dlx-step; } .dlx-rail > * { min-width: 0; } .dlx-rail--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dlx-rail--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1099px) and (min-width: 640px) { .dlx-rail--c4.dlx-rail--t-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 999px) and (min-width: 640px) { .dlx-rail--c3.dlx-rail--t-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlx-rail--t-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; margin: 0 calc(var(--dlx-pad) * -1); padding: 16px var(--dlx-pad) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--dlx-pad); scrollbar-width: none; } .dlx-rail--t-rail::-webkit-scrollbar { display: none; } .dlx-rail--t-rail > * { scroll-snap-align: start; } } /* ---------- Thẻ khóa học ---------- */ .dlx-course { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); transition: box-shadow .2s, transform .2s; } .dlx-course:hover { box-shadow: var(--dlx-shadow-lg); transform: translateY(-3px); } .dlx-course__media { position: relative; aspect-ratio: 16 / 9; background: var(--dlx-tint); } /* Ảnh đặt tuyệt đối: ảnh khác tỉ lệ 16:9 (vd 1,6:1) không được kéo khung cao hơn các thẻ bên cạnh. */ .dlx-course__media img, .dlx-course__media .dlx-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-badge { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--dlx-accent); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; pointer-events: none; } .dlx-badge--left { right: auto; left: 14px; font-weight: 800; } .dlx-course__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; } .dlx .dlx-course__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--dlx-ink); } .dlx .dlx-course__title a { color: inherit; } .dlx .dlx-course__title a:hover { color: var(--dlx-primary); } .dlx-course__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--dlx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dlx .dlx-meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--dlx-text); } .dlx .dlx-meta li { display: flex; align-items: center; gap: 9px; } .dlx-meta__ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 8px; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-meta b { font-weight: 700; } .dlx-course__btn { align-self: center; margin-top: auto; } /* ---------- Vì sao chọn: ảnh tròn + 6 chip ---------- */ .dlx-why { display: grid; gap: 24px 32px; align-items: center; } .dlx-why__img { justify-self: center; width: 340px; max-width: 100%; aspect-ratio: 1; padding: 14px; border: 2px dashed #B9CBF3; border-radius: 50%; } .dlx-why__circle { width: 100%; height: 100%; overflow: hidden; border: 8px solid #fff; border-radius: 50%; background: var(--dlx-tint); box-shadow: var(--dlx-shadow-lg); } .dlx-why__circle img { display: block; width: 100%; height: 100%; object-fit: cover; } .dlx .dlx-why__list { display: contents; } .dlx .dlx-why__item { display: flex; align-items: center; gap: 18px; padding: 16px 18px 16px 28px; border: 1px solid var(--dlx-line); border-radius: 999px; background: #fff; box-shadow: var(--dlx-shadow); text-align: right; transition: box-shadow .2s; } .dlx .dlx-why__item:hover { box-shadow: var(--dlx-shadow-lg); } .dlx-why__tx { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; } .dlx-why__tx strong { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--dlx-ink); } .dlx-why__tx span { font-size: 15px; line-height: 1.4; color: var(--dlx-text-2); } .dlx-why__s { display: none; } .dlx-why__ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: linear-gradient(145deg, #2A64E8, #0836A8); color: #fff; box-shadow: 0 6px 14px rgba(11, 69, 209, .3); } /* 3 chip đầu cột trái (chữ canh phải, icon bên phải), 3 chip sau cột phải (icon trái). Gán hàng rõ ràng để cột phải không tụt xuống. */ .dlx .dlx-why__item:nth-child(n+4) { flex-direction: row-reverse; padding: 16px 28px 16px 18px; text-align: left; } @media (min-width: 1100px) { .dlx-why { grid-template-columns: minmax(max-content, 1fr) 340px minmax(max-content, 1fr); row-gap: 20px; } .dlx-why__img { grid-column: 2; grid-row: 1 / span 3; } .dlx .dlx-why__item { white-space: nowrap; } .dlx .dlx-why__item:nth-child(-n+3) { grid-column: 1; } .dlx .dlx-why__item:nth-child(n+4) { grid-column: 3; } .dlx .dlx-why__item:nth-child(1), .dlx .dlx-why__item:nth-child(4) { grid-row: 1; } .dlx .dlx-why__item:nth-child(2), .dlx .dlx-why__item:nth-child(5) { grid-row: 2; } .dlx .dlx-why__item:nth-child(3), .dlx .dlx-why__item:nth-child(6) { grid-row: 3; } /* Chip trên/dưới dịch 32px về phía ảnh thành vòng cung. */ .dlx .dlx-why__item:nth-child(1), .dlx .dlx-why__item:nth-child(3) { transform: translateX(32px); } .dlx .dlx-why__item:nth-child(4), .dlx .dlx-why__item:nth-child(6) { transform: translateX(-32px); } } @media (max-width: 1099px) and (min-width: 640px) { .dlx-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } .dlx-why__img { grid-column: 1 / -1; width: 280px; margin-bottom: 14px; } .dlx .dlx-why__item { gap: 14px; padding: 12px 12px 12px 22px; } .dlx .dlx-why__item:nth-child(n+4) { padding: 12px 22px 12px 12px; } .dlx .dlx-why__item:nth-child(-n+3) { grid-column: 1; } .dlx .dlx-why__item:nth-child(n+4) { grid-column: 2; } .dlx .dlx-why__item:nth-child(1), .dlx .dlx-why__item:nth-child(4) { grid-row: 2; } .dlx .dlx-why__item:nth-child(2), .dlx .dlx-why__item:nth-child(5) { grid-row: 3; } .dlx .dlx-why__item:nth-child(3), .dlx .dlx-why__item:nth-child(6) { grid-row: 4; } .dlx-why__tx strong { font-size: 16px; } .dlx-why__tx span { font-size: 14px; } .dlx-why__ic { width: 44px; height: 44px; } } /* ---------- Quy trình ---------- */ .dlx-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; height: calc(100% - 34px); margin-top: 34px; padding: 46px 20px 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); text-align: center; counter-increment: dlx-step; transition: transform .2s, box-shadow .2s; } .dlx-step:hover { transform: translateY(-3px); box-shadow: var(--dlx-shadow-lg); } .dlx-step__num { position: absolute; top: -33px; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--dlx-primary); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .5px; transform: translateX(-50%); box-shadow: 0 0 0 8px var(--dlx-alt), 0 10px 20px rgba(11, 69, 209, .25); } .dlx-step__num::before { content: counter(dlx-step, decimal-leading-zero); } .dlx-step__body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .dlx .dlx-step h3 { margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--dlx-ink); white-space: nowrap; } /* Mô tả giãn hết phần dư của thẻ: mô tả 3 dòng ở một thẻ không làm hàng chip các thẻ bên cạnh lệch cao. */ .dlx .dlx-step p { flex-grow: 1; margin: 0; min-height: 43px;font-size: 14px; line-height: 1.55; color: var(--dlx-text-2); text-wrap: balance; } .dlx-step__chips { display: flex; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--dlx-divider); } .dlx-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; } .dlx-chip--time { background: var(--dlx-tint); color: var(--dlx-ink); font-weight: 700; } .dlx-chip--time .dlx-icon { color: var(--dlx-primary); } .dlx-chip--line { border: 1px solid var(--dlx-line); color: var(--dlx-text-2); font-weight: 600; } /* ---------- Học phí ---------- */ .dlx-prices__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-top: 14px; } .dlx-price { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 26px 26px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } .dlx-price--featured { border: 2px solid var(--dlx-primary); box-shadow: var(--dlx-shadow-lg); } .dlx-price__badge { position: absolute; top: -14px; left: 50%; padding: 6px 14px; border-radius: 999px; background: var(--dlx-accent); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); } .dlx-price__head { display: flex; flex-direction: column; gap: 4px; } .dlx .dlx-price__head h3 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--dlx-ink); } .dlx-price__head span { font-size: 14px; font-weight: 600; color: var(--dlx-text-2); } .dlx-price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; padding-bottom: 18px; border-bottom: 1px dashed var(--dlx-line-2); } .dlx-price__amount strong { font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -.8px; color: var(--dlx-accent); } .dlx-price__amount span { font-size: 15px; font-weight: 600; color: var(--dlx-text-2); } .dlx .dlx-price__feats { display: flex; flex-direction: column; gap: 12px; flex: 1; } .dlx .dlx-price__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--dlx-text); } .dlx-tick { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-prices__tabs { display: none; } @media (max-width: 1099px) and (min-width: 640px) { .dlx-prices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; } } /* ---------- Lịch học ---------- */ .dlx-sched { display: flex; flex-direction: column; gap: 20px; } .dlx-sched__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .dlx-sched__tabs, .dlx-prices__tabs { flex-wrap: wrap; gap: 8px; max-width: 100%; padding: 6px; overflow-x: auto; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; scrollbar-width: none; } .dlx-sched__tabs { display: flex; } .dlx-sched__tabs::-webkit-scrollbar, .dlx-prices__tabs::-webkit-scrollbar { display: none; } .dlx .dlx-sched__tab, .dlx .dlx-prices__tab { flex: none; height: 40px; min-height: 0; margin: 0; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; font: 700 15px/1 var(--dlx-font); color: var(--dlx-text-2); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; } .dlx .dlx-sched__tab:hover, .dlx .dlx-prices__tab:hover { background: var(--dlx-alt); color: var(--dlx-ink); } .dlx .dlx-sched__tab[aria-selected="true"], .dlx .dlx-prices__tab[aria-selected="true"] { background: var(--dlx-primary); color: #fff; } .dlx .dlx-sched__tab[aria-selected="true"]:hover, .dlx .dlx-prices__tab[aria-selected="true"]:hover { background: var(--dlx-primary-h); } .dlx-sched__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 15px; color: var(--dlx-text-2); } .dlx-sched__info b { color: var(--dlx-ink); } .dlx-sched__open { display: flex; align-items: center; gap: 8px; } .dlx-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #0F7A44; } .dlx-sched__panel[hidden] { display: none; } .dlx-sched__table { overflow: auto; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } .dlx .dlx-sched__table table { width: 100%; min-width: 720px; margin: 0; border: 0; border-collapse: collapse; font-size: 15px; } .dlx .dlx-sched__table th, .dlx .dlx-sched__table td { padding: 14px 20px; border: 0; border-top: 1px solid var(--dlx-divider); text-align: center; vertical-align: middle; font-size: 15px; line-height: 1.4; color: var(--dlx-text); text-transform: none; letter-spacing: 0; } .dlx .dlx-sched__table thead th { padding: 16px 20px; border-top: 0; background: var(--dlx-tint); font-weight: 700; color: var(--dlx-ink); } .dlx .dlx-sched__table thead th:last-child { width: 140px; } .dlx .dlx-sched__table th:first-child { padding-left: 28px; text-align: left; } .dlx .dlx-sched__table tbody th { font-weight: 400; } .dlx-sched__table tbody th b { display: block; font-size: 16px; color: var(--dlx-ink); } .dlx-sched__table tbody th span { display: block; margin-top: 2px; font-size: 13px; color: var(--dlx-muted); } .dlx-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; } .dlx-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Màu xanh "còn chỗ" hạ từ #12804A xuống #0F7A44: chữ 13px trên nền #e6f6ee chỉ đạt 4.46:1. Xám "hết chỗ" dùng #5F6B85 thay #6B7790 (4.0:1). */ .dlx-st--o { background: #e6f6ee; color: #0F7A44; } .dlx-st--f { background: #fff4d6; color: #9A5B00; } .dlx-st--x { background: #f1f3f6; color: #5F6B85; } .dlx-sched__cards { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dlx-sched__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } /* Thẻ hẹp (3 cột trên máy tính bảng): nút Đăng ký tự xuống dòng thay vì ép chữ giờ học thành 3 dòng. */ .dlx-sched__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; } .dlx-sched__card-head > div { display: flex; flex: 1 1 170px; flex-direction: column; gap: 2px; min-width: 0; } .dlx-sched__card-head > div b { font-size: 16px; color: var(--dlx-ink); } .dlx-sched__card-head > div span { font-size: 14px; color: var(--dlx-muted); } .dlx-sched__card-head .dlx-btn { flex: none; font-size: 14px; } .dlx-sched__days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* Ô dẹt (cao ~44px) thay vì gần vuông: lề trong và khoảng giữa 2 dòng nhỏ lại. */ .dlx-sched__day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; text-align: center; line-height: 1.3; } .dlx-sched__day span { font-size: 13px; color: var(--dlx-text-2); } .dlx-sched__day b { font-size: 13px; } .dlx-sched__table .dlx-btn { font-size: 14px; padding: 0 18px; } @media (max-width: 999px) { .dlx-sched__table { display: none; } .dlx-sched__cards { display: grid; } } /* ---------- Dải thông báo navy ---------- */ .dlx-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 22px 28px; border-radius: 16px; background: var(--dlx-ink); } .dlx-notice__main { display: flex; align-items: center; gap: 16px; } .dlx-notice__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #FF9A66; } .dlx-notice__tx { display: flex; flex-direction: column; gap: 3px; } .dlx-notice__tx strong { font-size: 17px; color: #fff; } .dlx-notice__tx span { font-size: 15px; line-height: 1.5; color: #DCE5F7; } .dlx-notice__btns { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Giảng viên ---------- */ .dlx-teacher { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; background: var(--dlx-tint); transition: transform .25s, box-shadow .25s; } .dlx-teacher:hover { transform: translateY(-4px); box-shadow: var(--dlx-shadow-lg); } .dlx-teacher__img, .dlx-teacher > .dlx-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-teacher .dlx-badge { top: 14px; } .dlx-teacher__card { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--dlx-shadow); } .dlx-teacher__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .dlx-teacher__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dlx-teacher__who strong { font-size: 17px; line-height: 1.3; color: var(--dlx-ink); } .dlx-teacher__who span { font-size: 13px; line-height: 1.4; color: var(--dlx-text-2); } .dlx-teacher__rate { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 13px; font-weight: 800; color: var(--dlx-ink); } .dlx-teacher__rate .dlx-icon { color: var(--dlx-rating); } .dlx-teacher__foot { align-items: center; padding-top: 8px; border-top: 1px solid var(--dlx-divider); } .dlx-teacher__chips { display: flex; gap: 5px; } .dlx-teacher__chips span { padding: 4px 8px; border-radius: 8px; background: var(--dlx-tint); color: var(--dlx-primary); font-size: 13px; font-weight: 800; line-height: 1.2; } .dlx-teacher__count { font-size: 13px; color: var(--dlx-muted); white-space: nowrap; } /* ---------- Cơ sở vật chất ---------- */ .dlx-fac { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 250px; gap: 16px; } .dlx .dlx-fac__item { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--dlx-tint); } .dlx-fac__item:first-child { grid-row: span 2; } .dlx-fac__item > img, .dlx-fac__item > .dlx-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-fac__item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 20, 60, .82) 0%, rgba(8, 20, 60, .25) 45%, rgba(8, 20, 60, 0) 70%); } .dlx .dlx-fac__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; } .dlx .dlx-fac__item h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; color: #fff; } .dlx .dlx-fac__item:first-child h3 { font-size: 24px; } .dlx .dlx-fac__item p { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.55; color: #dbe5f4; text-wrap: pretty; } @media (max-width: 999px) and (min-width: 640px) { .dlx-fac { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; } .dlx-fac__item:first-child { grid-row: auto; grid-column: span 2; } .dlx .dlx-fac__item:first-child h3 { font-size: 18px; } } /* ---------- Cảm nhận học viên ---------- */ .dlx .dlx-review { display: flex; flex-direction: column; gap: 18px; height: 100%; margin: 0; padding: 28px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } .dlx-review__top { display: flex; align-items: center; justify-content: space-between; } .dlx-stars { display: flex; gap: 2px; color: var(--dlx-rating); } .dlx-review__q { color: var(--dlx-line-2); } .dlx .dlx-review blockquote { flex: 1; margin: 0; padding: 0; border: 0; font-size: 16px; font-style: normal; line-height: 1.7; color: var(--dlx-text); text-wrap: pretty; } .dlx .dlx-review blockquote::before, .dlx .dlx-review blockquote::after { display: none; } .dlx-review figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--dlx-divider); } .dlx-review__av { display: grid; place-items: center; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 50%; background: var(--dlx-tint); color: var(--dlx-primary); font-size: 16px; font-weight: 800; } .dlx-review__av img { width: 100%; height: 100%; object-fit: cover; } .dlx-review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dlx-review__who strong { font-size: 16px; color: var(--dlx-ink); } .dlx-review__who span { font-size: 14px; color: var(--dlx-muted); } /* ---------- Hỏi đáp (Accordion của Flatsome) ---------- */ .dlx .dlx-faq { counter-reset: dlx-faq; display: flex; flex-direction: column; gap: 12px; } .dlx .dlx-faq .accordion-item { counter-increment: dlx-faq; overflow: hidden; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s; } .dlx .dlx-faq .accordion-item:has(> .accordion-title.active) { border-color: #B9CBF3; box-shadow: var(--dlx-shadow); } .dlx .dlx-faq .accordion-title { position: relative; display: grid; grid-template-columns: 28px 1fr 34px; align-items: center; gap: 20px; padding: 20px 22px; border: 0; font: 700 17px/1.45 var(--dlx-font); color: var(--dlx-ink); text-wrap: pretty; } .dlx .dlx-faq .accordion-title::before { content: counter(dlx-faq, decimal-leading-zero); font: 500 13px ui-monospace, Menlo, Consolas, monospace; color: var(--dlx-muted); } .dlx .dlx-faq .accordion-title > span { grid-column: 2; grid-row: 1; } .dlx .dlx-faq .accordion-title .toggle { position: relative; grid-column: 3; grid-row: 1; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; background: var(--dlx-divider); color: var(--dlx-ink); opacity: 1; transition: background-color .15s; } .dlx .dlx-faq .accordion-title .toggle i { display: none; } .dlx .dlx-faq .accordion-title .toggle::before, .dlx .dlx-faq .accordion-title .toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; } .dlx .dlx-faq .accordion-title .toggle::after { transform: rotate(90deg); } .dlx .dlx-faq .accordion-title.active .toggle { background: var(--dlx-primary); color: #fff; } .dlx .dlx-faq .accordion-title.active .toggle::after { display: none; } .dlx .dlx-faq .accordion-inner { padding: 0 76px 22px 70px; font-size: 15px; line-height: 1.7; color: var(--dlx-text-2); } .dlx .dlx-faq .accordion-inner p { margin: 0; } /* Khoảng giữa cột tiêu đề và cột câu hỏi 64px như thiết kế (cột Flatsome tự có 12px mỗi bên). */ @media (min-width: 850px) { .dlx .dlx-faq-row > .col:first-child { padding-right: 52px; } } /* ---------- Tin tức ---------- */ .dlx-post { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; transition: box-shadow .2s, transform .2s; } .dlx-post:hover { box-shadow: var(--dlx-shadow-lg); transform: translateY(-3px); } .dlx-post__media { height: 210px; background: var(--dlx-tint); } .dlx-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-post__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; } .dlx-post__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dlx-muted); } .dlx-post__cat { padding: 4px 10px; border-radius: 999px; background: var(--dlx-tint); color: var(--dlx-primary); font-weight: 700; } .dlx .dlx-post__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--dlx-ink); text-wrap: pretty; } .dlx .dlx-post__title a { color: inherit; } .dlx .dlx-post__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .dlx-post__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dlx-text-2); text-wrap: pretty; } .dlx-post__more { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--dlx-primary); } /* ---------- Khối đăng ký tư vấn ---------- */ .dlx-cta { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 340px; overflow: hidden; border: 1px solid var(--dlx-line-2); border-radius: 24px; background: var(--dlx-tint); box-shadow: var(--dlx-shadow); } .dlx-cta__media { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; } .dlx-cta__media img, .dlx-cta__media .dlx-ph { display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-cta::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, #EAF0FD 0%, #EAF0FD 48%, rgba(234, 240, 253, .85) 56%, rgba(234, 240, 253, .35) 66%, rgba(234, 240, 253, 0) 78%); } .dlx-cta__body { position: relative; z-index: 2; grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(28px, 3.2vw, 44px); } .dlx .dlx-cta__title { margin: 0; font: 800 clamp(24px, 2.3vw, 32px)/1.3 var(--dlx-font); letter-spacing: -.5px; color: var(--dlx-ink); text-wrap: balance; } .dlx-cta__title span { display: block; color: var(--dlx-accent); } .dlx .dlx-cta__checks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 600; color: var(--dlx-text); } .dlx .dlx-cta__checks li { display: flex; align-items: center; gap: 6px; } .dlx-cta__checks .dlx-icon { color: var(--dlx-primary); } .dlx-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 999px) { /* Ảnh trên, chữ dưới: chữ kéo lên đè phần dưới ảnh; lớp phủ xanh nhạt mờ dần lên trên và sang trái, về phía người ngồi trong xe. */ .dlx-cta { grid-template-columns: minmax(0, 1fr); } .dlx-cta::before { display: none; } .dlx-cta__media { position: relative; width: 100%; height: 340px; margin-bottom: -150px; } .dlx-cta__media img { object-position: 20% 35%; } .dlx-cta__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #EAF0FD 0%, #EAF0FD 16%, rgba(234, 240, 253, .88) 34%, rgba(234, 240, 253, .4) 56%, rgba(234, 240, 253, 0) 78%), linear-gradient(270deg, rgba(234, 240, 253, .7) 0%, rgba(234, 240, 253, 0) 55%); } .dlx-cta__body { grid-column: 1; } } /* ---------- Chân trang ---------- */ .dlx .section.dlx-footer { padding: 44px 0 0 !important; border-top: 1px solid var(--dlx-line); background-color: var(--dlx-alt); color: var(--dlx-text-2); } .dlx .dlx-footer .section-content > .row { --g: 40px; } @media (min-width: 1000px) { .dlx .dlx-foot-cols > .col:nth-child(1) { flex-basis: 31.82%; max-width: 31.82%; } .dlx .dlx-foot-cols > .col:nth-child(2) { flex-basis: 27.27%; max-width: 27.27%; } .dlx .dlx-foot-cols > .col:nth-child(3), .dlx .dlx-foot-cols > .col:nth-child(4) { flex-basis: 20.45%; max-width: 20.45%; } } @media (max-width: 999px) and (min-width: 640px) { .dlx .dlx-foot-cols > .col { flex-basis: 50%; max-width: 50%; } } .dlx-brand { display: flex; flex-direction: column; gap: 18px; } .dlx-brand__logo img { display: block; width: auto; height: 56px; } .dlx-brand p { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.7; color: var(--dlx-text-2); } .dlx-social { display: flex; flex-wrap: wrap; gap: 10px; } .dlx .dlx-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--dlx-line-2); border-radius: 50%; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .dlx .dlx-social a:hover { border-color: var(--dlx-primary); box-shadow: var(--dlx-shadow); } .dlx .dlx-social--facebook { color: #1877F2; } .dlx .dlx-social--youtube { color: #FF0000; } .dlx .dlx-social--zalo { color: #0068FF; font-size: 13px; font-weight: 800; } .dlx .dlx-social--tiktok { color: #111; } .dlx-foot-title, .dlx .dlx-footer .ux-menu-title { display: block; margin: 0 0 16px; padding: 0; border: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--dlx-ink); text-transform: none; letter-spacing: 0; } .dlx .dlx-contact ul { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; } .dlx .dlx-contact a { color: var(--dlx-text-2); } .dlx .dlx-contact a:hover { color: var(--dlx-primary); } .dlx-contact b { color: var(--dlx-accent); } .dlx .dlx-footer .ux-menu-link { border: 0; } .dlx .dlx-footer .ux-menu-link__link { min-height: 0; padding: 6px 0; border: 0; font-size: 15px; line-height: 1.5; color: var(--dlx-text-2); } .dlx .dlx-footer .ux-menu-link__link:hover { color: var(--dlx-primary); } .dlx-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 22px 0; border-top: 1px solid var(--dlx-line); font-size: 14px; color: var(--dlx-muted); } .dlx-foot-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; } .dlx .dlx-foot-bottom a { color: var(--dlx-muted); } .dlx .dlx-foot-bottom a:hover { color: var(--dlx-primary); } /* ---------- Trang khóa học: đường dẫn trang, khung 2 cột, đầu trang, thẻ học phí dính, khối nội dung ---------- */ .dlx-crumbs-wrap { margin-bottom: 10px; } .dlx .dlx-crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--dlx-muted); } .dlx .dlx-crumbs li { margin: 0; } .dlx-crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--dlx-line-2); } .dlx .dlx-crumbs a { color: var(--dlx-text-2); } .dlx .dlx-crumbs a:hover { color: var(--dlx-primary); } .dlx-crumbs [aria-current] { font-weight: 600; color: var(--dlx-ink); } .dlx-cpage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head side" "body side"; column-gap: 28px; align-items: start; } .dlx-cpage--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; } .dlx-cpage__head { grid-area: head; min-width: 0; } .dlx-cpage__side { grid-area: side; position: sticky; top: calc(var(--dlx-stick, 0px) + 16px); transition: top .2s; } .dlx-cpage__body { grid-area: body; display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-top: 16px; } .dlx-chead { display: flex; flex-direction: column; gap: 10px; } .dlx .dlx-chead__title { font-size: clamp(28px, 3vw, 40px); } .dlx .dlx-chead__text { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--dlx-text-2); text-wrap: pretty; } .dlx .dlx-chead__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; } .dlx .dlx-chead__facts li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--dlx-alt); font-size: 13px; line-height: 1.4; color: var(--dlx-muted); } .dlx-chead__facts b { font-size: 15px; font-weight: 700; color: var(--dlx-ink); } .dlx-chead__media { aspect-ratio: 16 / 8; overflow: hidden; border-radius: 16px; background: var(--dlx-tint); } .dlx-chead__media img, .dlx-chead__media .dlx-ph { display: block; width: 100%; height: 100%; object-fit: cover; } .dlx-cprice { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 2px solid var(--dlx-primary); border-radius: 20px; background: #fff; box-shadow: var(--dlx-shadow-lg); } .dlx-cprice__label { font-size: 14px; font-weight: 600; color: var(--dlx-text-2); } .dlx-cprice__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: -8px; padding-bottom: 14px; border-bottom: 1px dashed var(--dlx-line-2); } .dlx-cprice__amount strong { font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -.8px; color: var(--dlx-accent); } .dlx-cprice__amount span { font-size: 15px; font-weight: 600; color: var(--dlx-text-2); } .dlx .dlx-cprice__feats { display: flex; flex-direction: column; gap: 10px; } .dlx .dlx-cprice__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--dlx-text); } .dlx-cprice__btns { display: flex; flex-direction: column; gap: 10px; } .dlx .dlx-cprice__note { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--dlx-muted); } .dlx-cbox { padding: 24px 26px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); scroll-margin-top: 90px; } .dlx .dlx-cbox__title { margin: 0 0 16px; padding: 0; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px; color: var(--dlx-ink); } .dlx .dlx-cbox > p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; } /* Lịch khai giảng của một khóa: bỏ hàng tab chỉ có một nút. */ .dlx-cbox .dlx-sched__tabs:has(> .dlx-sched__tab:only-child) { display: none; } .dlx .dlx-cbox .dlx-faq .accordion-title { padding: 16px 18px; font-size: 16px; } .dlx .dlx-csteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .dlx .dlx-csteps li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px; border: 1px solid var(--dlx-line); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--dlx-text-2); } .dlx-csteps b { font-size: 15px; color: var(--dlx-ink); } .dlx-csteps__n { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: var(--dlx-primary); font-size: 13px; font-weight: 800; color: #fff; } .dlx-cincl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dlx-cincl__col { padding: 16px 18px; border-radius: 12px; } .dlx-cincl__col--yes { background: #E8F6EE; } .dlx-cincl__col--no { background: #FFF3EA; } .dlx .dlx-cincl h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; } .dlx .dlx-cincl__col--yes h3, .dlx-cincl__col--yes .dlx-icon { color: #0F7A44; } .dlx .dlx-cincl__col--no h3, .dlx-cincl__col--no .dlx-icon { color: var(--dlx-accent); } .dlx .dlx-cincl li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--dlx-text); } .dlx .dlx-cincl li + li { margin-top: 6px; } .dlx-cincl li .dlx-icon { margin-top: 3px; } .dlx .dlx-cchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } .dlx .dlx-cchecks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--dlx-text); } .dlx-cchecks b { color: var(--dlx-ink); } .dlx-ccall { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: var(--dlx-tint); } .dlx-ccall__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; color: var(--dlx-primary); } .dlx .dlx-ccall p { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--dlx-text); } .dlx-ccall p b { color: var(--dlx-ink); } .dlx-ccall .dlx-btn { flex: none; } .dlx-cfinder { margin-top: 20px; padding: 20px 24px; border: 2px dashed #B9CBF3; border-radius: 16px; background: #fff; } .dlx .dlx-cfinder__q { margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--dlx-ink); } .dlx .dlx-cfinder__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .dlx .dlx-cfinder__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--dlx-line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--dlx-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; } .dlx .dlx-cfinder__opt:hover { border-color: var(--dlx-primary); box-shadow: var(--dlx-shadow); color: var(--dlx-ink); } .dlx-cfinder__opt b { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--dlx-primary); white-space: nowrap; } /* Trang danh sách: nhóm 5 khóa một hàng trên màn rộng (5 cột chật dưới 1240px → 4 cột). */ @media (min-width: 1240px) { .dlx-rail--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1239px) and (min-width: 1100px) { .dlx-rail--c5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1099px) and (min-width: 640px) { .dlx-rail--c5.dlx-rail--t-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 999px) { .dlx-cpage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "body"; } .dlx-cpage__side { position: static; margin-top: 16px; } .dlx .dlx-chead__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .dlx-chead__media { aspect-ratio: 16 / 10; } .dlx .dlx-chead__text { font-size: 16px; } .dlx-cprice { padding: 20px; } .dlx-cbox { padding: 18px 16px; } .dlx .dlx-cbox__title { font-size: 19px; } .dlx .dlx-csteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dlx-cincl, .dlx .dlx-cchecks, .dlx .dlx-cfinder__list { grid-template-columns: minmax(0, 1fr); } .dlx-cfinder { padding: 16px; } .dlx-ccall { flex-wrap: wrap; } .dlx-ccall .dlx-btn { width: 100%; } } /* ---------- Tin tức: danh sách bài viết, trang bài viết ---------- */ .dlx-plist { display: flex; flex-direction: column; gap: 24px; } .dlx-plist__chips { display: flex; flex-wrap: wrap; gap: 8px; } .dlx .dlx-chip-link { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--dlx-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--dlx-text-2); text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; } .dlx .dlx-chip-link:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); } .dlx .dlx-chip-link[aria-current] { border-color: var(--dlx-primary); background: var(--dlx-primary); color: #fff; } /* Bài mới nhất: thẻ lớn nằm ngang (ảnh trái, chữ phải). */ @media (min-width: 900px) { .dlx-plist__feature .dlx-post { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .dlx-plist__feature .dlx-post__media { height: auto; min-height: 340px; } .dlx-plist__feature .dlx-post__body { justify-content: center; gap: 14px; padding: 36px 40px; } .dlx .dlx-plist__feature .dlx-post__title { font-size: 26px; line-height: 1.3; } .dlx-plist__feature .dlx-post__text { font-size: 16px; } } .dlx .dlx-plist__empty { margin: 0; padding: 28px; border: 1px dashed var(--dlx-line-2); border-radius: 16px; text-align: center; font-size: 15px; color: var(--dlx-muted); } .dlx-plist__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .dlx .dlx-plist__pages .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--dlx-line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: var(--dlx-text-2); text-decoration: none; } .dlx .dlx-plist__pages .page-numbers.current { border-color: var(--dlx-primary); background: var(--dlx-primary); color: #fff; } .dlx .dlx-plist__pages a.page-numbers:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); } .dlx-article { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; } .dlx-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--dlx-muted); } .dlx .dlx-article__cat { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--dlx-tint); font-size: 13px; font-weight: 700; color: var(--dlx-primary); text-decoration: none; } .dlx .dlx-article__cat:hover { background: var(--dlx-primary); color: #fff; } .dlx .dlx-article__title { font-size: clamp(28px, 3.2vw, 40px); } .dlx .dlx-article__lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--dlx-text-2); text-wrap: pretty; } .dlx .dlx-article__img { margin: 6px 0 4px; overflow: hidden; border-radius: 16px; background: var(--dlx-tint); } .dlx-article__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* ---------- Văn bản dài: nội dung bài viết, chính sách, điều khoản ---------- */ .dlx-prose { font-size: 17px; line-height: 1.75; color: var(--dlx-text); } .dlx .dlx-prose > * { margin: 0 0 18px; } .dlx .dlx-prose > :last-child { margin-bottom: 0; } .dlx .dlx-prose h2 { margin: 36px 0 14px; padding: 0; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.3px; color: var(--dlx-ink); scroll-margin-top: 90px; } .dlx .dlx-prose h3 { margin: 26px 0 10px; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--dlx-ink); } .dlx .dlx-prose > h2:first-child, .dlx .dlx-prose > h3:first-child { margin-top: 0; } .dlx .dlx-prose ul, .dlx .dlx-prose ol { margin-left: 0; padding-left: 24px; } .dlx .dlx-prose ul { list-style: disc; } .dlx .dlx-prose ol { list-style: decimal; } .dlx .dlx-prose li { margin: 0 0 8px; padding-left: 4px; } .dlx .dlx-prose li::marker { color: var(--dlx-primary); font-weight: 700; } .dlx .dlx-prose strong, .dlx .dlx-prose b { color: var(--dlx-ink); } .dlx .dlx-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .dlx .dlx-prose blockquote { margin: 24px 0; padding: 16px 20px; border: 0; border-left: 4px solid var(--dlx-primary); border-radius: 0 12px 12px 0; background: var(--dlx-alt); font-size: 16px; font-style: normal; color: var(--dlx-text); } .dlx .dlx-prose blockquote p { margin: 0; } .dlx .dlx-prose img { height: auto; border-radius: 12px; } .dlx-prose .dlx-table { overflow-x: auto; border: 1px solid var(--dlx-line); border-radius: 14px; } .dlx .dlx-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.55; } .dlx .dlx-prose th, .dlx .dlx-prose td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--dlx-line); text-align: left; vertical-align: top; color: var(--dlx-text); } .dlx .dlx-prose thead th { background: var(--dlx-alt); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--dlx-ink); } .dlx .dlx-prose tbody tr:last-child td { border-bottom: 0; } .dlx .dlx-prose td:first-child { font-weight: 800; white-space: nowrap; color: var(--dlx-ink); } .dlx .dlx-prose td:last-child { white-space: nowrap; } @media (max-width: 639px) { .dlx .dlx-prose table { font-size: 14px; } .dlx .dlx-prose th, .dlx .dlx-prose td { padding: 9px 10px; } } .dlx-doc { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 48px; align-items: start; } .dlx-doc--single { grid-template-columns: minmax(0, 760px); } .dlx-doc__side { position: sticky; top: calc(var(--dlx-stick, 0px) + 20px); transition: top .2s; } .dlx-prose__toc { padding: 18px 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } .dlx-prose__toc summary { font-size: 15px; font-weight: 800; color: var(--dlx-ink); cursor: pointer; list-style: none; } .dlx-prose__toc summary::-webkit-details-marker { display: none; } .dlx .dlx-prose__toc ol { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; } .dlx .dlx-prose__toc li { margin: 0; } .dlx .dlx-prose__toc a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--dlx-text-2); text-decoration: none; } .dlx .dlx-prose__toc a:hover { background: var(--dlx-alt); color: var(--dlx-primary); } .dlx .dlx-doc__updated { margin: 0 0 20px; font-size: 14px; color: var(--dlx-muted); } @media (max-width: 999px) { .dlx-doc { grid-template-columns: minmax(0, 1fr); gap: 20px; } .dlx-doc__side { position: static; } } @media (max-width: 639px) { .dlx-plist__chips { flex-wrap: nowrap; margin: 0 calc(var(--dlx-pad) * -1); padding: 0 var(--dlx-pad) 2px; overflow-x: auto; scrollbar-width: none; } .dlx-plist__chips::-webkit-scrollbar { display: none; } .dlx .dlx-article__lead { font-size: 16.5px; } .dlx-prose { font-size: 16px; line-height: 1.7; } .dlx .dlx-prose h2 { margin-top: 28px; font-size: 21px; } .dlx .dlx-prose h3 { font-size: 18px; } } /* ---------- Trang Liên hệ: thẻ liên hệ · trang 404 ---------- */ .dlx .dlx-ccards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; } .dlx .dlx-ccards li { margin: 0; } .dlx .dlx-ccard { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); color: var(--dlx-text); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; } .dlx .dlx-ccard:hover { border-color: var(--dlx-primary); box-shadow: var(--dlx-shadow-lg); color: var(--dlx-text); transform: translateY(-3px); } .dlx-ccard__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px; background: var(--dlx-tint); color: var(--dlx-primary); } .dlx-ccard__zalo { display: block; width: 26px; height: 26px; } .dlx-ccard__label { font-size: 14px; font-weight: 600; color: var(--dlx-muted); } .dlx-ccard__value { font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--dlx-ink); overflow-wrap: anywhere; } .dlx-ccard__note { font-size: 14px; line-height: 1.5; color: var(--dlx-text-2); } .dlx-ccard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--dlx-primary); } .dlx-404 { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto; padding: 24px 0 8px; text-align: center; } .dlx .dlx-404__code { margin: 0; font-size: clamp(88px, 14vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -4px; color: var(--dlx-primary); } .dlx .dlx-404__text { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--dlx-text-2); text-wrap: pretty; } .dlx-404__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } .dlx .dlx-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .dlx .dlx-404__links li { margin: 0; } .dlx .dlx-404__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--dlx-line); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--dlx-text-2); text-decoration: none; transition: border-color .15s, color .15s; } .dlx .dlx-404__links a:hover { border-color: var(--dlx-primary); color: var(--dlx-primary); } @media (max-width: 1099px) { .dlx .dlx-ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .dlx .dlx-ccards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dlx .dlx-ccard { padding: 18px; } .dlx-404__btns, .dlx-404__btns .dlx-btn { width: 100%; } } /* ---------- Tin tức dạng danh sách + sidebar phải ---------- */ .dlx-news { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } .dlx-news__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .dlx-news__top { display: none; flex-direction: column; gap: 12px; } .dlx-news__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .dlx .dlx-news__found { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dlx-text-2); } .dlx-news__found b { color: var(--dlx-ink); } .dlx .dlx-news__found a, .dlx .dlx-news .dlx-plist__empty a { display: inline-block; margin: -10px 0; padding: 10px 0; font-weight: 700; color: var(--dlx-primary); text-decoration: underline; text-underline-offset: 2px; } .dlx-plist__rows { display: flex; flex-direction: column; gap: 16px; } .dlx-prow { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; } .dlx-prow:hover { border-color: var(--dlx-line-2); box-shadow: var(--dlx-shadow-lg); } .dlx-prow__media { overflow: hidden; aspect-ratio: 3 / 2; border-radius: 12px; background: var(--dlx-tint); } .dlx-prow__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .dlx-prow:hover .dlx-prow__media img { transform: scale(1.04); } .dlx-prow__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .dlx-prow .dlx-post__meta { flex-wrap: wrap; row-gap: 4px; } .dlx-prow .dlx-post__cat { white-space: nowrap; } .dlx .dlx-prow__title { margin: 0; font: 800 19px/1.35 var(--dlx-font); letter-spacing: -.2px; color: var(--dlx-ink); text-wrap: pretty; } .dlx .dlx-prow__title a { color: inherit; } .dlx .dlx-prow__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .dlx .dlx-prow:hover .dlx-prow__title a { color: var(--dlx-primary); } .dlx .dlx-prow__text { display: -webkit-box; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--dlx-text-2); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dlx-prow__more { font-size: 14px; font-weight: 700; color: var(--dlx-primary); } .dlx-prow--feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; box-shadow: var(--dlx-shadow); } .dlx-prow--feature .dlx-prow__media { height: 100%; min-height: 300px; aspect-ratio: auto; border-radius: 0; } .dlx-prow--feature .dlx-prow__body { gap: 12px; padding: 28px 30px; } .dlx .dlx-prow--feature .dlx-prow__title { font-size: 26px; line-height: 1.3; } .dlx .dlx-prow--feature .dlx-prow__text { -webkit-line-clamp: 3; } .dlx-sbox { padding: 20px; border: 1px solid var(--dlx-line); border-radius: 16px; background: #fff; box-shadow: var(--dlx-shadow); } .dlx .dlx-sbox__title { margin: 0 0 12px; font: 800 17px/1.3 var(--dlx-font); color: var(--dlx-ink); } .dlx-search { position: relative; margin: 0; } .dlx .dlx-search .dlx-search__input { padding-right: 54px; } .dlx .dlx-search__input::-webkit-search-cancel-button { cursor: pointer; } .dlx .dlx-search__btn { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 10px; background: var(--dlx-primary); color: #fff; cursor: pointer; } .dlx .dlx-search__btn:hover, .dlx .dlx-search__btn:focus-visible { background: var(--dlx-primary-h); } .dlx .dlx-topics { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .dlx .dlx-topics li { margin: 0; } .dlx .dlx-topics a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--dlx-text); text-decoration: none; transition: background-color .15s, color .15s; } .dlx .dlx-topics a:hover { background: var(--dlx-alt); color: var(--dlx-primary); } .dlx .dlx-topics a[aria-current] { background: var(--dlx-tint); color: var(--dlx-primary); } .dlx .dlx-topics .is-child a { padding-left: 28px; font-weight: 500; } .dlx-topics__n { flex: none; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: var(--dlx-alt); font-size: 13px; font-weight: 700; text-align: center; color: var(--dlx-muted); } .dlx-topics a[aria-current] .dlx-topics__n { background: #fff; color: var(--dlx-primary); } .dlx-side-cta { position: sticky; top: calc(var(--dlx-stick, 0px) + 24px); overflow: hidden; border-radius: 18px; background: var(--dlx-ink); color: #fff; box-shadow: var(--dlx-shadow-lg); } .dlx-side-cta__media { height: 170px; background: var(--dlx-tint); } .dlx-side-cta__media img, .dlx-side-cta__media .dlx-ph { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 20% 35%; } .dlx-side-cta__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; } .dlx .dlx-side-cta__title { margin: 0; font: 800 21px/1.3 var(--dlx-font); color: #fff; text-wrap: balance; } .dlx .dlx-side-cta__title .dlx-accent { color: #FFB27A; } .dlx .dlx-side-cta__checks { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .9); } .dlx .dlx-side-cta__checks li { display: flex; align-items: center; gap: 8px; margin: 0; } .dlx-side-cta__checks .dlx-icon { flex: none; color: #7FD3A6; } .dlx .dlx-side-cta__call { margin: 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, .82); } .dlx .dlx-side-cta__call a { display: inline-block; margin: -10px 0; padding: 10px 0; font-weight: 700; color: #fff; text-decoration: none; } .dlx .dlx-side-cta__call a:hover { text-decoration: underline; } @media (max-width: 999px) { .dlx-news { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dlx-news__top { display: flex; } .dlx-news__side .dlx-sbox { display: none; } .dlx-side-cta { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dlx-side-cta__media { height: auto; min-height: 220px; } .dlx-side-cta__body { justify-content: center; padding: 24px; } .dlx-prow--feature { grid-template-columns: minmax(0, 1fr); } .dlx-prow--feature .dlx-prow__media { min-height: 0; aspect-ratio: 16 / 9; } .dlx-prow--feature .dlx-prow__body { padding: 20px 22px 22px; } } @media (max-width: 639px) { .dlx-side-cta { display: block; } .dlx-side-cta__media { min-height: 0; height: 170px; } .dlx-side-cta__body { padding: 20px 18px; } .dlx-prow { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 14px; } .dlx-prow__media { aspect-ratio: 1; border-radius: 10px; } .dlx .dlx-prow__title { font-size: 16px; } .dlx .dlx-prow__text, .dlx-prow__mins { display: none; } .dlx-prow__more { font-size: 13px; } .dlx-prow--feature { grid-template-columns: minmax(0, 1fr); padding: 0; } .dlx-prow--feature .dlx-prow__media { aspect-ratio: 16 / 10; border-radius: 0; } .dlx-prow--feature .dlx-prow__body { padding: 16px 18px 18px; } .dlx .dlx-prow--feature .dlx-prow__title { font-size: 20px; } .dlx .dlx-prow--feature .dlx-prow__text { display: -webkit-box; } .dlx-prow--feature .dlx-prow__mins { display: inline; } } @media (prefers-reduced-motion: reduce) { .dlx-prow__media img { transition: none; } .dlx-prow:hover .dlx-prow__media img { transform: none; } } /* ---------- Form đăng ký tư vấn · cửa sổ đăng ký · trang Cảm ơn ---------- */ .dlx-lead { display: flex; flex-direction: column; gap: 14px; margin: 0; } /* Ô bẫy: thu về 1px tại chỗ (đẩy ra ngoài màn hình thì thành phần tử tràn ngang). */ .dlx-lead__hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dlx-lead__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dlx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dlx .dlx-field__label { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--dlx-ink); } /* Cam chính trên nền xanh nhạt của khối đăng ký chỉ đạt 4.46:1 ở chữ nhỏ → bản cam đậm cùng họ. */ .dlx-field__req { color: var(--dlx-accent-h); } .dlx .dlx-input { width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 1.5px solid var(--dlx-line-2); border-radius: 12px; background: #fff; box-shadow: none; font: 500 16px/1.2 var(--dlx-font); color: var(--dlx-ink); transition: border-color .15s, box-shadow .15s; } .dlx .dlx-input::placeholder { color: var(--dlx-muted); opacity: 1; } .dlx .dlx-input:focus { border-color: var(--dlx-focus); box-shadow: 0 0 0 4px rgba(240, 90, 15, .3); outline: none; } .dlx-select { position: relative; display: block; } .dlx .dlx-select .dlx-input { padding-right: 44px; background-image: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; } .dlx .dlx-select .dlx-input:has(option[value=""]:checked) { color: var(--dlx-muted); } /* Danh sách thả xuống tự vẽ (main.js, máy có chuột): ô