/* Biến màu thương hiệu Diva dùng chung toàn theme con — khai báo 1 lần ở đây,
   giá trị lấy đúng từ bảng màu đã chốt trong docs/diva-rules.md (mục 2:
   var(--diva-primary) dùng cho tiêu đề/section chính; var(--diva-accent-2) dùng cho tab/icon theo
   phản hồi 24/9 mục 3 "Tab + icon dùng màu var(--diva-accent-2) cho rõ nét") — không tự
   bịa mã màu mới, không ghi mã màu rời rạc ở nơi khác khi cần 2 màu này. */
/* Biến màu --diva-* nay được in ở <head> bởi inc/diva-site-settings.php (Tùy biến → Giao diện Diva). */

/* === diva-doctor-section — Figma node 1:237 (redesign 2026-09) === */
/* 4 thẻ xếp dọc, tất cả hiện cùng lúc, thanh avatar trên bấm scroll mượt. */

.diva-doctor-section{padding:28px 0 40px;}

/* ── Tiêu đề ── */
.diva-doctor-section__title-wrap{
    position:relative;text-align:center;padding:0 15px 20px;overflow:hidden;
}
.diva-doctor-section__title-bar{display:none;} /* dải cũ tuyệt đối — thay bằng __hl bám theo chữ */
/* Dải xanh Figma: nằm sau chữ, đậm var(--diva-accent) ở đầu "BÁC SĨ" rồi mờ dần sang phải.
   clone = mỗi dòng (khi xuống dòng) có dải riêng bắt đầu lại từ đầu dòng. */
.diva-doctor-section__hl{
    background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 60px,rgba(var(--diva-accent-rgb),0) 190px) no-repeat;
    padding:3px 0;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.diva-doctor-section__title{position:relative;z-index:1;}
/* Tiêu đề "DỊCH VỤ TIÊU BIỂU" (text UX Builder, nằm trong section chứa .diva-service-section)
   — cùng kiểu dải xanh Figma với tiêu đề Đội ngũ bác sĩ: chữ navy, dải var(--diva-accent) đậm ở đầu rồi mờ dần.
   display:table để khối co theo chữ mà vẫn căn giữa; !important để thắng style inline color:var(--diva-primary). */
.section:has(.diva-service-section) .text > h2{
    display:table;width:auto !important;margin-left:auto;margin-right:auto;
    color:var(--diva-navy) !important;
    padding:2px 6px;
    background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 30%,rgba(var(--diva-accent-rgb),0) 70%) no-repeat;
}

.diva-doctor-section__title p{
    font-size:25px;font-weight:700;color:var(--diva-navy);
    letter-spacing:-0.5px;line-height:1.3;margin:0;text-transform:uppercase;
}

/* ── Thanh avatar ── */
.diva-doctor-section__avatar-bar{
    background:var(--diva-navy);padding:7px 0;margin:0 -15px 8px;
}
.diva-doctor-section__avatars{
    list-style:none;margin:0;padding:0 8px;
    display:flex;justify-content:space-around;align-items:center;
}
.diva-doctor-avatar{
    cursor:pointer;border-radius:30px;overflow:hidden;
    width:80px;height:80px;border:3px solid transparent;
    box-sizing:content-box;transition:border-color .2s;flex-shrink:0;
}
.diva-doctor-avatar.is-active{border-color:var(--diva-accent);}
.diva-doctor-avatar img{
    display:block;width:80px;height:80px;
    object-fit:cover;object-position:top center;
}

/* ── Vùng thẻ bác sĩ ── */
.diva-doctor-section__cards{padding:0 15px;}

/* ── Thẻ đơn ── */
.diva-doctor-card{
    position:relative;
    padding-top:77px; /* vùng ảnh nhô lên trên khung navy */
    overflow:hidden;  /* cắt phần ảnh chạm mép phải */
    margin-bottom:32px;
}
.diva-doctor-card__name{
    position:absolute;top:55px;left:39px;
    font-size:15px;font-weight:700;color:var(--diva-navy);
    letter-spacing:-0.3px;line-height:1.1;
    white-space:nowrap;z-index:2;
}
.diva-doctor-card__body{
    position:relative;background:var(--diva-navy);border-radius:25px;
    margin-left:15px;margin-right:39px;min-height:165px;
    padding:14px 0 14px 23px;
}
.diva-doctor-card__bio{
    list-style:disc;color:#fff;font-size:11px;font-weight:600;
    line-height:1.4;padding-left:16.5px;max-width:213px;
    text-align:justify;margin:0;
}
.diva-doctor-card__bio li{margin-bottom:1px;}
.diva-doctor-card__photo{
    position:absolute;right:-16px;top:0;
    width:165px;height:242px;overflow:hidden;z-index:1;
}
.diva-doctor-card__photo img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:top center;max-width:none;
}
.diva-doctor-card__btn{
    display:block;width:237px;height:31px;line-height:31px;
    background:var(--diva-navy);border-radius:50px;color:#fff;
    font-size:15px;font-weight:600;letter-spacing:-0.3px;
    text-align:center;text-decoration:none !important;
    margin:12px auto 0;position:relative;
}
/* Hình tròn xanh: nằm SAU nút, căn giữa theo chiều dọc, lòi ra mép phải ~12px (theo Figma) */
.diva-doctor-card{isolation:isolate;}
.diva-doctor-card__btn::after{
    content:'';position:absolute;right:-12px;top:50%;
    transform:translateY(-50%);height:94%;width:auto;aspect-ratio:1/1;
    background:var(--diva-accent);border-radius:50%;z-index:-1;
}

/* ── Mobile ≤549px: số đo theo Figma 1:237, khung 375px ── */
@media (max-width:549px){
    /* Tiêu đề: căn trái, font 20px để "HƠN 15 NĂM KINH NGHIỆM" vừa 1 dòng trong container 296px */
    .diva-doctor-section__title-wrap{padding:0 17px 20px;text-align:center;}
    .diva-doctor-section__title,.diva-doctor-section__title p{font-size:20px !important;}

    /* Thanh avatar: cao 93px, avatar 80×80, gap 8px, avatar đầu cách lề 16px */
    .diva-doctor-section__avatar-bar{height:93px;padding:0;display:flex;align-items:center;overflow:hidden;}
    .diva-doctor-section__avatars{flex:1;min-width:0;padding:0 0 0 16px;gap:8px;justify-content:flex-start;align-items:center;}
    .diva-doctor-avatar{width:80px;height:80px;box-sizing:border-box;}
    .diva-doctor-section__avatars .diva-doctor-avatar{margin:0 !important;}
    .diva-doctor-avatar img{width:100%;height:100%;}

    /* Cards: bỏ padding thừa, overflow hidden cắt ảnh tràn phải */
    .diva-doctor-section__cards{padding:0;overflow:hidden;}

    /* Card: overflow visible (section clips), padding-top 77px (ảnh nhô lên), gap 24px */
    .diva-doctor-card{padding-top:77px;overflow:visible;margin-bottom:24px;}

    /* Tên: cách mép trái khung 24px, nằm trên khung 23px (77-23=54px từ đỉnh card) */
    .diva-doctor-card__name{top:54px;left:24px;}

    /* Khung navy: rộng 321px, sát lề trái row (15px từ màn), padding 8px top/left; z-index:1 để body che phần trên của vòng tròn ::after */
    .diva-doctor-card__body{margin-left:0;margin-right:0;width:321px;min-height:165px;padding:8px 0 14px 8px;z-index:1;}

    /* Tiểu sử: rộng 213px — chữ chạy dưới mép trái ảnh */
    .diva-doctor-card__bio{max-width:213px;text-align:left;}

    /* Ảnh: 165×242, x=226 (left:211px), chân ảnh = chân khung navy (bottom offset = btn margin-top 24 + btn height 31 = 55px) */
    .diva-doctor-card__photo{position:absolute;left:211px;right:auto;top:auto;bottom:55px;width:165px;height:242px;}

    /* Nút: 237×31, cách thẻ 24px */
    .diva-doctor-card__btn{width:237px;height:31px;line-height:31px;margin-top:24px;}
}

/* ── Desktop ≥768px ── */
@media (min-width:768px){
    .diva-doctor-section{padding:40px 0 60px;}
    .diva-doctor-section__avatar-bar{margin:0 0 16px;padding:7px 16px;}
    .diva-doctor-section__avatars{justify-content:flex-start;gap:24px;}
    .diva-doctor-section__title p{font-size:32px;}
    /* Desktop: tiêu đề 1 dòng, 1 dải liền bắt đầu từ "BÁC SĨ" */
    .diva-doctor-section__br{display:none;}
    .diva-doctor-section__cards{padding:0;max-width:781px;margin:0 auto;}
    .diva-doctor-card{padding-top:120px;margin-bottom:40px;}
    .diva-doctor-card__name{top:98px;left:56px;font-size:20px;}
    .diva-doctor-card__body{min-height:240px;padding:24px 0 24px 32px;}
    .diva-doctor-card__bio{font-size:13px;max-width:320px;}
    .diva-doctor-card__photo{width:260px;height:380px;top:0;right:-5px;}
    .diva-doctor-card__btn{width:280px;height:38px;line-height:38px;font-size:16px;margin-top:16px;}
}

/* ── Desktop ≥1200px ── */
@media (min-width:1200px){
    .diva-doctor-card{padding-top:140px;}
    .diva-doctor-card__name{top:116px;font-size:22px;}
    .diva-doctor-card__body{min-height:280px;padding:28px 0 28px 36px;}
    .diva-doctor-card__bio{font-size:14px;max-width:420px;}
    .diva-doctor-card__photo{width:300px;height:440px;right:0;}
    .diva-doctor-card__btn{width:300px;height:42px;line-height:42px;font-size:17px;}
}

