/**
 * Luxury Spa & Beauty — CSS riêng của giao diện.
 *
 * Nạp SAU `ub.css` (khai phụ thuộc ở `wmd_css()`), nên mọi luật ở đây chỉ cần
 * đúng độ đặc hiệu là thắng — KHÔNG dùng `!important`: ô "CSS riêng" của chủ
 * site nạp sau cùng, `!important` ở đây là khoá luôn đường sửa của họ.
 *
 * Bảng màu lấy từ chính bản thiết kế (lấy màu điểm ảnh, không ước lượng):
 *   #C05270 hồng thương hiệu · #A8455E hồng đậm · #7A2233 nâu rượu (tiêu đề)
 *   #C9A227 vàng logo · #FDF4EF kem nền · #2A2E39 nền chân trang
 * Mã màu viết THẲNG chứ không qua biến — bộ đổi màu của Tuỳ biến
 * (`hdnt_st_scan_file()`) chỉ quét được mã hex trong tệp CSS.
 *
 * ⚠️ Mọi luật dưới đây phải bám vào một lớp `wmd-*` mà cây trang THẬT SỰ mang.
 * Đặt tên lớp không phải là viết CSS — lớp không ai gắn thì đây chỉ là dòng
 * chết, không lỗi, không cảnh báo.
 */

/* ---------------------------------------------------------------------------
   THANH TRÊN CÙNG — địa chỉ · giờ mở cửa
--------------------------------------------------------------------------- */

.wmd-tb {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.wmd-tb svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: #C05270;
}

.wmd-tb-sep {
	display: inline-block;
	width: 1px;
	height: 15px;
	margin: 0 16px;
	background: #E3D4CC;
	vertical-align: middle;
}

/* ⚠️ Giấu bằng `display:none` chứ không thu nhỏ chữ: hai mẩu này nằm CÙNG một ô
   HTML nên không tách ra hai phần tử để dùng công tắc "Ẩn trên" của đầu trang
   được — mà để cả hai trên màn 390px thì thanh trên tràn ngang. */
@media (max-width: 1023.98px) {
	.wmd-tb-gio,
	.wmd-tb-sep {
		display: none;
	}
}

/* ⚠️ Dưới 768px thì ẨN HẲN thanh trên cùng, đừng để lại vệt màu rỗng. Nền giấu
   ô HTML của thanh này bằng lớp `hidden md:flex` của Tailwind, và dải mạng xã
   hội cũng không in ra ở khổ ấy — đo tại 390px: thanh vẫn cao 36px trong khi
   MỌI phần tử con đều 0×0. Nhìn ra là một dải màu nâu rượu không chứa gì, mà
   đọc mã thì không thấy gì sai vì chính nền mới là chỗ ẩn nội dung. */
