/**
 * NhiCare — CSS riêng của giao diện.
 *
 * ⚠️ KHÔNG dùng `!important` ở bất cứ đâu: ô "CSS riêng" trong Tuỳ biến nạp SAU
 * tệp này, và chủ site phải đè được mọi thứ ở đây mà không phải leo thang.
 *
 * ⚠️ Mọi quy tắc 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 — dòng "Vì nụ cười & sức khỏe của bé yêu"
--------------------------------------------------------------------------- */

.wmd-tb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wmd-tb svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: #FF5B6B;
}

/* ---------------------------------------------------------------------------
   BÌA LỚN
   ---------------------------------------------------------------------------
   ⚠️ Ảnh bìa là MỘT tấm rộng, phần bên phải là bác sĩ và bé, phần bên trái để
   trống cho chữ. Vì thế phải `background-size: cover` và neo về bên PHẢI: neo
   giữa thì ở khổ hẹp khuôn mặt bị cắt mất một nửa. */

.wmd-hero {
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

/* Ở khổ điện thoại, ảnh người lấn vào chỗ chữ nên làm mờ bớt bằng một lớp phủ
   cùng tông nền. Không dùng ảnh khác vì gói chỉ đóng một tấm bìa. */
@media (max-width: 620px) {
	.wmd-hero {
		position: relative;
	}

	.wmd-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(236, 243, 253, .92) 0%, rgba(236, 243, 253, .74) 62%, rgba(236, 243, 253, .5) 100%);
	}

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

/* Ba dòng cam kết dưới nút: dấu tích xanh, chữ nhỏ, không xuống dòng lẻ. */
.wmd-cam .ub-ibox-t {
	font-weight: 600;
	color: #33465F;
	line-height: 1.4;
}

.wmd-cam .ub-ibox-i {
	color: #22A06B;
}

/* ---------------------------------------------------------------------------
   THANH 6 DỊCH VỤ NỔI TRÊN BÌA
--------------------------------------------------------------------------- */

.wmd-svcbar .ub-ibox-t {
	color: #0B2E6B;
	font-weight: 700;
	line-height: 1.35;
}

/* Vạch ngăn giữa các ô — chỉ giữa, không có ở ô đầu. Dùng viền trái thay vì
   `::before` để không phải lo thứ tự vẽ. */
@media (min-width: 621px) {
	.wmd-svcbar > .ub-col + .ub-col {
		border-left: 1px solid #E8EEF9;
	}
}

@media (max-width: 620px) {
	.wmd-svcbar > .ub-col {
		padding-bottom: 14px;
	}

	.wmd-svcbar > .ub-col:nth-child(n + 4) {
		border-top: 1px solid #E8EEF9;
		padding-top: 14px;
	}
}

/* ---------------------------------------------------------------------------
   VÌ SAO CHỌN — ảnh phòng khám + nút phát
   ---------------------------------------------------------------------------
   ⚠️ Nút phát phải nằm TRÊN ảnh. `.ub-image-media` mang `position: relative`
   nên nó vẽ đè lên `::before` cùng tầng z — đã vấp ở gói DentaCare: vòng tròn
   trắng biến mất hoàn toàn, chỉ còn mũi tên. Cho cả hai lớp giả một `z-index`
   rõ ràng thay vì trông chờ thứ tự mặc định. */

.wmd-play {
	position: relative;
}

.wmd-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 8px 26px rgba(11, 46, 107, .22);
	z-index: 2;
	pointer-events: none;
}

.wmd-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -11px 0 0 -6px;
	border-left: 18px solid #1F5FD0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	z-index: 3;
	pointer-events: none;
}

/* Bốn ô điểm mạnh: nền trắng, viền nhạt, chữ mô tả mờ. */
.wmd-why {
	background: #FFFFFF;
	border: 1px solid #E8EEF9;
	border-radius: 14px;
	padding: 16px 14px;
}