/* === services-module.php === */
    @-webkit-keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .service_9_0_0 {
        font-size: 20px;
        padding: 30px 0;
    }

    .service-cards-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }

    .service-cards-row > * {
        width: 33.3333%;
        box-sizing: border-box;
        padding: 0 15px;
    }

    @media (max-width: 549px) {
        /* Slider vuốt ngang 1 ảnh/màn hình, thay vì 3 ảnh full-width xếp dọc
           (khối cao gần 1700px). Bố cục từng thẻ sẽ làm lại ở Bước 2 — ở đây
           chỉ xử lý cho khối không dài quá 1 màn hình rưỡi. */
        .service-cards-row {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            margin: 0;
        }

        .service-cards-row > * {
            width: 100%;
            flex: 0 0 100%;
            scroll-snap-align: start;
            padding: 0;
        }
    }

    .service_9_0_0 img {
        width: 100%;
        display: block;
    }

    .service_9_0_0 .container {
        position: relative;
    }

    .service_9_0_0 .container::before {
        content: "";
        display: block;
        background: none;
        position: absolute;
        left: 0;
        top: -15px;
        width: 100%;
        height: 50px;
        background-size: 100%;
    }

    .service_9_0_0_title {
        font-size: 26px;
        font-weight: 600;
        color: var(--diva-primary);
        text-transform: uppercase;
        padding: 40px 0 30px;
        text-align: center;
    }

    .service_9_0_0_tabs {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    /* Ẩn nav chữ gốc của [tabgroup] (trùng lặp với .service_9_0_0_tabs do
       tab-nav.js dựng) — không xoá DOM nên các <a> vẫn bấm/click() được để
       đổi tab, chỉ ẩn khỏi mắt để không hiện chữ thừa dưới 2 icon tròn. */
    .svc-tabgroup > ul.nav {
        display: none;
    }

    .service_9_0_0_tabs .b-nav-tab {
        display: inline-block;
        text-align: center;
        color: #000;
    }

    .service_9_0_0__name {
        margin: 10px 0 0;
        font-size: 16px;
    }

    .service_9_0_0_tabs .b-nav-tab img {
        border-radius: 100%;
        border: 3px solid #fff;
    }

    .service_9_0_0_tabs .b-nav-tab.tns-nav-active img {
        border: 3px solid #004bbb;
    }

    .service_9_0_0 .b-tab {
        display: none;
        position: relative;
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s;
    }

    .service_9_0_0 .b-tab.active {
        display: block;
    }

    .service_9_0_0 .tns-item .pic {
        transition: margin 400ms ease-out;
    }

    .service_9_0_0 .tns-item .pic img {
        width: 100%;
        display: block;
    }

    /* .service_9_0_0 .tns-item.center .pic {
        margin: 0;
        transition: margin 400ms ease-out;
    } */
    .service_9_0_0 .tns-outer {
        position: relative;
        padding: 0 20px !important;
    }

    .service_9_0_0 .tns-controls [aria-controls] {
        background: transparent;
        color: #419cd4;
        position: absolute;
        font-size: 25px;
        top: 40%;
        z-index: 1;
        margin: 0;
        padding: 0;
        height: auto;
    }

    .service_9_0_0 .tns-controls [aria-controls]:nth-child(1) {
        left: 0px;
    }

    .service_9_0_0 .tns-controls [aria-controls]:nth-child(2) {
        right: 0px;
    }

    .service_9_0_0 .tns-nav>.tns-nav-active {
        background: #004bbb;
    }

    .service_9_0_0 .content {
        position: relative;
        padding: 0 0 50px;
    }

    .service_9_0_0 .content .pic {
        position: relative;
    }

    .service_9_0_0 .content .pic img {
        border-radius: 6px;
    }

    .service_9_0_0 .content .pic::before {
        content: "";
        background-color: rgba(61, 126, 210, 0.7);
        width: 100%;
        border-radius: 8px;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.4s linear;
    }

    .service_9_0_0 .content:hover {
        cursor: pointer;
    }

    .service_9_0_0 .content:hover .pic::before {
        visibility: visible;
        opacity: 1;
    }

    .service_9_0_0 .content:hover .text {
        visibility: visible;
        opacity: 1;
    }

    .service_9_0_0 .content .icon {
        width: 100%;
        margin: 0px auto 0;
        position: absolute;
        bottom: -30px;
    }

    .service_9_0_0 .content .icon img {
        width: 20%;
        margin: 0 auto;
    }

    .service_9_0_0 .content .text {
        text-align: center;
        position: absolute;
        font-size: 17px;
        top: 10%;
        left: 15px;
        width: 90%;
        color: #fff;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.4s linear;
    }

    .service_9_0_0 .content .text b {
        text-transform: uppercase;
        border: 2px solid #fff;
        border-left: 0;
        border-right: 0;
        padding: 10px 0;
        margin-bottom: 20px;
        display: block;
    }

    .service_9_0_0 .content .text ul {
        list-style: none;
        padding: 0;
    }

    .service_9_0_0 .content .read_more {
        color: #fff;
        background-color: var(--diva-red);
        padding: 8px 20px;
        border-radius: 25px;
    }

    @media (max-width: 1440px) {
        .service_9_0_0 .b-tab.active {
            width: 80%;
            margin: 0 auto;
        }

        .service_9_0_0_tabs {
            width: 90%;
        }

        /* .service_9_0_0_tabs .b-nav-tab p{
            font-size: 14px;
        } */
        .service_9_0_0_tabs .b-nav-tab {
            margin: 0 5px;
        }

        .service_9_0_0 .content .text {
            font-size: 15px;
        }
    }

    @media (max-width: 1024px) {
        .service_9_0_0_title {
            padding: 20px 0;
            font-size: 22px;
        }

        .service_9_0_0 .b-tab.active {
            width: 100%;
            margin: 0 auto;
        }

        .service_9_0_0 .content .text {
            top: 5%;
        }

        .service_9_0_0_tabs {
            width: 80%;
        }

        .service_9_0_0_tabs .b-nav-tab {
            margin: 0 5px;
        }
    }

    @media (max-width: 812px) {
        .service_9_0_0 .content .text {
            font-size: 12px;
        }
    }
    .service_9_0_0_slide div {
        transform: scale(0.95);
    }

    .service_9_0_0_slide div:nth-child(even) {
        transform: scale(1.1);
    }

/* === why-choose-module.php === */
	.diva-full-bleed-col {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.about_5_0_0 {
		padding: 30px 0;
		position: relative;
	}

	.about_5_0_0 .container {
		position: relative;
	}

	.about_5_0_0 .container::before {
		content: "";
		display: block;
		background: none;
		position: absolute;
		left: 0;
		top: -15px;
		width: 100%;
		height: 50px;
		background-size: 100%;
		z-index: 1;
	}

	.about_5_0_0 img {
		width: 100%;
		display: block;
		height: auto;
	}

	.about_5_0_0 .box {
		margin-top: -120px;
		width: 100%;
	}

	.about_5_0_0_tabs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		width: 70%;
		margin: 0 auto 0;
		list-style: none;
		padding: 0;
		text-align: center;
	}

	.about_5_0_0_tabs .tab {
		position: relative;
		width: 24%;
		cursor: pointer;
	}

	.about_5_0_0_tabs .tab:focus {
		outline: unset;
	}

	.about_5_0_0_tabs .tab p {
		display: none;
	}

	.about_5_0_0_tabs .tab .pic {
		position: relative;
	}

	.about_5_0_0_tabs .tab .pic::before {
		content: "";
		background-color: rgba(61, 128, 212, 0.7);
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		opacity: 0.8;
		transition: 0.3s;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s, opacity 0.4s linear;
	}

	.about_5_0_0_tabs .tab p {
		text-transform: uppercase;
		font-weight: 500;
		padding: 10px 50px;
		position: absolute;
		width: 100%;
		top: 40%;
		color: #fff;
		font-size: 20px;
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s, opacity 0.4s linear;
	}

	.about_5_0_0_tabs .tab:hover .pic::before {
		visibility: visible;
		opacity: 1;
	}

	.about_5_0_0_tabs .tab:hover p {
		visibility: visible;
		opacity: 1;
	}

	@media (max-width: 1440px) {
		.about_5_0_0_tabs {
			width: 60%;
		}

		.about_5_0_0 .box {
			margin-top: -90px;
		}

		.about_5_0_0_tabs .tab p {
			padding: 10px 30px;
			top: 30%;
			font-size: 16px;
		}
	}

	@media (max-width: 1280px) {
		.about_5_0_0 .box {
			margin-top: -70px;
		}
	}

	@media (max-width: 1024px) {
		.about_5_0_0 .box {
			position: relative;
		}

		.about_5_0_0_tabs {
			width: 80%;
		}
	}

	@media (max-width: 812px) {
		.about_5_0_0 .box {
			margin-top: -70px;
		}

		.about_5_0_0_tabs {
			width: 90%;
		}

		.about_5_0_0_tabs .tab.tns-nav-active p {
			padding: 10px 20px;
			top: 30%;
			font-size: 14px;
		}
	}

/* === customer-media-module.php === */
    .person_7_0_0 {
        background: none;
        background-size: 2500px;
        background-color: #f5f5f5;
        padding: 0px 0;
    }

    .person_7_0_0__title {
        text-align: center;
    }

    .person_7_0_0__title .title {
        padding: 40px 0 30px;
        color: #fff;
        font-size: 26px;
    }

    .person_7_0_0__box .tabs {
        text-align: center;
        margin: 0 auto 20px;
        margin-left: -20px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .person_7_0_0__box .tabs .tab {
        position: relative;
        width: auto;
        padding: 5px 60px 5px 30px;
        margin: 4px;
        color: #fff;
        font-size: 18px;
        border: none;
        border-radius: 30px;
        outline: unset;
        display: flex;
        align-items: center;
    }

    .person_7_0_0__box .tabs .tab img {
        position: absolute;
        right: 0;
    }

    .person_7_0_0__box .tabs .tab .icon-black {
        display: none;
    }

    .person_7_0_0__box1 {
        text-align: center;
    }

    .person_7_0_0__box2 {
        position: relative;
    }

    .person_7_0_0__box .tns-controls [aria-controls] {
        background: transparent;
        color: #419cd4;
        position: absolute;
        font-size: 25px;
        bottom: -10px;
    }

    .person_7_0_0__box .tns-controls [aria-controls]:nth-child(1) {
        left: 35%;
    }

    .person_7_0_0__box .tns-controls [aria-controls]:nth-child(2) {
        right: 35%;
    }

    .person_7_0_0__box .tns-nav>.tns-nav-active {
        background: #00fcff;
    }

    .person_7_0_0 .container.img-bg:before {
        content: "";
        display: block;
        background: none;
        position: absolute;
        left: 0;
        top: -15px;
        width: 100%;
        height: 50px;
        background-size: 100%;
    }

    .person_7_0_0 .tns-outer {
        margin: 20px auto 0;
    }

    .person_7_0_0 .tns-outer img {
        width: 100%;
    }

    .person_7_0_0 .thumbnails .tns-nav-active {
        position: relative;
        color: var(--diva-accent-2);
    }

    .person_7_0_0 .thumbnails .tns-nav-active .icon-black {
        display: block;
    }

    .person_7_0_0 .thumbnails .tns-nav-active .icon-white {
        display: none;
    }

    .person_7_0_0 .thumbnails .tns-nav-active::before {
        content: "";
        width: 82%;
        height: 3px;
        background-color: var(--diva-accent-2);
        position: absolute;
        bottom: -15px;
    }

    .person_7_0_0 .kh {
        margin-bottom: 20px;
    }

    .person_7_0_0 .kh b {
        display: block;
        font-size: 18px;
        font-weight: normal;
        text-transform: uppercase;
    }

    .person_7_0_0 .kh p {
        color: #fff;
    }

    .person_7_0_0__mb {
        display: none;
    }

    @media (max-width: 1024px) {
        .person_7_0_0__box .tabs .tab {
            font-size: 16px;
            padding: 5px 45px 5px 20px;
        }

        .person_7_0_0__box .tabs .tab img {
            max-height: 25px;
        }

        .person_7_0_0 .kh b {
            font-size: 18px;
        }

        .person_7_0_0 .kh span {
            font-size: 13px;
        }
    }

    @media (max-width: 812px) {
        .person_7_0_0__title .title {
            padding: 30px 0 32px;
        }

        .person_7_0_0__box .tabs .tab {
            font-size: 13px;
            padding: 5px 40px 5px 10px;
        }
    }

    @media (max-width: 600px) {
        .person_7_0_0 .thumbnails .tns-nav-active::before {
            content: "";
            width: 92%;
            height: 2px;
            bottom: -5px;
        }
    }

/* === custom UX Builder section wrappers (see inc/ux-builder-elements.php) === */
.person-media-section .kh{margin-bottom:20px;}
.person-media-section .kh img{width:100%;display:block;}
/* Tên/mô tả khách hàng nằm dưới ảnh trên nền xám #F5F5F5 (không phải overlay
   trên ảnh) — trắng như bản gốc sẽ vô hình, đổi sang màu tối đọc được. */
.person-media-section .kh b{display:block;font-size:18px;font-weight:700;text-transform:uppercase;color:var(--diva-primary);margin-top:8px;}
.person-media-section .kh span{color:#666;opacity:1;font-size:13px;}

/* diva_customer_media_section — thanh tab lọc theo dịch vụ (Niềng răng / Răng
   sứ / Implant / Răng khôn), đúng yêu cầu "giữ tab lọc như web cũ". Chữ + icon
   tab mặc định var(--diva-accent-2) rõ nét (không dùng opacity/filter làm mờ như bản gốc
   icon-white/icon-black); tab đang chọn thêm gạch chân var(--diva-accent-2). Chiều rộng
   855px = đo thực tế ul.about_5_0_0_tabs trên nhakhoadivahaiphong.vn ở 1440px. */
.diva-customer-tabs-wrap{width:100%;}
.diva-customer-tabs{display:flex;justify-content:space-between;align-items:center;list-style:none;width:855px;max-width:100%;margin:0 auto 30px;padding:0;}
.diva-customer-tabs__tab{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 4px;color:var(--diva-accent-2);font-size:16px;font-weight:700;border-bottom:3px solid transparent;transition:border-color .2s;}
.diva-customer-tabs__tab img{width:32px;height:32px;object-fit:contain;opacity:1;filter:none;}
.diva-customer-tabs__tab span{color:var(--diva-accent-2);}
.diva-customer-tabs__tab.is-active{border-bottom-color:var(--diva-accent-2);}

/* Mỗi tab = 1 panel Swiper riêng (mục 1) — chỉ panel .is-active hiện, panel
   khác display:none (Swiper của nó chỉ init/update khi bấm sang tab đó, xem
   js/customer-media-tabs.js + js/customer-media-slider.js). Desktop 2 ca/màn,
   mobile ≤549px 1 ca/màn (đặt trong breakpoints của Swiper, không phải CSS). */
.diva-customer-slider-wrap{display:none;}
.diva-customer-slider-wrap.is-active{display:block;}
.diva-customer-slider{padding:4px 44px 44px;}
.diva-customer-slider .swiper-slide{height:auto;}
.diva-customer-slider .swiper-button-prev,.diva-customer-slider .swiper-button-next{color:var(--diva-accent-2);--swiper-navigation-size:22px;}
.diva-customer-slider .swiper-pagination-bullet-active{background:var(--diva-accent-2);}
.diva-customer-grid .kh{margin-bottom:0;}

@media (max-width:600px){
	.diva-customer-tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:22px;padding-bottom:6px;}
	.diva-customer-tabs__tab{flex:0 0 auto;font-size:13px;}
	.diva-customer-tabs__tab img{width:24px;height:24px;}
	.diva-customer-slider{padding:4px 30px 40px;}
}
.person-media-section .tabbed-content .nav{display:flex;flex-wrap:wrap;justify-content:center;}
.person-media-section .tabbed-content .nav .tab{position:relative;border:none;}
.person-media-section .tabbed-content .nav .tab a{display:flex;align-items:center;padding:5px 60px 5px 30px;border-radius:30px;color:#fff;font-size:18px;border:none;}
.person-media-section .tabbed-content .nav .tab.active a,.person-media-section .tabbed-content .nav .tab a[aria-selected="true"]{color:var(--diva-accent-2);}
.person-media-section .tabbed-content .nav .tab::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:52px;height:36px;background-size:contain;background-repeat:no-repeat;background-position:center right;}
.person-media-section .tabbed-content .nav .tab:nth-child(1)::after{background-image:url(/diva-hp/wp-content/uploads/2024/01/icon-niengrang.png);}
.person-media-section .tabbed-content .nav .tab:nth-child(2)::after{background-image:url(/diva-hp/wp-content/uploads/2024/01/icon-rangsu.png);}
.person-media-section .tabbed-content .nav .tab:nth-child(3)::after{background-image:url(/diva-hp/wp-content/uploads/2024/01/icon-implant2.png);}
.person-media-section .tabbed-content .nav .tab:nth-child(4)::after{background-image:url(/diva-hp/wp-content/uploads/2024/01/icon-chamsoc2.png);}
@media (max-width:1024px){.person-media-section .tabbed-content .nav .tab a{font-size:16px;padding:5px 45px 5px 20px;}.person-media-section .tabbed-content .nav .tab::after{width:40px;height:28px;}}
@media (max-width:812px){.person-media-section .tabbed-content .nav .tab a{font-size:13px;padding:5px 40px 5px 10px;}}

.svc-tabgroup .tabbed-content .nav{display:none;}

.thumbnails_pc.tabs2{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0;}
.thumbnails_pc.tabs2 li{flex:0 0 150px;width:150px;margin:0 10px;}
.thumbnails_pc.tabs2 li .tab-item{height:100%;box-sizing:border-box;}

@media (max-width:549px){
	/* Slider vuốt ngang, hiện ~3 thẻ bác sĩ 1 lúc — thay vì flex-wrap khiến mỗi thẻ 150px cố định rớt xuống 1 hàng riêng trên màn hình hẹp. */
	.thumbnails_pc.tabs2{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scroll-snap-type:x mandatory;}
	.thumbnails_pc.tabs2 li{flex:0 0 30%;width:30%;margin:0 5px;scroll-snap-align:start;}
}

.commit-tabgroup > ul.nav{display:none;}
.commit-nav-tabs{display:flex;justify-content:space-between;list-style:none;padding:0;margin:0;}
.commit-nav-tabs li{border:1px solid #ccc;padding:24.3px;width:20%;margin:0;cursor:pointer;box-sizing:border-box;}
.commit-nav-tabs li img{width:100%;height:auto;}
.commit-nav-tabs li.active{background:#F5F5F5;border:none;}

.commit_1_0_0__box2__item{position:relative;}
.commit_1_0_0__box2__pic img{width:100%;height:auto;display:block;}
.commit_1_0_0__box2__ct{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;padding:20px 30px;background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));}
.commit_1_0_0__box2__ct .tt{color:#fff;font-size:26px;font-weight:700;margin:0 0 8px;}
.commit_1_0_0__box2__ct i{color:#fff;font-style:normal;opacity:.9;}
.commit_1_0_0__box2__more{display:inline-block;margin-top:12px;}
.commit_1_0_0__box2__more span b{background:var(--diva-primary);color:#fff;padding:10px 20px;border-radius:30px;font-weight:600;font-size:15px;}

.diva-booking-box{background:#0165CD;min-height:450px;padding:20px;border-radius:8px;color:#fff;}
/* Tiêu đề in đậm (PS3 28/9) */
.diva-booking-box h3,.diva-booking-title{text-transform:uppercase;font-size:20px;font-weight:700;margin-top:0;text-align:center;color:#fff;}
/* Branch card CSS giữ lại phòng dùng sau */
.diva-booking-branch{background:#fff;color:#333;margin-top:10px;border-radius:6px;padding:14px;}
.diva-booking-branch a.address{display:block;color:#333;font-weight:600;margin-bottom:8px;}
.diva-booking-branch a.address:hover{color:var(--diva-primary);}
.diva-booking-branch .actions{display:flex;gap:10px;}
.diva-booking-branch .actions a{flex:1;text-align:center;background:#f2f8fd;border:1px solid #248de8;color:var(--diva-primary);border-radius:20px;padding:6px 0;font-size:13px;font-weight:600;cursor:pointer;}
.diva-booking-form{margin-top:14px;}
.diva-booking-form input[type=text]{border:none;margin:4px 0;padding:10px 12px;width:100%;border-radius:8px;box-sizing:border-box;box-shadow:none;font-size:15px;}
/* Select wrapper: mũi tên tự vẽ, đồng bộ với input (PS3 28/9) */
.diva-booking-select-wrap{position:relative;margin:4px 0;}
.diva-booking-select-wrap::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #555;}
.diva-booking-select-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:10px 32px 10px 12px;width:100%;border-radius:8px;box-sizing:border-box;background:#fff;color:#333;font-size:15px;cursor:pointer;}
.diva-booking-form .dkbt{text-align:center;}
.diva-booking-form .dkbt input[type=button]{width:70%;margin-top:10px;text-transform:uppercase;background:var(--diva-red);color:#fff;outline:unset;font-size:15px;padding:8px 0;border-radius:25px;cursor:pointer;border:none;}

/* ── Khối đặt lịch trang chủ theo Figma (mobile), dùng cho MỌI kích thước ──
   Ảnh đội ngũ bo 22px nằm trên, đè 20px lên khung navy #12173C bo 22px;
   tiêu đề "ĐẶT LỊCH THĂM KHÁM"; 4 ô bo tròn 246×42 nền trắng 15%, viền trắng mờ,
   chữ nghiêng căn giữa; thứ tự: Họ tên → SĐT/Zalo → Dịch vụ → Chi nhánh;
   nút "HẸN LỊCH" #018DD8 165×36. Chữ Figma render thẳng ở PHP (diva_render_booking_form).
   Mobile 307px / ảnh 187px; desktop (≥850, cột phải 360px) phóng theo tỉ lệ: 360px / ảnh 219px. */
.diva-booking-photo{display:none;}
.diva-booking-box--figma{--bk-w:307px;--bk-photo-h:187px;}
@media (min-width:850px){
	.diva-booking-box--figma{--bk-w:360px;--bk-photo-h:219px;}
	.diva-booking-box--figma .diva-booking-form{max-width:276px !important;}
}

.diva-booking-box--figma{
	position:relative;max-width:var(--bk-w);margin:0 auto;min-height:0;
	background:none;border-radius:0;padding:0 0 28px;
}
.diva-booking-box--figma::before{
	content:'';position:absolute;left:0;right:0;top:calc(var(--bk-photo-h) - 20px);bottom:0;
	background:#12173c;border-radius:22px;
}
.diva-booking-box--figma > *{position:relative;}
.diva-booking-box--figma .diva-booking-photo{
	display:block;height:var(--bk-photo-h);border-radius:22px;overflow:hidden;z-index:1;
}
.diva-booking-box--figma .diva-booking-photo img{
	display:block;width:124%;max-width:none;margin-left:-12%;height:auto;
}
.diva-booking-box--figma .diva-booking-title{
	margin:20px 0 0;font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.3;
}

.diva-booking-box--figma .diva-booking-form{margin:18px auto 0;max-width:246px;}
.diva-booking-box--figma .diva-booking-form form{display:flex;flex-direction:column;gap:9px;margin:0;}
.diva-booking-box--figma .diva-booking-select-wrap--service{order:3;}
.diva-booking-box--figma .diva-booking-select-wrap--branch{order:4;}
.diva-booking-box--figma .diva-booking-msg{order:5;color:#fff;}
.diva-booking-box--figma .dkbt{order:6;}

.diva-booking-box--figma .diva-booking-form input[type=text],
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-service-select,
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-branch-select{
	height:42px;margin:0;padding:0 28px;border-radius:21px;
	background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.45);
	color:#fff;font-size:15px;font-style:italic;text-align:center;text-align-last:center;
	box-shadow:none;line-height:40px;
}
.diva-booking-box--figma .diva-booking-form input[type=text]::placeholder{color:#d9dbe6;opacity:1;}
.diva-booking-box--figma .diva-booking-select-wrap{margin:0;}
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select{color:#d9dbe6;}
.diva-booking-box--figma .diva-booking-select-wrap select option{color:#333;font-style:normal;}
.diva-booking-box--figma .diva-booking-select-wrap::after{right:12px;border-top-color:#fff;}

.diva-booking-box--figma .dkbt{margin-top:15px;}
.diva-booking-box--figma .diva-booking-form .dkbt input[type=button]{
	width:165px;height:36px;box-sizing:border-box;margin:0;padding:0;border-radius:18px;
	background:#018dd8;font-size:15px;font-weight:800;letter-spacing:.3px;
	box-shadow:0 3px 6px rgba(0,0,0,.25);
}

/* === video-clients-tab.php === */
	a {
		text-decoration: none;
	}

	.mb {
		display: none;
	}

	@media (max-width: 480px) {
		.mb {
			display: block;
		}
	}

	.video_4_1_0 {
		background: #F5F5F5;
		padding: 0 0 30px;
	}

	.video_4_1_0__title {
		font-size: 26px;
		font-weight: 600;
		color: var(--diva-primary);
		text-transform: uppercase;
		padding: 40px 0 25px;
		text-align: center;
		margin: 20px 0 10px;
	}

	.container.img-lazy::before {
		content: "";
		display: block;
		background: none;
		position: absolute;
		left: 0;
		top: -15px;
		width: 100%;
		height: 50px;
		background-size: 100%;
	}

	/* diva_video_section — carousel coverflow SwiperJS (mục 4, phản hồi 24/9),
	   thay cho layout lớn/nhỏ box1/box2 cũ. Mỗi .diva-video-card là 1 thẻ đồng
	   nhất; hiệu ứng coverflow (xem js/video-swiper.js) tự làm nổi bật thẻ
	   giữa. Kích thước thẻ cố định qua CSS vì Swiper slidesPerView:'auto' lấy
	   đúng width của .swiper-slide. */
	.diva-video-swiper {
		padding: 10px 0 50px;
	}

	.diva-video-swiper .swiper-slide {
		width: 320px;
		transition: opacity .3s;
	}

	.diva-video-card {
		display: block;
		cursor: pointer;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 8px 24px rgba(0,0,0,.18);
		background: #252525;
	}

	.diva-video-card__pic {
		position: relative;
		background: #252525;
		aspect-ratio: 320/220;
	}

	.diva-video-card__pic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		opacity: .85;
		transition: .3s;
	}

	.diva-video-card:hover .diva-video-card__pic img {
		opacity: 1;
	}

	.diva-video-card__play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: rgba(var(--diva-primary-rgb),.85);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		padding-left: 4px;
	}

	.diva-video-card__text {
		padding: 14px 16px;
		background: #fff;
	}

	.diva-video-card__title {
		font-size: 15px;
		font-weight: 600;
		color: #222;
		line-height: 1.35;
		margin-bottom: 4px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.diva-video-card__views {
		font-size: 12px;
		color: #888;
	}

	.diva-video-swiper .swiper-slide:not(.swiper-slide-active) .diva-video-card {
		opacity: .6;
	}

	.diva-video-swiper .swiper-pagination-bullet-active {
		background: var(--diva-primary);
	}

	@media (max-width: 812px) {
		.video_4_1_0__title {
			padding: 20px 0 5px;
		}

		.diva-video-swiper .swiper-slide {
			width: 260px;
		}
	}

	@media (max-width: 480px) {
		.video_4_1_0 {
			padding-bottom: 10px;
		}

		.video_4_1_0__title {
			font-size: 25px;
			padding: 30px 0 5px;
		}

		.diva-video-swiper .swiper-slide {
			width: 240px;
		}

		.diva-video-card__pic {
			aspect-ratio: 240/165;
		}
	}

	@media (max-width: 375px) {
		.video_4_1_0__box1 .pic {
			height: 201px;
		}
	}

	@media (max-width: 360px) {
		.video_4_1_0__box1 .pic {
			height: 193px;
		}
	}

	@media (max-width: 320px) {
		.video_4_1_0__box1 .pic {
			height: 171px;
		}

		.video_4_1_0__title {
			font-size: 20px;
		}
	}

/* === news-list-module.php === */
	.news_13_1_0 {
		padding: 30px 0;
	}

	.news_13_1_0 .container {
		position: relative;
	}

	.news_13_1_0 .container::before {
		content: "";
		display: block;
		background: none;
		position: absolute;
		left: 0;
		top: -15px;
		width: 100%;
		height: 50px;
		background-size: 100%;
	}

	.news_13_1_0_title {
		font-size: 26px;
		font-weight: 600;
		color: var(--diva-primary);
		text-transform: uppercase;
		padding: 40px 0 30px;
		text-align: center;
	}

	.news_13_1_0_box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.news_13_1_0_box img {
		width: 100%;
		display: block;
	}

	.news_13_1_0_box_item {
		width: 24%;
		color: #000;
		font-size: 14px;
		display: block;
		text-align: justify;
	}

	.news_13_1_0_box_item .sub_time {
		color: #1e1e1e;
		width: auto;
		margin: 0;
	}

	.news_13_1_0_box_item h3 {
		margin: 10px 0 0px;
		font-weight: 600;
		font-size: 15px;
	}

	.news_13_1_0 .tns-controls [aria-controls] {
		background: #024fa1;
		padding: 0px 3px;
		position: absolute;
		font-size: 20px;
		top: 45%;
		height: auto;
		color: #fff;
	}

	.news_13_1_0 .tns-controls [aria-controls]:nth-child(1) {
		left: -20px;
	}

	.news_13_1_0 .tns-controls [aria-controls]:nth-child(2) {
		right: -20px;
	}

	.news_13_1_0 .tns-nav>.tns-nav-active {
		background: #014abb;
	}

	@media (max-width: 1024px) {
		.news_13_1_0_box_item h3 {
			font-size: 13px;
		}
	}

	@media (max-width: 812px) {
		.news_13_1_0_title {
			padding: 30px 0 20px;
		}

		.news_13_1_0_box_item .sub_time {
			font-size: 11px;
		}

		.news_13_1_0 .tns-controls [aria-controls]:nth-child(1) {
			left: 0px;
		}

		.news_13_1_0 .tns-controls [aria-controls]:nth-child(2) {
			right: 0px;
		}
	}

/* diva-news-section: tiêu đề + tác giả/ngày căn trái, giảm khoảng trắng dưới khối */
.diva-news-section .post-title{text-align:left;text-transform:uppercase;}
.diva-news-section .post-meta{text-align:left;}
.diva-news-section{padding-bottom:20px !important;}

/* diva_news_slider — carousel Swiper chuẩn bọc [blog_posts] (KHÔNG phải
   coverflow — dùng chung engine js/diva-coverflow.js, hàm
   divaInitStandardSlider), thay 2 bản [blog_posts] desktop/mobile riêng
   trước đây. Giữ nguyên kiểu chữ .post-title/.post-meta ở trên, chỉ thêm
   layout carousel + hiệu ứng hover/entrance mới. */
.diva-news-swiper-wrap{position:relative;padding:0 8px;}
.diva-news-swiper{overflow:hidden;padding-bottom:36px;}
.diva-news-swiper .swiper-slide{height:auto;}
.diva-news-swiper .swiper-slide .col-inner{height:100%;}

/* Ảnh 16:9 đã có sẵn qua .image-cover{padding-top:56%} của Flatsome core —
   không khai báo lại, chỉ thêm overflow:hidden để ảnh zoom không tràn khung
   khi hover. */
.diva-news-swiper .image-cover{overflow:hidden;}
.diva-news-swiper .image-cover img{transition:transform .35s ease;}

/* Tiêu đề tối đa 3 dòng — giữ nguyên font-size/weight/màu hiện có, chỉ thêm line-clamp */
.diva-news-swiper .post-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Hover: thẻ nhấc 4px + ảnh zoom 1.05 */
.diva-news-swiper .swiper-slide .box{transition:transform .25s ease,box-shadow .25s ease;}
.diva-news-swiper .swiper-slide:hover .box{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12);}
.diva-news-swiper .swiper-slide:hover .image-cover img{transform:scale(1.05);}

/* Fade-up lần lượt khi cuộn tới, chạy 1 lần — bật class qua IntersectionObserver,
   xem js/diva-coverflow.js divaInitNewsFadeUp() */
.diva-news-swiper .swiper-slide{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease;}
.diva-news-swiper .swiper-slide.diva-fade-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
	.diva-news-swiper .swiper-slide{opacity:1;transform:none;transition:none;}
	.diva-news-swiper .swiper-slide .box,
	.diva-news-swiper .image-cover img{transition:none;}
	.diva-news-swiper .swiper-slide:hover .box{transform:none;}
	.diva-news-swiper .swiper-slide:hover .image-cover img{transform:none;}
}

/* Mũi tên trái/phải: tròn 44px, nền trắng, chevron xanh thương hiệu, hover đảo màu */
.diva-news-swiper__arrow{position:absolute;top:calc(50% - 18px);z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e2e2e2;color:var(--diva-primary,var(--diva-primary));display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background .2s,color .2s;padding:0;}
.diva-news-swiper__arrow:hover{background:var(--diva-primary,var(--diva-primary));color:#fff;}
.diva-news-swiper__arrow--prev{left:-8px;}
.diva-news-swiper__arrow--next{right:-8px;}
.diva-news-swiper__arrow.swiper-button-disabled{opacity:.35;cursor:default;}

/* Chấm phân trang */
.diva-news-swiper .swiper-pagination{bottom:0;}
.diva-news-swiper .swiper-pagination-bullet-active{background:var(--diva-primary,var(--diva-primary));}

@media (max-width:549px){
	.diva-news-swiper-wrap{padding:0 4px;}
	.diva-news-swiper__arrow{width:36px;height:36px;top:calc(50% - 14px);}
}

/* Chấm chuyển cho .service-cards-row slider mobile (xem js/tab-nav.js divaInitCardRowDots) */
.diva-card-row-dots{display:none;}
@media (max-width:549px){
	.diva-card-row-dots{display:flex;justify-content:center;gap:8px;padding:12px 0 0;}
	.diva-card-row-dots span{width:8px;height:8px;border-radius:50%;background:#ccc;cursor:pointer;}
	.diva-card-row-dots span.active{background:var(--diva-primary);}
}

/* Slider ngang 4 bác sĩ trên mobile — cắt từ đúng 1 ảnh banner .about_5_0_0
   (không có ảnh riêng từng bác sĩ trong banner này), mỗi "lát" hiện 1/4 ảnh
   phóng to để đọc được khung + tên, thay vì cả banner bị co nhỏ xuống ~135px
   cao khiến chữ không đọc được. */
.about_5_0_0__mobile-slide{display:none;}
@media (max-width:549px){
	.about_5_0_0__pic{display:none;}
	.about_5_0_0__mobile-slide{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:10px;padding:0 15px;}
	.about_5_0_0__mobile-slide span{flex:0 0 80%;scroll-snap-align:start;aspect-ratio:3/4;border-radius:8px;background-repeat:no-repeat;background-size:400% 100%;box-shadow:0 0 8px rgba(0,0,0,.15);}
	.about_5_0_0__mobile-slide span:nth-child(1){background-position:0% 0;}
	.about_5_0_0__mobile-slide span:nth-child(2){background-position:33.333% 0;}
	.about_5_0_0__mobile-slide span:nth-child(3){background-position:66.667% 0;}
	.about_5_0_0__mobile-slide span:nth-child(4){background-position:100% 0;}
	.about_5_0_0 .box{margin-top:15px;position:static;}
}

/* Tab lọc "Hình ảnh khách hàng" trên mobile: 1 hàng cuộn ngang thay vì rớt dòng */
@media (max-width:549px){
	.person-media-section .tabbed-content .nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;}
	.person-media-section .tabbed-content .nav .tab{flex:0 0 auto;}
	.person-media-section .tabbed-content .nav .tab a{white-space:nowrap;padding:5px 30px 5px 15px;}
}

/* Cam kết trên mobile: giảm padding từng icon để không bị padding cố định
   (24.3px, tính theo desktop) ăn hết chiều rộng ô (~48px ở mobile) khiến icon co về 0. */
@media (max-width:549px){
	.commit-nav-tabs li{padding:8px 4px;}
}

/* diva_banner_item — hero banner slide (ảnh desktop/mobile riêng qua <picture>).
   Chiều cao đặt cố định trên .diva-hero-banner-item (không phải trên ảnh) —
   áp dụng CHUNG cho mọi slide kể cả slot chưa có ảnh (khung placeholder), để
   khung luôn bằng đúng khung ảnh banner đầu, không lệch to/nhỏ giữa các slide. */
.diva-hero-banner-item{display:block;position:relative;height:622px;overflow:hidden;}
.diva-hero-banner-item picture,.diva-hero-banner-item picture img{display:block;width:100%;height:100%;object-fit:cover;}
/* Khung placeholder (slot chưa có ảnh) — bằng đúng kích thước khung ảnh thật ở
   mọi breakpoint vì cùng ăn theo chiều cao của .diva-hero-banner-item (chỉ đổi
   ở @media bên dưới cùng lúc với ảnh thật, không định nghĩa riêng). */
.diva-hero-banner-item__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#f5f5f5;color:#999;font:14px sans-serif;text-align:center;padding:20px;box-sizing:border-box;}
@media (max-width:1024px){.diva-hero-banner-item{height:400px;}}
@media (max-width:549px){
	/* Trước đây height:auto khiến khung co theo ảnh thật (mỗi ảnh tỉ lệ khác
	   nhau ra khung khác nhau), còn khung placeholder (không có ảnh để co
	   theo) lại dùng min-height:200px cố định — 2 khung lệch hẳn kích thước.
	   Đặt cố định theo đúng tỉ lệ ảnh mobile chuẩn 750×1000px cho MỌI slide
	   (kể cả placeholder), object-fit:cover lo phần crop ảnh thật. Dùng
	   aspect-ratio (không dùng kiểu height:0+padding-bottom cũ — bị box-sizing:
	   border-box toàn cục làm padding tính vào trong height:0, ra cao 0 thật). */
	.diva-hero-banner-item{height:auto;aspect-ratio:750/1000;}
}
/* Chỉ 1 slot có ảnh (khách xem web chưa đăng nhập, các slot trống tự ẩn hẳn ở
   PHP — xem diva_banner_item) → Flickity vẫn tự vẽ 1 chấm cho slider 1 phần
   tử theo mặc định, ẩn đi cho đúng yêu cầu "1 slide thì không hiện chấm". Có
   :has() fallback (ẩn luôn .dot lẻ) cho trình duyệt chưa hỗ trợ :has(). */
.flickity-page-dots:has(.dot:only-child){display:none;}
.flickity-page-dots .dot:only-child{display:none;}

/* diva_doctor_section / diva_doctor_slide — layout mới: khung ảnh vuông + tên
   + học vị, bấm vào mở popup xem chi tiết (gộp 2 khối bác sĩ lặp trước đây
   thành đúng 1 layout duy nhất — xem diva-rules.md mục 4). */
.diva-doctor-section{padding:40px 0;}
.diva-doctor-section__title{font-size:26px;font-weight:600;color:var(--diva-primary);text-transform:uppercase;text-align:center;padding:0 0 30px;}
.diva-doctor-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.diva-doctor-grid__item{display:block;width:220px;text-align:center;text-decoration:none;cursor:pointer;}
.diva-doctor-grid__pic{border:3px solid var(--diva-primary);border-radius:4px;overflow:hidden;aspect-ratio:1/1;}
.diva-doctor-grid__pic img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-doctor-grid__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#c00;font:13px/1.4 sans-serif;padding:10px;text-align:center;}
.diva-doctor-grid__name{margin-top:14px;font-size:18px;font-weight:700;color:var(--diva-primary);}
.diva-doctor-grid__degree{margin-top:4px;font-size:14px;color:#505050;}
@media (max-width:812px){
	.diva-doctor-grid{gap:14px;}
	.diva-doctor-grid__item{width:calc(50% - 7px);}
}

/* Popup chi tiết bác sĩ (dùng chung 1 popup, JS đổ nội dung theo thẻ được bấm
   — xem js/doctor-popup.js). */
.diva-doctor-popup{display:none;position:fixed;z-index:9999;inset:0;}
.diva-doctor-popup.is-open{display:block;}
.diva-doctor-popup__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.diva-doctor-popup__box{position:relative;max-width:520px;width:calc(100% - 32px);margin:5vh auto;background:#fff;border-radius:8px;padding:30px;max-height:90vh;overflow-y:auto;}
.diva-doctor-popup__close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:28px;line-height:1;color:#888;cursor:pointer;}
.diva-doctor-popup__pic{width:140px;height:140px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:3px solid var(--diva-primary);}
.diva-doctor-popup__pic img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-doctor-popup__name{text-align:center;font-size:20px;font-weight:700;color:var(--diva-primary);}
.diva-doctor-popup__degree{text-align:center;font-size:15px;color:#505050;margin-top:4px;}
.diva-doctor-popup__bio{margin-top:18px;font-size:15px;line-height:1.6;color:#333;white-space:pre-line;}
.diva-doctor-popup__bio.is-empty{color:#999;font-style:italic;}
.diva-doctor-popup__link{display:block;width:max-content;margin:20px auto 0;background:var(--diva-primary);color:#fff;padding:10px 24px;border-radius:4px;text-decoration:none;font-weight:600;}
.diva-doctor-popup__link[hidden]{display:none;}

/* Popup xem video YouTube — mục 6 (xem js/video-popup.js). */
.diva-video-popup{display:none;position:fixed;z-index:9999;inset:0;}
.diva-video-popup.is-open{display:block;}
.diva-video-popup__overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);}
.diva-video-popup__box{position:relative;max-width:900px;width:calc(100% - 32px);margin:5vh auto;}
.diva-video-popup__close{position:absolute;top:-40px;right:0;background:none;border:none;font-size:32px;line-height:1;color:#fff;cursor:pointer;}
.diva-video-popup__frame{position:relative;width:100%;padding-top:56.25%;background:#000;}
.diva-video-popup__frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.modal-clip,.diva-video-card[data-video]{cursor:pointer;}

/* diva_service_section / diva_service_item — theo thiết kế Figma Diva: thẻ
   nền navy bo góc, nửa trên ảnh răng 3D nền xanh dương, tên trắng đậm, danh
   sách dịch vụ con chữ trắng nhỏ, góc phải dưới nút tròn đỏ mũi tên ↗. Màu
   navy #012c5f lấy lại từ màu gần nhất đã có sẵn trong CSS (menu-navigation.css,
   .header_6_0_0_box_top mobile) — không tự bịa mã màu mới. Carousel coverflow
   SwiperJS GIỐNG HỆT khối Video khách hàng (cùng width breakpoint/opacity/
   pagination — xem .diva-video-swiper phía trên) — 1 swiper duy nhất cho mọi
   breakpoint, không còn tách bản desktop/mobile riêng như trước. */
.diva-service-section{padding:40px 0;}
.diva-service-swiper{padding:10px 0 50px;}
.diva-service-swiper .swiper-slide{width:320px;transition:opacity .3s;}
.diva-service-swiper .swiper-slide:not(.swiper-slide-active) .diva-service-grid__item{opacity:.6;}
.diva-service-swiper .swiper-pagination-bullet-active{background:var(--diva-primary);}

.diva-service-grid__item{position:relative;display:flex;flex-direction:column;height:100%;background:#012c5f;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.diva-service-grid__image{aspect-ratio:600/440;overflow:hidden;}
.diva-service-grid__image img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-service-grid__body{padding:16px 20px 56px;flex:1;}
.diva-service-grid__title{color:#fff;font-weight:700;font-size:18px;line-height:1.3;text-align:center;text-transform:uppercase;margin-bottom:12px;min-height:2.6em;display:flex;align-items:center;justify-content:center;}
.diva-service-grid__sublist{list-style:none;margin:0;padding:0;text-align:left;}
.diva-service-grid__sublist li{color:#fff;font-size:13px;line-height:1.9;padding-left:14px;position:relative;}
.diva-service-grid__sublist li::before{content:"–";position:absolute;left:0;}
.diva-service-grid__sublist a{color:inherit;text-decoration:none;}
.diva-service-grid__sublist a:hover{text-decoration:underline;}
.diva-service-grid__arrow{position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;background:var(--diva-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.diva-service-grid__arrow:hover{background:#c9302c;}

@media (max-width:812px){
	.diva-service-swiper .swiper-slide{width:260px;}
}

@media (max-width:480px){
	.diva-service-swiper .swiper-slide{width:240px;}
}

/* diva_customer_media_item — thẻ lật 3D before/after (mục 2). Desktop: hover
   lật sang mặt TRƯỚC, bỏ chuột lật lại. Mobile: bấm (.is-flipped, toggle qua
   click — xem tab-nav.js) — dùng "click" chứ không phải "touchstart" nên
   trình duyệt tự bỏ qua click giả sau khi kéo/vuốt slider, không cần code
   riêng phân biệt kéo với chạm. Vuông 575×575 qua aspect-ratio, ảnh thật hay
   khung placeholder đều lấp đầy y hệt. */
.diva-ba-card{position:relative;width:100%;aspect-ratio:1/1;perspective:1200px;}
.diva-ba-card__inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d;}
.diva-ba-card--flip-ready:hover .diva-ba-card__inner,
.diva-ba-card--flip-ready.is-flipped .diva-ba-card__inner{transform:rotateY(180deg);}
.diva-ba-card__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:6px;}
.diva-ba-card__face img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-ba-card__face--before{transform:rotateY(180deg);}
.diva-ba-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#999;font:13px/1.4 sans-serif;text-align:center;padding:16px;box-sizing:border-box;}
/* .diva-ba-card .diva-ba-card__face .diva-ba-card__label (3 lớp class) — cần
   độ đặc hiệu cao hơn ".person-media-section .kh span" (2 class + 1 thẻ) ở
   trên, nếu không nhãn (vốn cũng là <span>) bị luật đó đè mất màu/cỡ chữ. */
.diva-ba-card .diva-ba-card__face .diva-ba-card__label{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:var(--diva-accent-2);font-size:14px;font-weight:700;padding:3px 10px;border-radius:3px;pointer-events:none;z-index:2;letter-spacing:.02em;}

/* Tôn trọng prefers-reduced-motion: thay lật 3D bằng mờ dần (crossfade) —
   không xoay, chỉ đổi opacity giữa 2 mặt. */
@media (prefers-reduced-motion:reduce){
	.diva-ba-card__inner{transition:none;transform:none !important;}
	.diva-ba-card__face{position:absolute;transform:none;transition:opacity .3s;}
	.diva-ba-card__face--after{opacity:1;z-index:1;}
	.diva-ba-card__face--before{opacity:0;z-index:0;}
	.diva-ba-card--flip-ready:hover .diva-ba-card__face--before,
	.diva-ba-card--flip-ready.is-flipped .diva-ba-card__face--before{opacity:1;z-index:1;}
	.diva-ba-card--flip-ready:hover .diva-ba-card__face--after,
	.diva-ba-card--flip-ready.is-flipped .diva-ba-card__face--after{opacity:0;}
}

/* diva_booking_section — dropdown "Chi nhánh" + "Dịch vụ quan tâm" (mục 7) */
.diva-booking-form select.diva-booking-service-select,
.diva-booking-form select.diva-booking-branch-select{border:none;margin:4px 0;padding:10px 12px;width:100%;border-radius:8px;box-sizing:border-box;box-shadow:none;background:#fff;color:#333;}

/* diva_commitment_section / diva_commitment_item — đúng thiết kế gốc
   commit_1_0_0 (hàng 5 icon nav phía trên, bấm đổi ảnh banner + nội dung),
   nhưng SỬA lỗi bản gốc đặt .ct position:absolute đè lên ảnh (che chữ) — mục
   5, phản hồi 24/9: chữ + nút "Đăng Ký Tư Vấn" luôn nằm NGAY DƯỚI ảnh, ảnh
   hiển thị trọn vẹn không lớp phủ, cả desktop lẫn mobile (không còn media
   query nào đổi .ct về absolute như bản gốc). Slider 1-ảnh/lần dùng lại
   [ux_slider _id="commitment-slider"] (Flickity) — bấm icon nav nhảy slide
   qua data-slider-select, cùng cơ chế jQuery đã có sẵn cho diva_doctor_section
   (xem tab-nav.js). */
.diva-commitment-section2{padding:20px 0 40px;}
/* FIX 2026-09-25: thiếu text-align nên chữ canh trái (mặc định "start")
   trong khi khối icon bên dưới canh giữa (justify-content:center) — lệch
   nhau dù cùng chung khung/độ rộng. Canh giữa tiêu đề để thẳng hàng với
   khối icon, áp dụng luôn mọi breakpoint (bỏ khai báo trùng ở mobile). */
.diva-commitment-section2__title{font-size:26px;font-weight:600;color:var(--diva-primary);text-transform:uppercase;text-align:center;padding:20px 0 25px;margin:0;}

/* FIX 2026-09-25: `justify-content:space-between` (đã tự chia đều khoảng
   trống còn lại) CỘNG DỒN với `gap` khai báo riêng ở breakpoint 480px bên
   dưới — 2 cơ chế cùng cộng thêm khoảng cách, đẩy icon cuối (Công nghệ hiện
   đại) tràn ra ngoài lề phải ở mobile. Bỏ hẳn `width:18%` (không cần thiết,
   cũng là nguyên nhân phụ khiến item không co giãn đúng khi kết hợp gap) và
   `space-between`, chuyển hẳn sang `justify-content:center` + `gap` duy nhất
   — khoảng cách 2 lề tới icon đầu/cuối tự động bằng nhau vì hàng icon được
   căn giữa, không phụ thuộc phép chia %. */
.diva-commitment-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;list-style:none;margin:0 0 20px;padding:0;}
.diva-commitment-tabs__item{border:1px solid #ccc;padding:16px;cursor:pointer;text-align:center;transition:background .2s;display:flex;align-items:center;justify-content:center;margin:0;}
/* Ghi đè `.col-inner ul li{margin-left:1.3em}` của Flatsome core (khối này
   nằm trong .col-inner nên bị dính rule bullet-list mặc định — 1.3em ~ 19.5px
   mỗi icon, cộng dồn với `gap` phía trên khiến hàng icon tràn/xuống dòng ở
   mobile). Selector đủ đặc hiệu hơn để thắng đúng, không sửa file theme cha. */
ul.diva-commitment-tabs li.diva-commitment-tabs__item{margin-left:0;}
/* 5 icon SVG 1 màu (Tabler Icons, MIT — xem nguồn/giấy phép trong
   docs/diva-rules.md) đổ màu bằng mask-image thay vì hiện màu gốc file —
   khung vẫn dùng <li><span style="mask-image:..."> do JS/PHP dựng (xem
   divaPopulateCommitmentThumbs trong tab-nav.js + $thumbs trong
   inc/ux-builder-elements.php), chọn cách ít sửa nhất so với đổi hẳn sang
   SVG inline. Thường: icon --diva-primary trên nền trắng. Hover: --diva-accent.
   Đang chọn (.tns-nav-active): nền --diva-primary, icon trắng. */
.diva-commitment-tabs__icon{display:inline-block;width:48px;height:48px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:var(--diva-primary);transition:background-color .2s;}
.diva-commitment-tabs__item:hover .diva-commitment-tabs__icon{background-color:var(--diva-accent-2);} /* trước 01/10 --diva-accent = #00aeff */
.diva-commitment-tabs__item.tns-nav-active{background:var(--diva-primary);border-color:transparent;}
.diva-commitment-tabs__item.tns-nav-active .diva-commitment-tabs__icon,
.diva-commitment-tabs__item.tns-nav-active:hover .diva-commitment-tabs__icon{background-color:#fff;}

.diva-commitment-slide__pic{width:100%;}
.diva-commitment-slide__pic img{width:100%;height:auto;display:block;}
.diva-commitment-slide__ct{padding:18px 4px 0;}
.diva-commitment-slide__tt{font-size:24px;font-weight:700;color:var(--diva-primary);margin:0 0 8px;}
.diva-commitment-slide__hint{font-style:italic;color:#666;margin:0 0 14px;font-size:15px;}
.diva-commitment-slide__cta{display:inline-flex;align-items:stretch;text-decoration:none;border-radius:30px;overflow:hidden;cursor:pointer;}
.diva-commitment-slide__cta b{background:var(--diva-primary);color:#fff;font-size:17px;font-weight:600;padding:10px 20px;}
.diva-commitment-slide__cta span{background:var(--diva-red);color:#fff;font-size:19px;font-weight:600;display:flex;align-items:center;padding:0 16px;}

@media (max-width:1024px){
	.diva-commitment-tabs{gap:12px;}
	.diva-commitment-tabs__item{padding:10px;}
	.diva-commitment-slide__tt{font-size:20px;}
}

@media (max-width:812px){
	.diva-commitment-section2__title{font-size:22px;text-align:center;padding:20px 0 15px;}
	.diva-commitment-tabs{gap:10px;}
	.diva-commitment-tabs__item{padding:8px;}
	.diva-commitment-tabs__icon{width:40px;height:40px;}
	.diva-commitment-slide__tt{font-size:17px;}
	.diva-commitment-slide__hint{font-size:13px;}
	.diva-commitment-slide__cta b,.diva-commitment-slide__cta span{font-size:14px;}
}

@media (max-width:480px){
	.diva-commitment-tabs{gap:6px;}
	.diva-commitment-tabs__item{padding:6px;}
}

/* ── Cam kết (Figma mobile 1:1; desktop tự thiết kế theo cùng ngôn ngữ) ──
   Tiêu đề có dải xanh + thẻ viền navy bo 14px, mép trên chỉ chừa 2 góc bo,
   ảnh vuông nhô lên trên mép thẻ, chữ in nghiêng đậm nằm đè lên mép trên.
   • Mobile ≤549: 1 cột 314px, ảnh xen kẽ phải/trái (đúng Figma).
   • ≥550: lưới 2 cột; cột trái ảnh bên trái, cột phải ảnh bên phải (ảnh ra
     2 mép ngoài, chữ hướng vào giữa — đối xứng); thẻ lẻ cuối nằm giữa.
     Thẻ/ảnh/chữ phóng ~1.2 lần; hover: viền + chữ đổi var(--diva-accent), ảnh nhấc nhẹ.
   Hàng icon + slider banner cũ không còn hiển thị ở mọi kích thước. ── */
.diva-commitment-section2__title,
.diva-commitment-tabs,
.diva-commitment-desktop{display:none !important;}
.diva-commitment-mobile{
	display:block;
	--cc-h:66px;--cc-img-w:88px;--cc-img-h:85px;--cc-over:46px;--cc-gap:24px;
	--cc-fs:15px;--cc-lh:21px;--cc-img-in:8px;
}
.diva-commitment-mobile__title{
	font-size:22px;font-weight:700;color:var(--diva-navy);text-transform:uppercase;
	text-align:center;letter-spacing:-.3px;line-height:1.3;padding:8px 0 0;
}
.diva-commitment-mobile__hl{
	background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 45%,rgba(var(--diva-accent-rgb),0) 100%) no-repeat;
	padding:2px 0 2px 2px;
}
ul.diva-commitment-mobile__list{list-style:none;margin:0 auto;padding:30px 0 0;max-width:314px;}
ul.diva-commitment-mobile__list li.diva-commitment-card{margin:calc(var(--cc-over) + var(--cc-gap)) 0 0;} /* ghi đè .col-inner ul li của Flatsome */
ul.diva-commitment-mobile__list li.diva-commitment-card:first-child{margin-top:var(--cc-over);}
.diva-commitment-card{position:relative;box-sizing:border-box;height:var(--cc-h);}
/* Viền vẽ ở ::before; clip-path cắt đoạn giữa mép trên, chỉ chừa 2 góc bo — trong suốt nên hợp mọi màu nền. */
.diva-commitment-card::before{
	content:'';position:absolute;inset:0;box-sizing:border-box;
	border:2px solid var(--diva-navy);border-radius:14px;
	clip-path:polygon(0 0,14px 0,14px 4px,calc(100% - 14px) 4px,calc(100% - 14px) 0,100% 0,100% 100%,0 100%);
	transition:border-color .25s;
}
.diva-commitment-card__img{
	position:absolute;top:calc(-1 * var(--cc-over));width:var(--cc-img-w);height:var(--cc-img-h);
	object-fit:cover;background:#d9d9d9;display:block;z-index:1;
	transition:transform .25s,box-shadow .25s;
}
.diva-commitment-card.is-img-right .diva-commitment-card__img{right:calc(var(--cc-img-in) - 1px);}
.diva-commitment-card.is-img-left .diva-commitment-card__img{left:var(--cc-img-in);}
.diva-commitment-card__tt{
	position:absolute;top:-1px;transform:translateY(-50%);
	font-size:var(--cc-fs);font-weight:800;font-style:italic;color:var(--diva-navy);
	text-transform:uppercase;line-height:var(--cc-lh);letter-spacing:-.2px;transition:color .25s;
}
.diva-commitment-card.is-img-right .diva-commitment-card__tt{left:12px;right:calc(var(--cc-img-w) + var(--cc-img-in) + 10px);}
.diva-commitment-card.is-img-left .diva-commitment-card__tt{left:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);right:18px;}

@media (min-width:550px){
	.diva-commitment-mobile{
		--cc-h:80px;--cc-img-w:106px;--cc-img-h:102px;--cc-over:56px;--cc-gap:28px;
		--cc-fs:17px;--cc-lh:23px;--cc-img-in:12px;
	}
	.diva-commitment-mobile__title{font-size:26px;text-align:left;padding:0;}
	ul.diva-commitment-mobile__list{
		max-width:none;display:grid;grid-template-columns:1fr 1fr;
		column-gap:28px;row-gap:var(--cc-gap);padding-top:var(--cc-gap);
	}
	/* Lưới tự lo khoảng cách hàng — mỗi thẻ chỉ chừa phần ảnh nhô lên */
	ul.diva-commitment-mobile__list li.diva-commitment-card,
	ul.diva-commitment-mobile__list li.diva-commitment-card:first-child{margin:var(--cc-over) 0 0;}
	/* Đổi phía ảnh theo cột: cột trái (thẻ 1,3,5) ảnh trái, cột phải (thẻ 2,4) ảnh phải */
	.diva-commitment-card:nth-child(odd) .diva-commitment-card__img{left:var(--cc-img-in);right:auto;}
	.diva-commitment-card:nth-child(odd) .diva-commitment-card__tt{left:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);right:18px;}
	.diva-commitment-card:nth-child(even) .diva-commitment-card__img{right:var(--cc-img-in);left:auto;}
	.diva-commitment-card:nth-child(even) .diva-commitment-card__tt{left:14px;right:calc(var(--cc-img-w) + var(--cc-img-in) + 12px);}
	/* Thẻ lẻ cuối: nằm giữa hàng */
	.diva-commitment-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 14px);}

	.diva-commitment-card:hover::before{border-color:var(--diva-accent);}
	.diva-commitment-card:hover .diva-commitment-card__tt{color:var(--diva-accent);}
	.diva-commitment-card:hover .diva-commitment-card__img{transform:translateY(-6px);box-shadow:0 8px 18px rgba(var(--diva-navy-rgb),.18);}
}

/* Float island: Đặt lịch / Gọi điện / Zalo / Facebook, nổi cố định bên phải.
   Icon SVG riêng (assets/img/icons/, xem nguồn+giấy phép trong diva-rules.md)
   thay cho chữ/icon-font cũ — vòng tròn 48px desktop/44px mobile, icon 24px
   trắng bên trong. Nhãn chữ hiện dạng bong bóng khi hover (desktop) — mobile/
   không hover vẫn có `title`+`aria-label` cho tooltip/đọc màn hình. */
.diva-float-island{position:fixed;right:16px;bottom:80px;z-index:999;display:flex;flex-direction:column;gap:10px;transition:opacity .25s,visibility .25s;}
/* Mục 9 đã chốt: ẩn cụm icon nổi khi footer lọt vào màn hình, tránh che
   địa chỉ/hotline/giấy phép — xem js/float-island.js. */
.diva-float-island.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.diva-float-island__item{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.diva-float-island__icon{width:24px;height:24px;display:block;}
.diva-float-island__booking{background:var(--diva-primary);}
.diva-float-island__call{background:#FF706F;}
.diva-float-island__zalo{background:#0068ff;}
.diva-float-island__fb{background:#0866FF;}
.diva-float-island__item span{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#222;color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;}
.diva-float-island__item:hover span{opacity:1;visibility:visible;}
@media (max-width:549px){
	.diva-float-island{right:10px;bottom:70px;gap:8px;}
	.diva-float-island__item{width:44px;height:44px;}
	.diva-float-island__item span{display:none;} /* mobile không có hover — dùng title/aria-label làm tooltip/nhãn */
}

/* diva_about_section — placeholder khi chưa có ảnh banner */
.about_5_0_0__placeholder{display:flex;align-items:center;justify-content:center;min-height:300px;background:#f0f0f0;border:2px dashed #999;color:#666;font-size:16px;text-align:center;padding:20px;}

/* ============================================================
   diva_share_section / diva_share_item — Chia sẻ từ khách hàng
   Node Figma 1:220 — 28/9/2026 — bỏ tab lọc, 1 slider thẻ
   ============================================================ */
.diva-share-section{padding:48px 0;}
.diva-share-section__title{font-size:25px;font-weight:700;color:var(--diva-navy);text-transform:uppercase;letter-spacing:-.5px;line-height:1.15;margin:0 0 48px;text-align:center;}
/* Figma: chữ navy, dải xanh var(--diva-accent) đậm ở đầu "KHÁCH HÀNG" rồi mờ dần sang phải (cùng kiểu tiêu đề Đội ngũ bác sĩ / Dịch vụ) */
.diva-share-section__title strong{
    color:var(--diva-navy);font-weight:700;font-style:normal;padding:2px 4px 2px 2px;border-radius:0;
    background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 45%,rgba(var(--diva-accent-rgb),.08) 100%) no-repeat;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Slider outer: overflow visible để thấy thẻ kế tiếp */
.diva-share-slider-outer{position:relative;overflow:hidden;padding-bottom:6px;}
.diva-share-slider{overflow:visible;}
/* Nút prev/next */
.diva-share-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;border:2px solid var(--diva-accent-2);background:#fff;color:var(--diva-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.diva-share-arrow:hover{background:var(--diva-accent-2);color:#fff;}
.diva-share-arrow--prev{left:0;}
.diva-share-arrow--next{right:0;}
.diva-share-arrow.is-hidden{opacity:.3;pointer-events:none;}
.diva-share-slider .swiper-wrapper{align-items:stretch;}
.diva-share-slider .swiper-slide{width:146px;flex-shrink:0;}

/* Card */
.diva-share-card{position:relative;border-radius:15px;overflow:hidden;cursor:pointer;aspect-ratio:146/195;display:block;transition:box-shadow .2s,outline .2s;outline:3px solid transparent;outline-offset:0;}
.diva-share-card:focus-visible{outline-color:var(--diva-accent-2);}
.diva-share-card.is-active{outline-color:var(--diva-accent-2);}
.diva-share-card__photo{position:absolute;inset:0;}
.diva-share-card__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-share-card__photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e8e8e8;color:#999;font-size:12px;text-align:center;}
.diva-share-card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 36%,rgba(31,43,113,.8) 70%,var(--diva-navy) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:8px 8px 12px;}
.diva-share-card__label{display:inline-block;border:1px solid rgba(255,255,255,.8);border-radius:5px;color:#fff;font-size:11px;font-weight:600;padding:3px 8px;margin-bottom:6px;align-self:center;text-align:center;}
.diva-share-card__quote{color:#fff;font-size:9px;font-style:italic;text-align:center;line-height:1.35;margin:0 0 4px;padding:0 2px;}
.diva-share-card__name{color:#fff;font-size:9px;font-weight:700;text-align:right;display:block;}

/* Before/After panel */
.diva-share-panel{margin-top:18px;}
.diva-share-panel__arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:14px solid var(--diva-accent-2);margin:0 0 0 32px;display:none;transition:margin-left .3s ease;}
.diva-share-panel.has-data .diva-share-panel__arrow{display:block;}
.diva-share-panel__frame{border:3px solid var(--diva-accent-2);border-radius:20px;padding:16px 14px;display:flex;gap:12px;}
.diva-share-panel__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.diva-share-panel__img-wrap{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#f0f0f0;position:relative;}
.diva-share-panel__img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-share-panel__img[src=""]{display:none;}
.diva-share-panel__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:11px;text-align:center;padding:8px;line-height:1.4;}
.diva-share-panel__label{font-size:12px;font-weight:600;font-style:italic;color:#555;padding:2px 10px;}

@media (min-width:550px){
	.diva-share-slider .swiper-slide{width:180px;}
	.diva-share-card__quote{font-size:10px;}
	.diva-share-card__name{font-size:10px;}
	.diva-share-panel__frame{padding:20px;gap:16px;}
}
@media (min-width:1024px){
	.diva-share-section{padding:64px 0;}
	.diva-share-section__title{font-size:30px;}
	.diva-share-slider .swiper-slide{width:200px;}
	.diva-share-panel__frame{padding:24px 20px;gap:24px;}
	.diva-share-panel__label{font-size:13px;}
}

/* =====================================================================
   KHOẢNG CÁCH GIỮA CÁC KHỐI TRANG CHỦ — đo từ Figma "DIva copy" (Mobile 375)
   Mobile: nội dung khối trên → tiêu đề khối dưới = 28px (dịch vụ→bác sĩ 29,
   bác sĩ→chia sẻ 28, chia sẻ→cam kết 28) ⇒ mỗi section padding 14/14.
   Tiêu đề → nội dung: dịch vụ 19, bác sĩ 12 (tới thanh avatar), chia sẻ 16,
   cam kết 26 (tới mép trên ảnh), các khối không có trong Figma dùng 16.
   Cam kết → khung đặt lịch: 61px. Desktop (≥550) nhân ~2: 30/30 (=60) và
   tiêu đề → nội dung 30px (bác sĩ 24).
   Bỏ hết padding/margin cộng dồn bên trong (col 30px, module 20–48px, h2
   inline padding-top) để khoảng cách chỉ do 1 chỗ quyết định.
   ===================================================================== */
:root{--diva-sec-y:35px;--diva-title-gap:30px;} /* +5px theo yêu cầu 28/9 */
@media (max-width:549px){:root{--diva-sec-y:19px;--diva-title-gap:16px;}}

.home #content > .section{padding-top:var(--diva-sec-y) !important;padding-bottom:var(--diva-sec-y) !important;}
.home #content > .section > .section-content > .row{margin-bottom:0 !important;}
.home #content > .section > .section-content > .row > .col{padding-bottom:0 !important;}
.home #content > .section > .section-content > .row > .col > .col-inner > :last-child{margin-bottom:0 !important;}

/* Bỏ padding ngoài của từng module */
.home .diva-doctor-section,
.home .diva-share-section,
.home .diva-commitment-section2{padding-top:0 !important;padding-bottom:0 !important;}
.home .diva-service-section{padding-bottom:0 !important;}
.home .about_5_0_0{padding-bottom:0 !important;}
.home .about_5_0_0_tabs > .tab:last-child{margin-bottom:0 !important;}
.home .video_4_1_0{padding-top:0 !important;padding-bottom:0 !important;}
.home .video_4_1_0__title{margin-top:0 !important;padding-top:0 !important;}
.home .diva-doctor-section__cards .diva-doctor-card:last-child{margin-bottom:0 !important;}
.home .section:has(.about_5_0_0) .text > h2{padding-top:0 !important;}

/* Tiêu đề → nội dung */
.home .diva-doctor-section__title-wrap{padding-bottom:24px !important;}
.home .diva-doctor-section__title{padding-bottom:0 !important;}
.home .section:has(.diva-service-section) .text > h2,
.home .section:has(.about_5_0_0) .text > h2,
.home .section:has(.diva-news-swiper) .text > h2{margin-bottom:var(--diva-title-gap) !important;}
.home .diva-share-section__title{margin-bottom:var(--diva-title-gap) !important;}
.home .video_4_1_0__title{margin-bottom:var(--diva-title-gap) !important;padding-bottom:0 !important;}

@media (max-width:549px){
	.home .diva-doctor-section__title-wrap{padding-bottom:12px !important;}
	.home .section:has(.diva-service-section) .text > h2{margin-bottom:19px !important;}
	.home .diva-commitment-mobile__title{padding-top:0 !important;}
	.home ul.diva-commitment-mobile__list{padding-top:26px !important;}
}
/* Cột Cam kết / Đặt lịch xếp chồng (<850px): khoảng cách Figma 61px */
@media (max-width:849px){
	.home .section:has(.diva-booking-box--figma) .row > .col:has(.diva-booking-box) {margin-top:61px;}
	.home .section:has(.diva-booking-box) .row > .col:has(.diva-booking-box) .col-inner > .diva-booking-box{margin-top:0;}
}
.home .diva-service-swiper .swiper-pagination{bottom:0 !important;}

/* Cỡ chữ tiêu đề khối trang chủ — thống nhất (28/9): mobile 20px, desktop 32px.
   (Tiêu đề trong khung form "Đặt lịch thăm khám" không tính — là tiêu đề form.) */
.home .section:has(.diva-service-section) .text > h2,
.home .diva-doctor-section__title, .home .diva-doctor-section__title p,
.home .section:has(.about_5_0_0) .text > h2,
.home .diva-share-section__title,
.home .diva-commitment-mobile__title,
.home .video_4_1_0__title,
.home .section:has(.diva-news-swiper) .text > h2{font-size:32px !important;}
@media (max-width:549px){
	.home .section:has(.diva-service-section) .text > h2,
	.home .diva-doctor-section__title, .home .diva-doctor-section__title p,
	.home .section:has(.about_5_0_0) .text > h2,
	.home .diva-share-section__title,
	.home .diva-commitment-mobile__title,
	.home .video_4_1_0__title,
	.home .section:has(.diva-news-swiper) .text > h2{font-size:20px !important;}
}

/* Thanh avatar bác sĩ — DESKTOP/TABLET (≥550) theo Figma: khung navy gọn ôm vừa
   4 avatar (không kéo full ngang), căn giữa dưới tiêu đề. Avatar 80×80 (tính cả
   viền 3px), cách nhau 13px, đệm khung 7px trên/dưới, 13px trái/phải
   (Figma ≈ 386×93 cho 4 avatar). Tiêu đề → thanh: 36px (Figma ~37). */
@media (min-width:550px){
	.home .diva-doctor-section__title-wrap{padding-bottom:36px !important;}
	.diva-doctor-section__avatar-bar{
		display:flex;width:-moz-fit-content;width:fit-content;max-width:100%;
		margin:0 auto 16px;padding:7px 13px;box-sizing:border-box;overflow-x:auto;
	}
	.diva-doctor-section__avatars{justify-content:center;gap:13px;padding:0;flex-wrap:nowrap;}
	.diva-doctor-section__avatars .diva-doctor-avatar{margin:0 !important;}
	.diva-doctor-avatar{width:80px;height:80px;box-sizing:border-box;}
	.diva-doctor-avatar img{width:100%;height:100%;}
}

/* ── Tin tức: mọi thẻ CAO BẰNG NHAU theo mẫu (28/9) ──
   Thẻ trắng đổ bóng nhẹ; ảnh 56%; tiêu đề đậm in hoa luôn chiếm 3 dòng;
   ngày; gạch nhỏ; trích đoạn xám căn giữa luôn hiện, luôn chiếm 3 dòng
   (trước đây chỉ hiện khi hover nên thẻ cao thấp khác nhau).
   Ẩn số bình luận. Bài chưa có ảnh: khung giữ chỗ (.diva-news-noimg). */
.diva-news-swiper .swiper-wrapper{align-items:stretch;}
.diva-news-swiper .swiper-slide{height:auto;display:flex;}
.diva-news-swiper .swiper-slide > .post-item{display:flex;width:100%;max-width:100%;flex:1 1 auto;padding-bottom:0 !important;}
.diva-news-swiper .swiper-slide .col-inner{display:flex;width:100%;}
.diva-news-swiper .box-blog-post{
	display:flex;flex-direction:column;width:100%;background:#fff;
	box-shadow:0 4px 18px rgba(var(--diva-navy-rgb),.10);border-radius:0;overflow:hidden;margin:0 0 6px;
}
.diva-news-swiper .box-blog-post .box-text{flex:1 1 auto;padding:14px 16px 18px;}
.diva-news-swiper .post-title{
	font-size:17px;font-weight:800;color:var(--diva-navy);line-height:1.3;text-transform:uppercase;text-align:left;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	height:calc(1.3em * 3);margin:0 0 6px;
}
.diva-news-swiper .post-title a{color:inherit;}
.diva-news-swiper .post-meta{text-align:left;font-size:13px;color:#555;margin:0;}
.diva-news-swiper .is-divider{margin:10px auto;}
.diva-news-swiper .from_the_blog_excerpt,
.diva-news-swiper .from_the_blog_excerpt.show-on-hover{
	opacity:1 !important;visibility:visible !important;max-height:none !important;transform:none !important;
	display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	height:calc(1.5em * 3);margin:0;font-size:15px;line-height:1.5;color:#555;text-align:center;
}
.diva-news-swiper .from_the_blog_comments{display:none !important;}
.diva-news-noimg{
	background:#eef3f9 url("../../../uploads/2024/01/He-thong-nha-khoa-diva-750-x-432-px.png") center/cover no-repeat;
}
.diva-news-swiper .box-blog-post > .box-image{width:100%;flex:0 0 auto;}
/* Tin tức: trích đoạn nhỏ lại 13px (vẫn tối đa 3 dòng) + chừa thêm chỗ cho chấm phân trang */
.diva-news-swiper .from_the_blog_excerpt,
.diva-news-swiper .from_the_blog_excerpt.show-on-hover{font-size:13px !important;line-height:1.45 !important;height:calc(1.45em * 3) !important;}
.diva-news-swiper .box-blog-post .box-text{padding-bottom:14px;}
.diva-news-swiper{padding-bottom:44px !important;}
/* Trích đoạn tin tức: 14px (bằng chữ nội dung trang), căn trái */
.diva-news-swiper .from_the_blog_excerpt,
.diva-news-swiper .from_the_blog_excerpt.show-on-hover{font-size:14px !important;text-align:left !important;}
/* Popup đặt lịch dùng chung form Figma: khung 360px (≤375px màn: co theo article) */
.popup_regist_1_0_1 .diva-booking-box--figma{--bk-w:360px;--bk-photo-h:219px;}
.popup_regist_1_0_1 .diva-booking-box--figma .diva-booking-form{max-width:276px !important;}
@media (max-width:375px){
	.popup_regist_1_0_1 .diva-booking-box--figma{--bk-w:100%;--bk-photo-h:187px;}
	.popup_regist_1_0_1 .diva-booking-box--figma .diva-booking-form{max-width:246px !important;}
}
/* Modal đăng ký cũ (pop_regpr_1_0_0, form hỏng) không bao giờ hiện — mọi nút dùng chung popup #popup_regist_1_0_1 */
#pop_regpr_1_0_0{display:none !important;}
/* Popup đặt lịch nằm trên header + cụm icon nổi; nút ✖ luôn nổi trên ảnh */
.popup_regist_1_0_1{z-index:100000 !important;}
.popup_regist_1_0_1 .popup_regist_1_0_1_boxTv #popup_regist_1_0_1_closePopup{z-index:5;cursor:pointer;}
@media (max-width:549px){
	.popup_regist_1_0_1 .popup_regist_1_0_1_boxTv #popup_regist_1_0_1_closePopup{
		top:-40px !important;right:0 !important;width:32px;height:32px;line-height:32px;text-align:center;
		padding:0 !important;border-radius:50% !important;background:#12173c !important;color:#fff !important;font-size:16px !important;
	}
}
/* Video khách hàng: chừa chỗ dưới slider cho chấm phân trang — chấm nằm dưới thẻ, không đè lên thẻ */
.diva-video-swiper{padding-bottom:26px !important;} /* +10px: chấm lùi xuống 10px */
@media (max-width:549px){.diva-video-swiper{padding-bottom:46px !important;}}

/* Nút "Tìm hiểu thêm về Bác sĩ": hover — chữ vẫn trắng, nền chuyển xanh var(--diva-accent),
   hình tròn phía sau đổi sang navy và trượt ra thêm, nút nhấc nhẹ + đổ bóng. */
.diva-doctor-card__btn{transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;}
.diva-doctor-card__btn::after{transition:background-color .3s ease,right .3s ease;}
.diva-doctor-card__btn:hover,.diva-doctor-card__btn:focus-visible{
	background:var(--diva-accent);color:#fff !important;transform:translateY(-2px);
	box-shadow:0 6px 14px rgba(var(--diva-accent-rgb),.35);
}
.diva-doctor-card__btn:hover::after,.diva-doctor-card__btn:focus-visible::after{background:var(--diva-navy);right:-18px;}
@media (prefers-reduced-motion:reduce){
	.diva-doctor-card__btn,.diva-doctor-card__btn::after{transition:none;}
	.diva-doctor-card__btn:hover{transform:none;}
}

/* Đồng bộ mọi tiêu đề section kiểu cũ (h2 xanh var(--diva-primary) inline trong ux_text: "Vì sao chọn Diva",
   "Tin tức mới nhất" + tiêu đề "Video khách hàng") theo đúng kiểu "DỊCH VỤ TIÊU BIỂU":
   chữ navy var(--diva-navy) đậm 700, căn giữa, co theo chữ, dải xanh var(--diva-accent) sau chữ mờ dần sang phải. */
.home .section .text > h2[style*="0055"],
.home .video_4_1_0__title{
	display:table;width:auto !important;margin-left:auto !important;margin-right:auto !important;
	color:var(--diva-navy) !important;font-weight:700 !important;text-transform:uppercase;text-align:center !important;
	padding:2px 6px !important;line-height:1.3 !important;
	background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 30%,rgba(var(--diva-accent-rgb),0) 70%) no-repeat;
}

/* =====================================================================
   DỊCH VỤ TIÊU BIỂU — lưới tĩnh theo Figma "DIva copy" (29/9), bỏ carousel.
   Desktop (khung 1280): 4 thẻ 250×400 cách nhau 61px trên 1 hàng; ảnh
   250×205 bo 30px nằm TRÊN, khung navy var(--diva-navy) 250×212 bo 20px chồng lên
   ảnh 18px; tên 28px đậm 800 căn giữa; danh sách 17px; nút tròn đỏ var(--diva-red)
   ~32px góc phải dưới (cách 12/10px).
   Mobile (375): 2 cột 145px cách 25px, 2 hàng cách 16px; ảnh 145×108 bo 30,
   khung 145×112 bo 20 chồng 10px; tên 13px căn trái; danh sách 10px; nút
   18px (cách 7px). Thứ tự mobile theo Figma: Trồng răng, Chỉnh nha / Bọc sứ,
   Tổng quát (thẻ 2 ↔ 3 đổi chỗ bằng order).
   Tablet 550–1023: 2 cột thẻ cỡ desktop.
   ===================================================================== */
.diva-service-grid{
	display:grid;grid-template-columns:repeat(4,250px);justify-content:space-between;
	row-gap:32px;max-width:1183px;margin:0 auto;
}
.diva-service-grid .diva-service-grid__item{
	position:relative;display:block;height:auto;background:none;border-radius:0;overflow:visible;box-shadow:none;
}
.diva-service-grid .diva-service-grid__image{
	position:relative;z-index:1;aspect-ratio:auto;height:205px;border-radius:30px;overflow:hidden;background:#e8eef5;
}
.diva-service-grid .diva-service-grid__image img{width:100%;height:100%;object-fit:cover;display:block;}
.diva-service-grid .diva-service-grid__body{
	position:relative;margin-top:-18px;height:212px;box-sizing:border-box;
	padding:33px 22px 16px 25px;background:var(--diva-navy);border-radius:20px;
}
.diva-service-grid .diva-service-grid__title{
	display:block;min-height:0;margin:0 0 8px;color:#fff;font-size:28px;font-weight:800;
	line-height:1.15;letter-spacing:-.015em;text-transform:none;text-align:center;
}
.diva-service-grid .diva-service-grid__sublist{margin:0;padding:0;list-style:none;}
.diva-service-grid .diva-service-grid__sublist li{
	margin:0;padding:0;color:#fff;font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-.015em;
}
.diva-service-grid .diva-service-grid__sublist li::before{content:none;}
.diva-service-grid .diva-service-grid__arrow{
	right:12px;bottom:10px;width:32px;height:32px;z-index:2;font-size:17px;
	background:var(--diva-red);box-shadow:none;transition:transform .25s ease,background-color .25s ease;
}
.diva-service-grid .diva-service-grid__arrow:hover{background:#c9302c;transform:scale(1.1);}
.diva-service-grid .diva-service-grid__image img{transition:transform .35s ease;}
.diva-service-grid .diva-service-grid__item:hover .diva-service-grid__image img{transform:scale(1.05);}

@media (max-width:1023px){
	.diva-service-grid{grid-template-columns:repeat(2,250px);justify-content:center;column-gap:40px;}
}
@media (max-width:549px){
	.diva-service-grid{grid-template-columns:repeat(2,145px);column-gap:25px;row-gap:16px;justify-content:center;}
	.diva-service-grid .diva-service-grid__item:nth-child(2){order:3;}
	.diva-service-grid .diva-service-grid__item:nth-child(3){order:2;}
	.diva-service-grid .diva-service-grid__item:nth-child(4){order:4;}
	.diva-service-grid .diva-service-grid__image{height:108px;border-radius:30px;}
	.diva-service-grid .diva-service-grid__body{margin-top:-10px;height:112px;padding:15px 10px 8px 14px;}
	.diva-service-grid .diva-service-grid__title{font-size:13px;line-height:1.3;text-align:left;margin:0 0 3px;}
	.diva-service-grid .diva-service-grid__sublist li{font-size:10px;line-height:1.2;}
	.diva-service-grid .diva-service-grid__arrow{right:7px;bottom:7px;width:18px;height:18px;font-size:10px;}
}

/* Khối bác sĩ — 1 bác mỗi lúc (yêu cầu khách 29/9): chạm avatar → hiện thẻ bác đó.
   Thẻ mới hiện ra bằng hiệu ứng mờ-trượt nhẹ; avatar chưa chọn hơi mờ để gợi ý "chạm để xem". */
.diva-doctor-section.is-tabbed .diva-doctor-card{display:none;}
.diva-doctor-section.is-tabbed .diva-doctor-card.is-current{display:block;margin-bottom:0 !important;animation:divaDoctorIn .35s ease both;}
@keyframes divaDoctorIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
.diva-doctor-section.is-tabbed .diva-doctor-avatar{cursor:pointer;transition:border-color .2s,opacity .2s,transform .2s;}
.diva-doctor-section.is-tabbed .diva-doctor-avatar:not(.is-active){opacity:.7;}
.diva-doctor-section.is-tabbed .diva-doctor-avatar:not(.is-active):hover{opacity:1;transform:translateY(-2px);}
.diva-doctor-section.is-tabbed .diva-doctor-avatar:focus-visible{outline:2px solid var(--diva-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.diva-doctor-section.is-tabbed .diva-doctor-card.is-current{animation:none;}}

/* =====================================================================
   FONT MONTSERRAT — THỐNG NHẤT 1 FONT CHO TOÀN SITE (29/9)
   Figma "DIva copy" dùng Montserrat cho mọi chữ → áp cho mọi trang, header,
   menu, footer, popup, form. Trừ font icon (thẻ <i>, class icon-*, dashicons)
   để không vỡ biểu tượng.
   ===================================================================== */
html body,
body :is(h1,h2,h3,h4,h5,h6,p,a,span,div,li,ul,ol,td,th,label,strong,b,em,small,blockquote,figcaption,
	input,select,option,textarea,button,.button,.nav,.heading-font,.alt-font):not(i):not([class^="icon-"]):not([class*=" icon-"]):not([class*="dashicons"]){
	font-family:var(--diva-font) !important;
}
/* Form đặt lịch với Montserrat (rộng hơn Lato): theo Figma — ô nhập Medium Italic 15px,
   tiêu đề ExtraBold 20px; ô chọn thu đệm 2 bên để "Dịch vụ anh/chị quan tâm" không bị cắt. */
.diva-booking-box--figma .diva-booking-title{font-size:20px !important;}
.diva-booking-box--figma .diva-booking-form input[type=text],
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-service-select,
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-branch-select{font-weight:500 !important;}
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-service-select,
.diva-booking-box--figma .diva-booking-form .diva-booking-select-wrap select.diva-booking-branch-select{padding:0 26px 0 10px !important;}
/* Montserrat rộng hơn Lato: dải chữ đầu header mobile bị cắt "…" 1px → bỏ giãn chữ */
@media (max-width:549px){.header_6_0_0_box_top__text{letter-spacing:0 !important;}}

/* =====================================================================
   VÌ SAO CHỌN DIVA (29/9) — thẻ cùng kiểu "Dịch vụ tiêu biểu", chữ LUÔN hiện
   (bỏ kiểu rê chuột mới hiện chữ). Bo góc mềm hơn: ảnh 36px, khung navy 28px,
   đổ bóng nhẹ. Desktop 4 thẻ 1 hàng; tablet 2 cột; mobile 2 cột × 2 hàng.
   Không có ảnh banner → không còn vùng banner trống (PHP .is-no-banner).
   ===================================================================== */
.about_5_0_0.is-no-banner .box{margin-top:0 !important;}
.about_5_0_0 .about_5_0_0_tabs{
	display:grid;grid-template-columns:repeat(4,250px);justify-content:space-between;align-items:stretch;
	width:auto !important;max-width:1140px;margin:0 auto;padding:0;row-gap:28px;
}
.about_5_0_0 .about_5_0_0_tabs .tab{
	width:auto;margin:0 !important;cursor:default;display:flex;flex-direction:column;
	border-radius:36px;box-shadow:0 10px 26px rgba(var(--diva-navy-rgb),.12);
}
.about_5_0_0 .about_5_0_0_tabs .tab .pic{
	position:relative;z-index:1;height:205px;border-radius:36px;overflow:hidden;background:#e8eef5;
}
.about_5_0_0 .about_5_0_0_tabs .tab .pic::before{display:none;}
.about_5_0_0 .about_5_0_0_tabs .tab .pic img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.about_5_0_0 .about_5_0_0_tabs .tab:hover .pic img{transform:scale(1.05);}
.about_5_0_0 .about_5_0_0_tabs .tab p{
	position:static;visibility:visible;opacity:1;display:flex;align-items:center;justify-content:center;
	flex:1 1 auto;min-height:118px;margin:-22px 0 0;padding:34px 18px 20px;box-sizing:border-box;
	background:var(--diva-navy);border-radius:0 0 28px 28px;color:#fff;text-align:center;text-transform:none;
	font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.01em;top:auto;width:auto;transition:none;
}
@media (max-width:1023px){
	.about_5_0_0 .about_5_0_0_tabs{grid-template-columns:repeat(2,250px);justify-content:center;column-gap:40px;}
}
@media (max-width:549px){
	.about_5_0_0 .about_5_0_0_tabs{grid-template-columns:repeat(2,145px);column-gap:25px;row-gap:16px;}
	.about_5_0_0 .about_5_0_0_tabs .tab{border-radius:26px;box-shadow:0 6px 16px rgba(var(--diva-navy-rgb),.12);}
	.about_5_0_0 .about_5_0_0_tabs .tab .pic{height:108px;border-radius:26px;}
	.about_5_0_0 .about_5_0_0_tabs .tab p{min-height:74px;margin-top:-12px;padding:20px 10px 12px;border-radius:0 0 20px 20px;font-size:12.5px;}
}

/* Dịch vụ (29/9): mũi tên SVG trắng thay ký tự "↗" (iPhone/Mac tự đổi thành emoji ô xám);
   mobile: danh sách dịch vụ con to hơn 12px, dòng sát 1.25; khung navy tự cao theo chữ,
   thẻ cùng hàng vẫn cao bằng nhau. */
.diva-service-grid .diva-service-grid__arrow svg{width:55%;height:55%;display:block;transition:transform .25s ease;}
.diva-service-grid .diva-service-grid__arrow:hover svg{transform:translate(2px,-2px);}
@media (max-width:549px){
	.diva-service-grid .diva-service-grid__item{display:flex;flex-direction:column;}
	.diva-service-grid .diva-service-grid__body{height:auto;min-height:112px;flex:1 1 auto;padding:15px 10px 30px 14px;}
	.diva-service-grid .diva-service-grid__sublist li{font-size:12px;line-height:1.25;}
	.diva-service-grid .diva-service-grid__arrow{width:22px;height:22px;right:8px;bottom:8px;}
}

/* Khối bác sĩ MOBILE — căn đều 2 bên (29/9, bỏ theo Figma vì Figma lệch):
   khung navy cách đều 15px 2 bên (rộng = cột 345px), ảnh 145×212 nằm gọn trong
   màn, mép phải thẳng mép phải khung navy (không còn tràn/cắt 16px), tiểu sử
   chừa chỗ cho ảnh; nút "Tìm hiểu thêm" căn giữa → thẳng hàng với khung. */
@media (max-width:549px){
	.diva-doctor-section__cards{padding:0 !important;overflow:visible !important;}
	.diva-doctor-card__body{width:auto !important;margin:0 !important;padding:10px 0 16px 10px !important;min-height:165px;}
	/* Ảnh nhô lên trên khung navy như thiết kế: từ đỉnh thẻ (top:0) tới chân khung navy (bottom:55px) */
	.diva-doctor-card__photo{left:auto !important;right:0 !important;top:0 !important;bottom:55px !important;width:158px !important;height:auto !important;}
	.diva-doctor-card__photo img{object-position:top center !important;}
	.diva-doctor-card__photo{border-radius:0 0 25px 0;overflow:hidden;} /* khớp góc bo khung navy */
	.diva-doctor-card__bio{max-width:calc(100% - 158px - 4px) !important;}
	.diva-doctor-card__name{left:20px !important;z-index:3 !important;}
}

/* Nút play video: tam giác SVG trắng (thay ký tự "▶" — iPhone/Mac tự đổi thành emoji ô xám) */
.diva-video-card__play{padding-left:0 !important;}
.diva-video-card__play svg{width:42%;height:42%;display:block;margin-left:3px;} /* lệch phải 3px cho tam giác cân thị giác */

/* 29/9 rà soát toàn trang */
/* Tin tức: tiêu đề bị Flatsome ép display:flow-root → line-clamp không ăn, chữ bị cắt ngang không có "…" */
.diva-news-swiper .post-title{display:-webkit-box !important;}
.diva-news-swiper .post-title a{display:inline !important;} /* a inline-block làm line-clamp không cắt "…" */
@media (max-width:549px){
  /* Chia sẻ KH: chữ trích dẫn 9px quá nhỏ trên điện thoại */
  .diva-share-card__quote{font-size:11px !important;line-height:1.35 !important;}
  .diva-share-card__name{font-size:11px !important;}
}
/* Chia sẻ KH: mũi tên "trước" khi đang ở đầu danh sách chỉ mờ đi → vẫn đè lên thẻ đầu. Ẩn hẳn. */
.diva-share-arrow.is-hidden{opacity:0 !important;visibility:hidden;}
/* Khoảng cách tiêu đề → nội dung: Dịch vụ (thừa 40px) & Vì sao chọn Diva (thừa 30px) được đưa về cùng --diva-title-gap như các khối khác */
.home .diva-service-section{padding-top:0 !important;}
.home .about_5_0_0{padding-top:0 !important;}

/* 30/9: Form đặt lịch — chữ gợi ý (Họ tên, SĐT/Zalo) đang xám #d9dbe6, lệch màu với ô chọn (Chi nhánh, Dịch vụ) → đồng bộ trắng.
   Áp cho cả form trong trang và trong popup; thêm tiền tố -webkit-/-moz- cho Safari/iOS & Firefox; giữ chữ trắng khi trình duyệt tự điền (autofill). */
.diva-booking-box--figma .diva-booking-form input::placeholder,
.diva-booking-box--figma .diva-booking-form textarea::placeholder{color:#fff !important;opacity:1 !important;-webkit-text-fill-color:#fff;}
.diva-booking-box--figma .diva-booking-form input::-webkit-input-placeholder{color:#fff !important;opacity:1 !important;}
.diva-booking-box--figma .diva-booking-form input::-moz-placeholder{color:#fff !important;opacity:1 !important;}
.diva-booking-box--figma .diva-booking-form input:-webkit-autofill,
.diva-booking-box--figma .diva-booking-form input:-webkit-autofill:hover,
.diva-booking-box--figma .diva-booking-form input:-webkit-autofill:focus{
	-webkit-text-fill-color:#fff !important;caret-color:#fff;
	-webkit-box-shadow:0 0 0 1000px #393c5a inset !important;transition:background-color 9999s;
}

/* 30/9: Tiêu đề thẻ dịch vụ viết HOA để nổi hơn phần dòng phụ (khách yêu cầu) */
.diva-service-grid .diva-service-grid__title{text-transform:uppercase !important;}
@media (max-width:549px){
	.diva-service-grid .diva-service-grid__title{font-size:14px !important;line-height:1.25 !important;letter-spacing:0 !important;margin-bottom:4px !important;}
}

/* 30/9: Tiêu đề "Đội ngũ bác sĩ" xuống 2 dòng (mobile) — dải xanh dòng trên đè lên dòng dưới.
   Giãn khoảng cách 2 dòng để 2 dải xanh tách nhau ~5px. */
.home .diva-doctor-section__title p{line-height:1.6 !important;}
.home .diva-doctor-section__hl{padding:2px 0 !important;}

/* 30/9: "Vì sao chọn Diva" — khung thẻ bo y hệt "Dịch vụ tiêu biểu" (khách yêu cầu):
   ảnh bo 30px nằm trên; khung navy bo đủ 4 góc 20px, chồng lên ảnh 18px (mobile 10px);
   bỏ đổ bóng. Chữ vẫn căn giữa như cũ. */
.about_5_0_0 .about_5_0_0_tabs .tab{border-radius:0 !important;box-shadow:none !important;background:none;}
.about_5_0_0 .about_5_0_0_tabs .tab .pic{border-radius:30px !important;}
.about_5_0_0 .about_5_0_0_tabs .tab p{margin-top:-18px !important;padding-top:32px !important;border-radius:20px !important;}
@media (max-width:549px){
	.about_5_0_0 .about_5_0_0_tabs .tab .pic{border-radius:30px !important;}
	.about_5_0_0 .about_5_0_0_tabs .tab p{margin-top:-10px !important;padding-top:18px !important;border-radius:20px !important;}
}

/* 30/9: Thanh 4 avatar bác sĩ (mobile) — đang xếp từ trái (flex-start + đệm trái 16px) nên
   máy màn rộng hơn 375px (iPhone Pro Max ~430px) bị lệch trái. Căn giữa theo mọi bề rộng;
   "safe" = máy quá hẹp không đủ chỗ thì vẫn cuộn ngang được, không bị cắt avatar đầu. */
@media (max-width:549px){
	.diva-doctor-section__avatars{justify-content:safe center !important;padding-left:12px !important;padding-right:12px !important;box-sizing:border-box;}
}
@media (max-width:549px){
	/* Máy hẹp (<370px) không đủ chỗ cho 4 ô 80px → ô tự thu nhỏ vừa khít để vẫn căn giữa đều 2 bên */
	.diva-doctor-section__avatars .diva-doctor-avatar{width:min(80px, calc((100vw - 48px) / 4)) !important;height:auto !important;aspect-ratio:1/1;}
	.diva-doctor-section__avatars .diva-doctor-avatar img{width:100% !important;height:100% !important;}
}

/* =====================================================================
   CANVAS UX BUILDER (01/10/2026) — các class diva-uxb-* chỉ được PHP in ra
   khi ux_builder_is_active(), không ảnh hưởng trang thật.
   UX Builder thay $content của container bằng thẻ <content> rồi chèn item
   thật (mỗi item bọc trong .uxb-wrapper) vào đó — display:contents để các
   .uxb-wrapper trở thành ô lưới trực tiếp, item vẫn bấm chọn/sửa được.
   ===================================================================== */
.diva-service-grid > content,
.diva-uxb-grid > content{display:contents;}
.diva-uxb-note{margin:0 0 14px;padding:6px 12px;background:#fff8e1;border-left:3px solid #f0ad00;color:#7a5b00;font:13px/1.4 sans-serif;text-align:left;}
.diva-uxb-grid{display:grid;gap:16px;}
.diva-uxb-grid--video{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.diva-uxb-grid--share{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));}
.diva-uxb-grid--commitment{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.diva-uxb-grid--commitment .diva-commitment-slide{position:relative;border:1px dashed #b8c6d8;border-radius:8px;padding:10px;}
.diva-uxb-commitment-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 0 8px;border:1px solid #d5dde8;border-radius:8px;background:#f2f6fa;font:11px/1.2 sans-serif;color:#999;text-align:center;}
.diva-uxb-commitment-icon img{max-width:44px;max-height:44px;}

/* =====================================================================
   CHIA SẺ KHÁCH HÀNG — viền xanh thẻ đang chọn (sửa 01/10/2026)
   Trước đây dùng outline 3px VẼ RA NGOÀI thẻ, trong khi thẻ nằm sát mép
   .diva-share-slider (Swiper đặt overflow:hidden) → viền bị cắt mất cạnh
   trên/dưới/trái, chỉ còn cạnh phải → nhìn không đều. Chuyển viền vào
   TRONG thẻ bằng lớp ::after phủ trên ảnh: không bao giờ bị cắt, bo góc
   đều theo border-radius trên mọi trình duyệt (kể cả Safari cũ).
   ===================================================================== */
.diva-share-card,
.diva-share-card:focus-visible,
.diva-share-card.is-active{outline:none;}
.diva-share-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 3px transparent;pointer-events:none;transition:box-shadow .2s;}
.diva-share-card.is-active::after,
.diva-share-card:focus-visible::after{box-shadow:inset 0 0 0 3px var(--diva-accent-2);}
/* Chia sẻ KH — khoảng cách 2 bên (01/10/2026): div.row bên trong khối là
   .row của Flatsome → tự có margin 0 -15px (để bù padding của .col), nhưng
   khối này không có .col bên trong → nội dung bị kéo tràn 15px mỗi bên:
   mobile dính sát mép màn hình, desktop lệch 15px so với các khối khác. */
.diva-share-section.diva-share-section > .row:not(.row-collapse){margin-left:0;margin-right:0;} /* lặp class để thắng ".row .row:not(.row-collapse)" của flatsome.css (nạp sau, cùng độ ưu tiên) */

/* =====================================================================
   VÙNG SOẠN THẢO (PA2 đợt 3, 01/10/2026) — tiểu sử bác sĩ, danh sách dịch
   vụ con giờ là khối Text gốc bên trong thẻ (diva_rich_area() trong
   inc/ux-builder-elements.php). Wrapper giữ nguyên class cũ (.diva-doctor-
   card__bio / .diva-service-grid__sublist) nên cỡ chữ/màu/khoảng cách cũ
   vẫn áp; phần dưới chỉ trung hoà style mặc định của Flatsome cho ul/p/li
   bên trong khối Text để nhìn giống hệt bản cũ.
   ===================================================================== */
.diva-rich > .text,.diva-rich .uxb-wrapper > .text{margin:0;padding:0;}
.diva-rich p{margin:0 0 .35em;color:inherit;}
.diva-rich p:last-child{margin-bottom:0;}
.diva-rich a{color:inherit;}
/* Tiểu sử bác sĩ: wrapper là div (bản cũ wrapper là ul) → chuyển bullet vào ul bên trong */
.diva-rich.diva-doctor-card__bio{list-style:none;padding-left:0;}
.diva-rich.diva-doctor-card__bio ul{list-style:disc;margin:0;padding-left:16.5px;}
.diva-rich.diva-doctor-card__bio ul li{margin-bottom:1px;} /* giữ lề trái 1.3em mặc định của Flatsome như bản cũ */
.diva-rich.diva-doctor-card__bio p,.diva-rich.diva-doctor-card__bio li{color:#fff;}
/* Dịch vụ con: không bullet, như bản cũ */
.diva-rich.diva-service-grid__sublist ul{list-style:none;margin:0;padding:0;}
.diva-rich.diva-service-grid__sublist p{color:#fff;font-size:inherit;}
/* Canvas UX Builder: thẻ đã có khối Text thì ẩn bản hiển thị từ dữ liệu cũ */
.diva-rich:has(.uxb-wrapper) + .diva-rich-fallback{display:none;}
.diva-rich-fallback{position:relative;outline:1px dashed rgba(255,255,255,.5);}
.diva-rich-fallback::before{content:"Nội dung kiểu cũ — sửa ở ô bên trái, hoặc bấm nút \"Chuyển nội dung\" để bấm đúp sửa trực tiếp";display:block;font:10px/1.3 sans-serif;color:#ffd54f;margin-bottom:4px;}
/* Tiêu đề khối Video có ô "Chữ được tô nền xanh" (01/10/2026): khi admin gõ cụm từ,
   bỏ dải nền cả dòng, chỉ tô cụm từ đó — cùng kiểu dải gradient với các tiêu đề khác. */
.home .video_4_1_0__title.has-hl{background:none !important;}
.video_4_1_0__title .diva-title-hl{background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 45%,rgba(var(--diva-accent-rgb),.08) 100%) no-repeat;padding:0 4px;}

/* =====================================================================
   PHẢN HỒI KHÁCH 05/10/2026 — dễ sửa hơn trong UX Builder
   ===================================================================== */
/* Tiêu đề khối nằm trong khối Text (title_source="text", xem
   diva_title_in_text()): chữ IN ĐẬM = dải xanh — admin tự chọn chữ cần tô
   bằng nút B trong trình soạn thảo. h2 giữ đúng class tiêu đề cũ của khối
   nên cỡ chữ/màu/khoảng cách không đổi. */
.diva-commitment-mobile__title strong{
	font-weight:inherit;
	background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 45%,rgba(var(--diva-accent-rgb),0) 100%) no-repeat;
	padding:2px 0 2px 2px;
}
.home .video_4_1_0__title:has(strong){background:none !important;} /* có chữ đậm → chỉ tô chữ đó, như ô "Chữ được tô nền xanh" */
.video_4_1_0__title strong{font-weight:inherit;background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 45%,rgba(var(--diva-accent-rgb),.08) 100%) no-repeat;padding:0 4px;}
.text > h2.diva-share-section__title,
.text > h2.diva-commitment-mobile__title,
.text > h2.video_4_1_0__title{margin-top:0;}
.text > h2.diva-commitment-mobile__title{margin-bottom:0;} /* bản cũ là div, không có lề dưới mặc định của h2 */
/* Tiêu đề Video nằm trong nền xám của khối như bản cũ; flow-root giữ lề dưới của h2 bên trong nền */
[id^="text-"]:has(> h2.video_4_1_0__title){background:#F5F5F5;display:flow-root;} /* id text-… có cả ngoài trang lẫn khung soạn (khung soạn không giữ class của khối Text) */

/* Câu nói khách hàng soạn bằng khối Text: tự thêm dấu ngoặc kép như bản cũ */
.diva-rich.diva-share-card__quote{margin:0 0 4px;}
.diva-rich.diva-share-card__quote p{margin:0;font:inherit;color:inherit;}
.diva-rich.diva-share-card__quote p:first-child::before{content:"\201C";}
.diva-rich.diva-share-card__quote p:last-child::after{content:"\201D";}

/* Cam kết — khung soạn UX Builder vẽ đúng thẻ như ngoài trang. Mục là
   container wrap=false nên UX Builder KHÔNG bọc thêm .uxb-wrapper: các thẻ là
   con trực tiếp của danh sách → luật ≥550 (nth-child) của bản thật tự áp
   đúng; chỉ cần bù luật mobile (bản thật dùng class is-img-right/left do PHP
   gắn theo thứ tự — trong khung soạn mục không biết thứ tự của mình). */
.diva-uxb-cc-list{display:grid;grid-template-columns:1fr;max-width:314px;margin:0 auto;padding-top:var(--cc-gap);}
.diva-uxb-cc-list .diva-commitment-card{margin:var(--cc-over) 0 0;}
.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd) .diva-commitment-card__img{right:calc(var(--cc-img-in) - 1px);left:auto;}
.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd) .diva-commitment-card__tt{left:12px;right:calc(var(--cc-img-w) + var(--cc-img-in) + 10px);}
.diva-uxb-cc-list > .diva-commitment-card:nth-child(even) .diva-commitment-card__img{left:var(--cc-img-in);right:auto;}
.diva-uxb-cc-list > .diva-commitment-card:nth-child(even) .diva-commitment-card__tt{left:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);right:18px;}
@media (min-width:550px){
	.diva-uxb-cc-list{max-width:none;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:var(--cc-gap);}
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd) .diva-commitment-card__img{left:var(--cc-img-in);right:auto;}
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd) .diva-commitment-card__tt{left:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);right:18px;}
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(even) .diva-commitment-card__img{right:var(--cc-img-in);left:auto;}
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(even) .diva-commitment-card__tt{left:14px;right:calc(var(--cc-img-w) + var(--cc-img-in) + 12px);}
}
/* Khối Text trong thẻ: UX Builder bọc nó bằng .uxb-wrapper inline-block (co
   theo chữ) → chữ bị ép xuống nhiều dòng; cho giãn hết bề ngang vùng chữ. */
.diva-commitment-card__tt.diva-rich > .uxb-wrapper,
.diva-about-label.diva-rich > .uxb-wrapper,
.diva-share-card__quote.diva-rich > .uxb-wrapper{display:block;}
.diva-commitment-card__img--empty{display:flex;align-items:center;justify-content:center;font:11px/1.2 sans-serif;color:#777;text-align:center;}
/* Chữ trên thẻ soạn bằng khối Text: <p> bên trong ăn theo kiểu chữ của thẻ */
.diva-rich.diva-commitment-card__tt p{margin:0;font:inherit;color:inherit;text-transform:inherit;}
.diva-rich.diva-about-label > .text,.diva-rich.diva-about-label .uxb-wrapper > .text{margin:0;padding:0;}
/* Tin tức — khung soạn UX Builder: lưới tĩnh (slider/hiệu ứng chỉ chạy ngoài trang) */
.diva-news-uxb .swiper-wrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;transform:none !important;}
.diva-news-uxb .swiper-slide{opacity:1 !important;transform:none !important;width:auto !important;}
.diva-news-uxb .swiper-pagination,.diva-news-uxb .diva-news-swiper__arrow{display:none !important;}

/* =====================================================================
   CAM KẾT — mô tả trong khung + khung tự cao theo chữ (06/10/2026).
   Trước đây khung cao cố định (--cc-h) và chữ định vị tuyệt đối nằm vắt
   trên mép trên → bên trong khung luôn rỗng. Giờ chữ nằm trong luồng: dòng
   đầu (tiêu đề) vẫn vắt đúng giữa mép trên nhờ margin-top âm nửa dòng; các
   đoạn sau (mô tả, admin nhấn Enter trong trình soạn thảo) nằm trong khung,
   khung giãn theo. --cc-h thành chiều cao TỐI THIỂU (giữ ảnh không lòi đáy).
   Lề trái/phải vùng chữ (né ảnh) lấy từ --tt-l/--tt-r đặt theo phía ảnh.
   Thẻ chưa có mô tả: chiều cao = --cc-h như cũ → giao diện không đổi.
   ===================================================================== */
.diva-commitment-card{
	height:auto;min-height:var(--cc-h);padding-bottom:10px;
	display:flow-root; /* chặn margin âm của dòng tiêu đề "lọt" ra ngoài thẻ (margin collapse) làm các thẻ dồn sát nhau trên điện thoại */
	--tt-l:12px;--tt-r:calc(var(--cc-img-w) + var(--cc-img-in) + 10px);
}
.diva-commitment-card .diva-commitment-card__tt{
	position:relative;top:auto;left:auto !important;right:auto !important;transform:none;
	display:block;margin:calc(var(--cc-lh) / -2) var(--tt-r) 0 var(--tt-l);
}
.diva-commitment-card .diva-commitment-card__tt .text{margin:0;padding:0;}
/* Mô tả: đoạn thứ 2 trở đi */
.diva-commitment-card .diva-commitment-card__tt p ~ p,
.diva-commitment-card .diva-commitment-card__tt p ~ ul{
	margin:6px 0 0;font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;
	font-size:13px;line-height:1.45;color:#3d4560;
}
.diva-commitment-card .diva-commitment-card__tt p ~ ul{padding-left:16px;list-style:disc;}
.diva-commitment-card .diva-commitment-card__tt p ~ ul li{margin:0;font:inherit;color:inherit;}
/* Phía ảnh: điện thoại (bản thật dùng class is-img-*; khung soạn dùng thứ tự) */
.diva-commitment-card.is-img-left,
.diva-uxb-cc-list > .diva-commitment-card:nth-child(even){--tt-l:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);--tt-r:18px;}
.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd){--tt-l:12px;--tt-r:calc(var(--cc-img-w) + var(--cc-img-in) + 10px);}
@media (max-width:549px){
	/* bản cũ: tâm tiêu đề ở top:-1px → bù 1px (nửa dòng 21px làm tròn xuống) */
	.diva-commitment-card .diva-commitment-card__tt{margin-top:calc(var(--cc-lh) / -2 - 1px);}
}
@media (min-width:550px){
	.diva-commitment-card .diva-commitment-card__tt p ~ p,
	.diva-commitment-card .diva-commitment-card__tt p ~ ul{font-size:14px;}
	/* Máy tính: cột trái (thẻ lẻ) ảnh trái, cột phải (thẻ chẵn) ảnh phải */
	.diva-commitment-card:nth-child(odd),
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(odd){--tt-l:calc(var(--cc-img-w) + var(--cc-img-in) + 14px);--tt-r:18px;}
	.diva-commitment-card:nth-child(even),
	.diva-uxb-cc-list > .diva-commitment-card:nth-child(even){--tt-l:14px;--tt-r:calc(var(--cc-img-w) + var(--cc-img-in) + 12px);}
	/* Thẻ lẻ cuối nằm giữa hàng: giữ chiều rộng nửa hàng */
	.diva-commitment-card:last-child:nth-child(odd){align-self:start;}
}

/* =====================================================================
   CAM KẾT — kiểu khung, độ dày viền, ẩn ảnh (07/10/2026)
   Khối: .cc-noimg (ẩn ảnh mọi thẻ), .cc-frame-full (viền kín, tiêu đề nằm
   trong khung), --cc-bw (độ dày viền). Từng thẻ: .is-noimg / .is-img ghi đè
   lựa chọn ảnh của khối; màu riêng do diva_commitment_card_style() in <style>.
   ===================================================================== */
.diva-commitment-mobile{--cc-bw:2px;}
.diva-commitment-card::before{
	border-width:var(--cc-bw);
	clip-path:polygon(0 0,14px 0,14px calc(var(--cc-bw) + 2px),calc(100% - 14px) calc(var(--cc-bw) + 2px),calc(100% - 14px) 0,100% 0,100% 100%,0 100%);
}
/* Viền kín: không khuyết mép trên, tiêu đề dời vào trong khung */
.diva-commitment-mobile.cc-frame-full .diva-commitment-card::before{clip-path:none;}
.diva-commitment-mobile.cc-frame-full .diva-commitment-card .diva-commitment-card__tt{margin-top:14px;}
.diva-commitment-mobile.cc-frame-full .diva-commitment-card{padding-bottom:14px;}
/* Ẩn ảnh: bỏ ảnh + bỏ phần chừa chỗ cho ảnh, chữ giãn hết bề ngang khung */
.diva-commitment-mobile.cc-noimg .diva-commitment-card:not(.is-img),
.diva-commitment-card.is-noimg{--cc-img-w:0px;--cc-img-in:0px;--cc-over:18px;min-height:44px;}
.diva-commitment-mobile.cc-noimg .diva-commitment-card:not(.is-img) .diva-commitment-card__img,
.diva-commitment-card.is-noimg .diva-commitment-card__img{display:none !important;}
/* Thẻ "Hiện" ảnh riêng trong khối đang ẩn ảnh: giữ kích thước ảnh của khối */
.diva-commitment-mobile.cc-noimg .diva-commitment-card.is-img .diva-commitment-card__img{display:block;}

/* =====================================================================
   22/10/2026 — Ảnh form đặt lịch do admin chọn (.is-custom): bỏ kiểu phóng
   124% + cắt 2 mép (ảnh mặc định vẫn giữ để giấu dải chữ ở đáy), lấp đúng
   khung, căn bằng điểm lấy nét (object-position inline). Poster Cam kết.
   ===================================================================== */
.diva-booking-box--figma .diva-booking-photo.is-custom img{width:100%;height:100%;margin-left:0;object-fit:cover;object-position:50% 50%;}
.diva-commitment-section2.is-poster{padding:0 !important;}
.diva-cc-poster{border-radius:22px;overflow:hidden;line-height:0;}
.diva-cc-poster a{display:block;}
.diva-cc-poster__img{display:block;width:100%;height:auto;}
.diva-cc-poster__empty{line-height:1.5;padding:60px 24px;text-align:center;background:#eef3f9;border:2px dashed #b8c6d8;color:#5b6475;font:14px/1.5 sans-serif;border-radius:22px;}

/* Cụm nút nổi — vị trí tuỳ chỉnh (30/10, Tùy biến → Nút liên hệ nổi) */
.diva-float-island{bottom:var(--fi-b,80px);}
.diva-float-island--right{right:var(--fi-x,16px);left:auto;}
.diva-float-island--left{left:var(--fi-x,16px);right:auto;}
.diva-float-island--row{flex-direction:row;}
@media (max-width:549px){
	.diva-float-island{bottom:var(--fi-b-mb,70px);}
	.diva-float-island--right{right:min(var(--fi-x,16px),10px);}
	.diva-float-island--left{left:min(var(--fi-x,16px),10px);}
	.diva-float-island--no-mb{display:none !important;}
}
/* Ẩn khi mở menu điện thoại của Flatsome Header Builder */
html.has-off-canvas .diva-float-island{opacity:0;visibility:hidden;pointer-events:none;}
.diva-float-island--left .diva-float-island__item span{right:auto;left:calc(100% + 10px);}
.diva-float-island--row .diva-float-island__item span{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%);}

/* ===== 02/11 — Tên + nút sửa trực tiếp trong khối Text của thẻ (khung soạn UX Builder).
   Ngoài trang PHP tách dòng Tiêu đề / link cuối ra đúng chỗ; trong khung soạn
   chúng nằm trong khối Text nên vẽ giả đúng vị trí thiết kế. ===== */
.diva-doctor-card .diva-rich :is(h1,h2,h3,h4,h5,h6){
    position:absolute;top:-22px;left:24px;margin:0;padding:0;
    font-size:15px;font-weight:700;color:var(--diva-navy);
    letter-spacing:-0.3px;line-height:1.1;white-space:nowrap;text-transform:none;
}
.diva-doctor-card .diva-rich p:has(> a:only-child):last-of-type{
    position:absolute;left:50%;bottom:-43px;transform:translateX(-50%);margin:0;
}
.diva-doctor-card .diva-rich p:has(> a:only-child):last-of-type > a{
    display:block;width:237px;height:31px;line-height:31px;
    background:var(--diva-navy);border-radius:50px;color:#fff !important;
    font-size:15px;font-weight:600;letter-spacing:-0.3px;text-align:center;text-decoration:none !important;
}
.diva-doctor-card:has(.diva-rich p > a:only-child){padding-bottom:43px !important;}
/* Lớp bọc của UX Builder đang position:relative → để tên/nút neo theo khung navy như ngoài trang. */
.diva-doctor-card__body .diva-rich > .uxb-wrapper{position:static !important;}
.diva-service-grid .diva-service-grid__sublist.diva-rich :is(h1,h2,h3,h4,h5,h6){
    display:block;min-height:0;margin:0 0 8px;padding:0;color:#fff;font-size:28px;font-weight:800;
    line-height:1.15;letter-spacing:-.015em;text-transform:none;text-align:center;
}
@media (max-width:549px){
    .diva-service-grid .diva-service-grid__sublist.diva-rich :is(h1,h2,h3,h4,h5,h6){font-size:13px;line-height:1.3;text-align:left;margin:0 0 3px;}
}

/* 02/11 — Tiêu đề Đội ngũ bác sĩ dạng khối Text (bấm đúp sửa được).
   Chữ in đậm = phần có dải xanh, giống bản ô nhập cũ. */
.text > h2.diva-doctor-title,.diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p){
	font-weight:700;color:var(--diva-navy) !important;letter-spacing:-0.5px;line-height:1.6 !important;
	text-transform:uppercase;text-align:center;margin:0 0 24px !important;padding:0 !important;
}
.diva-doctor-title strong,.diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p) strong{
	font-weight:inherit;padding:2px 0;
	background:linear-gradient(90deg,var(--diva-accent) 0,rgba(var(--diva-accent-rgb),.55) 60px,rgba(var(--diva-accent-rgb),0) 190px) no-repeat;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.home .text > h2.diva-doctor-title,.home .diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p){font-size:32px !important;}
@media (max-width:549px){
	.text > h2.diva-doctor-title,.diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p){margin-bottom:12px !important;}
	.home .text > h2.diva-doctor-title,.home .diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p){font-size:20px !important;}
}
@media (min-width:550px){ .text > h2.diva-doctor-title,.diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p){margin-bottom:36px !important;} }
@media (min-width:768px){ .diva-doctor-title br,.diva-sec-title:has(+ .diva-doctor-section) > :is(h1,h2,h3,h4,p) br{display:none;} }
/* Menu "Bác sĩ" cuộn tới khối: chừa chỗ cho tiêu đề (giờ nằm ngay trên khối). */
.diva-sec-title + #doi-ngu-bac-si{scroll-margin-top:170px;}
@media (max-width:1024px) and (min-width:550px){ .diva-sec-title + #doi-ngu-bac-si{scroll-margin-top:170px;} }
@media (max-width:549px){ .diva-sec-title + #doi-ngu-bac-si{scroll-margin-top:150px;} }