@media (max-width: 767.98px) {
	.hdnt-topbar {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   BÌA
--------------------------------------------------------------------------- */

/* Ảnh bìa để trống nửa trái cho chữ.
 *
 * ⚠️ **KHÔNG khai `background-position` ở đây — luật ấy KHÔNG BAO GIỜ THẮNG.**
 * Dải nào có ảnh nền thì `hdnt_ub_render_section()` in thẳng
 * `background-position` vào thuộc tính `style` của thẻ, mà style nội tuyến hơn
 * mọi luật trong tệp CSS; muốn đè chỉ còn `!important`, thứ bị cấm ở đây vì nó
 * khoá luôn ô "CSS riêng" của chủ site.
 *
 * Bản đầu khai `right center` kèm chú thích *"neo giữa thì ở khổ hẹp khuôn mặt
 * bị cắt mất một nửa"* — nghe hợp lý, và là DÒNG CHẾT: đo trên trang thật thấy
 * thẻ mang `background-position:center`. Tệ hơn cả vô hại, vì nó mô tả một hành
 * vi không có thật cho người đọc sau.
 *
 * Và ô `bg_pos` của trình dựng chỉ có `center` · `top` · `bottom` — KHÔNG có lựa
 * chọn ngang nào. Nên cách duy nhất để chừa chỗ cho chữ là DỰNG SẴN trong chính
 * tấm ảnh: chủ thể lệch phải, khoảng một phần ba bên trái để trống.
 */
.wmd-hero {
	background-size: cover;
	background-repeat: no-repeat;
}

/* Hai dòng chữ viết tay của bản thiết kế. Không có phông script trong gói nên
   dựng bằng nghiêng + giãn chữ — gần với bản vẽ mà không phải kéo thêm một
   tệp phông về (mỗi phông web là một lượt tải chặn hiển thị). */
.wmd-script {
	font-style: italic;
	letter-spacing: .01em;
}

.wmd-h1 {
	letter-spacing: .04em;
}

.wmd-h1b {
	letter-spacing: .10em;
}

/* Ở khổ điện thoại, ảnh người lấn vào chỗ chữ nên phủ một lớp cùng tông nền.
   Gói chỉ đóng MỘT tấm bìa nên không đổi ảnh khác được.
   ⚠️ Đừng làm dày quá: đo bằng cách chụp màn hình rồi lấy màu điểm ảnh thật —
   phủ dày tới mức nền phẳng lì là ảnh bìa biến mất hẳn, và chủ site đọc ra
   "trang này không có ảnh bìa". Bài học từ gói DentaCare.

   ⚠️ **LỚP PHỦ NÀY KHÔNG DƯ, ĐỪNG GỠ.** Nó trông y hệt lớp phủ NGANG cho khổ máy
   tính bảng từng nằm ngay dưới đây — mà lớp kia đã gỡ ngày 19/08/2026 vì ảnh bìa
   mới (chủ thể lệch phải) không cần nữa. Hai cái NHÌN giống nhau, số đo ngược hẳn.

   Đo trên ảnh bìa hiện tại — ẩn chữ, lấy màu điểm ảnh THẬT ngay sau từng đoạn,
   tính tỉ số WCAG, rồi lấy giá trị THẤP NHẤT trong bảy đoạn chữ của bìa:

                     CÓ phủ      KHÔNG phủ
       390px        5,89:1        2,26:1   ← trượt nặng
       414px        5,88:1        2,34:1   ← trượt nặng
       560px        6,76:1        3,99:1   ← trượt
       620px        6,72:1        3,99:1   ← trượt

   Chỗ trượt là khối USP ở ĐÁY bìa ("100%" · "Không gian" · "Chuyên viên" và ba
   nhãn phụ 13px dưới chúng) — nằm sát mép dưới khung cắt, đúng vào vai người và
   tán lá. KHÔNG phải mấy dòng tiêu đề. Ai chỉ nhìn tiêu đề rồi kết luận "chữ vẫn
   đọc rõ" sẽ gỡ nhầm.

   ⚠️ Và phải đo ĐỦ CẢ 11 ĐOẠN CHỮ của bìa. Bản đo đầu chỉ lấy 5 đoạn tiêu đề +
   mô tả, bỏ sót đúng ba nhãn phụ 13px — tức bỏ sót chính ca xấu nhất, rồi báo
   "mọi khổ đều đạt". Tập chữ thiếu thì con số đẹp mà kết luận sai.

   Lớp phủ tablet (621–1023px) thì gỡ được, vì đo ra chỉ hơn 0,18 (6,33 so với
   6,15) — gần như không làm gì. Cùng một phép đo, hai kết luận trái ngược: đừng
   suy cái này ra từ cái kia, hãy đo lại. */
@media (max-width: 620px) {
	.wmd-hero {
		position: relative;
	}

	.wmd-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(253, 244, 239, .93) 0%, rgba(253, 244, 239, .84) 54%, rgba(253, 244, 239, .34) 100%);
	}

	.wmd-hero > * {
		position: relative;
		z-index: 1;
	}
}

/* Ba ô ưu điểm dưới nút bìa.
 *
 * ⚠️ Ba NHÃN PHỤ 13px dưới mỗi tiêu đề khai `color="#463F44"` trong `home.txt`,
 * KHÔNG phải `#6B6067` như chữ phụ ở các dải khác. Cố ý — và đây là chỗ ghi lý
 * do, vì tệp cây trang không mang chú thích được.
 *
 * Chúng là chữ THƯỜNG 13px nên ngưỡng AA là 4,5:1, mà lại nằm THẤP NHẤT trong
 * khung cắt bìa: từ 620 đến 1023px, cột USP thứ ba rơi đúng vào tán lá và mặt
 * nước (đo màu nền thật: `#c1b58c` … `#c9b892`). Với `#6B6067` tương phản tụt
 * còn 2,94–3,99:1 — trượt ở TÁM trên mười một khổ đã đo. `#463F44` kéo ca xấu
 * nhất lên 4,65:1, đạt ở cả 11 khổ từ 390 đến 1440.
 *
 * ⚠️ ĐỪNG chữa bằng cách phủ thêm một lớp lên ảnh. Lớp phủ ngang cho tablet đã
 * thử và KHÔNG cứu được chỗ này: nó tắt dần trước 62% bề ngang, mà cột USP thứ
 * ba đứng quanh 60% — đúng chỗ nó vừa hết tác dụng. Đổi màu chữ rẻ hơn, và
 * không làm mờ ảnh bìa.
 */