.wmd-why .ub-ibox-t {
	color: #0B2E6B;
	font-weight: 700;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   THẺ DỊCH VỤ + THẺ BÁC SĨ
--------------------------------------------------------------------------- */

.wmd-svc .ub-imgbox-t,
.wmd-bs .ub-imgbox-t {
	color: #0B2E6B;
	font-weight: 700;
	line-height: 1.35;
}

.wmd-svc .ub-imgbox-x {
	color: #7A8AA6;
}

/* Dòng "Tìm hiểu thêm" — chỉ là chữ gợi ý, liên kết nằm ở tiêu đề thẻ.
 *
 * ⚠️ Cỡ chữ · màu · khoảng cách trên nay 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ữ — mà lần trước đúng kiểu ấy đã để lọt màu của gói
 * này sang gói DentaCare.
 *
 * Chỉ giữ hai thứ thuộc tính không diễn đạt nổi: bó chiều ngang theo chữ (để
 * gạch chân không kéo hết bề ngang cột) và hiệu ứng khi rê chuột.
 *
 * ⚠️ 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 — đo được 271px trên 303px, tức gạch chân lúc rê chuột chạy suốt
 * thay vì ôm lấy chữ. Không lỗi, không cảnh báo, chỉ là một dòng CSS chết. */
.wmd-more {
	align-self: flex-start;
}

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

/* Thẻ bác sĩ: tên xanh đậm, chuyên khoa mờ.
 *
 * ⚠️ Dòng "N+ năm kinh nghiệm" TỪNG nằm ở đây dưới lớp `.wmd-yr`, và nó ĐÃ HỎNG
 * lặng lẽ trên site thật. Nguyên do không nằm ở CSS: nó được viết thành HTML
 * NHÚNG TRONG giá trị thuộc tính —
 *
 *     text="Chuyên khoa Nhi tổng quát
 *     <span class='wmd-yr'>15+ năm kinh nghiệm</span>"
 *
 * — mà bất kỳ ai chuẩn hoá dấu nháy cũng phá được nó. `wp_kses_hair()` luôn in
 * lại thuộc tính HTML bằng nháy KÉP, nên sau MỘT lượt lưu qua kses chuỗi thành
 * `class="wmd-yr"`; `shortcode_parse_atts()` gặp dấu nháy kép ấy là đóng giá
 * trị sớm, và khoá `text` KHÔNG CÒN TỒN TẠI. Đo được: bốn thẻ bác sĩ chỉ còn
 * mỗi cái tên — mất cả chuyên khoa lẫn số năm — không lỗi, không cảnh báo.
 *
 * Nay số năm là phần tử con `[ub_text]` mang sẵn cỡ chữ và màu của nó, nên
 * không còn lớp `.wmd-yr` và cũng không còn luật CSS nào ở đây. Đừng dựng lại:
 * người mua sửa được phần tử con ngay trong trình dựng, còn HTML giấu trong
 * chuỗi thuộc tính thì họ không thấy và không sửa nổi. */
.wmd-bs .ub-imgbox-x {
	color: #7A8AA6;
}

/* ---------------------------------------------------------------------------
   CẢM NHẬN PHỤ HUYNH
--------------------------------------------------------------------------- */

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

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

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

/* ---------------------------------------------------------------------------
   DẢI MỜI ĐẶT LỊCH — nền có hình khủng long
   ---------------------------------------------------------------------------
   ⚠️ Ảnh nền là dải rất dẹt (1600x234) với hai con khủng long ở HAI MÉP. Phải
   `cover` + neo giữa: `contain` thì ở khổ rộng ảnh không phủ hết chiều cao và
   lòi nền xanh trơn thành hai vệt.

   ⚠️ Đây là THẺ BO GÓC nằm gọn giữa trang, KHÔNG phải dải chạy suốt bề ngang.
   Ô "Bề ngang" của khối Dải (`width="wrap"`) chỉ bó phần NỘI DUNG
   (`.ub-section-in`) — cái hộp của chính dải vẫn trải hết khung nhìn, nên nền
   và bo góc chạy ra tận mép và không ai thấy góc bo. Đo bản trước ở 1440px:
   dải 0→1440, `border-radius: 20px` có mà vô hình.

   ⚠️ Và hệ quả nặng hơn: chữ bắt đầu ở x=84, tức ĐÈ LÊN con khủng long xanh
   (nó chiếm ~11% mép trái của ảnh nền). Chủ site gửi ảnh so sánh với bản
   thiết kế và chỉ đúng chỗ này.

   Cách sửa: bó chính cái dải bằng `max-width` + `margin-inline: auto`, rồi đẩy
   nội dung vào giữa và chừa lề trong cho hai con khủng long. */

/*
 * ⚠️ `margin-bottom` là BẮT BUỘC, không phải trang trí. Đây là dải CUỐI trang,
 * mà chân trang không có lề trên — nên mép dưới của thẻ chạm đúng mép chân
 * trang (đo được khe = 0px ở cả 1440 · 834 · 390) và hai góc bo dưới bị nền
 * chân trang nuốt mất. Nhìn ra thì thấy ngay "thẻ dính sát chân trang", nhưng
 * đọc mã thì không: `border-radius` vẫn khai đủ, `pb` vẫn có.
 *
 * ⚠️ Số lấy theo khoảng trắng PHÍA TRÊN thẻ để hai bên cân nhau — 60px và 38px
 * chính là `pb`/`pb_sm` của dải Tin tức ngay trên. Đổi lề dưới của dải ấy thì
 * phải đổi luôn ở đây, bằng không thẻ lệch về một phía.
 *
 * ⚠️ Chỉ NhiCare cần luật này. Dải mời đặt lịch của DentaCare chạy suốt bề
 * ngang (`radius: 0`), nối liền chân trang là đúng — thêm khe vào đó là hở một
 * vệt trắng giữa hai mảng màu.
 */
.wmd-cta {
	max-width: 1320px;
	margin-inline: auto;
	margin-bottom: 60px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 20px;
	overflow: hidden;
}

@media (max-width: 620px) {
	.wmd-cta {
		margin-bottom: 38px;
	}
}

/* Khung nhìn hẹp hơn 1320 thì chừa lề hai bên, đừng để thẻ dính mép màn hình. */
@media (max-width: 1400px) {
	.wmd-cta {
		max-width: calc(100% - 40px);
	}
}

/* Phần nội dung đã nằm trong thẻ rồi thì bỏ lề của bộ bó ngoài, tránh thụt hai lần. */
.wmd-cta > .ub-section-in {
	max-width: none;
	padding-inline: 0;
}

/*
 * ⚠️ `[ub_row]` là CSS GRID, không phải flex — đặt `width` cho cột là vô hiệu.
 * Muốn hai cột co theo nội dung rồi cả cụm đứng giữa (đúng như bản thiết kế:
 * chữ ở giữa, nút ngay bên phải chữ) thì phải đổi hàng sang flex. Đây là nếp
 * đã ghi lại từ cụm ảnh đại diện của gói DentaCare.
 *
 * `padding-inline` là chỗ chừa cho hai con khủng long ở hai mép ảnh nền.
 */
.wmd-cta .ub-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding-inline: 170px;
}

