— de auto thi anh co lai con dung be ngang goc cua no.
Khoi bao quanh rong bang hop padding cua cot, tru di hai nua gutter. */
.md-res-cover {
position: absolute;
inset: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
width: calc(100% - var(--bs-gutter-x, 1.5rem));
height: 100%;
}
}
.md-badge-status {
display: inline-block; padding: .3rem .7rem; border-radius: var(--md-radius-sm);
font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
background: var(--md-danger); color: var(--md-brand-ink);
}
.md-badge-status--done { background: var(--md-success); }
/* Nhan "Vuot N" trong bang gioi han cua dem-ky-tu.html. Bang do nam trong
khung .md-res--tone-info, o do --md-danger da bi noi sang mau accent nen
.md-badge-status thuong se hoa XANH — mat han y nghia canh bao. Lay mau do
cua Bootstrap (bien co san, khong phai ma mau cung), chu trang cho du tuong
phan o ca hai theme. */
.md-badge-status--over { background: var(--bs-danger); color: var(--bs-white); }
/* Bien the 3 o thong ke (thuoc-lo-ban.html: mot o cho moi cay thuoc).
PHAI dat TRUOC khoi @media 520px ben duoi: luat o do cung do uu tien (0,1,0)
nen phai duoc viet sau thi moi keo ve 1 cot duoc tren dien thoai. */
.md-res-stats--3 { grid-template-columns: repeat(3, 1fr); }
/* Bien the 4 o (dem-ky-tu.html: ky tu / khong khoang trang / tu / cau). Khac
hai bien the tren, khoi nay nam TRONG form, ngay duoi o nhap, nen chua duoi
bang .md-field cho deu voi cac truong khac. */
.md-res-stats--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 1.35rem; }
@media (max-width: 520px) {
.md-vio-table > div { grid-template-columns: 1fr; }
.md-vio-table dt { padding-bottom: 0; }
.md-res-stats { grid-template-columns: 1fr; }
.md-res-stats > div + div { border-left: 0; border-top: 1px solid var(--md-danger-line); }
/* 4 o xep 1 cot thi dai gan bang ca o nhap phia tren -> xep 2x2. Vien: o so
2 va 4 co vach trai, o 3 va 4 co vach tren; luat viet sau luat chung o
tren nen thang. */
.md-res-stats--4 { grid-template-columns: 1fr 1fr; }
.md-res-stats--4 > div + div { border-top: 0; border-left: 1px solid var(--md-danger-line); }
.md-res-stats--4 > div:nth-child(odd) { border-left: 0; }
.md-res-stats--4 > div:nth-child(n + 3) { border-top: 1px solid var(--md-danger-line); }
}
/* ==========================================================================
10B. Ket qua tinh BMI (trang bmi.html)
--------------------------------------------------------------------------
Khong viet lai khung ket qua: bmi.html dung nguyen .md-res-box / .md-res-stats
/ .md-vio-table / .md-badge-status o tren. Ca bo khung do lay mau tu ba bien
--md-danger*, nen chi can NOI LAI ba bien do trong pham vi khoi ket qua la
doi duoc tong mau — do la tat ca phan CSS ma cong cu BMI can them.
(khong co class) do — beo phi / thieu can do III (canh bao manh)
.md-res--tone-warn vang — thieu can, thua can (can luu y)
.md-res--tone-ok xanh — binh thuong (dat chuan)
========================================================================== */
.md-res--tone-ok {
--md-danger: var(--md-success);
--md-danger-soft: var(--md-success-soft);
--md-danger-line: var(--md-success-line);
}
/* Tong trung tinh, dung cho ket qua khong tot cung khong xau — vi du bang tinh
lai vay (tinh-lai-vay.html): con so lon khong co nghia la tin xau, to do ca
khung la doa nguoi doc mot cach vo co. */
.md-res--tone-info {
--md-danger: var(--md-accent);
--md-danger-soft: var(--md-accent-soft);
/* KHONG dung --md-border o day. Ba tong kia deu co duong ke AM MAU cua chinh
no (--md-*-line), nho vay vien bang noi len duoc tren nen --md-*-soft. Lay
xam trung tinh thi vien gan nhu tang hinh -> bang trong nhu bi thung. */
--md-danger-line: color-mix(in srgb, var(--md-accent) 24%, transparent);
}
/* Vang cam khong co san trong bo token nen khai bao tai cho, du 2 theme.
Ban sang: chu tren nen trang dat 4.6:1. Ban toi: chu tren nen #0d1117. */
.md-res--tone-warn {
--md-danger: #9a6100;
--md-danger-soft: #fff8ec;
--md-danger-line: #f0dcba;
}
[data-bs-theme="dark"] .md-res--tone-warn {
--md-danger: #f0b429;
--md-danger-soft: #1b1509;
--md-danger-line: #3d3016;
}
/* ---- bang
nam trong khoi ket qua (lich tra no o tinh-lai-vay.html) ----
Bang nay dung .table cua Bootstrap nhung phai noi cung mot ngon ngu voi
.md-vio-table ngay phia tren no: cung vien, cung ban kinh bo goc, cung nen
the. De nguyen mac dinh cua Bootstrap thi bang nam tron loc loc trong khi
bang dl ben canh co khung -> trong nhu hai thanh phan cua hai he khac nhau.
Mau van di qua --md-danger* nen bang tu doi theo tong cua .md-res--tone-*.
.table-responsive da co overflow-x:auto san -> bo goc tu duoc cat gon.
position: relative de .visually-hidden (position:absolute cua Bootstrap)
trong tieu de cot neo vao khung cuon nay: thieu no, bang rong (ten file dai
tren dien thoai) thi the an do troi ra ngoai va keo tran ngang ca trang. */
.md-res .table-responsive {
position: relative;
border: 1px solid var(--md-danger-line);
border-radius: var(--md-radius-sm);
background: var(--md-surface);
}
.md-res .table {
margin-bottom: 0;
--bs-table-bg: transparent;
--bs-table-color: var(--md-text);
--bs-table-striped-bg: var(--md-danger-soft);
--bs-table-striped-color: var(--md-text);
--bs-table-border-color: var(--md-danger-line);
}
.md-res .table > :not(caption) > * > * { padding: .6rem .9rem; }
.md-res .table thead th {
font-size: .82rem; font-weight: 600; color: var(--md-danger);
white-space: nowrap; border-bottom-width: 1px;
}
.md-res .table tbody td { font-size: .88rem; white-space: nowrap; }
/* ---- bien the cho bang duoc phep XUONG DONG thay vi cuon ngang ----
Luat `white-space: nowrap` o tren dung cho bang lich tra no cua trang tinh
lai vay: bang do toan so, moi o mot con so ngan, cat dong giua mot con so la
doc sai ngay. Nhung bang "Chi tiet tung cay thuoc" cua trang thuoc Lo Ban thi
moi o la mot cau van (ten thuoc + cong dung, ten cung + y nghia), nen giu
nowrap la bang rong gap doi man hinh va nguoi dung phai keo ngang moi doc
duoc het — trong khi cho xuong dong thi vua man hinh ngay.
.table-responsive VAN GIU nguyen: no la thu tao ra vung clip cho bo goc tron
cua khung bang. Khi chu da xuong dong thi khong con gi tran ra nen thanh cuon
cung khong xuat hien — `overflow-x: auto` chi hien thanh cuon khi that su can.
Rieng nhung manh KHONG duoc phep ngat (khoang so "809,1 – 822,2", chu
"Tot"/"Xau" di kem cham mau) thi boc trong .text-nowrap cua Bootstrap ngay
trong JS, chu khong chua ngoai le o day. */
.md-res .table--wrap thead th,
.md-res .table--wrap tbody td { white-space: normal; }
/* Man hinh hep: bop chua hai ben cua o lai. Bang nay co 4 cot, trong do hai cot
cuoi KHONG ngat dong duoc (khoang so ~90px, nhan Tot/Xau ~54px), nen chua
.9rem x 2 x 4 o = ~115px la phan qua dat — cat xuong .45rem tiet kiem duoc
gan mot nua, du de ca bang lot vao man hinh dien thoai thay vi phai cuon.
KHONG dat min-width cho cot nao: mot san toi thieu du chi 8rem cung cong voi
hai cot khong ngat kia thanh thua be ngang, va the la bang lai cuon — dung
cai minh vua tim cach bo di. De trinh duyet tu chia theo noi dung. */
@media (max-width: 575.98px) {
.md-res .table--wrap > :not(caption) > * > * { padding-inline: .45rem; }
.md-res .table--wrap tbody td { font-size: .84rem; }
}
/* Chu thich nam duoi va TRONG khung -> doc nhu chan bang chu khong phai mot
doan van roi ra ngoai. Khong ve them border-top: hang cuoi cua Bootstrap da
co san duong ke duoi, them nua thanh hai vach sat nhau. */
.md-res .table caption {
caption-side: bottom; padding: .65rem .9rem;
font-size: .8rem; color: var(--md-muted); line-height: 1.5;
}
/* Hang dang ung voi ket qua trong bang thang phan loai.
Phai dat SAU luat :nth-child(odd) o tren: cung do uu tien (0,2,0) nen luat
viet sau moi thang, nho vay hang le duoc to dam cung an. */
.md-vio-table > div.is-current { background: var(--md-danger); }
.md-vio-table > div.is-current dt,
.md-vio-table > div.is-current dd { color: var(--md-brand-ink); font-weight: 700; }
/* ==========================================================================
10BIS. Thanh thuoc Lo Ban keo ngang duoc (thuoc-lo-ban.html)
--------------------------------------------------------------------------
Thanh thuoc duoc VE BANG CANVAS chu khong dung anh PNG: cay thuoc lap lai vo
han nen dung anh thi phai cat san hang chuc manh va van vo o man hinh net cao,
con canvas thi ve dung so pixel that cua may va tu doi mau theo theme.
Xep chong ba lop trong .md-ruler (position:relative):
1. ve cay thuoc — pointer-events:none, khong bat su kien
2. .md-ruler-scroll o cuon THAT nam DE LEN canvas de nhan cham/keo; ben
trong chi co mot the rong dung bang chieu dai thuoc, khong ve gi ca
3. .md-ruler-needle + .md-ruler-readout kim chi va con so, deu nam tren
cung va deu tat pointer-events de khong chan thao tac keo
Vi sao khong de canvas nam trong o cuon: canvas se phai rong bang ca cay
thuoc (40.000px) — vuot gioi han kich thuoc canvas cua trinh duyet va ton
hang tram MB bo nho. Canvas o day chi rong bang KHUNG NHIN, moi lan cuon thi
JS ve lai doan dang nhin thay.
========================================================================== */
/* Mau rieng cua cay thuoc. KHONG dung --md-danger/--md-success: tren thuoc Lo
Ban mau DO nghia la TOT (nguoc han y nghia do = nguy hiem cua bo token), lay
nham bien la ca thanh thuoc doi nghia. Khai bao tai cho, du ca hai theme;
JS doc lai bang getComputedStyle nen doi theme la thuoc tu ve lai. */
.md-ruler {
--md-lb-good: #c0272d; /* o tot — nen do truyen thong */
--md-lb-good-soft: #fbeaea; /* o tot — nen nhat cho hang tieu cung */
--md-lb-bad: #2b2f36; /* o xau — nen den */
--md-lb-bad-soft: #eff0f2; /* o xau — nen nhat cho hang tieu cung */
--md-lb-ink: #ffffff; /* chu tren nen dam */
--md-lb-rule: #cfd4dc; /* vach chia va duong ke */
position: relative;
/* 26 (vach chia) + 3 x (20 nhan + 82 dai) = 332, cong 8 cho thoang chan.
Chi co con so nay la co dinh: thuoc-lo-ban.js DO chieu cao that cua khung
va cua the nhan roi chia deu phan con lai cho ba dai, nen sua o day la
xong, khong phai sua them hang so nao ben JS.
282px cho dai 62px — vua du ve nhung chat cho chu tieu cung; 340px cho dai
82px, tho hon han. */
height: 340px;
border: 1px solid var(--md-border);
border-radius: var(--md-radius-sm);
background: var(--md-surface);
overflow: hidden;
/* Chan trinh duyet hieu cu keo ngang tren thuoc la lenh "lui mot trang" */
overscroll-behavior-x: contain;
}
[data-bs-theme="dark"] .md-ruler {
--md-lb-good: #b3272d;
--md-lb-good-soft: #2a1618;
--md-lb-bad: #39414e;
--md-lb-bad-soft: #1b212a;
--md-lb-ink: #f5f7fa;
--md-lb-rule: #39414e;
}
/* Lop 1 — canvas. Kich thuoc that do JS dat (theo devicePixelRatio) nen o day
chi khoa vi tri, khong dat width/height. */
.md-ruler-canvas {
position: absolute; top: 0; left: 0;
display: block; pointer-events: none;
}
/* Lop 2 — o cuon that. Thanh cuon cua he dieu hanh bi an di: no cao 15px se an
mat mot hang tieu cung, va o day da co kim chi + con so lam dau hieu roi.
Keo bang chuot / vuot bang tay / lan chuot deu do JS lo. */
.md-ruler-scroll {
position: absolute; inset: 0;
overflow-x: auto; overflow-y: hidden;
cursor: grab;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Edge cu */
/* Cuon ngang bang ngon tay van chay muot (trinh duyet lo), con cuon doc thi
tra ve cho trang — nguoi dung vuot doc tren thuoc la de doc tiep trang. */
touch-action: pan-x pan-y;
}
.md-ruler-scroll::-webkit-scrollbar { display: none; }
.md-ruler-scroll:active { cursor: grabbing; }
.md-ruler-scroll:focus-visible { outline: 2px solid var(--md-accent); outline-offset: -2px; }
/* The nay khong ve gi, chi ton tai de tao ra be rong can cuon. */
.md-ruler-track { height: 100%; }
/* Lop 3 — kim chi, dung giua khung nhin. Con so hien tai luon la con so nam
ngay duoi kim nay. */
.md-ruler-needle {
position: absolute; top: 0; bottom: 0; left: 50%;
width: 2px; margin-left: -1px;
background: var(--md-accent);
pointer-events: none;
}
/* Dau mui ten nho tren dinh kim cho de nhan ra diem dang tro */
.md-ruler-needle::before {
content: ""; position: absolute; top: 0; left: 50%;
width: 0; height: 0; margin-left: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid var(--md-accent);
}
/* Con so dang tro. Dat o goc tren ben PHAI: goc trai la cho cua ba nhan ten
thuoc (.md-ruler-tag), con chinh giua thi vuong kim chi. */
.md-ruler-readout {
position: absolute; top: .35rem; right: .5rem;
padding: .25rem .6rem; border-radius: var(--md-radius-sm);
background: var(--md-accent); color: var(--md-brand-ink);
font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* Ten cua tung cay thuoc, ghim mep trai va KHONG cuon theo thuoc.
`top` do JS dat (xem layout() trong thuoc-lo-ban.js) chu khong viet o day:
no phai bam theo dung chieu cao dai ma canvas dang ve.
pointer-events:none de chu khong chan thao tac keo thuoc ben duoi. */
.md-ruler-tag {
position: absolute; left: 0; z-index: 2;
margin: 0; padding: 0 .55rem;
max-width: 100%;
font-size: .78rem; line-height: 20px;
color: var(--md-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
pointer-events: none;
}
.md-ruler-tag strong { color: var(--md-text); font-weight: 600; }
/* Man hinh hep: bot mot chut chieu cao cho thuoc khong chiem het mot man, va
bot co chu cua nhan cho cau "Thuoc Lo Ban 42.9cm (Duong trach): ..." con lot.
300 = 26 + 3 x (18 nhan + 70 dai) + 8. JS doc lai chieu cao that cua khung va
cua the nhan nen khong co hang so nao ben do phai sua theo. */
@media (max-width: 520px) {
.md-ruler { height: 300px; }
.md-ruler-tag { font-size: .72rem; line-height: 18px; padding: 0 .4rem; }
}
/* ==========================================================================
10C. Tao ma QR (tao-qr-code.html) va tao ma vach (tao-ma-vach.html)
--------------------------------------------------------------------------
Hai trang nay dung lai gan het CSS co san: khung ket qua la .md-res-box +
.md-vio-table cua trang tra cuu phat nguoi, hang chon loai ma la
.md-choice-row cua trang bmi, cac o nhap la .md-input / .md-input--text.
Chi con vai thu that su moi, gom trong muc nay.
Trang ma vach KHONG them muc rieng: no dung lai toan bo cac luat duoi day,
chi ghi de DUY NHAT be rong anh (.md-barcode-canvas).
========================================================================== */
/* ---- anh ma QR ----
Canvas duoc VE o kich thuoc that (toi 2048px) de tai ve cho net, nen bat
buoc phai co max-width keo lai — de nguyen la no dam thung bo cuc.
Khong dat mau nen o day: mau nen da nam san tren canvas (nguoi dung tu chon),
phan CSS chi lo cai vien cho anh tach khoi nen cua khoi ket qua. Mau vien di
qua --md-danger-line nen tu doi theo tong cua .md-res--tone-*. */
.md-qr-preview { display: flex; justify-content: center; }
.md-qr-canvas {
display: block; width: 100%; max-width: 280px; height: auto;
border: 1px solid var(--md-danger-line);
border-radius: var(--md-radius-sm);
}
/* Co dong khung thi chinh cai khung DA LA duong vien roi. Giu them vien CSS
nua thi hong o 4 goc: khung duoc ve voi goc bo TRON HON nhieu (ban kinh theo
ti le canh anh) so voi 8px cua .md-qr-canvas, nen duong vien CSS vong ra
ngoai goc cua khung va lo han mot doan cong o moi goc.
Giu nguyen do day 1px, chi cho trong suot di — dat border:0 se lam anh nhich
1px moi ben, nhin nhu bi giat khi bat/tat khung.
js/tao-qr-code.js gan class nay khi va chi khi co khung. */
.md-qr-canvas--framed { border-color: transparent; }
/* ---- anh ma vach (trang tao-ma-vach.html) ----
DUNG LAI y nguyen .md-qr-preview va .md-qr-canvas o tren (vien, bo goc, bien
the --framed deu giu nguyen). Chi doi DUY NHAT cach tinh be rong, vi hai loai
anh khac han nhau:
- Ma QR luon vuong va duoc ve o kich thuoc that toi 2048px, nen phai ep
width:100% + max-width:280px de keo no lai.
- Ma vach thi thap va rat rong, be rong lai KHONG co dinh — no do so vach
cua noi dung quyet dinh (mot ma EAN-8 chi 67 don vi, mot ma Code 128 dai
co the hon 300). Ep ve dung 280px se lam ma ngan bi PHONG TO len cho du
280px, vach nhoe ra va may quet doc kem han.
Vi vay o day de width:auto — anh hien o dung kich thuoc that, chi thu nho lai
khi man hinh hep hon no. .md-qr-preview da can giua san bang flex. */
.md-barcode-canvas { width: auto; max-width: 100%; }
/* ---- khoi "Tuy chinh hinh thuc ma QR" () ----
Mui ten mac dinh cua moi trinh duyet ve mot kieu va khong doi mau
theo theme duoc, nen an di roi dung the cua FontAwesome dat san trong
HTML — cung cach ca trang van dung icon.
Luat an mui ten dung CHUNG voi the muc luc bai blog (.md-toc-details, 11B). */
.md-details > summary,
.md-toc-details > summary { cursor: pointer; list-style: none; }
.md-details > summary::-webkit-details-marker,
.md-toc-details > summary::-webkit-details-marker { display: none; }
.md-details { border-top: 1px solid var(--md-border); padding-top: 1.25rem; }
.md-details > summary { display: flex; align-items: center; gap: .5rem; }
.md-details > summary i {
font-size: .8rem; color: var(--md-muted); transition: transform .2s ease;
}
.md-details[open] > summary i { transform: rotate(180deg); }
/* ---- o chon cua Bootstrap dung chung ngon ngu voi .md-input ----
Bootstrap ve / o chon mau / o chon file theo --bs-body-bg, con
.md-input dung --md-surface. Hai bien nay trung nhau o che do sang nhung
lech han o che do toi (#0d1117 vs #161b22) -> cac o do toi hon han o nhap
chu ngay canh no. Chi nham vao ba loai o NAY, khong nham vao .form-control
noi chung: .md-input cung mang class do, ma luat .md-form .form-control se
co do uu tien (0,2,0) bang luat .md-input.is-invalid o tren — viet sau la
nuot mat vien do bao loi. */
.md-form .form-select,
.md-form .form-control-color,
.md-form input[type="file"].form-control {
background-color: var(--md-surface);
border-color: var(--md-border);
color: var(--md-text);
}
.md-form .form-select:focus,
.md-form .form-control-color:focus,
.md-form input[type="file"].form-control:focus {
border-color: var(--md-accent); box-shadow: none;
}
/* Cao bang o nhap chu ben canh. Chua padding-right rong cho mui ten cua
, neu dung padding gon mot gia tri thi chu chay de len mui ten. */
.md-form .form-select {
padding: .75rem 2.25rem .75rem .9rem;
font-size: 1rem; border-radius: var(--md-radius-sm);
}
.md-form .form-control-color {
height: 3.1rem; padding: .35rem; border-radius: var(--md-radius-sm);
}
/* Thanh truot (chen-logo-vao-anh.html) cao bang o ben canh: mac dinh
Bootstrap chi cao 1.5rem va bam len tren, dat canh o chon dinh dang thi
thanh truot nhu bi tut len mot nua hang. Trinh duyet tu can giua ray truot
trong chieu cao o, nen chi can dat height. */
.md-form .form-range { height: 3.1rem; }
/* O mau mac dinh khong co vien. Mau nen mac dinh la TRANG, dat trong mot o
nen trang thi ca o trong nhu mot o nhap con bo trong. Ve vien cho mieng mau
de no luon nhin ra la mot mieng mau. */
.md-form .form-control-color::-webkit-color-swatch {
border: 1px solid var(--md-border); border-radius: 5px;
}
.md-form .form-control-color::-moz-color-swatch {
border: 1px solid var(--md-border); border-radius: 5px;
}
/* ---- o chon ngan hang boc bang Select2 (libs/select2/) ----
Select2 mang theo giao dien rieng cua no: nen trang CUNG (khong theo bien),
vien xam, bo goc 4px, cao 28px. Dat canh cac o .md-input thi lech han, con o
che do toi thi thanh chu trang tren nen trang — khong doc noi mot chu.
Khoi nay noi cac phan cua Select2 ve dung bo bien cua trang, nho vay no tu
doi mau theo theme nhu moi thu khac.
LUU Y 1: phan dropdown duoc Select2 gan THANG vao chu khong nam trong
form, nen khong long duoc trong .md-form — buoc phai viet selector toan cuc.
LUU Y 2: cac trang khac khong nap select2.min.css nen nhung luat nay nam im
o do, khong anh huong gi.
LUU Y 3: ten class theo ban 4.1 (--selected / --highlighted / --selectable).
Ban 4.0 dung [aria-selected] — nang cap thu vien thi phai xem lai khoi nay. */
.select2-container--default .select2-selection--single {
height: auto;
padding: .75rem .9rem;
background: var(--md-surface);
border: 1px solid var(--md-border);
border-radius: var(--md-radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0; line-height: 1.5; font-weight: 500; color: var(--md-text);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--md-muted);
}
/* Mui ten cua Select2 la mot hinh tam giac ve bang border, phai doi mau rieng */
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0; right: .55rem; height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--md-muted) transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--md-muted);
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
border-color: var(--md-accent); outline: none;
}
.select2-dropdown {
background: var(--md-surface);
border: 1px solid var(--md-accent);
border-radius: var(--md-radius-sm);
box-shadow: var(--md-shadow);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
padding: .55rem .65rem;
background: var(--md-bg); color: var(--md-text);
border: 1px solid var(--md-border); border-radius: var(--md-radius-sm);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--md-accent); outline: none;
}
.select2-container--default .select2-results__option {
padding: .55rem .9rem; color: var(--md-text);
}
/* Dong dang tro chuot / dang chon bang ban phim */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: var(--md-accent); color: var(--md-brand-ink);
}
/* Dong dang duoc chon san */
.select2-container--default .select2-results__option--selected {
background: var(--md-bg-subtle); color: var(--md-text);
}
/* Dong "Khong tim thay ngan hang nao" */
.select2-container--default .select2-results__option[role="alert"] {
color: var(--md-muted);
}
/* ==========================================================================
10D. Tao mat khau (tao-mat-khau.html)
--------------------------------------------------------------------------
Trang nay dung lai gan het CSS co san: cac o chon bo ky tu la .md-choice
(chi khac o cho ben trong la checkbox thay vi radio — luat
.md-choice input:checked + .md-choice-box khong phan biet hai loai nen
khong phai viet them gi), khoi tuy chon nang cao la .md-details cua trang
tao ma QR, hang nut chon nhanh do dai la .md-preset-row cua trang dem ngay.
Trang KHONG co khoi ket qua rieng nen khong dung toi .md-res* o muc 10.
Chi hai thu that su moi: O HIEN MAT KHAU va THANH DO MANH.
========================================================================== */
/* ---- o hien mat khau ----
Ba manh, dat ten theo dung vai tro de khong lan nhau:
.md-pass-box — ca cai khung (bam vao day la sao chep)
.md-pass-value — chuoi mat khau ben trong khung
.md-pass-actions — hang nut Sao chep / xoay vong
Mot hang: chuoi mat khau gian het cho con lai, hai nut nam ben phai. Khi
man hinh hep hoac mat khau dai, flex-wrap cho hang nut rot xuong dong duoi.
Nen/vien lay giong .md-input de khung nay doc nhu mot o nhap cua form, du
ben trong la chu khong phai khong
phai o nhap; cung khong de js nhet chu vao roi go ra, vi nhu the chuoi goi y
se lot vao ket qua khi nguoi dung bam Sao chep dung luc chua nhap gi. */
.md-pass-value:empty::before {
content: attr(data-placeholder);
color: var(--md-muted);
font-weight: 400;
font-size: 1rem;
}
/* ---- khoi thu vien ky tu ----
Bon o soan noi dung o tren va bang tra ky tu o duoi la hai viec khac han
nhau: mot ben la bieu mau tao ra ket qua, mot ben la cai tu dien tra cuu,
dung hay khong dung cung duoc. De chung mot mach thi bang tra doc nhu la
"buoc thu sau" bat buoc phai lam.
Chi mot lop nen chim la du tach hai phan, khong can them duong ke hay tieu de
to. Nen lay --md-bg-subtle (nen cua section) chu khong phai mot mau moi: khoi
nay nam tren the trang .md-card, dung lai dung cap mau ma trang da co la tu
no lui ve sau mot lop ma van an theo ca hai theme.
KHONG dat vien cho khoi: ben trong no da co mot khung ky tu co vien rieng
(.md-char-list), long hai cai vien vao nhau thanh ra hop-trong-hop. */
.md-library {
border-radius: var(--md-radius-sm);
background: var(--md-bg-subtle);
padding: clamp(.9rem, 3vw, 1.25rem);
}
/* ---- hang chip loc nhom ----
Chot chieu cao chip de tinh duoc chinh xac "ba hang" cho .is-clamped ben
duoi — de chieu cao tu do thi cai bi cat ngang se la nua hang, nhin nhu
trang bi loi chu khong phai co y thu gon.
Bo tron han (pill) de phan biet voi cac nut thao tac vuong o tren: day la
BO LOC, khong phai nut lam mot viec gi. */
.md-cat-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-cat-row .btn {
display: flex; align-items: center;
height: 2.15rem; padding: 0 .75rem;
border-radius: var(--md-radius-pill);
font-size: .85rem; line-height: 1;
white-space: nowrap;
}
/* 3 hang + 2 khe. Dung calc theo dung hai bien o tren de sua mot cho la khop. */
.md-cat-row.is-clamped {
max-height: calc(2.15rem * 3 + .4rem * 2);
overflow: hidden;
}
/* mac dinh nam vat len duong vien va thut vao mot chut. O day muon no
la mot dong tieu de binh thuong nam trong khoi. */
.md-library-title {
float: none; width: auto;
margin-bottom: .75rem;
font-size: 1rem;
}
/* .md-field cuoi cung trong form duoc noi rong khoang duoi (quy uoc o muc 9);
khoi nay la the cuoi nen dinh luon luat do, thanh ra thua mot khoang o day
form. Padding cua chinh no da du. */
.md-library:last-of-type { margin-bottom: 0; }
/* ---- the chon nam ngang ----
Ban mac dinh cua .md-choice-box xep DOC (icon tren, chu duoi) nen cao khoang
gap ruoi mot o nhap. Khi the chon phai dung CHUNG MOT HANG voi o nhap — o
trang ky tu dac biet: "Ký tự cách" va "Chèn ký tự cách vào" — hai ben se so
le nhau thay rat ro. Modifier nay lat the sang nam ngang, chieu cao con xap
xi o nhap.
Chinh la kieu ma .md-choice-box tu chuyen sang o man hinh duoi 400px (xem
muc 9), chi khac la o day bat theo YEU CAU BO CUC chu khong theo be ngang
man hinh. Luat kia nam trong @media viet sau nen van thang o man hinh hep —
dung y do, luc do the cang phai nam ngang. */
.md-choice-row--inline .md-choice-box {
flex-direction: row; justify-content: center; gap: .5rem;
padding: .72rem .6rem;
}
/* ---- luoi chon kieu chu ----
Moi nut deu mang cung mot chu mau ("Abc123") nen be rong tu nhien da xap xi
nhau; luoi chi de chung thang cot va deu khoang.
Chot grid-auto-rows: hang cao co dinh la dieu kien de tinh duoc chinh xac
"ba hang" cho .is-clamped ben duoi — de hang tu do thi cai bi cat ngang se la
nua hang, nhin nhu trang bi loi chu khong phai co y thu gon. */
.md-style-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
grid-auto-rows: 2.75rem;
gap: .4rem;
}
/* Ba hang: 3 hang + 2 khe. Dung calc theo dung hai bien o tren de sua mot cho
la ca hai khop nhau, khong phai nho cong tay lai.
js/ky-tu-dac-biet.js go class nay ra khi bam "Xem tất cả", va tu an luon nut
do neu luoi von da ngan hon ba hang. */
.md-style-grid.is-clamped {
max-height: calc(2.75rem * 3 + .4rem * 2);
overflow: hidden;
}
.md-style-grid .btn {
display: flex; align-items: center; justify-content: center;
padding: 0 .4rem;
font-size: .95rem; line-height: 1;
/* Cac kieu chu la ky tu Unicode rieng, phan lon khong nam trong font cua
trang — phai de he dieu hanh tu chon font du phong cho tung dai. */
font-family: inherit;
}
/* Chu mau dai hon o (kieu "Chữ rộng" moi ky tu chiem ca o vuong) thi cat bot
bang dau ba cham, hon la de no tran ra day lech ca hang. Phai dat tren
ben trong chu khong phai tren .btn: text-overflow khong an tren mot flex
container. */
.md-style-grid .btn > span {
display: block; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---- hai hang nut goi y (cap ky tu dau/cuoi va ky tu cach) ----
Xep bang LUOI chu khong phai d-flex flex-wrap. Nhan cac nut o day khong phai
chu binh thuong ma la ky tu trang tri lay tu du thu he chu khac nhau (꧁ ༺ ᚛
ᯓ 彡 「), moi ky tu mot be rong va mot chieu cao khac han nhau; xep bang flex
thi be rong nut chay theo noi dung nen hang nut trong nhu rang cua, va nhung
nut co ky tu cao vong len keo lech ca hang. Luoi cot deu tra lai cho moi nut
dung mot khuon.
auto-fill + minmax de so cot tu chay theo be ngang man hinh, khong phai viet
@media. */
.md-preset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
gap: .4rem;
/* Chot chieu cao hang. KHONG dung 1fr: 1fr keo MOI hang cao bang hang cao
nhat, chi mot glyph vong len la ca luoi phinh ra va nhung glyph thap noi
lo lung giua o. Co chu cua tung nut da duoc js can rieng cho glyph deu
nhau (xem fitGlyphSizes trong js/ky-tu-dac-biet.js) nen o chot cung duoc. */
grid-auto-rows: 2.6rem;
}
/* Ky tu cach chi la MOT ky tu don nen o hep hon nhieu so voi mot cap khung. */
.md-preset-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); }
/* Nut co chieu cao CHOT bang dung mot hang cua luoi, de ca hang phang tap.
font-size o day chi la gia tri du phong: js do tung glyph roi ghi de bang
style truc tiep tren tung nut (fitGlyphSizes). Neu js khong chay duoc — trinh
duyet qua cu, canvas bi chan — thi moi dung toi con so nay.
line-height: 1 de o cao dung bang co chu, phan can giua da co flex lo.
overflow: hidden la luoi an toan cuoi cung: glyph nao van vuot khoi o thi bi
cat chu khong tran de len nut ben canh. */
.md-preset-grid .btn {
display: flex; align-items: center; justify-content: center;
height: 2.6rem; padding: 0 .3rem;
font-size: 1rem; line-height: 1;
/* Nhan la mot CAP ky tu di lien nhau, khong bao gio duoc phep tach lam hai
dong — "★彡彡★" rot mat ngoi sao xuong dong duoi thi khung khong con ra
khung nua. js da can co chu cho vua be ngang, day la luoi an toan. */
white-space: nowrap;
overflow: hidden;
/* Ky tu trang tri phai de he dieu hanh tu chon font, ep font cua trang thi
nhieu ky tu tut ve o vuong rong. */
font-family: inherit;
}
/* Chon "Tất cả" la hon 1.000 o ky tu — de tran ra thi form dai vai man hinh,
nguoi dung phai cuon rat xa moi thay lai o tim kiem. Chot chieu cao va cho
cuon trong khoi: o tim kiem, hang nut nhom va dong "Đã sao chép" luon nam
trong tam mat khi dang chon ky tu.
overscroll-behavior: contain de cuon het danh sach thi DUNG lai, khong day
tiep ca trang xuong — cuon trong khoi long nhau ma khong co no rat kho chiu
tren dien thoai. */
.md-char-list {
max-height: 34rem;
overflow-y: auto;
overscroll-behavior: contain;
/* Nen sang + vien: doc ra nhu MOT KHUNG TRA CUU rieng dat tren nen chim cua
.md-library, thay vi mot dam nut do ra giua khoang trong. Nen phai DUC
(khong trong suot) de tieu de nhom dinh o tren khong bi nhin xuyen qua —
xem .md-char-head. */
background: var(--md-surface);
border: 1px solid var(--md-border);
border-radius: var(--md-radius-sm);
/* Khong co padding tren: tieu de nhom dinh sat mep tren khi cuon. Padding
phai chua cho thanh cuon de no khong de len o ky tu ngoai cung. */
padding: 0 .6rem .7rem;
}
/* Khoang cach giua hai nhom ke nhau. Dat tren cap + cap de nhom DAU TIEN khong
bi day xuong, tao ra mot khoang trong la o ngay dau khoi. */
.md-char-block + .md-char-block { margin-top: 1.1rem; }
/* Chon "Tất cả" la 33 nhom / gan 2.800 o ky tu cung nam trong DOM, trong khi
khung chi cao 34rem nen may chuc o dau la nguoi dung thay. content-visibility
cho trinh duyet BO QUA han viec do dac va ve nhung nhom dang nam ngoai tam
nhin, chi lam khi cuon toi — doi lai gan het chi phi cua mot bang lon.
contain-intrinsic-size: auto de truoc khi do that, trinh duyet
van danh san mot khoang chieu cao cho moi nhom; thieu no thi thanh cuon nhay
giat moi khi cuon toi mot nhom moi. Tu khoa `auto` bao no NHO lai kich thuoc
that sau lan do dau, nen cuon len cuon xuong khong bi nhay nua.
Trinh duyet cu khong hieu thi bo qua ca hai dong, trang van chay nhu cu —
chi la khong duoc phan nhanh them. */
.md-char-block {
content-visibility: auto;
contain-intrinsic-size: auto 14rem;
}
/* Ten nhom, DINH lai o mep tren khi cuon qua. Chon "Tất cả" la gan 2.800 o ky
tu noi duoi nhau; khong co dong nay thi cuon mot lat la khong con biet minh
dang o nhom nao, phai cuon nguoc len tim.
background duc va z-index de cac o ky tu chay ben duoi no, khong de len chu.
padding tren/duoi cho chu khong cham mep khung luc dang dinh. */
.md-char-head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: baseline; gap: .5rem;
margin: 0 0 .5rem;
padding: .6rem 0 .45rem;
background: var(--md-surface);
font-size: .95rem; font-weight: 600; color: var(--md-text);
}
/* So luong ky tu cua nhom: cho biet nhom dai bao nhieu truoc khi cuon, va khi
dang tim kiem thi cho biet co bao nhieu ket qua. Mo va nho hon ten nhom de
khong tranh cho cua no. */
.md-char-count { font-size: .78rem; font-weight: 400; color: var(--md-muted); }
/* auto-fill + minmax: so cot tu chay theo be ngang man hinh, tu 3 cot tren dien
thoai hep den chuc may cot tren desktop — khong phai viet mot loat @media.
3.1rem la muc vua du chua mot emoji ghep (👩❤️👨) ma tren dien thoai 360px
van duoc 7 cot. */
.md-char-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
gap: .4rem;
}
/* Ke thua toan bo mau sac / vien / hieu ung hover cua .btn-outline-secondary
(va .active luc vua bam sao chep) nen o day chi con chinh CO cho vuong van.
padding: 0 + aspect-ratio: 1 cho o vuong chan phuong du ky tu rong hay hep;
neu de padding theo .btn thi o ky tu rong (emoji) se cao hon o ky tu hep va
ca luoi rang cua.
line-height: 1 de khong bi cong them nua dong trong o cao co dinh. */
.md-char {
display: flex; align-items: center; justify-content: center;
padding: 0; aspect-ratio: 1;
font-size: 1.15rem; line-height: 1;
/* Ky tu la (卂, ᴀ, ǝ) va emoji phai de he dieu hanh tu chon font, ep font cua
trang thi nhieu ky tu tut ve o vuong rong. */
font-family: inherit;
/* Nhieu o ky tu sat nhau, con tro hinh ban tay cho biet bam duoc de sao chep */
cursor: pointer;
/* Vai ky tu ve rong hon o (emoji co, ky hieu ghep) — cat bot con hon de no
day o phinh ra lam ca hang lech. */
overflow: hidden;
}
/* ==========================================================================
10F. Font chu dep (font-chu-dep.html)
--------------------------------------------------------------------------
Trang nay ghep lai tu hai trang co san, gan nhu khong can CSS moi:
- hang chip loc nhom, khoi nen chim, khung cuon co ten nhom dinh:
.md-cat-row / .md-library / .md-char-list / .md-char-block /
.md-char-head cua trang ky tu dac biet (muc 10E);
- moi dong ket qua: .md-pass-box--copy / .md-pass-value /
.md-pass-actions cua trang tao mat khau (muc 10D).
Chi chinh lai dong ket qua cho hop mot DANH SACH dai: gon hon, co ten kieu
o tren, va nut sao chep luon nam cung hang.
========================================================================== */
/* Cac dong xep chong, cach deu. */
.md-font-rows { display: grid; gap: .5rem; }
/* Mot dong: gon hon khung mat khau (vai chuc dong noi nhau). row-gap nho de
ten kieu nam sat chuoi ket qua ben duoi no. */
.md-font-item { padding: .5rem .6rem .55rem .85rem; row-gap: .1rem; }
/* Ten kieu chu: chiem tron mot dong rieng o tren (flex-basis 100%), nho va mo
de khong tranh cho voi chinh ket qua. */
.md-font-name { flex: 0 0 100%; font-size: .78rem; color: var(--md-muted); line-height: 1.3; }
/* Chuoi ket qua. Khac .md-pass-value o ba cho:
- font-family: inherit — ban goc la font monospace cho mat khau; o day
phai de he dieu hanh tu chon font du phong cho tung dai ky tu Unicode.
- flex-basis 0 — ban goc 12rem lam nut sao chep rot xuong dong tren dien
thoai; o day nut nho chi co icon nen luon du cho nam cung hang.
- user-select: text — ban goc "all" boi den ca chuoi ngay khi bam, ma bam
mot dong o day la de SAO CHEP; js bo qua cu bam khi dang co vung boi den
(nguoi dung tu keo chon mot doan) nen phai de bam thuong khong boi gi. */
.md-font-value {
flex: 1 1 0;
font-family: inherit; font-size: 1.15rem; font-weight: 400;
user-select: text;
}
/* Ghi de luat @media (max-width: 480px) cua .md-pass-actions (muc 10D): o day
hang nut chi co MOT nut icon, khong can xuong han mot dong rieng. */
.md-font-item .md-pass-actions { width: auto; margin-left: auto; }
/* ==========================================================================
10G. Lam net anh (lam-net-anh.html)
--------------------------------------------------------------------------
Gan nhu toan bo trang dung lai CSS cua trang chen logo (muc 9, 10, 10C):
o chon muc do la .md-choice-row, thanh truot .form-range, khung ket qua
.md-res-box / .md-vio-table, nhan "Gốc / Đã làm nét" la .badge cua
Bootstrap. Chi KHUNG SO SANH truoc / sau la thu that su moi:
.md-compare — khung chua, co dinh vi tri cho cac lop ben trong
.md-compare-img — hai canvas (da lam net o duoi, goc o tren)
.md-compare-before — canvas anh goc phu kin len tren; js cat bot no bang
clip-path theo vi tri keo
.md-compare-line — duong ke doc danh dau vi tri dang so sanh
========================================================================== */
/* fit-content: khung om sat anh (anh hep thi khung hep theo, can giua bang
margin auto) nen duong ke va hai nhan luon nam tren anh chu khong troi ra
khoang trong hai ben. line-height:0 bo khe ho duoi canvas (canvas la phan
tu inline). touch-action: pan-y — keo ngang de so sanh, vuot doc van cuon
duoc trang tren dien thoai. */
.md-compare {
position: relative;
width: fit-content; max-width: 100%;
margin-inline: auto;
line-height: 0;
cursor: ew-resize;
touch-action: pan-y;
user-select: none;
border: 1px solid var(--md-border);
border-radius: var(--md-radius-sm);
overflow: hidden;
}
/* Canvas ve o kich thuoc that (toi 1200px) — keo lai cho vua khung. Chan
chieu cao 70vh de anh doc khong cao qua man hinh, phai cuon moi thay het. */
.md-compare-img {
display: block;
max-width: 100%; max-height: 70vh;
width: auto; height: auto;
}
/* Anh goc phu dung kin anh da lam net ben duoi (hai canvas cung kich thuoc). */
.md-compare-before {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
/* Duong ke trang co vien toi mong: thay duoc tren ca nen sang lan nen toi.
pointer-events:none de khong chan thao tac keo tren anh. */
.md-compare-line {
position: absolute; top: 0; bottom: 0;
width: 2px; margin-left: -1px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
pointer-events: none;
}
/* Hai nhan nam tren anh nhung khong chan thao tac keo. */
.md-compare .badge { line-height: 1; pointer-events: none; }
/* ==========================================================================
10H. Cat anh (cat-anh.html)
--------------------------------------------------------------------------
Khung cat la thu vien Cropper.js (libs/cropperjs, CSS rieng nap truoc file
nay). O day chi:
.md-crop-stage — khung chua anh: Cropper lay kich thuoc theo khung
nay nen phai co chieu cao co dinh (anh doc khong
cao qua man hinh).
mau duong vien / nut keo — doi xanh mac dinh cua Cropper sang mau thuong
hieu (--md-accent) cho hop ca hai theme.
.md-crop-stage--circle — che do cat tron: bo tron khung cat de nguoi dung
thay dung vung se giu lai.
========================================================================== */
.md-crop-stage {
height: min(65vh, 560px);
border: 1px solid var(--md-border);
border-radius: var(--md-radius-sm);
overflow: hidden;
}
/* Cropper can : duoc chon thi vien
mau nhan, bi bo thi mo di. aria-pressed la nguon trang thai
duy nhat (khong them class) de trinh doc man hinh doc dung.
Trang tach PDF dung chi de xem: --muted (trang bi
bo), --alt (file chan, nen nhat khac file le).
========================================================================== */
.md-pdf-thumb {
width: 48px; height: 48px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
object-fit: contain; background: #fff;
border: 1px solid var(--md-border); border-radius: var(--md-radius-sm);
color: var(--md-danger); font-size: 1.4rem;
}
.md-pdf-pages {
display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .5rem;
max-height: 32rem; overflow-y: auto; padding: .25rem;
}
.md-pdf-page {
display: flex; flex-direction: column; align-items: center; gap: .25rem;
padding: .25rem; font-size: .75rem; line-height: 1.2;
color: var(--md-text); background: var(--md-surface);
border: 2px solid var(--md-accent); border-radius: var(--md-radius-sm);
cursor: pointer;
}
.md-pdf-page[aria-pressed="false"],
.md-pdf-page--muted { border-color: var(--md-border); opacity: .45; }
/* O chi de xem (trang tach PDF: trang thuoc file nao), khong bam duoc. File
chan / le xen ke mau nen de thay ro cho cat giua hai file. */
div.md-pdf-page { cursor: default; }
.md-pdf-page--alt { background: var(--md-accent-soft); }
.md-pdf-page:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
/* Khung anh trang giu ti le A4 doc ca khi anh chua ve xong (khong nhay luoi). */
.md-pdf-page-img {
width: 100%; aspect-ratio: 3 / 4;
display: flex; align-items: center; justify-content: center;
background: #fff; color: #999; overflow: hidden;
}
.md-pdf-page-img img { width: 100%; height: 100%; object-fit: contain; }
/* ==========================================================================
11. Bai viet mo ta + cau hoi thuong gap (trang phat-nguoi.html)
========================================================================== */
/* Rong bang khung form (theo .md-container) — theo yeu cau de noi dung SEO
thang hang voi phan con lai cua trang.
Danh doi: moi dong dai khoang 100+ ky tu, hoi qua muc de doc thoai mai
(65-75 la chuan). Muon uu tien de doc thi dat lai max-width: 36rem. */
.md-article {
margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.md-article h2 {
font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
margin: 0 0 .9rem;
}
.md-article h3 {
font-size: 1.1rem;
margin: 2rem 0 .6rem;
}
/* Danh sach gach dau dong (dem-ky-tu.html: "Vi sao nen dung") an cung mau, cung
co chu voi doan van de doc lien mach. */
.md-article p,
.md-article li {
color: var(--md-muted);
font-size: 1.05rem;
line-height: 1.75;
margin: 0 0 1rem;
}
.md-article li { margin-bottom: .5rem; }
.md-article ul,
.md-article ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.md-article strong { color: var(--md-text); font-weight: 600; }
/* Anh trong noi dung khong duoc tran khung va thang hang voi dong chu. */
.md-article img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
/* Cong thuc dat rieng mot dong, khung nhat: day la doan Google hay trich ra lam
doan noi bat (featured snippet) nen phai tach khoi van xuoi de de nhan dien. */
.md-formula {
text-align: center; font-size: 1.05rem;
padding: 1rem; margin-block: 1.25rem;
background: var(--md-bg-subtle);
border: 1px solid var(--md-border); border-radius: var(--md-radius-sm);
}
/* Bang phan loai BMI dung .table cua Bootstrap. Bootstrap 5.3 doc mau qua
[data-bs-theme] nen tu dung ca hai che do — khong them CSS mau o day.
Chi chinh phan chu thich cho khop kieu chu cua bai viet. */
.md-article .table caption {
caption-side: bottom; padding-top: .75rem;
font-size: .85rem; color: var(--md-muted);
}
.md-faq-title { margin-top: 3rem; }
/* ---- accordion cau hoi thuong gap ----
Noi bien cua Bootstrap sang token cua minh de tu doi mau theo theme.
Moi cau hoi la mot the rieng: nen trang, vien bo tron, cach nhau mot khoang.
LUU Y: phai dat --bs-accordion-bg = surface. De transparent thi phan tieu de
co nen trang con phan noi dung lai lo nen xam cua section -> trong nhu loi. */
.md-faq {
--bs-accordion-bg: var(--md-surface);
--bs-accordion-color: var(--md-text);
--bs-accordion-border-color: var(--md-border);
--bs-accordion-border-radius: var(--md-radius);
--bs-accordion-inner-border-radius: var(--md-radius);
--bs-accordion-btn-color: var(--md-text);
--bs-accordion-btn-bg: transparent;
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-active-color: var(--md-accent);
--bs-accordion-active-bg: transparent; /* giu nen trang, chi doi mau chu */
--bs-accordion-btn-padding-x: 1.15rem;
--bs-accordion-btn-padding-y: 1rem;
--bs-accordion-body-padding-x: 1.15rem;
--bs-accordion-body-padding-y: 1rem;
}
/* Bootstrap mac dinh xep cac muc dinh lien nhau va chi bo tron muc dau/cuoi.
O day tach roi tung the nen muc nao cung phai co du vien va du 4 goc bo tron. */
/* Cau hoi la the
nam trong .md-article nen bi an luat
`.md-article h3 { margin: 2rem 0 .6rem }` -> moi cau doi them ~42px khoang
trong lech han ve phia tren. Phai tra margin ve 0. */
.md-faq .accordion-header { margin: 0; }
.md-faq .accordion-item {
border: 1px solid var(--md-border);
border-radius: var(--md-radius);
overflow: hidden; /* cat goc cho nut ben trong khong tho ra */
}
.md-faq .accordion-item + .accordion-item { margin-top: .6rem; }
.md-faq .accordion-item:hover { border-color: var(--md-border-strong); }
/* Cau dang mo: vien theo mau thuong hieu de noi bat khoi cac cau con lai */
.md-faq .accordion-item:has(.accordion-collapse.show) { border-color: var(--md-accent); }
.md-faq .accordion-button {
font-weight: 600; font-size: .98rem; line-height: 1.5;
box-shadow: none;
}
.md-faq .accordion-button:not(.collapsed) {
border-bottom: 1px solid var(--md-border); /* vach ngan tieu de voi noi dung */
}
.md-faq .accordion-body { color: var(--md-muted); font-size: .94rem; line-height: 1.75; }
/* Mui ten cua Bootstrap la anh SVG mau den co dinh nen o che do toi se chim vao
nen. Dung mask thay cho background-image de mui ten an theo currentColor —
tu dung mau o ca hai theme va doi sang mau accent khi cau dang mo. */
.md-faq .accordion-button::after {
background-image: none;
background-color: currentColor;
-webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
}
/* ==========================================================================
11B. Blog (blog.html, blog-chuyen-muc.html, blog-tac-gia.html,
blog-chi-tiet.html)
--------------------------------------------------------------------------
Bon trang blog dung lai gan het nhung gi da co:
- hero, section, nhip nen xen ke -> muc 2, 5
- hang chip loc chuyen muc -> .md-cat-row (muc 10E)
- the "Muc luc", "Cong cu lien quan" -> .md-cat / .md-cat-head /
.md-cat-list (muc 6)
- noi dung bai, bang, FAQ -> .md-article / .md-faq (muc 11)
- hop "Tinh nhanh", "Luu y" -> .md-panel--info / --warn (muc 9)
- nut "Dung cong cu" -> .md-submit (muc 9)
Chi con nhung thu duoi day la that su moi.
========================================================================== */
/* ---- duong dan (breadcrumb) — Bootstrap .breadcrumb, noi bien sang token ---- */
.md-breadcrumb {
--bs-breadcrumb-divider-color: var(--md-muted);
--bs-breadcrumb-item-active-color: var(--md-muted);
--bs-breadcrumb-margin-bottom: 1rem;
font-size: .88rem;
}
.md-breadcrumb a { color: var(--md-muted); text-decoration: none; }
.md-breadcrumb a:hover { color: var(--md-accent); text-decoration: underline; }
/* Bien the cho trang chi tiet bai viet: muc cuoi (ten bai) thuong rat dai ->
chi hien ~28 ky tu roi cat bang dau "...". Ten day du van nam trong HTML
(va trong title de re chuot xem), schema BreadcrumbList khong bi anh huong.
ch tinh theo co chu cua CHINH muc nay nen 28ch ~ 28 ky tu. Dau phan cach "/"
la ::before float trai cua chinh nen van hien du, khong bi cat. */
.md-breadcrumb--truncate .breadcrumb-item.active {
max-width: 28ch;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ---- the bai viet ----
Anh dai dien la mot LINK rieng (tabindex=-1, aria-hidden) chu khong dung
.stretched-link phu ca the: phu ca the thi link chuyen muc ben trong khong
bam duoc nua.
Khung chot ti le 16:9 va anh phu kin bang object-fit: cover, nen anh that
lech ti le chut it van khong lam lech bo cuc. Nen --md-bg-subtle hien ra
trong luc anh dang tai, va hien xuyen qua anh tam (assets/img/blog/
placeholder.svg co nen trong suot) nen anh tam hop ca hai theme. */
.md-post { display: flex; flex-direction: column; overflow: hidden; }
.md-post-thumb {
display: block;
aspect-ratio: 16 / 9;
background: var(--md-bg-subtle);
border-bottom: 1px solid var(--md-border);
}
.md-post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.md-post-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.15rem 1.25rem 1.25rem; }
.md-post-cat {
align-self: flex-start; margin-bottom: .5rem;
font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--md-accent); text-decoration: none;
}
.md-post-cat:hover { text-decoration: underline; }
.md-post-title { font-size: 1.1rem; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 .5rem; }
.md-post-title a { color: var(--md-text); text-decoration: none; }
/* Doan trich cat 3 dong bang .md-clamp (cuoi file) dat ngay tren the HTML. */
.md-post-excerpt { color: var(--md-muted); font-size: .93rem; line-height: 1.6; margin: 0 0 1rem; }
/* margin-top: auto day dong ngay dang xuong day the -> cac the cung hang
(.h-100) co dong meta thang hang du tieu de dai ngan khac nhau. */
.md-post-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
list-style: none; padding: 0; margin: auto 0 0;
font-size: .82rem; color: var(--md-muted);
}
.md-post-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.md-post-meta a { color: inherit; font-weight: 600; text-decoration: none; }
.md-post-title a:hover,
.md-post-meta a:hover { color: var(--md-accent); }
/* ---- phan trang — Bootstrap .pagination, noi bien sang token ---- */
.md-pagination {
--bs-pagination-color: var(--md-text);
--bs-pagination-bg: var(--md-surface);
--bs-pagination-border-color: var(--md-border);
--bs-pagination-border-radius: var(--md-radius-sm);
--bs-pagination-hover-color: var(--md-accent);
--bs-pagination-hover-bg: var(--md-accent-soft);
--bs-pagination-hover-border-color: var(--md-border-strong);
--bs-pagination-focus-color: var(--md-accent);
--bs-pagination-focus-bg: var(--md-accent-soft);
--bs-pagination-focus-box-shadow: none; /* vien focus: xem nhom luat o muc 3 */
--bs-pagination-active-color: var(--md-brand-ink);
--bs-pagination-active-bg: var(--md-accent);
--bs-pagination-active-border-color: var(--md-accent);
--bs-pagination-disabled-color: var(--md-muted);
--bs-pagination-disabled-bg: var(--md-surface);
--bs-pagination-disabled-border-color: var(--md-border);
margin: clamp(2rem, 4vw, 3rem) 0 0;
}
/* ---- noi dung bai viet ----
Bai nam trong .md-article nen chu, bang, danh sach da co san. Them:
scroll-margin (--md-sticky-offset, theme.css) de bam muc luc thi tieu de
khong bi navbar sticky che mat;
trich dan. */
.md-article :is(h2, h3)[id] { scroll-margin-top: var(--md-sticky-offset); }
.md-article blockquote {
margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem;
border-left: 3px solid var(--md-accent);
}
.md-article blockquote p { color: var(--md-text); font-style: italic; }
/* ---- cot ben (desktop) dinh lai khi cuon, ngay duoi navbar sticky ---- */
@media (min-width: 992px) {
.md-aside { position: sticky; top: var(--md-sticky-offset); }
}
/* ---- muc luc ----
Danh sach ben trong do thu vien caseyamcl/toc (PHP, v4) sinh ra qua
ListRenderer cua KnpMenu — khong tu dat class duoc:
(getOrderedHtmlMenu thi la )
Tieu de
So N trong menu_level_N doi theo tham so topLevel khi goi thu vien, nen
CSS bam theo cach LONG NHAU (li li a) chu khong bam ten class.
Muc dang doc: ScrollSpy cua Bootstrap tu gan .active vao (khai bao
bang data-bs-spy tren ), khong can JS rieng.
So thu tu (1, 2, 2.1...) danh bang CSS counter md-toc-number, khong phai
so cua : thu vien mac dinh ra (khong co so), va so cua nam
ngoai vach trai cua link. Moi danh sach (ca cap con) reset bo dem, counters() noi
cac cap lai bang dau cham. So dat trong ::before cua nen dong chu
dai xuong dong van thang hang sau con so. */
.md-toc { margin-top: .35rem; font-size: .92rem; }
.md-toc ul,
.md-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: md-toc-number; }
.md-toc li { counter-increment: md-toc-number; }
.md-toc a {
display: flex; gap: .5rem;
padding: .4rem .5rem .4rem .8rem; line-height: 1.45;
color: var(--md-muted); text-decoration: none;
border-left: 2px solid var(--md-border);
}
.md-toc a::before {
content: counters(md-toc-number, ".") ".";
flex: 0 0 auto;
color: var(--md-text); font-weight: 600; font-variant-numeric: tabular-nums;
}
.md-toc a:hover { color: var(--md-accent); }
.md-toc a.active { color: var(--md-accent); border-left-color: var(--md-accent); font-weight: 600; }
.md-toc li li a { padding-left: 1.6rem; font-size: .88rem; }
.md-toc li li li a { padding-left: 2.4rem; }
/* Muc rong cua cap bi nhay: khong hien gi, cap con ben trong van thut le dung */
.md-toc li > span:empty { display: none; }
/* The chua muc luc: .md-cat dong/mo bang , dat o dau bai (an mui ten
mac dinh cua : dung chung luat voi .md-details o muc 10C). Luc dong
thi bo duong ke duoi cua .md-cat-head, khong thi the trong nhu bi cut mot nua. */
.md-toc-details:not([open]) > summary { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.md-toc-details[open] .md-submenu-caret { transform: rotate(180deg); }
/* ==========================================================================
12. Chuyen theme muot + ton trong "giam chuyen dong"
========================================================================== */
/* Class .md-theming duoc js/theme.js gan vao trong ~300ms khi bam nut
doi theme, xong thi go ra.
KHONG dat transition thuong truc: neu de mai thi moi lan hover cung bi tre
theo, va luc trang vua tai xong se thay mau "troi" mot nhip. */
.md-theming,
.md-theming *,
.md-theming *::before,
.md-theming *::after {
transition: background-color .25s ease,
border-color .25s ease,
color .25s ease,
fill .25s ease,
box-shadow .25s ease !important;
}
/* Nguoi dung bat "giam chuyen dong" trong he dieu hanh: tat het hieu ung.
Bootstrap tu lo phan component cua no (32 khoi @media rieng), day la phan
cua minh. */
@media (prefers-reduced-motion: reduce) {
.md-theming,
.md-theming *,
.md-theming *::before,
.md-theming *::after { transition: none !important; }
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* Caption dai (bai dang anh TikTok co the hang nghin ky tu): cat con 3 dong.
Nut "Xem thêm" ben canh se them .md-clamp--mo de mo ra het. */
.md-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.md-clamp--mo {
display: block;
-webkit-line-clamp: none;
}