.wmd-usp .ub-ibox-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.3;
}

/* ⚠️ ICON PHẢI CĂN TRÁI CHO THẲNG VỚI CHỮ — nền KHÔNG tự làm việc này.
 *
 * Ô đã khai `talign="left"` và trình dựng có in ra lớp `ub-ct-left`, nhưng
 * `ub.css` chỉ có luật cho hai lớp kia:
 *
 *     .ub-ibox--top.ub-ct-center .ub-ibox-i { margin-inline: auto }
 *     .ub-ibox--top.ub-ct-right  .ub-ibox-i { margin-left: auto }
 *
 * — KHÔNG có luật nào cho `ub-ct-left`. Mà `.ub-ibox-i` là `display: grid` +
 * `place-items: center`, còn `.ub-ibox--top` là flex CỘT nên trục ngang là trục
 * NGANG-CHÉO, mặc định `stretch`: khung icon giãn hết bề ngang cột (đo được
 * 195px ở khổ 1440) rồi `place-items` đặt icon 26px vào GIỮA khoảng ấy.
 *
 * Nhìn ra là icon căn giữa còn chữ căn trái — trong khi cây trang khai cả hai
 * cùng `left`. Không có lỗi, không có cảnh báo, và không có ô nào trong trình
 * dựng chỉnh được: `ialign` chỉ là căn DỌC, và chính nó ghi "chỉ dùng khi icon
 * nằm bên trái hoặc phải".
 *
 * ⚠️ Đây là thiếu sót của NỀN, không riêng gói này — mọi Icon Box `pos="top"` +
 * `talign="left"` đều dính. Vá ở đây vì sửa `ub.css` là đổi giao diện của mọi
 * site đang chạy; muốn vá tận gốc thì thêm một luật `ub-ct-left` vào nền và
 * chấp nhận điều đó.
 *
 * Dùng `justify-items` chứ không `align-self`: nó chỉ đổi chỗ đặt icon TRONG
 * khung, giữ nguyên khung và mọi phép tính bề rộng khác. */
.wmd-usp .ub-ibox--top.ub-ct-left .ub-ibox-i {
	justify-items: start;
}

/* ---------------------------------------------------------------------------
   DẢI "VỀ LUXURY SPA & BEAUTY"
--------------------------------------------------------------------------- */

/* Bốn điểm mạnh, icon nằm BÊN TRÁI chữ.
 *
 * ⚠️ Cố ý dùng `pos="left"` chứ không `pos="top"` như dải USP ở bìa: với
 * `pos="top"` thì khung icon giãn hết bề ngang cột rồi `place-items: center`
 * đẩy icon vào giữa, và nền KHÔNG có luật nào cho `ub-ct-left` để kéo về (xem
 * khối cảnh báo ở `.wmd-usp`). `pos="left"` không đi qua đường ấy nên không cần
 * vá — và với danh sách điểm mạnh thì icon cạnh chữ vốn cũng là dáng đúng. */
.wmd-ab-diem .ub-ibox-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.35;
}

/* Ảnh nổi nhẹ khỏi nền kem. Bóng RẤT nhạt: nền `#FDF4EF` vốn đã ấm, bóng đậm
   làm cả cụm ảnh trông như dán đè lên trang. */
.wmd-ab-lon {
	box-shadow: 0 18px 40px rgba(122, 34, 51, .10);
}

.wmd-ab-nho {
	box-shadow: 0 10px 24px rgba(122, 34, 51, .08);
}

/* ⚠️ `[ub_image]` của ba tấm này KHÔNG khai `ratio` — cố ý. Ô ấy chỉ có sáu tỉ
   lệ dựng sẵn (1:1 · 4:3 · 3:2 · 16:9 · 21:9 · 3:4), mà ảnh chủ site cắt là
   900×700 (1,286) và 500×400 (1,25) — không trùng cái nào. Khai `4-3` cho
   "gần đúng" là trình duyệt cắt bớt vài chục pixel mỗi mép, tức là cắt lại thứ
   họ đã cắt xong. Bỏ trống thì ảnh hiện đúng khuôn gốc. */