.wmd-cta .ub-row > .ub-col {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
}

/* Chữ căn giữa theo cụm, không dính lề trái như bản trước. */
.wmd-cta .ub-heading,
.wmd-cta .ub-text,
.wmd-cta .ub-btn-wrap {
	text-align: center;
}

/* Khổ hẹp: hai con khủng long bị ảnh `cover` cắt gần hết nên thu lề trong lại,
   nếu giữ 170px thì chữ bị bóp thành từng chữ một. */
@media (max-width: 1024px) {
	.wmd-cta .ub-row {
		padding-inline: 96px;
		gap: 22px;
	}
}

@media (max-width: 620px) {
	.wmd-cta .ub-row {
		padding-inline: 12px;
		gap: 16px;
	}
}

/* Nút trắng trên nền xanh: chữ phải là xanh đậm, không phải trắng-trên-trắng. */
.wmd-cta-btn .ub-btn {
	color: #0053B9;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   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-end {
	border-top: 1px solid rgba(255, 255, 255, .16);
}

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

.wmd-eb .ub-heading-eb {
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   HAI NÚT BÌA Ở KHỔ ĐIỆN THOẠI
   ---------------------------------------------------------------------------
   ⚠️ Hai nút đứng cạnh nhau ở 390px chỉ được 166px mỗi cái, mà nút dài nhất
   cần 219px (chữ 141 + icon 18 + khe 8 + đệm 52) nên chữ xuống hai dòng. Ẩn
   icon là cách bớt 26px mà không ai mất gì: icon ở đây là trang trí, chữ mới
   là nội dung. Phần đệm cắt bằng ô `bpad_sm` trên chính khối, không ở đây.

   ⚠️ Ẩn bằng `display:none` chứ đừng thu nhỏ: icon là phần tử `.kico` dùng
   font icon, thu cỡ chữ về 0 vẫn còn chiếm khe `gap` của nút. */
@media (max-width: 620px) {
	.wmd-hero-btn .ub-btn .kico {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   TRANG BÁC SĨ — lưới 2×2, mỗi ô là một Ô ảnh ảnh-trái
--------------------------------------------------------------------------- */

.wmd-bs2 .ub-imgbox-t {
	color: #0B2E6B;
	font-weight: 800;
	line-height: 1.3;
}

/* Dòng chuyên khoa nằm ở ô "Mô tả" của khối, nên nó là `.ub-imgbox-x`. */
.wmd-bs2 .ub-imgbox-x {
	color: #1F5FD0;
	font-weight: 700;
}

/*
 * ⚠️ Đoạn tiểu sử 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}` — trong hộp
 * flex dọc, `auto` nuốt hết chỗ trống và đẩy đoạn ấy xuống ĐÁY ô. Ảnh cao hơn
 * phần chữ nên kết quả là một khoảng hở lớn giữa dòng chuyên khoa và tiểu sử.
 * Đây chính là việc #43, lần này lộ ra ở Ô ảnh.
 *
 * Luật dưới đây độ đặc hiệu (0,3,0) — BẰNG luật kia — nên thắng nhờ đứng SAU
 * trong thứ tự nạp (design.css nạp sau ub.css). Đổi chỗ hai tệp là hỏng, nên
 * đừng đụng vào `wmd_css()`.
 */
.wmd-bs2 .ub-imgbox-b > :last-child {
	margin-top: 8px;
}