/**
* Hệ thiết kế "Udemy" — dùng cho PHỄU BÁN, 7 trang:
* `/` (trang chủ) · `/thanh_toan` · `/lo_trinh` · `/about` · `/contact`
* `/cong-cu` · `/hoi_dap`
*
* QUY TẮC NẠP (giống brand-marketing.css, đừng làm khác):
* File này CHỈ được `` tường minh trong của đúng 7 trang trên.
* TUYỆT ĐỐI KHÔNG nạp qua hooks.py (web_include_css/app_include_css) — bên
* trong có selector đè lên `body`, `h1`, `a`... nạp toàn site là phá Desk,
* phá /dashboard, phá blog.
*
* QUAN HỆ VỚI HỆ "Poster" (brand-tokens.css + brand-marketing.css):
* Hai hệ SỐNG SONG SONG, không trộn. Sau lần mở rộng 2026-08-05, Poster chỉ
* còn giữ 4 mặt lead-gen mà khách vào TRỰC TIẾP từ TikTok/YouTube, không đi
* qua trang chủ: `/skill`, `/thu-vien` (+ trang chi tiết), `/r/`,
* `/tool/y-tuong-du-an`. brand-tokens.css vẫn được hooks nạp toàn site nhưng
* nó chỉ có biến (không selector) nên vô hại ở đây; mọi biến của file này
* mang tiền tố `--u-` để không bao giờ đụng biến Poster.
*
* TOKEN lấy đúng theo Udemy (khảo sát 2026-08-04):
* tím thương hiệu #A435F0, hover #8710D8, tím đậm #5624D0, tím nhạt #F6F0FE
* mực #1C1D1F, chữ phụ #6A6F73, viền #D1D7DC, nền phụ #F7F9FA
* link trên nền tối #CEC0FC, bo góc 4px, shadow mềm 2 lớp
* font stack = đúng chuỗi của Udemy (Udemy Sans + fallback hệ thống); CỐ Ý
* KHÔNG nạp webfont ngoài: Udemy Sans là font riêng có bản quyền của Udemy.
*
* CỐ Ý KHÔNG CÓ trong hệ này (Udemy có, ta không có dữ liệu thật — xem
* docs/design-system-udemy.md): sao/đánh giá, số học viên, badge "Bán chạy
* nhất", giá gạch ngang giả, đồng hồ đếm ngược, giỏ hàng, coupon, wishlist,
* logo đối tác, testimonial. Đừng thêm chúng vào chỉ vì "cho giống Udemy".
*/
/* ========================================================================
1. TOKEN
======================================================================== */
:root {
--u-purple: #a435f0;
--u-purple-hover: #8710d8;
--u-purple-deep: #5624d0;
--u-purple-50: #f6f0fe;
--u-purple-on-dark: #cec0fc;
--u-ink: #1c1d1f;
--u-ink-2: #2d2f31;
--u-muted: #6a6f73;
--u-line: #d1d7dc;
--u-bg: #ffffff;
--u-bg-2: #f7f9fa;
--u-dark: #1c1d1f;
--u-badge-bg: #eceb98;
--u-badge-ink: #3d3c0a;
--u-ok: #0e7a4d;
--u-font: "Udemy Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, Roboto,
"Segoe UI", Helvetica, Arial, sans-serif;
--u-radius: 4px;
--u-shadow: 0 2px 4px rgba(28, 29, 31, 0.08), 0 4px 12px rgba(28, 29, 31, 0.08);
--u-shadow-lg: 0 2px 4px rgba(28, 29, 31, 0.08), 0 4px 12px rgba(28, 29, 31, 0.16);
--u-container: 1340px;
--u-gutter: 24px;
--u-panel-w: 340px;
/* Panel mua hàng "đổ" xuống quá dải hero tối — dấu hiệu nhận dạng của trang
khoá học Udemy. Panel nằm CÙNG HÀNG GRID với cột trái nên chiều cao dải
tối = chiều cao panel trừ đi số này; chọn 176px để đáy dải tối rơi đúng
dưới dòng cuối của cột trái (đo bằng screenshot thật, không đoán). Nếu sau
này thêm/bớt nội dung panel hoặc hero thì đo lại số này.
An toàn khi lệch: cột nội dung `.u-col` rộng 740px nên KHÔNG bao giờ nằm
dưới panel (panel ở mép phải) — panel đổ sâu hơn dự kiến cũng không đè chữ. */
--u-panel-drop: 176px;
}
/* ========================================================================
2. RESET + NỀN
======================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--u-font);
font-size: 16px;
line-height: 1.6;
color: var(--u-ink);
background: var(--u-bg);
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: inherit;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 19px;
}
p {
margin: 0 0 12px;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: var(--u-purple-deep);
text-decoration: none;
font-weight: 700;
}
a:hover {
color: var(--u-purple-hover);
text-decoration: underline;
}
img,
svg {
max-width: 100%;
}
:focus-visible {
outline: 2px solid var(--u-purple-deep);
outline-offset: 2px;
}
.u-wrap {
max-width: var(--u-container);
margin: 0 auto;
padding: 0 var(--u-gutter);
}
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--u-ink);
color: #fff;
padding: 12px 16px;
font-weight: 700;
}
.u-skip:focus {
left: 8px;
top: 8px;
color: #fff;
}
.u-muted {
color: var(--u-muted);
}
.u-sm {
font-size: 14px;
}
.u-xs {
font-size: 12px;
}
/* ========================================================================
3. NÚT
======================================================================== */
.u-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 16px;
border: 1px solid transparent;
border-radius: var(--u-radius);
font-family: inherit;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.u-btn:hover {
text-decoration: none;
}
.u-btn--block {
width: 100%;
}
.u-btn--sm {
padding: 9px 12px;
font-size: 14px;
}
.u-btn--lg {
padding: 16px 20px;
font-size: 18px;
}
.u-btn--primary {
background: var(--u-purple);
color: #fff;
}
.u-btn--primary:hover {
background: var(--u-purple-hover);
color: #fff;
}
.u-btn--dark {
background: var(--u-ink);
color: #fff;
}
.u-btn--dark:hover {
background: var(--u-ink-2);
color: #fff;
}
/* Viền tím, chữ tím — nút hạng hai của Udemy ("Mua ngay"). */
.u-btn--outline {
background: transparent;
border-color: var(--u-ink);
color: var(--u-ink);
}
.u-btn--outline:hover {
background: var(--u-bg-2);
color: var(--u-ink);
}
.u-btn--outline-purple {
background: transparent;
border-color: var(--u-purple);
color: var(--u-purple-deep);
}
.u-btn--outline-purple:hover {
background: var(--u-purple-50);
color: var(--u-purple-deep);
}
/* Nút trên nền tối (dải hero). */
.u-btn--on-dark {
background: transparent;
border-color: #fff;
color: #fff;
}
.u-btn--on-dark:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.u-btn[disabled],
.u-btn[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================================================
4. HEADER
======================================================================== */
.u-header {
position: sticky;
top: 0;
z-index: 40;
background: var(--u-bg);
box-shadow: 0 2px 4px rgba(28, 29, 31, 0.08);
}
.u-header__inner {
display: flex;
align-items: center;
gap: 16px;
height: 72px;
}
.u-logo {
display: flex;
align-items: center;
gap: 8px;
flex: none;
color: var(--u-ink);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
}
.u-logo:hover {
color: var(--u-ink);
text-decoration: none;
}
.u-logo em {
font-style: normal;
color: var(--u-purple);
}
.u-nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.u-nav a {
padding: 8px 12px;
border-radius: var(--u-radius);
color: var(--u-ink);
font-size: 14px;
font-weight: 400;
}
.u-nav a:hover {
color: var(--u-purple-deep);
text-decoration: none;
}
.u-nav a.is-active {
color: var(--u-purple-deep);
font-weight: 700;
}
.u-nav__cta {
margin-left: 8px;
}
.u-tag-new {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
border-radius: 2px;
background: var(--u-purple-50);
color: var(--u-purple-deep);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
@media (max-width: 880px) {
.u-nav a:not(.u-nav__keep) {
display: none;
}
}
/* Điện thoại: logo + "Đăng nhập" + nút mua nằm trên một hàng flex KHÔNG co chữ
được, cộng lại quá bề ngang màn hình là cả trang bị đẩy tràn ngang. Bỏ dần
phần ít quan trọng nhất trước: giá trên nút, rồi mới tới chữ trong logo.
(Đo bằng screenshot thật ở 500px — máy đo được là vừa khít.) */
@media (max-width: 700px) {
.u-nav__price {
display: none;
}
}
@media (max-width: 360px) {
.u-logo__txt {
display: none;
}
}
/* ========================================================================
5. DẢI HERO TỐI + PANEL MUA HÀNG
======================================================================== */
.u-top {
background: var(--u-dark);
color: #fff;
}
.u-top__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--u-panel-w);
gap: 40px;
padding-top: 32px;
padding-bottom: 32px;
}
.u-top__main {
max-width: 740px;
}
.u-crumbs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
font-size: 14px;
font-weight: 700;
}
.u-crumbs a {
color: var(--u-purple-on-dark);
}
.u-crumbs span[aria-hidden] {
color: var(--u-muted);
font-weight: 400;
}
.u-top h1 {
margin-bottom: 12px;
color: #fff;
}
.u-top__lead {
margin-bottom: 16px;
font-size: 19px;
line-height: 1.4;
color: #fff;
}
.u-top__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 14px;
color: #fff;
}
.u-top__meta li {
display: flex;
align-items: center;
gap: 6px;
}
.u-top__meta svg {
flex: none;
fill: currentColor;
}
/* 3 khoá liệt kê ngay trong dải hero (dưới hàng meta). */
.u-top__courses {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 14px;
}
.u-top__courses li {
padding: 4px 0;
}
.u-top__courses-week {
color: rgba(255, 255, 255, 0.65);
}
.u-badge {
display: inline-block;
padding: 4px 8px;
background: var(--u-badge-bg);
color: var(--u-badge-ink);
font-size: 12px;
font-weight: 700;
}
/* Panel mua hàng: thẻ trắng, đổ xuống quá dải tối (dấu hiệu Udemy). */
.u-buy {
position: sticky;
top: 88px;
align-self: start;
margin-bottom: calc(var(--u-panel-drop) * -1);
background: var(--u-bg);
color: var(--u-ink);
border: 1px solid var(--u-line);
box-shadow: var(--u-shadow-lg);
}
.u-buy__body {
padding: 24px;
}
/* Dòng "hoặc thuê gia sư" ở đáy panel — CỐ Ý chỉ là 1 dòng chữ + link, không
phải tab hay thẻ thứ hai: panel càng cao thì dải hero tối càng bị kéo dài
theo (chúng nằm cùng một hàng grid), để lại một khoảng đen trống ở cột trái. */
.u-buy__alt {
border-top: 1px solid var(--u-line);
margin: 16px 0 0;
padding-top: 16px;
font-size: 14px;
color: var(--u-muted);
}
.u-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
}
.u-price small {
font-size: 16px;
font-weight: 400;
color: var(--u-muted);
}
.u-buy__note {
margin-bottom: 16px;
font-size: 14px;
color: var(--u-muted);
}
.u-buy__cta {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.u-buy__includes {
border-top: 1px solid var(--u-line);
padding-top: 16px;
}
.u-buy__includes h3 {
margin-bottom: 10px;
font-size: 16px;
}
.u-buy__includes li {
display: flex;
gap: 10px;
margin-bottom: 8px;
font-size: 14px;
}
.u-buy__includes svg {
flex: none;
margin-top: 4px;
fill: var(--u-ink);
}
@media (max-width: 1000px) {
.u-top__inner {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.u-buy {
position: static;
margin-bottom: 0;
}
}
/* ========================================================================
6. SECTION + KHỐI NỘI DUNG
======================================================================== */
.u-main {
padding-top: calc(var(--u-panel-drop) + 24px);
}
@media (max-width: 1000px) {
.u-main {
padding-top: 32px;
}
}
/* Cột nội dung khớp đúng bề rộng cột trái của hero (Udemy: 740px). */
.u-col {
max-width: 740px;
}
.u-section {
padding-bottom: 32px;
}
.u-section > h2 {
margin-bottom: 16px;
}
.u-section--alt {
background: var(--u-bg-2);
padding-top: 32px;
margin-bottom: 32px;
}
/* Box "Bạn sẽ học được gì" — viền 1px, 2 cột dấu tích. */
.u-learn {
border: 1px solid var(--u-line);
padding: 24px;
}
.u-learn__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 32px;
}
.u-learn__grid li {
display: flex;
gap: 12px;
font-size: 14px;
line-height: 1.5;
}
.u-learn__grid svg {
flex: none;
margin-top: 4px;
stroke: var(--u-ink);
}
@media (max-width: 720px) {
.u-learn__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Danh sách dấu tích dùng chung (Yêu cầu, gói gồm gì...) */
.u-list li {
display: flex;
gap: 12px;
margin-bottom: 10px;
line-height: 1.5;
}
.u-list svg {
flex: none;
margin-top: 6px;
}
.u-list--dot li::before {
content: "";
flex: none;
width: 6px;
height: 6px;
margin-top: 10px;
border-radius: 50%;
background: var(--u-ink);
}
/* Accordion "Nội dung khoá học" */
.u-acc {
border: 1px solid var(--u-line);
}
.u-acc__item {
border-bottom: 1px solid var(--u-line);
}
.u-acc__item:last-child {
border-bottom: 0;
}
.u-acc__item > summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--u-bg-2);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.u-acc__item > summary::-webkit-details-marker {
display: none;
}
.u-acc__item > summary::marker {
content: "";
}
.u-acc__item > summary:hover {
background: #eff1f3;
}
.u-acc__chev {
flex: none;
transition: transform 0.15s ease;
fill: var(--u-ink);
}
.u-acc__item[open] > summary .u-acc__chev {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.u-acc__chev {
transition: none;
}
}
.u-acc__title {
flex: 1;
min-width: 0;
}
.u-acc__count {
flex: none;
font-size: 14px;
font-weight: 400;
color: var(--u-muted);
}
.u-acc__body {
padding: 8px 16px 16px;
}
.u-acc__row {
display: flex;
gap: 12px;
padding: 8px 0;
font-size: 14px;
border-top: 1px solid #edf0f2;
}
.u-acc__row:first-child {
border-top: 0;
}
.u-acc__row svg {
flex: none;
margin-top: 4px;
fill: var(--u-muted);
}
.u-acc__week {
flex: none;
width: 92px;
color: var(--u-muted);
}
.u-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.u-chip {
display: inline-block;
padding: 2px 8px;
border: 1px solid var(--u-line);
border-radius: 999px;
background: var(--u-bg);
font-size: 12px;
color: var(--u-ink-2);
}
@media (max-width: 560px) {
.u-acc__row {
flex-wrap: wrap;
}
.u-acc__week {
width: auto;
font-weight: 700;
}
}
/* Thẻ khoá học (danh sách "3 khoá trong gói") */
.u-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.u-card {
display: flex;
flex-direction: column;
border: 1px solid var(--u-line);
background: var(--u-bg);
}
.u-card__cover {
position: relative;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
background: var(--u-ink);
color: #fff;
font-size: 44px;
font-weight: 700;
letter-spacing: -0.03em;
}
.u-card:nth-child(2) .u-card__cover {
background: var(--u-purple-deep);
}
.u-card:nth-child(3) .u-card__cover {
background: var(--u-purple);
}
.u-card__body {
padding: 12px 14px 16px;
}
.u-card__body h3 {
margin-bottom: 6px;
font-size: 16px;
}
.u-card__body p {
margin: 0 0 8px;
font-size: 14px;
color: var(--u-muted);
}
@media (max-width: 860px) {
.u-cards {
grid-template-columns: minmax(0, 1fr);
}
}
/* Bước / nhịp học — 4 ô đánh số */
.u-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.u-step {
border: 1px solid var(--u-line);
padding: 16px;
}
.u-step__no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-bottom: 8px;
border-radius: 50%;
background: var(--u-purple-50);
color: var(--u-purple-deep);
font-size: 14px;
font-weight: 700;
}
.u-step h3 {
margin-bottom: 6px;
font-size: 16px;
}
.u-step p {
margin: 0;
font-size: 14px;
color: var(--u-muted);
}
@media (max-width: 860px) {
.u-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.u-steps {
grid-template-columns: minmax(0, 1fr);
}
}
/* So sánh 2 gói */
.u-plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.u-plan {
display: flex;
flex-direction: column;
border: 1px solid var(--u-line);
padding: 24px;
}
.u-plan--featured {
border: 2px solid var(--u-purple);
}
.u-plan h3 {
margin-bottom: 4px;
}
.u-plan .u-price {
font-size: 28px;
margin-top: 8px;
}
.u-plan .u-btn {
margin-top: auto;
}
.u-plan ul {
margin: 12px 0 20px;
}
@media (max-width: 720px) {
.u-plans {
grid-template-columns: minmax(0, 1fr);
}
}
/* FAQ */
.u-faq {
border-top: 1px solid var(--u-line);
}
.u-faq__item {
border-bottom: 1px solid var(--u-line);
}
.u-faq__item > summary {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.u-faq__item > summary::-webkit-details-marker {
display: none;
}
.u-faq__item > summary::marker {
content: "";
}
.u-faq__q {
flex: 1;
}
.u-faq__item[open] > summary .u-acc__chev {
transform: rotate(180deg);
}
.u-faq__item p {
margin: 0 0 16px;
color: var(--u-ink-2);
}
/* Khối giảng viên */
.u-teacher {
display: flex;
gap: 20px;
align-items: flex-start;
}
.u-teacher__ava {
flex: none;
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--u-purple-50);
color: var(--u-purple-deep);
font-size: 32px;
font-weight: 700;
}
@media (max-width: 560px) {
.u-teacher {
flex-direction: column;
}
}
/* Dải CTA cuối */
.u-cta {
background: var(--u-bg-2);
border-top: 1px solid var(--u-line);
padding: 40px 0;
}
.u-cta__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.u-cta h2 {
margin-bottom: 4px;
}
/* ========================================================================
7. FOOTER
======================================================================== */
.u-footer {
background: var(--u-dark);
color: #fff;
padding: 40px 0 24px;
margin-top: 40px;
}
.u-footer__grid {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.u-footer nav {
display: grid;
gap: 8px;
align-content: start;
}
.u-footer a {
color: #fff;
font-size: 14px;
font-weight: 400;
}
.u-footer a:hover {
color: #fff;
}
.u-footer__brand {
margin-left: auto;
text-align: right;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.u-footer__wordmark {
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
}
.u-footer__copy {
padding-top: 20px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 640px) {
.u-footer__brand {
margin-left: 0;
text-align: left;
}
}
/* ========================================================================
8. TRANG THANH TOÁN (/thanh_toan)
======================================================================== */
.u-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 40px;
padding: 32px 0 48px;
align-items: start;
}
@media (max-width: 1000px) {
.u-checkout {
grid-template-columns: minmax(0, 1fr);
}
}
.u-checkout h1 {
font-size: 28px;
margin-bottom: 16px;
}
.u-box {
border: 1px solid var(--u-line);
padding: 24px;
background: var(--u-bg);
}
.u-box + .u-box {
margin-top: 16px;
}
.u-box > h2 {
margin-bottom: 4px;
}
.u-field {
display: block;
margin-bottom: 16px;
}
.u-field > span {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 700;
}
/* `select` + `textarea` dùng CHUNG kiểu với `input` (trang /hoi_dap có cả ba).
Gộp ở đây thay vì viết bộ .u-select/.u-textarea riêng: cùng một ô nhập thì
phải cùng một hình dạng, tách ra là sớm muộn lệch nhau. */
.u-field input,
.u-field select,
.u-field textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--u-ink);
border-radius: var(--u-radius);
font-family: inherit;
font-size: 16px;
line-height: 1.5;
color: var(--u-ink);
background: var(--u-bg);
}
.u-field textarea {
resize: vertical;
}
.u-field input:focus,
.u-field select:focus,
.u-field textarea:focus {
outline: 2px solid var(--u-purple-deep);
outline-offset: 0;
}
/* Ô nhập hẹp (dropdown "chọn tuần", ô tiêu đề) — Udemy không kéo ô ngắn ra hết
bề ngang cột. */
.u-field--narrow input,
.u-field--narrow select {
max-width: 480px;
}
.u-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.u-alert {
display: none;
margin-bottom: 16px;
padding: 12px 14px;
border-left: 4px solid #b4342b;
background: #fdf2f1;
color: #6b1e18;
font-size: 14px;
}
.u-alert.is-on {
display: block;
}
.u-summary__row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
font-size: 14px;
}
.u-summary__total {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--u-line);
font-size: 20px;
font-weight: 700;
}
/* Bước 2: mã QR + số tài khoản */
.u-qr {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.u-qr__img {
flex: none;
width: 260px;
border: 1px solid var(--u-line);
background: var(--u-bg);
}
.u-bank {
flex: 1;
min-width: 240px;
}
.u-bank__row {
padding: 8px 0;
border-bottom: 1px solid var(--u-line);
font-size: 14px;
}
.u-bank__row b {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--u-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.u-bank__val {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 700;
word-break: break-all;
}
.u-copy {
flex: none;
padding: 4px 8px;
border: 1px solid var(--u-line);
border-radius: var(--u-radius);
background: var(--u-bg);
font-family: inherit;
font-size: 12px;
font-weight: 700;
color: var(--u-purple-deep);
cursor: pointer;
}
.u-copy:hover {
background: var(--u-purple-50);
}
.u-done {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 20px;
padding: 14px 16px;
border-left: 4px solid var(--u-ok);
background: #f0f9f4;
}
.u-done svg {
flex: none;
margin-top: 3px;
fill: var(--u-ok);
}
.u-done p {
margin: 0;
}
.u-hidden {
display: none !important;
}
/* ========================================================================
9. UTILITY (nhỏ, đủ dùng — đừng biến file này thành framework)
======================================================================== */
.u-mt {
margin-top: 12px;
}
.u-mt-lg {
margin-top: 24px;
margin-bottom: 8px;
}
.u-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ========================================================================
10. TRANG PHỤ TRONG PHỄU BÁN (/lo_trinh, /about, /contact, /cong-cu)
Thêm 2026-08-05 khi 5 trang này chuyển từ Poster sang Udemy.
======================================================================== */
/* Hero của trang phụ: CÙNG dải tối #1C1D1F như trang chủ, để khách bấm từ
trang chủ sang không bị "đổi hệ thị giác" giữa đường. KHÔNG dùng lại `.u-top`
vì `.u-top` là grid 2 cột có panel mua hàng và bị `--u-panel-drop` kéo chiều
cao — trang phụ không có panel, dùng lại là để lại một khoảng đen trống. */
.u-hero {
background: var(--u-dark);
color: #fff;
}
/* CẨN THẬN — hai bẫy đã dính thật trên phần tử này, vì nó cũng mang `.u-wrap`:
1. ĐỪNG đặt `max-width` ở đây. `.u-wrap` có `margin:0 auto`, nên thu bề ngang
xuống 860px là cả khối hero bị canh giữa trong khi mọi thứ bên dưới vẫn bám
mép cột 1340px — hero lệch vào trong ~215px. Muốn hạn bề ngang thì hạn trên
phần tử CON (xem `.u-hero h1` / `.u-hero__lead`).
2. ĐỪNG dùng `padding` viết gộp. `.u-wrap` cấp padding NGANG (`0 24px`); viết
`padding:40px 0 44px` ở đây là ghi đè luôn về 0, hero dính sát mép màn hình
còn thân trang vẫn thụt 24px. Chỉ set `padding-top`/`padding-bottom`. */
.u-hero__inner {
padding-top: 40px;
padding-bottom: 44px;
}
.u-hero h1 {
max-width: 860px;
margin-bottom: 12px;
color: #fff;
}
.u-hero__lead {
margin-bottom: 20px;
max-width: 70ch;
font-size: 19px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.u-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* h1 38px xuống dòng xấu trên điện thoại; 30px vừa 2-3 dòng. */
@media (max-width: 600px) {
.u-hero h1 {
font-size: 30px;
}
.u-hero__lead {
font-size: 17px;
}
}
/* Thân trang phụ. Trang chủ dùng `.u-main` (đệm trên = --u-panel-drop để chừa
chỗ cho panel mua hàng đổ xuống); trang phụ không có panel nên chỉ cần một
khoảng đệm thường. */
.u-page {
padding-top: 32px;
}
/* Dải số liệu 4 ô (dùng ở /about và /lo_trinh) — viền 1px + nền phụ, KHÔNG
phải khối màu đặc như hệ Poster. */
.u-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--u-line);
background: var(--u-bg-2);
}
.u-stats > div {
padding: 20px 16px;
text-align: center;
border-left: 1px solid var(--u-line);
}
.u-stats > div:first-child {
border-left: 0;
}
.u-stat__num {
margin: 0 0 2px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.u-stat__lb {
margin: 0;
font-size: 13px;
color: var(--u-muted);
}
@media (max-width: 720px) {
.u-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.u-stats > div:nth-child(3) {
border-left: 0;
}
.u-stats > div:nth-child(n + 3) {
border-top: 1px solid var(--u-line);
}
}
/* Lưới 4 thẻ (/cong-cu có 4 công cụ; `.u-cards` mặc định là 3 cột). */
.u-cards--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
.u-cards--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.u-cards--4 {
grid-template-columns: minmax(0, 1fr);
}
}
/* Thẻ mà CẢ THẺ là một link (/cong-cu). Phải ghi đè `a{font-weight:700}` của
reset, không thì toàn bộ chữ trong thẻ bị in đậm. */
a.u-card {
color: inherit;
font-weight: 400;
}
a.u-card:hover {
box-shadow: var(--u-shadow);
text-decoration: none;
}
/* Thẻ "sắp ra mắt": mờ đi, KHÔNG phải link. */
.u-card--off {
opacity: 0.72;
}
.u-card__pad {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.u-card__icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
margin-bottom: 12px;
border-radius: var(--u-radius);
background: var(--u-purple-50);
color: var(--u-purple-deep);
}
.u-card--off .u-card__icon {
background: var(--u-bg-2);
color: var(--u-muted);
}
/* `margin-top:auto` ghim dòng "Dùng ngay →" xuống đáy thẻ để 4 thẻ thẳng hàng
dù đoạn mô tả dài ngắn khác nhau. */
.u-card__more {
margin-top: auto;
padding-top: 12px;
font-size: 14px;
font-weight: 700;
color: var(--u-purple-deep);
}
/* Ô ghi chú / nội dung bị khoá — thay khối viền gạch nét đứt của hệ Poster. */
.u-note {
display: flex;
gap: 12px;
padding: 14px 16px;
border-left: 4px solid var(--u-line);
background: var(--u-bg-2);
font-size: 14px;
color: var(--u-ink-2);
}
.u-note svg {
flex: none;
margin-top: 3px;
fill: none;
stroke: var(--u-muted);
}
.u-note p {
margin: 0;
}
/* Biến thể của dải CTA: nền tối (đóng trang bằng cùng màu với hero) và biến thể
canh giữa. `.u-cta__inner` mặc định là flex space-between 2 cột. */
.u-cta--dark {
border-top: 0;
background: var(--u-dark);
color: #fff;
}
.u-cta--dark h2 {
color: #fff;
}
.u-cta--dark p {
color: rgba(255, 255, 255, 0.85);
}
.u-cta--center {
text-align: center;
}
.u-cta--center .u-cta__inner {
flex-direction: column;
justify-content: center;
}
.u-cta--center p {
max-width: 62ch;
margin-inline: auto;
}
/* `.u-footer` có `margin-top:40px` — khoảng thở hợp lý sau phần nội dung TRẮNG
của trang chủ. Trang nào kết bằng dải CTA tối thì khoảng trắng đó kẹp giữa hai
vùng tối, trông đúng như một vệt trắng lỗi. Bỏ nó đi.
Trình duyệt không hiểu `:has` chỉ mất phần này (vẫn còn vệt trắng), không vỡ
layout — chấp nhận được. */
main:has(> .u-cta--dark:last-child) + .u-footer {
margin-top: 0;
}
/* ========================================================================
11. HỎI ĐÁP (/hoi_dap)
======================================================================== */
/* Cột nội dung của trang Hỏi đáp — nằm BÊN TRONG `.u-wrap`, không phải cùng
phần tử với nó (xem ghi chú ở `.u-hero__inner`: đặt max-width lên chính
`.u-wrap` là canh giữa cả khối, lệch mép với hero). */
.u-qa {
max-width: 880px;
padding: 32px 0 48px;
}
/* Nhãn trạng thái câu hỏi. Ba màu = ba trạng thái thật của DocType, đừng thêm
màu thứ tư mà không thêm trạng thái. */
.u-pill {
display: inline-block;
flex: none;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.u-pill--wait {
background: var(--u-badge-bg);
color: var(--u-badge-ink);
}
.u-pill--ans {
background: var(--u-purple-50);
color: var(--u-purple-deep);
}
.u-pill--done {
background: #e7f5ee;
color: var(--u-ok);
}
.u-qa__item {
border: 1px solid var(--u-line);
padding: 16px;
}
.u-qa__item + .u-qa__item {
margin-top: 12px;
}
.u-qa__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.u-qa__head h3 {
font-size: 17px;
}
.u-qa__meta {
margin: 4px 0 0;
font-size: 13px;
color: var(--u-muted);
}
/* Một tin nhắn trong hội thoại. Tin của giảng viên nền tím nhạt để phân biệt
ngay bằng mắt, không phải đọc badge vai trò. */
.u-msg {
margin-top: 10px;
padding: 10px 12px;
border: 1px solid var(--u-line);
border-radius: var(--u-radius);
background: var(--u-bg);
}
.u-msg--gv {
border-color: #e0d0fb;
background: var(--u-purple-50);
}
.u-msg__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 12px;
font-size: 12px;
color: var(--u-muted);
}
.u-msg__body {
margin-top: 6px;
font-size: 14px;
word-break: break-word;
}
.u-reply {
margin-top: 12px;
}
.u-reply textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--u-line);
border-radius: var(--u-radius);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
color: var(--u-ink);
resize: vertical;
}
.u-reply textarea:focus {
outline: 2px solid var(--u-purple-deep);
outline-offset: 0;
}
.u-reply__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
}
/* Dòng thông báo cạnh nút gửi ("Đang gửi…", "✔ Đã gửi", "Có lỗi"). */
.u-msg-note {
font-size: 13px;
color: var(--u-muted);
}
.u-msg-note--ok {
color: var(--u-ok);
}
.u-msg-note--err {
color: #b4342b;
}