/* ---------------------------------------------------------------------------
   TIÊU ĐỀ CÓ DÒNG NHỎ Ở TRÊN
--------------------------------------------------------------------------- */

/* Dòng nhỏ phía trên tiêu đề là chữ viết tay nghiêng, không phải chữ hoa nhỏ
   như mặc định của khối. */
.wmd-eb .ub-eyebrow {
	font-style: italic;
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 639.98px) {
	.wmd-eb .ub-eyebrow {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
   THẺ DỊCH VỤ
--------------------------------------------------------------------------- */

.wmd-svc .ub-imgbox-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.35;
}

.wmd-svc .ub-imgbox-x {
	color: #7B7178;
	line-height: 1.7;
}

/* Dòng "Xem chi tiết →" — chỉ là chữ gợi ý, liên kết nằm ở tiêu đề thẻ.
 *
 * ⚠️ Cỡ chữ · màu nằm TRÊN chính phần tử `[ub_text]`, không ở đây. Đó là cả lý
 * do dời dòng này ra làm phần tử con: người mua mở trình dựng là thấy và sửa
 * được. Chép lại chúng xuống đây là dựng hai nguồn sự thật cho một dòng chữ —
 * đúng cách màu của gói NhiCare đã lọt sang gói DentaCare.
 *
 * ⚠️ Bó chiều ngang phải bằng `align-self`, KHÔNG bằng `display: inline-block`.
 * `.ub-imgbox-b` là hộp flex, mà flex BLOCK HOÁ display của con: khai
 * `inline-block` thì trình duyệt tính ra `block` và dòng chữ vẫn kéo hết bề
 * ngang cột. Không lỗi, không cảnh báo, chỉ là một dòng CSS chết.
 *
 * ⚠️ Và KHÔNG đặt ô `mt` cho nó: đây là phần tử con CUỐI trong Ô ảnh, mà
 * `ub.css` có luật `.ub-imgbox-b > :last-child:not(:first-child){margin-top:
 * auto}` với độ đặc hiệu (0,3,0) — cao hơn `.ub-rd-mt.ub-rd-mt` (0,2,0) nên ô
 * `mt` trơ hoàn toàn (việc #43). `auto` đẩy dòng chữ xuống đáy thẻ, mọi thẻ
 * thẳng hàng dù mô tả dài ngắn khác nhau — giữ đúng hành vi ấy. */
.wmd-more {
	align-self: center;
}

.wmd-svc:hover .wmd-more {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   DẢI ƯU ĐÃI THÁNG NÀY
--------------------------------------------------------------------------- */

.wmd-uudai {
	overflow: hidden;
}

/* Ảnh dán sát mép trái thẻ, không chừa lề — đúng bản thiết kế. */
.wmd-uudai-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wmd-giam {
	letter-spacing: .01em;
}

/* Hộp đếm ngược: nền hồng đậm, các ô số nền trắng. */
.wmd-dem {
	background: #A8455E;
	border-radius: 16px;
	padding: 22px 18px;
}

.wmd-dem .ub-cd-u {
	color: #F6DDE3;
	letter-spacing: .06em;
}

@media (max-width: 767.98px) {
	.wmd-dem {
		padding: 18px 14px;
	}
}

/* ⚠️ Ô `gap` của hàng để 0 — CỐ Ý, để ảnh dán sát mép thẻ. Nhưng dưới 620px ba
 * cột XẾP DỌC, và lúc ấy `gap` là khoảng cách DỌC: nút "Đặt lịch ngay" dính
 * đúng vào hộp đếm ngược, không một pixel nào ở giữa. Nay hàng khai thêm
 * `gap_sm="22"` (đo được: 0px → 22px ở mọi khổ ≤620px, và KHÔNG đổi gì ở khổ
 * rộng hơn — trên 620px ba cột nằm ngang nên `gap` dọc không tham gia).
 *
 * `gap` chỉ chen giữa các ô lưới, KHÔNG tạo lề ở MÉP thẻ — nên hộp đếm ngược
 * vẫn chạm cả ba cạnh (đo: trái 0px · phải 0px · đáy 0px). Phần dưới đây lo nốt.
 *
 * ⚠️ Chỉ chừa lề cho hai cột NỘI DUNG, bỏ qua cột ảnh (`:first-child`): thêm lề
 * cho ảnh là mất luôn kiểu ảnh tràn mép mà `overflow: hidden` + bo góc 20px của
 * thẻ đang dựng nên. Đo lại sau khi vá: ảnh vẫn lệch mép thẻ 0px.
 */
@media (max-width: 620px) {
	.wmd-uudai > .ub-col:not(:first-child) {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wmd-uudai > .ub-col:last-child {
		padding-bottom: 22px;
	}
}

/* ---------------------------------------------------------------------------
   LÝ DO KHÁCH HÀNG TIN CHỌN
--------------------------------------------------------------------------- */

.wmd-ly .ub-ibox-t {
	color: #3D3A3F;
	font-weight: 700;
	line-height: 1.4;
}

/* Vạch ngăn giữa các ô, không có ở ô đầu mỗi hàng. */
@media (min-width: 768px) {
	.wmd-vs > .ub-col + .ub-col {
		border-left: 1px solid #EDDCD6;
	}
}

/* ---------------------------------------------------------------------------
   CẢM NHẬN KHÁCH HÀNG
--------------------------------------------------------------------------- */

.wmd-say .ub-quote {
	background: #FFFFFF;
	border: 1px solid #F0E2DD;
	border-radius: 16px;
}

/* ---------------------------------------------------------------------------
   BẢNG GIÁ (trang Ưu đãi)
--------------------------------------------------------------------------- */

.wmd-gia .ub-ibox-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   THẺ DỊCH VỤ NGANG (trang Dịch vụ)
--------------------------------------------------------------------------- */

.wmd-dv2 .ub-imgbox-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.35;
}

.wmd-dv2 .ub-imgbox-x {
	color: #6B6067;
	line-height: 1.75;
}

/* ---------------------------------------------------------------------------
   TIN TỨC
--------------------------------------------------------------------------- */

.wmd-news .ub-post-t {
	color: #7A2233;
	font-weight: 700;
	line-height: 1.45;
}

/* ⚠️ KHÔNG để "XEM THÊM →" rơi về `var(--accent)` của ub.css. Accent của gói
   này là #C05270, và ở 14px thường nó chỉ được 4,49:1 trên nền thẻ trắng —
   THIẾU 0,01 so với ngưỡng AA 4,5:1. Đo bằng công thức WCAG chứ đừng ước
   lượng bằng mắt: hai màu hồng này nhìn gần như nhau mà một cái đạt, một cái
   không. #A8455E (chính là `gold2` của gói, khối đếm ngược đã dùng) cho
   5,71:1. Cùng lý do với sáu chữ "Xem chi tiết →" ở thẻ dịch vụ. */
.wmd-news .ub-post-more {
	color: #A8455E;
}

/* ⚠️ Không bài nào đủ điều kiện thì `[ub_posts]` trả về CHUỖI RỖNG, và thứ còn
   lại trên trang là một cái tiêu đề đứng trơ giữa khoảng trắng — đúng lỗi dải
   "Sản phẩm nổi bật" của trang chủ mặc định đã vấp. Bộ gieo của gói chạy ở
   priority 11, tức SAU lượt nhập ảnh (10), nên bốn bài news-1..4 luôn có ảnh
   đại diện; nhưng nếu lượt nhập hỏng sạch thì cửa sổ ấy vẫn mở.
   `:not(:has(.ub-ph))` là để CHỪA bản xem trước của trình dựng: ở đó lưới rỗng
   in ra ô giữ chỗ `.ub-ph` chứ không phải chuỗi rỗng, ẩn đi thì chủ site mất
   luôn chỗ bấm vào sửa. Trình duyệt không hiểu `:has()` thì rơi về hành vi cũ
   (vẫn hiện) — hỏng theo hướng an toàn. */
.wmd-tt:not(:has(.ub-posts)):not(:has(.ub-ph)) {
	display: none;
}

/* ---------------------------------------------------------------------------
   DẢI ĐĂNG KÝ NHẬN ƯU ĐÃI
--------------------------------------------------------------------------- */

.wmd-nl {
	background: #BA576C;
}

/* ---------------------------------------------------------------------------
   CHÂN TRANG
--------------------------------------------------------------------------- */

/* Địa chỉ dài hơn bề ngang cột thì phải xuống dòng, không được đẩy giãn cột. */
.wmd-foot-links .ub-links-a {
	overflow-wrap: anywhere;
}

.wmd-foot-map iframe {
	filter: saturate(.9);
}

.wmd-foot-end {
	border-top: 1px solid rgba(255, 255, 255, .14);
}