/*
* CSS riêng của giao diện NutriCare.
*
* Tệp này đi vào child theme (`assets/design.css`) và nạp SAU `ub.css` nhờ khai
* phụ thuộc `hdnt-ub` trong `functions.php` của child.
*
* ⚠️ MỌI luật ở đây phải bó trong một lớp `wmd-*` mà cây thiết kế tự gắn qua ô
* "Lớp CSS thêm". Viết luật trần (`.ub-cat img{…}`) là đổi dáng MỌI dải danh
* mục của site, kể cả những trang chủ site không dựng bằng giao diện này — mà
* gỡ child ra thì lại đổi ngược về, hai lần thay đổi không ai yêu cầu.
*
* Cách dùng trong cây: `[ub_cats … css="wmd-cats-circle"]`.
*/
/* ---------------------------------------------------------------------------
Dải danh mục ẢNH TRÒN
Theme nền có bảy kiểu danh mục, không kiểu nào ra hàng ảnh tròn. Trước đây
tôi định thêm kiểu thứ tám vào nền; nay để ở đây, vì:
· nền không đổi một byte, gỡ child ra là hết;
· giao diện sau muốn dáng khác thì viết CSS của nó, không ai phải chờ một
bản phát hành theme nền;
· và không có kiểu nào chỉ MỘT khách dùng mà nằm mãi trong gói của tất cả.
⚠️ KHÔNG làm được bằng ô "Bo góc ảnh" của khối: ô ấy nhận SỐ PIXEL (thanh
trượt trần 40px) mà hình tròn cần đúng `50%` — một con số px cố định ra hình
bo góc ở khổ này và gần-tròn ở khổ kia.
--------------------------------------------------------------------------- */
/* (0,2,1) — thắng `.ub-cat img` (0,1,1) của nền theo độ ưu tiên, và còn nạp sau
nên không phụ thuộc thứ tự. Hai lớp bảo hiểm là cố ý: lớp thứ nhất giữ cho
luật đúng kể cả khi ai đó đổi thứ tự nạp về sau. */
.wmd-cats-circle .ub-cat img {
aspect-ratio: 1 / 1;
border-radius: 50%
}
/* Bóng đổ chuyển sang chính tấm ảnh. Để trên thẻ thì `box-shadow` vẽ một hình
CHỮ NHẬT mờ quanh ảnh tròn, cách ảnh đúng một khoảng bằng phần chữ bên dưới. */
.wmd-cats-circle .ub-cat {
border-radius: 0;
box-shadow: none
}
.wmd-cats-circle .ub-cat img { box-shadow: var(--ub-cshadow, none) }
.wmd-cats-circle .ub-cat:hover img { box-shadow: var(--ub-cshadow-h, var(--ub-cshadow, none)) }
/* Lớp phủ bó vào ĐÚNG tấm ảnh. `::after` gốc là `inset:0`, tức phủ cả phần tên
bên dưới — ra một vệt màu chạy ngang qua chữ. */
.wmd-cats-circle .ub-cat::after {
bottom: auto;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%
}
/* ⚠️ Danh mục CHƯA đặt ảnh đại diện: vẽ một vòng tròn trống giữ chỗ.
`hdnt_ub_render_cats()` bỏ hẳn thẻ khi không có ảnh, nên thiếu luật này
thì cả dải chỉ còn mấy dòng chữ trôi giữa khoảng trắng — cao chưa tới 20px,
đọc ra "dải hỏng" chứ không ra "chưa có ảnh". Mà site vừa cài nào cũng ở đúng
trạng thái ấy. */
.wmd-cats-circle .ub-cat:not(:has(img))::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--band, #EAF5EC)
}
/* ---------------------------------------------------------------------------
Nút trên BIỂN khuyến mãi đổi màu theo từng biển
⚠️ Khối Biển KHÔNG có ô "Màu nút" — nút luôn lấy màu nhấn của site, nên ba
biển xanh/cam/xanh-dương đều ra nút xanh lá. Không thêm ô ấy vào theme nền vì
một giao diện: gắn lớp qua ô "Lớp CSS thêm" rồi đổi biến ở đây.
`--btn-bg` là biến mà `.ub-btn--primary` đọc — chính biến mà ô "Màu nút" của
khối Nút đổ vào, nên không phải đè `background` và không đụng trạng thái rê
chuột đã có.
--------------------------------------------------------------------------- */
/* ⚠️ Đổi `--accent`, KHÔNG phải `--btn-bg`.
Đo trong trình duyệt: đặt `--btn-bg` thì biến có mặt đủ trên nút mà nền tính
ra `rgba(0,0,0,0)` — vì `.ub-btn--primary` đọc `--accent`:
background: linear-gradient(to right, var(--accent), …)
`--btn-bg` là biến của ô "Màu nút" ở khối NÚT, khối Biển không đi đường ấy.
Đây đúng lớp lỗi "đặt tên lớp CSS không phải là viết CSS": biến nghe hợp lệ,
có mặt trên phần tử, và không một dòng luật nào đọc nó. */
.wmd-btn-cam { --accent: #E8792B }
.wmd-btn-lam { --accent: #2478C7 }
/* ---------------------------------------------------------------------------
Dải danh mục: 8 vòng một hàng, nằm trong thẻ trắng bo góc
⚠️ Ô "Số cột" của khối Danh mục bị kẹp trần 6 trong `hdnt_ub_render_cats()`
(`max( 2, min( 6, … ) )`), mà mẫu thiết kế có 8 vòng trên một hàng. Không nới
trần ở theme nền vì một giao diện — đè lưới ở đây, chỉ trong phạm vi lớp
`wmd-cats-circle` mà chính cây thiết kế tự gắn.
⚠️ Chỉ đè ở khổ máy tính. Bỏ media query là 8 cột ép xuống cả điện thoại,
mỗi vòng còn ~40px và chữ dưới nó vỡ thành từng chữ cái một dòng.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.wmd-cats-circle { grid-template-columns: repeat(8, minmax(0, 1fr)) }
}
/* Vòng nhỏ lại một chút so với ô lưới. Đo trước: vòng 138px trên khối rộng
1272px (10,8%); ảnh mẫu để vòng thoáng hơn thế. Bó bề ngang ảnh còn 86% rồi
căn giữa → vòng 119px, khoảng cách giữa các vòng rộng ra mà số cột và bề rộng
phần chữ bên dưới vẫn nguyên.
⚠️ Bó CẢ vòng giữ chỗ (`::before`) lẫn lớp phủ rê chuột (`::after`), không chỉ
thẻ . Bó mỗi thì danh mục chưa có ảnh vẫn ra vòng to như cũ (hai cỡ
vòng đứng cạnh nhau), còn lớp phủ thì thành cái đĩa to hơn ảnh, rê chuột vào
mới lòi ra — lỗi chỉ thấy khi rê nên rất dễ lọt.
⚠️ Chỉ ở khổ máy tính: từ 1024px trở xuống lưới còn 4 rồi 3 cột, vòng đã nhỏ
sẵn (172px ở 834, 103px ở 414), bó thêm nữa là mấy cái icon bên trong bé tí. */
@media (min-width: 1025px) {
.wmd-cats-circle .ub-cat img,
.wmd-cats-circle .ub-cat:not(:has(img))::before {
width: 86%;
margin-inline: auto
}
.wmd-cats-circle .ub-cat::after { left: 7%; right: 7% }
}
/* Thẻ trắng bao quanh cả dải. `--band` là nền sáng của theme, nên viền mảnh
dùng nó thì đổi bảng màu là viền đi theo, không phải sửa tay. */
.wmd-cats-circle {
background: #fff;
border: 1px solid var(--line, #EAECEF);
border-radius: 18px;
padding: 26px 22px;
box-shadow: 0 10px 30px rgba(20, 83, 45, .06)
}
@media (max-width: 620px) {
.wmd-cats-circle { padding: 18px 14px; border-radius: 14px }
}
/* ---------------------------------------------------------------------------
Biển khuyến mãi giữ ĐÚNG tỉ lệ của ảnh nền
Đo trên ảnh mẫu: một biển là 359 × 212 → tỉ lệ 1,69. Ba ảnh nguồn có tỉ lệ
2,42 / 1,54 / 1,50, nên `background-size:cover` cắt mất phần bố cục — chai bị
xén hoặc nền bị phóng to. Ba ảnh đã được cắt sẵn về 1,69 (giữ mép phải với
ảnh quá ngang, giữ mép dưới với ảnh quá cao, để chai không bị cụt chân).
⚠️ Dùng `aspect-ratio` chứ KHÔNG dùng ô "Chiều cao" tính bằng px: cột hẹp lại
theo khổ màn hình, mà chiều cao px thì đứng yên — tỉ lệ vỡ ngay ở khổ tablet
và `cover` lại bắt đầu cắt. Khoá tỉ lệ thì biển co giãn cùng cột, ảnh luôn
hiện trọn.
⚠️ Phải hạ `min-height` về 0: khối Biển đặt `min-height:var(--ub-h,480px)`,
không hạ thì 480px thắng `aspect-ratio` và biển cao gấp đôi.
--------------------------------------------------------------------------- */
.wmd-promo {
min-height: 0;
aspect-ratio: 359 / 212
}
/* Khổ điện thoại: biển nằm một cột nên rất rộng; giữ nguyên tỉ lệ thì nó cao
gần 250px và chữ trôi giữa khoảng trống. Cho cao tự do theo nội dung. */
/* ⚠️ KHÔNG thả tỉ lệ tự do ở khổ điện thoại. Bản đầu để `aspect-ratio:auto` +
`min-height:210px`, đo ra 366×354 → tỉ lệ 1,03: khung gần vuông mà ảnh nguồn
là 1,69, nên `cover` cắt mất hai bên và chai biến khỏi khung. Giữ đúng 1,69 ở
MỌI khổ thì ảnh không bao giờ bị cắt; ở 414px ra 366×217, vừa đủ cho bốn dòng
chữ trong lề 24px. */
/* ---------------------------------------------------------------------------
Dải mờ sau chữ trên biển khuyến mãi
Ảnh mẫu có mảng nền SẠCH bên trái rồi mới tới chai. Ba ảnh anh gửi thì chai
nằm ở vị trí khác nhau, và ảnh xanh lá còn có lá trang trí chạy suốt bề
ngang — cắt kiểu gì cũng có tấm bị chữ chạm vào chai.
Chữa bằng dải chuyển sắc từ chính màu nền của biển sang trong suốt: chữ luôn
nằm trên nền phẳng, ảnh vẫn thấy trọn. Đây là cách mẫu thiết kế đang làm, chỉ
khác là mẫu bake sẵn vào ảnh còn ta dựng bằng CSS nên đổi ảnh không phải sửa.
⚠️ KHÔNG mượn thẻ `.ub-banner-ov` có sẵn: độ mờ của nó đi NỘI TUYẾN
(`style="opacity:0.35"`), muốn đè phải `!important` — mà `!important` chặn
luôn ô "CSS riêng" của người dùng, tức vá một lỗi bằng cách dựng lỗi khác.
Dùng `::before` của chính lớp giao diện thì không phải tranh với ai.
⚠️ `z-index` cho phần nội dung: thiếu nó thì dải mờ vẽ ĐÈ lên chữ.
--------------------------------------------------------------------------- */
/* ⚠️ ĐỪNG thu ảnh nền bằng `background-size` ở đây — đã thử và nó để lại MỐI NỐI.
Muốn cụm sản phẩm nhỏ lại thì phản xạ đầu tiên là `background-size: 80% auto`
thay cho `cover` của ub.css. Ảnh nhỏ thật, nhưng vì tỉ lệ ảnh đúng bằng tỉ lệ
khung (1,69) nên chỗ hụt ra 20% là dải màu nền phẳng, cắt ngang tấm ảnh thành
một đường kẻ rõ ở mép trên và mép dưới — nhìn như tấm hình dán lệch trong khung.
Không lấp được bằng `bg_color`: mép ảnh không phải màu phẳng (biển xanh lá có lá
cây chạm mép trên, biển xanh dương đậm hơn màu nền), mà mỗi tấm lệch một kiểu.
Cách đang dùng: nới KHUNG của chính tấm ảnh rồi lấp phần nới bằng cách nhân bản
hàng/cột ngoài cùng (`bin/anh-bien.py`). Pixel ở ranh giới bằng đúng pixel kề nó
nên không có đường kẻ nào, và tỉ lệ giữ nguyên 1,69 nên `cover` vẫn hiện trọn
ảnh. Muốn đổi mức thu thì chạy lại script với hệ số khác, ĐỪNG thêm
`background-size` vào đây — hai lớp thu chồng nhau. */
.wmd-promo { position: relative; overflow: hidden }
.wmd-promo::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
var(--wmd-scrim, #E9F4EC) 0%,
var(--wmd-scrim, #E9F4EC) 26%,
color-mix(in srgb, var(--wmd-scrim, #E9F4EC) 55%, transparent) 46%,
transparent 64%
)
}
.wmd-promo .ub-banner-in { position: relative; z-index: 1 }
.wmd-btn-cam { --wmd-scrim: #FDF0E4 }
.wmd-btn-lam { --wmd-scrim: #E6F1FB }
/* ---------------------------------------------------------------------------
Khổ máy tính bảng & điện thoại
Đo trên Chromium ở 834 và 414 trước khi sửa: không cuộn ngang, không phần tử
nào thò ra ngoài, không chữ tràn hộp, không ảnh méo. Ba chỗ cần chỉnh là
KÍCH THƯỚC, không phải bố cục vỡ.
--------------------------------------------------------------------------- */
/* ⚠️ ĐỪNG hạ chiều cao dải bìa bằng `.wmd-hero { min-height: … }` ở đây — đã thử
và nó là MÃ CHẾT. Ô "Chiều cao tối thiểu" của khối Dải in thẳng
`style="min-height:500px"` lên thẻ (elements-layout.php, nhánh `min_h`), mà nội
tuyến thắng mọi quy tắc trong tệp này; muốn thắng lại thì phải `!important`, thứ
cả dự án cấm vì nó chặn luôn ô "CSS riêng" của chủ site. Đo lúc thử: đặt
`min-height:420px` trong media query rồi đo `getComputedStyle` ở 834px vẫn ra
500px — không lỗi, không cảnh báo, chỉ là không có gì đổi.
Chiều cao dải bìa vì thế do NỘI DUNG quyết: đo được 591px ở 1440, 566px ở 834,
514px ở 414 trong khi min-height mới có 500px, tức con số ấy chưa bao giờ chạm
tới. Muốn dải bìa thấp xuống ở khổ hẹp thì giảm phần bên trong (cỡ chữ, lề trên
của hàng USP và nút) — xem hàng USP ngay dưới. */
/* ⚠️ CỘT LỒNG TRONG CỘT phải khai `span_md` + `span_sm` TƯỜNG MINH, dù chỉ muốn
giữ nguyên bề ngang của khổ máy tính. Biến CSS có TÍNH KẾ THỪA, mà ub.css đọc
`grid-column: span var(--ub-span-md, var(--ub-span, 12))` — cột con không tự
khai thì `--ub-span-md` rơi xuống giá trị của CỘT CHA, không phải `--ub-span`
của chính nó.
Đo thật trên 4 ô USP trong dải bìa: cột cha là `span="6" span_md="7"`, bốn cột
con khai `span="3"` mà bỏ trống `span_md`. Ở 1440 chúng nằm 1 hàng 4 ô đúng như
mong đợi; sang 834 mỗi ô nhận `grid-column: span 7` KẾ THỪA TỪ CHA → mỗi hàng
chỉ còn một ô, USP xếp thành 4 tầng và dải bìa cao vọt 566px → 766px. Không lỗi,
không cảnh báo, và ở khổ máy tính thì vẫn đẹp nên rất dễ bỏ sót.
Bọ này trước đây bị `flow="fit"` che mất: kiểu xếp ấy bỏ qua `grid-column` nên
không ai thấy. Bỏ `flow="fit"` đi (để 4 ô rộng bằng nhau như ảnh mẫu) là nó lộ ra. */
/* Dải bìa ở khổ hẹp: CHỮ ĐÈ LÊN MẤY LỌ THUỐC của ảnh nền.
Bộ đo số không bắt được lỗi này — không cuộn ngang, không phần tử nào thò ra
ngoài, `scrollWidth` không vượt `clientWidth`, tức chữ vẫn nằm gọn trong hộp của
nó. Chỉ nhìn ẢNH CHỤP mới thấy: hộp ấy nằm chồng lên chỗ đậm nhất của ảnh nền,
chữ xanh đậm #14532D trên thân lọ nâu đọc không ra. Đo ở 414 và 834 đều dính, ở
1440 thì không vì cột chữ rộng 624px, mấy lọ nằm hẳn bên phải.
Hai khổ hai cách chữa, vì nguyên nhân khác nhau:
• Máy tính bảng (621–1024): cột chữ rộng 449px mà 4 ô USP xếp MỘT hàng nên ô
thứ tư chạm tới vùng có lọ. Chữa bằng `span_md="6"` trong home.txt → 2×2, cả
bốn ô nằm gọn nửa trái. Ảnh nền giữ nguyên độ nét.
• Điện thoại (≤620): cột chữ chiếm TRỌN bề ngang, không còn "nửa trái" nào để
lui về. Chỉ còn cách làm dịu ảnh nền — nên phủ một lớp sáng chuyển sắc, đậm ở
trên (chỗ tiêu đề) và nhạt dần xuống dưới để mấy lọ vẫn ẩn hiện.
⚠️ KHÔNG dùng ô "Lớp phủ" sẵn có của khối Dải: nó in `opacity` NỘI TUYẾN lên
chính lớp phủ, mà nội tuyến thì media query ở đây không đè lại được — bật lên là
khổ máy tính cũng bị phủ theo, mà khổ máy tính đang khớp ảnh mẫu. Cùng họ với bẫy
`min-height` ghi ở trên. */
@media (max-width: 620px) {
.wmd-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(233, 244, 236, .93) 0%,
rgba(233, 244, 236, .90) 40%,
rgba(233, 244, 236, .82) 72%,
rgba(233, 244, 236, .68) 100%
)
}
/* `.ub-section-in` đã `position:relative` nên nó tự nổi lên trên lớp phủ này:
hai thứ cùng z-index thì thứ đứng sau trong DOM vẽ đè, mà `::before` luôn
đứng trước. Không cần đặt z-index cho ai cả. */
}
/* Chữ trên biển bó 200px là hợp ở khổ máy tính (biển rộng 411px). Ở tablet biển
còn 249px trước khi đổi sang 2 cột, và ở điện thoại biển rộng 366px — cùng một
con số 200px cho ba khổ là chữ khi thì chật khi thì thừa chỗ. */
@media (max-width: 1024px) {
.wmd-promo .ub-heading, .wmd-promo .ub-text { max-width: 64% }
}
@media (max-width: 620px) {
.wmd-promo .ub-heading, .wmd-promo .ub-text { max-width: 66% }
/* Cân dòng thay vì nới thêm bề ngang. Ở 366px, "Tăng cường sức đề kháng" cần
235px mà chỗ trống chỉ 220px, nên nó rớt chữ cuối xuống một dòng riêng. Nới
tiếp thì chữ chạy qua chỗ mấy lọ thuốc (dải mờ đã trong suốt từ 72%), nên
để trình duyệt chia lại cho hai dòng đều nhau. */
.wmd-promo .ub-heading { text-wrap: balance }
/* Dải mờ kéo dài hơn ở khổ hẹp: chữ chiếm tỉ lệ lớn hơn trên khung nhỏ. */
.wmd-promo::before {
background: linear-gradient(
90deg,
var(--wmd-scrim, #E9F4EC) 0%,
var(--wmd-scrim, #E9F4EC) 38%,
color-mix(in srgb, var(--wmd-scrim, #E9F4EC) 55%, transparent) 56%,
transparent 72%
)
}
}
/* Vùng bấm trên điện thoại. Đo ở 414px: nút "Mua ngay" của biển cao 39px và mỗi
liên kết chân trang cao 18px — hai liên kết cạnh nhau chỉ cách tâm 27px, ngón
tay bấm nhầm dòng bên cạnh là chuyện thường. Nới bằng padding chứ KHÔNG tăng cỡ
chữ: cỡ chữ đổi thì tỉ lệ khác ảnh mẫu, còn padding chỉ nới chỗ bấm.
⚠️ Mốc là 1024px chứ KHÔNG phải 620px. Thoạt nghĩ "chỉ điện thoại mới bấm bằng
ngón tay" nên lúc đầu đặt ở 620 — đo lại thì ở 834px nút menu ba gạch
(`hdnt-hdr-burger`) ĐÃ hiện, tức theme nền coi khổ ấy là thiết bị chạm, mà liên
kết chân trang lúc đó vẫn cao 18px. Máy tính bảng rơi đúng vào khe giữa hai mốc.
Ở khổ máy tính thì vẫn để nguyên: chuột bấm chính xác, mà chân trang 5 cột giãn
dòng ra là vỡ bố cục đã đo khớp ảnh mẫu. */
@media (max-width: 1024px) {
.wmd-promo .ub-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center
}
/* ⚠️ Ô bấm 42px là mốc đầu; chủ site xem ở khổ 390px rồi báo *"giảm bớt
khoảng cách các dòng"* — đo lúc ấy: `
` cao 42px + `gap` 9px = **51px một
dòng**, năm dòng liên kết chiếm 255px, chân trang dài lê thê.
Nay hạ theo hai nấc chứ không bỏ hẳn ô bấm: `padding-block` 12 → 8 (ô còn
34px) và `gap` 9 → 4. Nhịp dòng 51px → 38px, gọn 25%. Cắt `gap` là phần
RẺ NHẤT vì khoảng ấy không bấm được — bỏ nó không mất tí diện tích bấm nào,
trong khi cắt `padding` thì mất. Vì thế cắt `gap` sâu (9→4) và `padding`
nông (12→8). Hai ô liền nhau chỉ cách 4px nên vùng bấm gần như liền mạch. */
.wmd-foot-links .ub-links-a { padding-block: 8px }
/* ⚠️ `gap` KHÔNG sửa được ở đây — xem khối cùng tên ở CUỐI tệp. */
/* ⚠️ Vòng danh mục: giữ NGUYÊN 4 cột, chỉ bó tấm ảnh nhỏ lại.
Đo ở 390px: ô rộng 71px và ảnh chiếm trọn 71px ấy, nên tên danh mục dài
("Vitamin & Khoáng chất") gãy hai dòng ép sát vào ảnh — cả dải cao 306px.
Hạ số cột xuống 2 thì ảnh lại to gấp đôi, ngược hẳn ý. Bó ảnh còn 54px và
căn giữa trong ô thì tên có chỗ thở mà lưới không đổi. */
.wmd-cats-circle .ub-cat img {
max-width: 54px;
margin-inline: auto
}
}
/* ---------------------------------------------------------------------------
Ô tìm kiếm trên đầu trang
⚠️ Luật này KHÔNG bó trong lớp `wmd-*`, khác quy ước ghi ở đầu tệp — cố ý, và
đây là ngoại lệ DUY NHẤT. Quy ước ấy sinh ra vì một luật trần kiểu
`.ub-cat img{…}` sẽ đổi dáng MỌI dải danh mục trên site, kể cả trang chủ site
không dựng bằng giao diện này. Đầu trang thì chỉ có MỘT, và ô tìm kiếm chỉ
hiện lên vì chính giao diện này bật nó trong `design.json`; gỡ child ra là cả
luật lẫn ô đều biến mất cùng lúc. Không có cách gắn lớp riêng: đầu trang do
theme nền dựng, không đi qua cây trang nên không có ô "Lớp CSS thêm".
Ảnh mẫu để ô tìm kiếm chiếm hẳn khoảng giữa; mặc định của nền là viên thuốc
nhỏ cao 40px nằm lọt thỏm.
--------------------------------------------------------------------------- */
/* ⚠️ Phải nới VÙNG CHỨA trước, không thì `width` trên chính ô là vòng luẩn quẩn:
ô rộng theo cha (`100%`), mà cha lại là ô flex co theo nội dung nên rộng theo
con — đo ra cả hai cùng đứng ở 236px, đặt `min(520px, 100%)` cũng không nhúc
nhích. Nhắm bằng `:has()` để chỉ trúng vùng ĐANG chứa ô tìm kiếm: lớp
`.hdnt-hz--main` là tên HÀNG chứ không phải tên vùng, cho cả ba vùng giãn thì
logo và cụm nút bên phải cũng giãn theo. */
.hdnt-hdr-row .hdnt-hz:has(.hdnt-hdr-sbox) { flex: 1 1 auto; justify-content: center }
.hdnt-hdr-sbox {
width: 100%;
max-width: 520px;
height: 46px;
padding-inline: 18px;
border-radius: 10px;
background: #fff;
border: 1.5px solid var(--accent, #1F9D55)
}
.hdnt-hdr-sbox input { width: 100% }
/* Bốn ô cam kết trong dải bìa: kéo lại gần nhau.
Bốn cột span="3" trải hết bề ngang cột chữ (624px ở 1440), nên mỗi ô rộng
156px và icon căn giữa trong đó — khoảng trống giữa hai icon nhìn ra rất xa
dù ô "Khoảng cách" mới có 26px. Bó bề ngang của HÀNG thay vì giảm khoảng
cách: giảm gap chỉ ăn 26px, còn phần thừa nằm ở chính bề rộng mỗi cột.
⚠️ Chỉ ở khổ máy tính. Từ 1024px xuống bốn ô đã xếp 2×2 trong nửa trái (xem
khối "chữ đè lên mấy lọ thuốc" ở trên), bó thêm nữa là chữ vỡ dòng. */
@media (min-width: 1025px) {
.wmd-usp { max-width: 500px }
/* Bó hẹp lại thì "Ưu đãi hấp dẫn" rớt chữ cuối xuống một dòng riêng — chữ trong
ô cam kết xuống dòng TỰ NHIÊN chứ không theo dấu xuống dòng gõ trong ô tiêu
đề, nên ba ô kia trông đúng ý chỉ là trùng hợp. Để trình duyệt chia lại. */
.wmd-usp .ub-ibox-t { text-wrap: balance }
}
/* ---------------------------------------------------------------------------
Khối hotline trên đầu trang (ô "HTML 2" của Header Builder)
Hai dòng chữ đều là chữ THẬT trong `design.json`, không phải `content:""` —
xem chú thích trong tệp ấy. Ở đây chỉ lo phần nhìn.
⚠️ Icon vẽ bằng `mask-image` với SVG data-URI chứ không nhúng thẻ `