/* ============================================================
   VITA CLINIC — frontend.css
   Quy ước: 1rem = 20px (px design / 20 = rem)
   ============================================================ */
html {
    font-size: 1.1vw;
}
body {
    font-size: 1.2rem;
    color: #687276;
    line-height: 1.4;
    font-weight: 400;
}

:root {
    --vita-green: #0C4242;
    --vita-green-2: #1d4a38;
    --card-bg: #ecdccb;
    --tab-bg: #efe7dd;
    --tab-active: #a9876a;
    --muted: #6f6f6f;
    --line: #e7e7e7;
}

/* Row = 1440px = 72rem */
.row {
    max-width: 75rem;
}

/* ============================================================
   TRANG LIÊN HỆ
   ============================================================ */
.contact_page {
    display: block;
}

/* ---------- HERO ---------- */
.contact_hero {
    padding: 3rem 0 0;
}
.contact_hero_left {
    padding-right: 1.5rem;
}
.contact_page .heading_title {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--vita-green);
    margin-bottom: 2.4rem;
}

.contact_hotline {
    margin-bottom: 0;
}
.contact_hotline .label {
 display: block;
 font-size: .7rem;
 display: block;
}
.contact_hotline .phone {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vita-green);
    margin: .8rem 0;
    display: block;
}

/* Button viền (outline) */
.button_link.outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border-radius: 100px;
  background: rgb(154 189 182 / 40%);
  font-size: .9rem;
  padding: 0 1.5rem;
  font-weight: 500;
  transition: .5s all;
  gap: .5rem;
  color: #0C4242;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.button_link.outline:hover {
    background: var(--vita-green);
    color: #fff;
}

/* ---------- FORM CARD ---------- */
.contact_form_card {
    background: #E9D9CD;
    border-radius: 1rem;
    padding: 4.2rem 3rem;
    box-shadow: 20px 20px 40px 0 rgba(130, 101, 76, 0.20);
    backdrop-filter: blur(50px);
}
.contact_form_title {
    margin: 0 0 0.5rem;
    font-size: 3rem;
    line-height: 1.2;
    color: var(--vita-green);
    font-weight: 400;
}
.contact_form_desc {
    color: #0C4242;
}
.contact_form .form_row {
    margin-bottom: 0.6rem;
}
.contact_form .form_row--2col {
    display: flex;
    gap: 0.6rem;
}
.contact_form .form_row--2col > * {
    flex: 1;
    min-width: 0;
}
.contact_form input,
.contact_form select {
    width: 100%;
    height: 2.7rem;
    padding: 0 1rem;
    border: 0.05rem solid #e3d5c4;
    background: #fff;
    font-size: 0.9rem;
    color: #0C4242;
    outline: none;
    margin: 0;
    border-radius: 100px;
}
.contact_form input::placeholder {
    color: #0C4242;
}
/* Lỗi bắt buộc hiển thị ngay dưới từng trường (đỏ) */
.contact_form input.has_error {
    border-color: #c0392b;
}
.contact_form .field_error {
    display: block;
    margin: 0.25rem 0 0 1rem;
    color: #c0392b;
    font-size: .9rem;
    line-height: 1.3;
}
.contact_form .form_row--2col .form_field {
    display: block;
}
.contact_form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23555' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2rem;
}
/* Dropdown "Đối tượng" tự custom (thay <select>) để style được từng option */
.contact_form .form_select {
    position: relative;
    width: 100%;
}
.contact_form .form_select_trigger {
    width: 100%;
    height: 2.7rem;
    padding: 0 1rem;
    border: 0.05rem solid #e3d5c4;
    background: #fff;
    font-size: 0.9rem;
    color: #0C4242;
    outline: none;
    margin: 0;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: inherit;
}
.contact_hero .contact_form .form_select_trigger {
    border-radius: 100px;
}
.contact_form .form_select_trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
}
.contact_form .form_select_arrow {
    flex: none;
    margin-left: 0.5rem;
    transition: transform 0.25s ease;
}
.contact_form .form_select.is-open .form_select_arrow {
    transform: rotate(180deg);
}
.contact_form .form_select_list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin: 0;
    padding: .5rem 1rem;
    list-style: none;
    background: rgb(255 255 255 / 90%);
    border-radius: 0.8rem;
    backdrop-filter: blur(100px);
    border: 1px solid #FFFFFF80;
}
.contact_form .form_select_list li {
    margin: 0 !important;
}
.contact_form .form_select_list li:not(:last-child) {
    border-bottom: 1px solid #9ABDB6;
}
.contact_form .form_select_list button {
    display: block;
    width: 100%;
    margin: 0;
    min-height: unset;
    padding: .5rem 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: normal;
    text-transform: unset;
    font-weight: 400;
    color: #8B6F52;
    cursor: pointer;
    transition: color 0.2s;
}
.contact_form .form_select_list button:hover,
.contact_form .form_select_list button.is-active {
    color: #0C4242;
}
.contact_form .form_select_list button.is-placeholder {
    color: #0C4242;
    font-weight: 400;
    cursor: default;
}
.contact_form .button_submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 2.8rem;
    margin-top: 0.4rem;
    border: none;
    border-radius: 1.6rem;
    background: #0C4242;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.3s ease;
    margin-bottom: 0;
    letter-spacing: 0;
}
.contact_form .button_submit:before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.contact_form .button_submit:hover {
    background: var(--vita-green-2);
}
.contact_form .button_submit:hover:before {
    left: 130%;
    transition: left 0.75s ease;
}
.contact_form .button_submit:disabled {
    opacity: 0.65;
    cursor: default;
}
/* Thông báo sau khi gửi form */
.form_notice {
    margin: 0.2rem 0 0.2rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 700;
    margin: 1rem 0 0 0;
}
.form_notice.is-ok {
    background: #e6f4ea;
    color: #1a7a3d;
}
.form_notice.is-error {
    background: #fdeaea;
    color: #c0392b;
}

/* ---------- TABS ---------- */
.contact_tabs {
    padding: 7rem 0;
}
.contact_tabs_nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .9rem;
}
.contact_tabs_mobile {
    display: none;
}
.contact_tabs_nav .tab_btn {
    padding: 0.6rem 1.6rem;
    border: none;
    border-radius: 0.3rem;
    background: var(--tab-bg);
    color: #644A37;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    height: 3rem;
    min-width: 12rem;
    border-radius: .6rem;
    padding: 0 1rem;
}
.contact_tabs_nav .tab_btn:hover {
    background: #e6d8c8;
}
.contact_tabs_nav .tab_btn.active {
    background: var(--tab-active);
    color: #fff;
}

/* ---------- BRANCHES (accordion) ---------- */
.contact_branches {
    padding: 1rem 0 5rem;
}
.branch_item {
    border-top: 1px solid #AFBEBB;
    padding: 2rem 0;
}
.branch_item:last-child {
    border-bottom: 0.05rem solid var(--line);
}
.branch_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}
.branch_name {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--vita-green);
    transition: .5s all;
}
.branch_item:hover .branch_name {
    color: #a9876a;
}
.branch_addr_mini,.branch_addr_mini b {
    margin: 0.4rem 0 0;
    font-size: 1.2rem;
    color: #687276 !important;
    font-weight: 300;
}
.branch_addr_mini b {
    color: #333;
}
.branch_toggle {
    flex: 0 0 auto;
    color: var(--vita-green);
    line-height: 0;
    margin-top: 0.4rem;
    transition: transform 0.3s ease;
}
.branch_item.active .branch_toggle {
    transform: rotate(180deg);
}
.branch_toggle svg {
    width: 1.4rem;
    height: auto;
}
.branch_toggle svg path {
    stroke: #B89780;
    transition: .5s all;
}
.branch_item.active .branch_toggle svg path {
    stroke: #0C4242;
}

.branch_body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.branch_item.active .branch_body {
    max-height: 60rem;
}
.branch_body_inner {
    padding-top: 1rem;
}
.branch_desc {
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 0.9rem;
    font-weight: 300;
    font-size: 1.2rem;
}
.branch_address,
.branch_time {
    margin: 0.2rem 0;
    color: #687276;
   font-size: 1.2rem;
    font-weight: 300;
}
.branch_address b,
.branch_time b {
    color: #687276;
    font-weight: 500 !important;
}
.branch_link {
    margin-top: 1rem;
}
.branch_link path {
    transition: .5s all;
}
.branch_link:hover path {
    fill: #fff;
}
.branch_thumb img {
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    object-fit: cover;
    display: block;
}
.contact_hero_desc {
    text-align: justify;
    margin-bottom: 2.4rem;
}

.col, .columns, .gallery-item {
    padding: 0 10px;
}

form.contact_form {
    margin: 0;
}

.branch_body .row {
    margin: 0 -10px !important;
}

.branch_body_inner .col.large-7 {
    padding-right: 6rem;
    text-align: justify;
}

.branch_addr_mini b {
    font-weight: 500 !important;
}
.footer_btn:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 100px;
    background: #d2dcd8;
    z-index: -1;
    transition: .5s all;
}

.footer_btn:hover:before {
    background: #0C4242;
}

.footer_links li {
    margin: 0;
}

a.footer_badge+a.footer_badge img {
    height: 1.7rem;
}

.site_footer_bottom .row {
    justify-content: center;
}
.template-customer span.page_banner_overlay[aria-hidden="true"] {background: #644A37;opacity: .56;}

.template-customer  section.page_banner {
    min-height: 45rem;
}

.cus_videos_left {
    box-shadow: 20px 20px 40px 0px #00000029;
    border-radius: 1rem;
    overflow: hidden;
}



.cus_videos .heading_title:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 12rem;
    height: 1px;
    background: #0C4242;
    content: '';
}

.cus_videos .content {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.cus_videos_right span.video_play {
    width: 2.2rem;
    height: 1.5rem;
    border-radius: .3rem;
}

.cus_videos_right span.video_play::after {
    transform: translate(-40%, -50%) scale(.8);
}

.cus_testi_quote svg {
    height: 2rem;
}

h2.heading_title.cus_videos_title {
    padding-bottom: 2rem;
    margin-bottom: 2rem !important;
}
.cus_videos_right .wrap_slider {
    position: relative;
    padding: 0 4rem;
}

.cus_videos_right .slider_nav_btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 9;
}

.cus_videos_right .slider_nav {
    margin: 0;
}

.cus_videos_right .slider_nav_btn[aria-label="Sau"] {
    left: unset;
    right: 0;
}
.page_banner {
    height: 100vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 6rem;
}

section.news_section+section.news_section {
    background: #E9D9CD;
}
.news_mid_title:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #F0D6C3;
    width: 7rem;
    height: 1px;
}
.template-doctor .page_banner_content {
    max-width: 39rem;
}

.template-doctor span.page_banner_overlay {
    background: rgb(0 0 0 / 30%);
}

.doctor_search input::placeholder {
    font-size: 1rem;
}

.doctor_search_btn svg {
    width: .9rem;
    height: auto;
}

.page-doctor  section.doctor_booking {
    display: none;
}

.doctor_card:hover .doctor_card_arrow {
    transform: rotate(0deg);
}
.doctor_detail_card .doctor_card_badge {
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
}

.doctor_detail_form h2.contact_form_title {
    text-align: center;
}

.doctor_detail_form p.contact_form_desc {
    text-align: center;
}

.doctor_detail_card form.contact_form {
    padding: 0 4rem;
}
.about_badge+.about_badge {
    border-left: 1px solid #ffffff38;
}
.staff_card_img {
    height: 25rem;
    display: flex;
    position: relative;
    z-index: 2;
}

.about_staff_swiper {
    padding-top: 1.5rem;
    padding-bottom: 7rem;
    overflow: hidden;
}

.expert_panel_img>span:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 46%;
    background: linear-gradient(0deg, #4b382d, transparent);
    z-index: 2;
    opacity: 0;
    transition: .5s all;
}

.is-active .expert_panel_img>span:before {
    opacity: 1;
}

.lead_card_btn:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background: #8d948c;
    border-radius: 100px;
    z-index: -1;
}

.about_experts_all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5%;
    gap: .5rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #9ABDB6;
    padding: .2rem 0;
    color: #0C4242;
}

section.about_media.news_section {
    padding: 7rem 0;
}

section.about_media.news_section h2.heading_title.text-center {
    margin: 0;
}
.wrap_about_booking_form {
    display: flex;
    align-items: center;
    background: rgb(255 255 255 / 30%);
    border-radius: 1rem;
    max-width: 65rem;
    box-shadow: 20px 20px 40px 0px #82654C33;
    backdrop-filter: blur(15px);
}

.about_booking_form {
    padding: 4rem 0 4rem 6rem;
}

.wrap_about_booking_form .contact_form input, .wrap_about_booking_form .contact_form select {
    border-radius: .6rem;
}

.about_banner .swiper-button-prev {
    left: unset;
    right: 8rem;
    bottom: 6rem;
    top: unset;
}

.about_banner_swiper .swiper-button-next {
    left: unset;
    right: 5rem;
    bottom: 6rem;
    top: unset;
}
.staff_card_img>span {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.staff_card_img>span img {
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
}
.offer_list+section.about_booking {
    margin: 0;
}

.offer_cat_swiper {
    padding: 3rem 0;
}

.offer_cat_swiper .swiper-slide-active .offer_cat_item {
    scale: 1;
}

.offer_category h2.heading_title {
    margin: 0;
}

.offer_cat_slider .slider_nav_btn.offer_cat_next {
    left: unset;
    right: 10rem;
}

.offer_card a.offer_card_img {
    width: 24rem;
    height: 24rem;
    box-shadow: 20px 20px 40px 0px #00000029;
    border-radius: 1rem;
    overflow: hidden;
}
.template-offer .page_banner_person img {
    width: 33rem;
}
.template-customer .page_banner_person img {
    width: 59rem;
}

.template-offer  span.page_banner_overlay {
    opacity: 0;
}

.template-offer .page_banner_person {
    right: 14rem;
}

.template-offer section.page_banner.page_banner--compose {
    align-items: center;
}

.template-offer h1.page_banner_title {
    font-size: 4rem;
}

.page-doctor  h1.page_banner_title {
    font-size: 2.5rem;
}

.template-offer  .page_banner_content {
    margin-top: 13rem;
    text-align: justify;
}
.page_banner_content a.footer_btn {
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    color: #fff;
    text-transform: uppercase;
    gap: .6rem;
    height: 2.4rem;
}

.page_banner_content a.footer_btn:before {
    background: #6b776d;
}

.page_banner_content a.footer_btn svg {
    width: .6rem;
    height: auto;
}
main#main {
    background: #E9D9CD80;
}
.svd2_content p:last-child {
    margin: 0;
}

.svd2 .row {
    max-width: 84rem;
}


.svd2_wrap_right {
    position: relative;
    z-index: 2;
    width: 32.5rem;
    flex: 0 0 auto;
    margin-bottom: 3.5rem;
}

.svd2_certs {
    max-width: 42rem;
}
.svd3_group{
    background-image: var(--svd3-group-bg, url(../images/8472ef098725e7ff3655410.png)) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.svc_item .footer_btn {text-transform: uppercase;color: #fff;background: linear-gradient(138.98deg, rgba(14, 66, 64, 0.15) -2.25%, rgba(12, 66, 66, 0.6) 76.91%);background-blend-mode: multiply;}

a.footer_btn.style_2:before {
    background: #0C4242;
}

a.footer_btn.style_2 {
    color: #fff;
}

.svc_item a.footer_btn:not(.style_2):before {
    background: linear-gradient(138.98deg, rgba(14, 66, 64, 0.15) -2.25%, rgba(12, 66, 66, 0.6) 76.91%);
    background-blend-mode: multiply;
}
.homepage .page_banner_desc {
    letter-spacing: 20%;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.3;
}
.ms_count_5 .ms_box:nth-child(4) .ms_overlay {
    flex-direction: unset;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.ms_count_5 .ms_box:nth-child(3),.ms_count_5 .ms_box:nth-child(5) {
    height: 18rem;
}

.ms_count_5 .ms_box:nth-child(5) {
    margin-top: -6rem;
}
.ms_count_5 .ms_box:nth-child(5) a.footer_btn,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn {
    margin-top: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .7rem;
    text-transform: uppercase;
    background: #9ABDB666 !important;
    backdrop-filter: blur(7px);
}
.ms_count_5 .ms_box:nth-child(5) a.footer_btn::before,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ms_count_5 .ms_box:nth-child(3) .ms_overlay {
    justify-content: flex-start;
}

span.ms_number {
    font-size: 3.7rem;
    color: #0C4242;
    font-family: 'Beautique Display', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400;
}

.ms_count_5 .ms_box:nth-child(2) .ms_overlay {
    align-items: center;
    filter: brightness(0) invert(1);
}
.lead_card .wrap_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home_lead h2.heading_title {
    margin: 0;
}

.lead_slider_wrap button.slider_nav_btn {
    left: -3rem;
}

.lead_slider_wrap button.slider_nav_btn.lead_arrow.lead_next {
    right: -3rem;
    left: unset;
}

.home_awards h2.heading_title {
    text-align: center;
    margin-bottom: .6rem;
}

.home_awards_bottom_left {
    width: 24rem;
    padding-top: .7rem;
}

.home_awards_bottom_right {
    max-width: 27rem;
    padding: .7rem 1.2rem;
    border-left: 3px solid #9ABDB6;
}

.home_blog h2.heading_title {
    margin: 0;
}

.home_awards button.slider_nav_btn.awards_arrow {
    display: none;
}

.home_longevity+section.about_booking {
    margin: 0;
}

/* ---------- Responsive ---------- */


/* ============================================================
   TRANG ƯU ĐÃI — DANH SÁCH

.text-center {
    text-align: center;
}

.offer_hero {
    padding: 2.5rem 0;
}
.offer_hero_desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 1.4rem;
    max-width: 24rem;
}
.offer_hero_img img {
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    display: block;
}

/* --- Danh mục vòng tròn --- */
.offer_category {
    padding: 7rem 0 0;
}
.offer_cat_title {
    margin-bottom: 1.5rem;
}
.offer_cat_nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.offer_cat_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    scale: .8;
}
.offer_cat_item:hover,
.offer_cat_swiper .swiper-slide-active .offer_cat_item {
    opacity: 1;
}
.offer_cat_logo {
    width: 14.5rem;
    height: 14.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #B8978099;
    box-shadow: .6rem .5rem 1rem 0px #00000038;
    position: relative;
}
.offer_cat_logo:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: .2rem;
    background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 50%;
    top: -.1rem;
    left: -.1rem;
    right: -.1rem;
    bottom: -.1rem;
}
.offer_cat_swiper .swiper-slide-active .offer_cat_logo {
    width: 14.5rem;
    height: 14.5rem;
    background: var(--vita-green);
}
.offer_cat_logo img {
    width: auto;
    height: auto;
    object-fit: cover;
    max-width: 60%;
    max-height: 60%;
    filter: brightness(0) invert(1);
}
.offer_cat_logo--text {
    font-weight: 700;
    color: var(--vita-green);
    font-size: 0.9rem;
}
.offer_cat_swiper .swiper-slide-active .offer_cat_logo--text {
    color: #fff;
}
.offer_cat_name {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
}
.offer_cat_item.active .offer_cat_name {
    color: var(--vita-green);
    font-weight: 700;
}
.offer_cat_swiper .swiper-slide-active .offer_cat_name {
    color: var(--vita-green);
}

/* Slider danh mục: wrapper + mũi tên 2 đầu + căn giữa dọc (item giữa to hơn) */
.offer_cat_slider {
    position: relative;
    padding: 0 14.5rem;
}
.offer_cat_slider .slider_nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    right: 10rem;
    left: 10rem;
}
.offer_cat_prev {
    left: 0;
}
.offer_cat_next {
    right: 0;
}
.offer_cat_swiper .swiper-wrapper {
    align-items: center;
}

/* --- Danh sách card --- */
.offer_list {
    padding: 0 0 7rem;
}
.offer_list_wrap {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    transition: opacity 0.2s ease;
}
.offer_list_wrap.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.offer_card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 20px 20px 40px 0px #00000029;
    padding: 2rem;
    transition: .5s all;
}
/* Card đầu nền tan như thiết kế */
.offer_card:hover {background: #E9D9CD;}

.offer_card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.offer_card_body {
    flex: 1;
    padding: 2rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    align-items: flex-start;
}
.offer_card_partner {
    margin: 0;
    font-family: 'Beautique Display', serif;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.offer_card_partner a {
    color: var(--vita-green);
}
.offer_card_desc {color: #687276;line-height: 1.6;font-size: 1.2rem;}
.offer_card_desc strong {
    color: var(--vita-green);
    font-weight: 700;
}
.offer_card_btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 1.4rem;
    border-radius: 100px;
    background: #E3EBE7;
    color: var(--vita-green);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.offer_card_btn:hover {
    background: var(--vita-green);
    color: #fff;
}
.offer_empty {
    text-align: center;
    color: var(--muted);
    padding: 2rem 0;
}
/* Phân trang: dùng chung style .doctor_pagination (giống các trang khác) */
.offer_list .doctor_pagination {
    margin-top: 2.5rem;
}

/* ============================================================
   TRANG ƯU ĐÃI — CHI TIẾT
   ============================================================ */
.offer_detail_top {
    padding: 0 0 4rem;
}
.offer_detail_img img {
    width: 85%;
    height: auto;
    border-radius: 0.8rem;
    display: block;
    box-shadow: 20px 20px 40px 0px #B8978099;
}
.offer_detail_content {line-height: 1.7;}
.offer_detail_subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: #644A37;
    margin: 0 0 1rem;
}
.offer_detail_desc {
    text-align: justify;
}
.offer_detail_time {text-align: justify;}
.offer_detail_time b {
   display: block;
}
.offer_detail_actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    gap: 4rem;
}
.button_link.filled {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1.3rem;
    border: 0.05rem solid var(--vita-green);
    border-radius: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--vita-green);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button_link.filled:hover {
    background: var(--vita-green-2);
}

.offer_summary {
    padding: 0 0 3rem;
}
.offer_summary_title {
    margin-bottom: 1.5rem;
}
.offer_summary_list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.offer_summary_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: #fff;
    border: 0.05rem solid var(--line);
    border-radius: 0.8rem;
    padding: 1.3rem 1.8rem;
    box-shadow: 20px 20px 40px 0px #B8978099;
}
.offer_summary_name {
    margin: 0 0 0.4rem;
    font-family: 'Beautique Display', serif;
    font-size: 2rem;
    color: var(--vita-green);
    font-weight: 500;
}
.offer_summary_desc {
    margin: 0;
    font-size: 1.2rem;
    color: var(--muted);
}
.offer_footnote {
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    text-align: right;
    white-space: pre-line;
    font-style: italic;
}

/* ============================================================
   POPUP ĐẶT LỊCH
   ============================================================ */
.booking_popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 40, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.booking_popup_inner {
    position: relative;
    width: 100%;
    max-width: 62rem;
}
.booking_popup_close {
    position: absolute;
    top: 0.8rem;
    right: -7.2rem;
    z-index: 3;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.booking_popup_close svg {
    width: 1rem;
    height: 1rem;
}
/* Popup dùng lại glass card wrap_about_booking_form: nền trắng đặc + model inline bên phải */
.booking_popup .wrap_about_booking_form {
    position: relative;
    width: 100%;
    max-width: none;
    background: rgb(255 255 255 / 70%);
}
.booking_popup .about_booking_form {
    flex: 1;
    padding: 2.5rem 25rem 2.5rem 3rem;
}
.booking_popup .about_booking_form:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 1rem;
}
.booking_popup .about_booking_model {
    position: absolute;
    flex: 0 0 42%;
    width: auto;
    align-self: flex-end;
    right: -4rem;
    max-width: 30rem;
    width: 100%;
}



/* ============================================================
   HEADER
   ============================================================ */
.site_header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0) 100%);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s ease;
}
.site_header:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: .6rem;
}
header#header.style2 {
    border-radius: 0;
    top: 0;
    max-width: unset;
    background: #4F3E3166;
}
.type-doctor  header#header {
    background: rgb(79 62 49 / 40%);
}
/* Hamburger + menu mobile (ẩn ở desktop, bật trong media ≤991) */
.header_burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    order: -1;
}
.header_burger span {
    display: block;
    width: 1.5rem;
    height: 0.12rem;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.header_burger span:nth-child(2) {
    width: 1rem;
}
.header_burger.is-open span:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
.header_burger.is-open span:nth-child(2) { opacity: 0; width: 1.5rem; }
.header_burger.is-open span:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }
/* Backdrop drawer */
.site_menu_overlay {
    display: none;
    position: fixed;
    top: 4rem;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 399;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.site_menu_overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* Drawer trượt ngang từ trái */
.site_menu_mobile {
    display: none;
    position: fixed;
    top: 4rem;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 20rem;
    background: rgb(255 255 255 / 70%);
    backdrop-filter: blur(3px);
    box-shadow: 0.4rem 0 1.6rem rgba(12, 66, 66, 0.18);
    z-index: 400;
    overflow-y: auto;
    padding-top: 3rem;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    padding: 1rem;
}
.site_menu_mobile.is-open {
    transform: translateX(0);
}
.site_menu_close {
    display: none; /* tạm ẩn */
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: var(--vita-green);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.site_menu_mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site_menu_mobile ul li {
    margin: 0;
    padding: .5rem 0;
}
.site_menu_mobile > ul > li > a {
    display: block;
    padding: 0.9rem 1.5rem;
    color: var(--vita-green);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #eee;
}
.site_menu_mobile > ul > li.is-active > a {
    color: var(--tab-active);
    font-weight: 700;
}
.submenu_mobile {
    background: #f7f4ef;
    display: none;
}
.submenu_mobile.is-open {
    display: block;
}
.submenu_mobile a {
    display: block;
    padding: .5rem 1rem;
    color: #555;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}
.menu_item_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu_item_row > a {
    flex: 1;
    font-size: 1rem;
}
@media (max-width: 767px) {
    .menu_item_row a {
        color: #0C4242;
    }
    .submenu_toggle {
        min-height: 1.2rem;
    }
    .menu_item_row > a {
        font-size: 1.5rem;
    }
    .submenu_mobile a {
        font-size: 1.2rem;
    }
    .submenu_mobile li {
        padding: 0 !important;
    }
}
.submenu_toggle {
    background: none;
    border: none;
    padding: 0 0.8rem;
    cursor: pointer;
    color: #0C4242;
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
    margin: 0;
}
.sub-open .submenu_toggle {
    transform: rotate(180deg);
}
.site_header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 1.8rem;
    flex-wrap: nowrap;
    max-width: 80rem;
}
.site_logo_img {
    height: 2.1rem;
    width: auto;
    display: block;
}
.site_logo_text {
    font-family: "Beautique Display", serif;
    font-size: 1.3rem;
    color: #fff;
}
.site_logo_text b {
    font-weight: 700;
}
.site_menu .menu_list {
    display: flex;
    align-items: center;
    gap: 1.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site_menu .menu_item {
    position: relative;
    margin: 0;
}
.site_menu .menu_item > a {
    color: #fff;
    font-size: 1.26rem;
    font-weight: 300;
    padding: 0;
    display: inline-flex;
    white-space: nowrap;
    transition: .3s all;
    line-height: 3.5rem;
    align-items: center;
    position: relative;
}
.site_menu .menu_item > a:before {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 2px;
    background: #fff;
    transform: translateX(-50%);
    bottom: .9rem;
    transition: .5s all;
}
.site_menu .menu_item > a:hover:before {
    width: 100%;
    background: #E9D9CD;
}
.site_menu .menu_item > a:hover {
    color: #E9D9CD;
    font-weight: 600;
}
.site_menu .menu_item.is-active > a {
    text-underline-offset: 0.4rem;
    text-decoration-thickness: 0.08rem;
    color: #E9D9CD;
    font-weight: 600;
}
.site_menu .menu_item.is-active > a:before {
    width: 100%;
    background: #E9D9CD;
}
.site_menu .has_children > a::after {
    content: '';
    display: inline-block;
    width: 0.6rem;
    height: 0.35rem;
    margin-left: 0.35rem;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.75 0.750013L5.75 5.75L0.75 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}
.site_menu .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    background: rgb(255 255 255 / 50%);
    border-radius: 0.4rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    padding: 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.4rem);
    transition: all 0.2s ease;
    z-index: 10;
    overflow: hidden;
    backdrop-filter: blur(30px);
}
.site_menu .submenu:before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 0.4rem;
}
.site_menu .menu_item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site_menu .submenu a {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 0.72rem;
    color: var(--vita-green);
}
.site_menu .submenu a:hover {
    background: #f2ede7;
}
.site_menu .submenu a {
    font-size: 1rem;
}
.site_menu .submenu li {
    margin: 0;
}
.site_header_right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.header_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0;
    margin: 0;
}
.header_icon:hover {
    opacity: 0.75;
}
/* Cart + badge */
.header_cart {
    position: relative;
    display: none; /* tạm ẩn */
}
.header_cart_badge {
    position: absolute;
    top: -0.15rem;
    right: -0.2rem;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.15rem;
    border-radius: 0.5rem;
    background: #d64545;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    display: none;
}
/* Ngôn ngữ */
.header_lang {
    display: none; /* tạm ẩn */
    align-items: center;
    gap: 0.15rem;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.header_lang_flag {
    font-size: 1rem;
    line-height: 1;
}
.header_lang_caret {
    font-size: .9rem;
}
/* Nút đặt lịch */
.header_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.2rem;
    border-radius: 1.6rem;
    background: #0C424266;
    backdrop-filter: blur(4px);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.header_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.header_btn:hover::before {
    animation: btn_shimmer 0.55s ease forwards;
}
@keyframes btn_shimmer {
    0%   { left: -75%; }
    100% { left: 125%; }
}
.header_btn svg {
    flex: 0 0 auto;
    width: .9rem;
    height: auto;
}
.header_btn:hover {
}

/* ============================================================
   FOOTER
   ============================================================ */
.site_footer {
    background: #fff;
    margin-top: 0;
}

/* ----- Hàng trên: logo + hotline + giờ mở cửa ----- */
.site_footer_top {
    display: grid;
    grid-template-columns: 1.7fr 1.39fr 1.5fr;
    gap: 2rem 1rem;
    align-items: flex-start;
    padding: 3rem 0 0;
}
.footer_logo img {
    height: 2.8rem;
    width: auto;
}
.footer_logo_text {
    color: var(--vita-green);
    font-size: 1.6rem;
}
.footer_label {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: #8a8a8a;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.footer_hotline,
.footer_hours {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vita-green);
    margin-bottom: 0.9rem;
}
.footer_btn {
   height: 2.3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 2.1rem;
  font-size: 1rem;
   font-weight: 500;
   color: #0C4242;
   border-radius: 100px;
   background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
   position: relative;
   z-index: 0;
   overflow: hidden;
   transition: .5s all;
   gap: .2rem;
}
.footer_btn:hover {
    background: var(--vita-green);
    color: #fff;
}
.footer_btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: translateX(-160%);
    transition: none;
    pointer-events: none;
}
.footer_btn:hover::after {
    transform: translateX(320%);
    transition: transform 1s ease;
}

/* ----- Hàng dưới: 4 cột ----- */
.site_footer_main {
    display: grid;
    grid-template-columns: 1.7fr .8fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}
.footer_col_title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vita-green);
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.footer_address {
    font-size: .9rem;
    line-height: 1.6;
    color: #0C4242;
}
.footer_links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer_links a {
    font-size: 0.9rem;
    color: #0C4242;
    transition: color 0.2s ease;
    position: relative;
    display: inline-block;
}
.footer_links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--vita-green);
    transition: width 0.3s ease;
}
.footer_links a:hover {
    color: var(--vita-green);
}
.footer_links a:hover::after {
    width: 100%;
}
.footer_socials {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.footer_social {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    overflow: hidden;
    background: #AFBEBB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .5s all;
}
.footer_social:hover {
    background: #0C4242;
}
.footer_social img {
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 65%;
    min-width: 65%;
}
.footer_badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}
.footer_badge img {
    height: 3.4rem;
    width: auto;
    border-radius: 0.2rem;
}
.site_footer_bottom {
    padding: 1.2rem 0 3rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vita-green);
    text-align: center;
}




/* ============================================================
   BANNER DÙNG CHUNG (2 type) — Ưu đãi, Bác sĩ...
   type 1: ảnh nền + content + nhân vật (có overlay)
   type 2: 1 tấm banner lớn (KHÔNG overlay)
   ============================================================ */
.page_banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- type 2: banner lớn, không overlay --- */
.page_banner--full .page_banner_full img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- type 1: compose --- */
.page_banner--compose {
    min-height: auto;
    display: flex;
    align-items: flex-end;
}
.page_banner_bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.page_banner_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page_banner_overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgb(0 0 0 / 10%);
}
.page_banner_person {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.page_banner_person img {
    height: auto;
    width: 66rem;
    display: block;
}
.page_banner_inner {
    position: relative;
    z-index: 4;
    width: 100%;
}
.page_banner_content {
    max-width: 30rem;
    color: #fff;
}
.page_banner_title {
    font-size: 2.8rem;
    line-height: 1.15;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.8rem;
    text-transform: capitalize;
}
.home_page .page_banner_title {
    font-size: 3.5rem;
}
.page_banner_desc {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.2rem;
}

/* Banner dạng cảm nhận khách hàng (quote card) */
.page_banner_quote {
    margin-top: 7rem;
    position: relative;
    z-index: 4;
    padding: 1.8rem 2rem;
    background: #9696960D;
    border-radius: 0.9rem;
    color: #fff;
    max-width: 50%;
    margin-top: 0;
    backdrop-filter: blur(20px);
}
.page_banner_quote_icon {
    width: auto;
    height: 2rem;
    margin-bottom: 1rem;
}
.page_banner_quote_text {
    margin: 0 0 1.1rem;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 300;
}
.page_banner_quote_author {
    font-size: 0.78rem;
    color: #0C4242;
    font-size: 1.7rem;
}
.page_banner_quote_author b,
.page_banner_quote_author strong {
    font-weight: 700;
}

/* ============================================================
   TRANG BÁC SĨ — DANH SÁCH
   ============================================================ */
.doctor_page .heading_title,
.doctor_detail .heading_title {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--vita-green);
}
.doctor_list {
    padding: 7rem 0;
    background: #f8f4f0;
}
.doctor_list_title {
    margin: 0 0 1.5rem;
}

/* --- Tab lọc chuyên khoa --- */
.doctor_filter_nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.doctor_filter_item {
    padding: 0 1rem;
    border: none;
    border-radius: 0.3rem;
    background: var(--tab-bg);
    color: #644A37;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 2.8rem;
    min-width: 12rem;
    border-radius: .6rem;
    margin: 0;
    letter-spacing: 0;
}
.doctor_filter_item:hover {
    background: #e6dccf;
}
.doctor_filter_item.active {
    background: var(--tab-active);
    color: #fff;
}

/* --- Tìm kiếm nâng cao --- */
.doctor_search {
    position: relative;
    max-width: 26rem;
    margin: 2rem auto 2.5rem;
}
.doctor_search input {
    width: 100%;
    padding: 0.7rem 2.6rem 0.7rem 1rem;
    border: 1px solid #B89780;
    border-radius: 0.4rem;
    font-size: 1rem;
    color: var(--vita-green);
    background: transparent;
    padding: 0;
    height: 3rem;
    border-radius: 100px;
    box-shadow: none;
    padding: 0 1.2rem;
    font-weight: 400;
    margin: 0;
}
.doctor_search_btn {
    position: absolute;
    right: 0.4rem;
    top: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 3rem;
}

/* --- Grid bác sĩ --- */
.doctor_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    transition: opacity 0.2s ease;
}
.doctor_grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.doctor_card {
    position: relative;
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.06);
    color: inherit;
}
.doctor_card_img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.8rem;
    background: linear-gradient(360deg, #9D7F6A -44.29%, #E9D9CD 111.79%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.doctor_card_img:before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, #FFFFFF 9.42%, #E4DFDF 128.14%);
    opacity: 0;
    transition: .5s all;
}
.doctor_card:hover .doctor_card_img:before {
    opacity: 1;
}
.doctor_card:hover {
    box-shadow: 19.54px 19.54px 39.07px 0px #B8978099;
}
.doctor_card_img img,
.doctor_card_img span {
    width: 94%;
    height: auto;
    display: block;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.doctor_card_img img {
    position: relative;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.doctor_card:hover .doctor_card_img img {
    transform: scale(1.04);
}
/* Badge trắng bo góc góc dưới-trái (đúng design) */
.doctor_card_badge {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #ffffff80;
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    transition: width 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(29.305782318115234px);
}
.doctor_card_meta {
    min-width: 0;
}
.doctor_card_name {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #644A37;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.doctor_card_specialty {
    display: block;
    font-size: 0.6rem;
    color: #644A37;
    transition: color 0.3s ease;
}
.doctor_card:hover .doctor_card_name,
.doctor_card:hover .doctor_card_specialty {
    color: #0C4242;
}
.doctor_card_arrow {
    flex: 0 0 auto;
    color: var(--vita-green);
    font-size: 0.9rem;
    line-height: 1;
    transition: .5s all;
}
.doctor_grid span.doctor_card_arrow {
    transform: rotate(90deg);
}
.doctor_grid .doctor_card:hover span.doctor_card_arrow {
    transform: rotate(0deg);
}
.doctor_empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 2rem 0;
}

/* --- Phân trang AJAX --- */
.doctor_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.doctor_page_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: #f7f9f8;
    color: var(--vita-green);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
    margin: 0;
}
.doctor_page_btn:hover:not(:disabled):not(.active) {
    background: #e6f0ee;
}
.doctor_page_btn.active {
    background: #C4E1DB;
    border-color: #C4E1DB;
    color: var(--vita-green);
    font-weight: 700;
}
.doctor_page_btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.doctor_page_dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    color: var(--vita-green);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.booking_form_card {
    max-width: 33rem;
}
.doctor_booking {
    padding: 1rem 0 3rem;
}
.doctor_booking .booking_form_card {
    max-width: 40rem;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
}

/* ============================================================
   TRANG BÁC SĨ — CHI TIẾT
   ============================================================ */
.doctor_detail_top {
    padding: 2.5rem 0 1.5rem;
}
.doctor_detail_card {
    display: flex;
    gap: .5rem;
    background: #E9D9CD;
    border-radius: 1rem;
    padding: 0;
    align-items: center;
    box-shadow: 20px 20px 40px 0px #B8978099;
}
.doctor_detail_avatar {
    position: relative;
    flex: 0 0 27rem;
    max-width: 27rem;
    overflow: hidden;
    background: linear-gradient(360deg, #9D7F6A -44.29%, #E9D9CD 111.79%);
    border-radius: 1rem 0 0 1rem;
}
.doctor_detail_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.doctor_detail_name {
    position: absolute;
    left: 0.8rem;
    bottom: 0.8rem;
    padding: 0.3rem 0.7rem;
    background: rgba(11, 30, 22, 0.75);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    border-radius: 0.3rem;
}
.doctor_detail_form {
    flex: 1;
}
.doctor_detail_form .booking_form_card {
    background: transparent;
    max-width: unset;
    padding: 0 1rem;
}

/* --- Accordion --- */
.doctor_detail_acc {
    padding: 1.5rem 0;
}
.doctor_acc_item {
    border-bottom: 1px solid #B89780;
}
.doctor_acc_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 0.2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--vita-green);
    text-align: left;
    font-family: 'Beautique Display', 'Helvetica Neue', Arial, sans-serif !important;
    line-height: 1.2;
    margin: 0;
    text-transform: unset;
    font-weight: 500;
}
.doctor_acc_ic {
    flex: 0 0 auto;
    color: var(--tab-active);
    line-height: 1;
    display: flex;
    align-items: center;
    transition: transform 0.35s ease;
}
.doctor_acc_item.open .doctor_acc_ic {
    transform: rotate(180deg);
}
/* body accordion — height transition (Safari-safe, đo scrollHeight bằng JS) */
.doctor_acc_body {
    overflow: hidden;
    height: 0;
    transition: height 0.35s ease;
    will-change: height;
}
.doctor_acc_body_inner {
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #687276;
}
.doctor_acc_body_inner ul {
    margin: 0;
    padding-left: 1.1rem;
}
.doctor_acc_body_inner li {
    margin-bottom: 0.4rem;
}

/* --- Cố vấn bài viết (swiper slider) --- */
.doctor_advisor {
    padding: 5.5rem 0 3.5rem;
}
.doctor_advisor_title {
    margin: 0 0 1.5rem;
}
.doctor_advisor_swiper {
    padding-bottom: 2.5rem;
}
.advisor_card {
    display: block;
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
    color: inherit;
    height: 100%;
}
.advisor_card_img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tab-bg);
}
.advisor_card_img img,
.advisor_card_img span {
    width: 100%;
    height: 100%;
    display: block;
}
.advisor_card_img img {
    object-fit: cover;
    transition: transform 0.4s ease;
}
.advisor_card:hover .advisor_card_img img {
    transform: scale(1.04);
}
.advisor_card_body {
    padding: 1rem 1.1rem 1.2rem;
}
.advisor_card_meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.advisor_card_cat {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tab-active);
}
.advisor_card_date {
    font-size: 0.6rem;
    color: #9a9a9a;
    position: relative;
    padding-left: 0.7rem;
}
.advisor_card_date::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: #c9c9c9;
}
.advisor_card_title {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--vita-green);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* thanh process (scrollbar) dưới slider — dùng chung swiper toàn site */
.doctor_advisor_swiper .swiper-scrollbar {
    height: 0.25rem;
    background: #e8e0d6;
    border-radius: 1rem;
    left: 0;
    width: 100%;
}
.doctor_advisor_swiper .swiper-scrollbar-drag {
    background: var(--tab-active);
    border-radius: 1rem;
    cursor: grab;
}

/* --- Responsive bác sĩ --- */



/* ============================================================
   BANNER VIDEO
   ============================================================ */
.page_banner_bg_video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page_banner--full .page_banner_full_video {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   TIN TỨC (Góc nổi bật) — chung
   ============================================================ */
.news_page .heading_title,
.news_category .heading_title,
.news_detail .heading_title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #644A37;
    margin: 0;
    font-weight: 500;
}
.news_section {
    padding: 5rem 0;
}
.news_section_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.news_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    transition: opacity 0.2s ease;
}
.news_grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.news_empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 2rem 0;
}

/* --- Card bài viết --- */
.article_card {
    display: block;
    overflow: hidden;
    color: inherit;
}
.article_card_img {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--tab-bg);
    border-radius: .6rem;
    overflow: hidden;
}
.article_card_img_overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.article_card:hover .article_card_img_overlay {
    opacity: 1;
}
.article_card_img .article_card_more_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: .5s all;
    white-space: nowrap;
    background: rgb(255 255 255 / 30%);
    backdrop-filter: blur(20px);
}
.article_card:hover .article_card_img .article_card_more_btn {
    opacity: 1;
    pointer-events: auto;
}
.article_card_img span,
.article_card_img img {
    display: block;
    width: 100%;
    height: 100%;
}
.article_card_img img {
    object-fit: cover;
    transition: transform 0.4s ease;
}
.article_card:hover .article_card_img img {
    transform: scale(1.04);
}
.article_card_body {
    padding: 1rem 0 0 0;
}
.article_card_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.article_card_cat {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-transform: unset;
    color: #0C4242;
    font-style: italic;
}
.article_card_info {
    font-size: .9rem;
    color: #0C4242;
    white-space: nowrap;
    font-weight: 300;
}
.article_card_title {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--vita-green);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.article_card_excerpt {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: none;
}

/* ============================================================
   TIN TỨC — TRANG DANH MỤC (3 cấp)
   ============================================================ */
.news_category {
    padding: 2rem 0 3rem;
}
.news_cat_crumb {
    font-size: 0.65rem;
    color: var(--muted);
    margin-bottom: 1rem;
}
.news_cat_title {
    margin: 0 0 1.5rem;
}
/* cấp 2 tabs */
.news_cat_tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 2.4rem 1px;
}
.news_cat_tab {
    padding: 0.6rem 1.8rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--tab-bg);
    color: #644A37;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    height: 2.9rem;
    padding: 0;
    min-width: 10.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .3rem;
    letter-spacing: 0 !important;
}
.news_cat_tab:hover {
    background: #e6dccf;
}
.news_cat_tab.active {
    background: var(--tab-active);
    color: #fff;
}
/* Tabs dạng select (mobile ≤767) */
.news_cat_tabs_mobile {
    display: none;
    margin: 2.4rem 0;
}
.news_cat_select {
    width: 100%;
    height: 3rem;
    padding: 0 2.6rem 0 1.1rem;
    border: 1px solid var(--tab-active);
    border-radius: 0.6rem;
    background-color: var(--tab-bg);
    color: var(--tab-active);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234A6B5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.9rem;
}
/* cấp 3 slider tròn */
.news_cat_thumbs {
    position: relative;
    padding: 0 3.5rem;
    margin-bottom: 7rem;
    margin-top: 2rem;
}
.news_thumb_swiper {
    overflow: hidden !important;
}
.news_thumb_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
    margin-bottom: 0;
    padding: 0 !important;
}
.news_thumb_item:hover,
.news_thumb_item.active {
    opacity: 1;
}
.news_thumb_img {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tab-bg);
    display: block;
    border: .2rem solid #e9d9cd;
    transition: border-color 0.3s ease;
}
.news_thumb_item.active .news_thumb_img {
    border-color: var(--tab-active);
}
.news_thumb_img span,
.news_thumb_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news_thumb_name {
    font-size: 1.2rem;
    color: #644A37;
    text-align: center;
    line-height: 1.3;
    text-transform: capitalize;
    font-weight: 500;
}
.news_thumb_item.active .news_thumb_name,
.news_thumb_item:hover .news_thumb_name {
    color: var(--vita-green);
}
/* Nút chuyển (dùng chung .slider_nav_btn) — đặt 2 bên, canh theo hàng ảnh tròn */
.news_thumb_arrow {
    position: absolute;
    top: 2.5rem;
    transform: translateY(-50%);
    z-index: 5;
}
.news_thumb_prev {
    left: 0;
}
.news_thumb_next {
    right: 0;
}
.news_cat_grid {
    margin-top: 0.5rem;
}

/* ============================================================
   TIN TỨC — CHI TIẾT
   ============================================================ */
.news_detail {
    padding: 2rem 0 3rem;
}
.news_detail_crumb {
    font-size: 0.65rem;
    color: var(--muted);
    margin-bottom: 1rem;
}
.news_detail_title {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 400;
    color: var(--vita-green);
    margin: 0 0 0.8rem;
}
.news_detail_meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}
.news_detail_cat {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tab-active);
}
.news_detail_date {
    font-size: 0.65rem;
    color: #9a9a9a;
}
.news_detail_layout {
    padding-top: 4rem;
}
.doctor_card_img:before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, #FFFFFF 9.42%, #E4DFDF 128.14%);
    opacity: 0;
    transition: .5s all;
}

.doctor_card_img img {
    position: relative;
}

.doctor_card:hover .doctor_card_img:before {
    opacity: 1;
}

.doctor_card:hover {
    box-shadow: 19.54px 19.54px 39.07px 0px #B8978099;
}
@media screen and (max-width: 1699px) {
    html {
        font-size: 1.16vw;
    }
}
@media (max-width: 767px) {
    .swiper-pagination-bullet-active {
        background: #0C4242;
    }
    .news_detail_layout {
        display: flex;
        flex-direction: column;
    }
    .news_detail_layout > .col:first-child {
        order: 2;
    }
    .news_detail_layout > .col:last-child {
        order: 1;
    }
}
.news_detail_sidebar {
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    height: 100%;
}
.doctor_side_card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 0.9rem;
    text-align: center;
}
.doctor_side_img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.8rem;
    overflow: hidden;
    background: linear-gradient(160deg, #d9c3ac, #c8ab8d);
}
.doctor_side_img span,
.doctor_side_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.doctor_side_body {
    padding: 1rem 0.6rem 0.4rem;
}
.doctor_side_name {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vita-green);
}
.doctor_side_pos {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.7rem;
}
.doctor_side_desc {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 1.1rem;
}
.doctor_side_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.3rem;
    border-radius: 0.4rem;
    background: #E3EBE7;
    color: var(--vita-green);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.doctor_side_card .footer_btn {
    text-transform: uppercase;
}
.doctor_side_btn:hover {
    background: var(--vita-green);
    color: #fff;
}
.news_sidebar_sticky {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
/* Chia sẻ */
.news_share {
    text-align: center;
}
.news_share_label {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.6rem;
}
.news_share_icons {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
}
.news_share_btn {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vita-green);
    color: #fff;
    transition: all 0.3s ease;
}
.news_share_btn:hover {
    background: var(--tab-active);
}
.news_share_btn svg {
    width: 55%;
    height: auto;
}
.news_share_btn path {
    transition: .5s all;
}
.news_share_btn:hover path {
    fill: #fff;
}
/* Mục lục (TOC) */
.news_toc {
    background: #fff;
    border-radius: 1rem;
    padding: 1.2rem 1.3rem;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.news_toc_title {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vita-green);
    text-align: center;
}
.news_toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news_toc li {
    border-top: 1px solid var(--line);
    margin: 0;
}
.news_toc li:first-child {
    border-top: none;
}
.news_toc li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 0.75rem 0;
   font-size: 1rem;
    color: var(--muted);
    line-height: 1.45;
    transition: color 0.2s ease;
    position: relative;
}
.news_toc li a:before {
    width: 0;
    content: '';
    position: absolute;
    bottom: -1px;
    background: #0C4242;
    height: 1px;
    transition: .5s all;
}
.news_toc li a:hover {
    color: var(--vita-green);
}
.news_toc li a:hover:before {
    width: 100%;
}
.news_toc_arrow {
    flex: 0 0 auto;
    color: #c2c2c2;
}
.news_toc li.active a {
    color: var(--vita-green);
    font-weight: 700;
}
.news_toc li.active a:before {
    width: 100%;
}
.news_toc li.active .news_toc_arrow {
    color: var(--vita-green);
}

/* --- Typography nội dung WP --- */
.wp_content {
}
.wp_content h2 {
    font-size: 1.5rem;
    color: var(--vita-green);
    font-weight: 700;
    margin: 1.6rem 0 0.8rem;
}
.wp_content h3 {
    font-size: 2rem;
    color: var(--vita-green);
    font-weight: 700;
    margin: 1.3rem 0 0.6rem;
}
.wp_content p {
    margin: 0 0 1rem;
}
.wp_content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.6rem;
    margin: 0.5rem 0;
}
.wp_content ul,
.wp_content ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

/* --- Shortcode [img_cols] chia ảnh thành 2 hoặc 3 cột --- */
.img_cols {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.img_cols_2 .img_cols_item {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 0;
}
.img_cols_3 .img_cols_item {
    flex: 1 1 calc(33.333% - 0.4rem);
    min-width: 0;
}
.img_cols_item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.4rem;
}
@media (max-width: 767px) {
    .img_cols_2 .img_cols_item,
    .img_cols_3 .img_cols_item {
        flex: 1 1 100%;
    }
}

/* --- Thẻ [related_blog] chèn giữa bài --- */
.related_blog_card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 0.05rem solid var(--line);
    border-radius: 0.8rem;
    overflow: hidden;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.05);
    margin: 1.6rem 0;
    color: inherit;
}
.related_blog_thumb {
    position: relative;
    flex: 0 0 17rem;
    max-width: 17rem;
    background: var(--tab-bg);
}
.related_blog_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    box-shadow: none !important;
}
.related_blog_overlay {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.5);
    white-space: pre-line;
}
.related_blog_body {
    flex: 1;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.related_blog_title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--vita-green);
}
.related_blog_body .lead_card_btn {
    align-self: flex-start;
}

/* --- Slider bài viết (section cấp 1) --- */
/* Header slider bài viết chế độ nav (tiêu đề trái + 2 nút phải-trên) */
.article_slider_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.article_slider_head .heading_title {
    margin: 0;
    text-align: left;
}
.article_slider_head .slider_nav {
    margin-top: 0;
}
.article_swiper {
    padding-bottom: 2.5rem;
    overflow: hidden !important;
}
.article_swiper .swiper-slide {
    height: auto;
}
.article_swiper .article_card {
    height: 100%;
}
.article_swiper .swiper-scrollbar {
    height: 0.2rem;
    background: #e8e0d6;
    border-radius: 1rem;
    left: 0;
    width: 100%;
}
.article_swiper .swiper-scrollbar-drag {
    background: var(--tab-active);
    border-radius: 1rem;
    cursor: grab;
}

/* --- Mid-banner (Vẻ đẹp bắt đầu... trường thọ) --- */
.news_mid_banner {
    position: relative;
    min-height: 42rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 0;
}
.news_mid_bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #644A37;
}
.news_mid_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: luminosity;
}
.news_mid_overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.news_mid_inner {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: left;
    padding: 0 29rem 0px 18rem;
}
.news_mid_title {
    font-size: 2rem;
    line-height: 1.35;
    font-weight: 400;
    color: #C4E1DB;
    margin: 0 0 1.7rem;
    padding-bottom: 1.7rem;
    position: relative;
}
.news_mid_desc {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Responsive tin tức --- */



/* ============================================================
   TRANG GIỚI THIỆU
   ============================================================ */



/* --- Banner slider (chữ dưới-trái) --- */
.about_banner {
    position: relative;
}
/* Dots banner: ẩn ở desktop (dùng arrow), hiện ở mobile */
.about_banner_swiper .swiper-pagination {
    display: none;
    bottom: 1.4rem;
}
.about_banner_swiper .swiper-pagination-bullet {
    width: 0.55rem;
    height: 0.55rem;
    background: #fff;
    opacity: 0.5;
    transition: all 0.3s ease;
}
.about_banner_swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 1.5rem;
    border-radius: 100px;
}
.about_banner_slide.page_banner--compose {
    min-height: 30rem;
}
.about_banner_slide .page_banner_content {
    max-width: 34rem;
}
.about_banner_swiper .swiper-button-next,
.about_banner_swiper .swiper-button-prev {
    color: var(--vita-green);
    width: 2.6rem;
    height: 2.6rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
}
.about_banner_swiper .swiper-button-next::after,
.about_banner_swiper .swiper-button-prev::after {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

/* --- Tầm nhìn & Sứ mệnh (nền V + thành phố) --- */
.about_vision {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #efeae3;
    padding: 5rem 0 2rem;
    overflow: hidden;
}
.about_vision_overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 242, 237, 0.72);
    display: none;
}
.about_vision_inner {
    position: relative;
    z-index: 2;
}
.about_vision_cols {
    display: grid;
    grid-template-columns: 19rem 19rem;
    gap: 3rem;
    padding-bottom: 12rem;
    justify-content: space-between;
}
.about_vision_title {
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0 0 1rem;
    color: #644A37;
}
.about_vision_col .wp_content {
   font-weight: 300;
   color: #7F7F7F;
   line-height: 1.6;
   text-align: justify;
}

/* --- Badges (đáy section Tầm nhìn) --- */
.about_badges {
    display: flex;
    gap: 0;
    position: relative;
    z-index: 3;
    background: rgba(30, 40, 35, 0.55);
    backdrop-filter: blur(6px);
    border-radius: 0.8rem;
    padding: 1.2rem .6rem;
    margin-bottom: 0;
    background: #B8978033;
    backdrop-filter: blur(17px);
    overflow: hidden;
}
.about_badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 25%;
    padding: 0 1.2rem;
}
.about_badge_icon {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #644A3733;
    position: relative;
}
.about_badge_icon img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}
.about_badge_title {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
    margin: 0;
}
.about_badge_desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
}

/* --- Đội ngũ nhân viên (slider) --- */
.about_staff {
    padding: 5rem 0;
}
.about_staff_swiper {
    overflow: visible !important;
    padding: 0.5rem 0 2rem;
}
.about_staff_swiper .swiper-slide {
    height: auto;
    transform: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.about_staff_swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}
.about_staff_swiper .swiper-pagination {
    position: static;
    margin-top: 1.5rem;
}
.about_staff_swiper .swiper-pagination-bullet {
    background: #0C4242;
    opacity: 0.3;
}
.about_staff_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
.lead_card_btn:before {
       content: "";
       position: absolute;
       inset: 0;
       padding: 1px;
       border-radius: 100px;
       background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
}

.lead_card_btn:hover {
    background: #0C4242;
    color: #fff;
}

.lead_card_btn path {
    transition: .5s all;
}

.lead_card_btn:hover path {
    fill: #fff;
}
.expert_panel_img:before {
    content: '';
    background: linear-gradient(92.72deg, rgb(79 62 49 / 58%) 2.27%, rgba(79, 62, 49, 0) 27.01%);
    background-blend-mode: multiply;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    transition: .5s all;
}

.expert_panel.is-active .expert_panel_img:before {
    opacity: 1;
}

button.slider_nav_btn:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(180deg, #999999 0%, #FFFFFF 34.62%, #F2F2F2 56.73%, #E6E6E6 76.92%, #CCCCCC 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
}
.about_badges:before,.about_badge_icon:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #E6E6E6 23.08%, #F2F2F2 43.27%, #FFFFFF 65.38%, #C4C0C0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


.about_badge_icon:before {
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
}
main#main.about_page {
    background: #FFFDFD;
}
main#main.news_page {
    background: #FFFDFD;
}
.doctor_page_btn:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(180deg, #999999 0%, #FFFFFF 34.62%, #F2F2F2 56.73%, #E6E6E6 76.92%, #CCCCCC 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
}



.doctor_page_btn svg {
    width: .7rem;
    height: auto;
}
.slider_nav_btn.style2 {
    background: #FFFFFF66;
    box-shadow: 19.76px 19.76px 39.51px 0px #00000029;
}
.svd2_wrap .nen {
    background: linear-gradient(294.95deg, rgba(255, 255, 255, 0.3) 1.19%, rgba(12, 66, 66, 0.3) 90.64%);
    background-blend-mode: multiply;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12rem;
    backdrop-filter: blur(75.01988220214844px);
    border-radius: 3rem 3rem 0 0;
}
.svd2_wrap .nen:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 3rem 3rem 0 0;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    bottom: -1px;
}
.svd1 nav.page_breadcrumb {
    transform: translateY(5rem);
    filter: brightness(0) invert(1);
}
.svc_item_img img {
    opacity: .8;
    transition: .6s all;
}

.svc_item:hover .svc_item_img img {
    opacity: 1;
}
.svc_item_img img {
    opacity: .8;
    transition: .6s all;
}

.svc_item:hover .svc_item_img img {
    opacity: 1;
}
.offer_detail_top nav.page_breadcrumb {
    margin-bottom: 5rem;
}
main#main.offer_page {
    background: #fff;
}
main#main.customer_page {
    background: #FFFDFD;
}
main#main.customer_page .row.page_banner_inner {
    padding-top: 15rem;
}

main#main.customer_page section.page_banner.page_banner--compose {
    align-items: center;
}

.page_banner_quote:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
}
.doctor_detail_form .contact_form input, .doctor_detail_form .contact_form select {
    border-radius: .6rem;
}
.staff_card>img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff_card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #0c42428f;
    backdrop-filter: blur(30px);
}
input.search_popup_input::placeholder {
    color: #fff;
    opacity: 1;
}

button.search_popup_sugg_item {
    margin: 0;
    min-height: unset;
    padding: 0;
    line-height: normal;
    text-transform: unset;
    font-weight: 400;
    opacity: 1;
    color: #fff;
    letter-spacing: 0;
    transition: opacity 0.2s;
}
button.search_popup_sugg_item:hover {
    opacity: 1;
}
/* hover 1 item → item đó giữ nguyên, các item khác mờ đi */
.search_popup_sugg_list:has(.search_popup_sugg_item:hover) button.search_popup_sugg_item:not(:hover) {
    opacity: 0.4;
}

.search_popup_svc_bottom {
    display: flex;
    align-items: center;
}

.search_popup_services {
    width: 48rem;
    flex: 0 0 auto;
}

.search_popup_sugg {
    width: 100%;
}

span.search_popup_svc_name {
    height: auto !important;
    font-family: 'Beautique Display', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1.1rem;
}

.search_popup_svc_bottom a.lead_card_btn {
    font-size: .5rem;
    height: 1.2rem;
    padding: 0 .7rem;
    flex: 0 0 auto;
    margin-left: 1.5rem;
}

.search_popup_svc_bottom a.lead_card_btn svg {
    width: .25rem;
    height: auto;
}

span.search_popup_svc_desc {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
}
@media (min-width: 768px) {
    .about_staff_swiper .swiper-pagination {
        display: none;
    }
}
.staff_card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    height: 100%;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.staff_card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 3;
}
.staff_card:hover::after {
    animation: staff_card_shimmer 0.6s ease forwards;
}
@keyframes staff_card_shimmer {
    0%   { left: -75%; }
    100% { left: 125%; }
}
.staff_card_img,
.staff_card_img span,
.staff_card_img img {
    inset: 0;
    width: 100%;
}
.staff_card_img img {
    object-fit: cover;
    border-radius: 1.4rem;
}
.staff_card_body {
   position: relative;
   z-index: 2;
}
.staff_card_head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1.4rem 2.3rem;
}
.staff_card_icon {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgb(149 170 171);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #fff;
}
.staff_card_icon img {
    max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
}
.staff_card_title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
    margin-bottom: .2rem;
}
.staff_card_desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
}

/* --- Chuyên gia y tế (gallery expand) --- */
.about_experts {
    padding: 0 0 1rem;
}
.experts_gallery {
    display: flex;
    gap: 0;
    height: 34rem;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 20px 20px 40px 0px #00000061;
}
.expert_panel {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    color: inherit;
    background: linear-gradient(160deg, #e6d6c4, #d3b79c);
    transition: flex 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: flex;
}
.expert_panel.is-active {
    flex: 4;
    position: relative;
    box-shadow: 0 0 2rem #333333b8;
    z-index: 9;
}
/* Experts ở chế độ slider (≤1199): mỗi panel là 1 card cố định */
.experts_swiper {
    padding-bottom: 0.5rem;
}
.experts_swiper .swiper-pagination {
    position: static;
    margin-top: 1.5rem;
}
.experts_swiper .swiper-pagination-bullet {
    background: #0C4242;
    opacity: 0.3;
}
.experts_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
.experts_swiper .expert_panel {
    display: block;
    flex: none;
    height: 30rem;
    border-radius: 1.2rem;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.15);
}
.experts_swiper .expert_panel_name {
    white-space: normal;
    font-size: 1.5rem;
}
@media (max-width: 767px) {
    .experts_swiper .swiper-slide {
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: scale(0.88) translateY(0.9rem);
        opacity: 0.55;
        z-index: 1;
    }
    .experts_swiper .swiper-slide-active {
        transform: scale(1) translateY(0);
        opacity: 1;
        z-index: 2;
    }
}
.expert_panel_img,
.expert_panel_img span,
.expert_panel_img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.expert_panel_img img {
    object-fit: cover;
    object-position: center top;
    transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.expert_panel.is-active .expert_panel_img img {
    width: 150%;
    max-width: unset;
    left: 50%;
    transform: translateX(-50%);
}
.expert_panel_content {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: #ffffff24;
    backdrop-filter: blur(4px);
    border-radius: 0.6rem;
    color: #fff;
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
    z-index: 9;
}
.expert_panel.is-active .expert_panel_content {
    opacity: 1;
    transform: translateY(0);
}
.expert_panel_name {
    margin: 0 0 0.1rem;
    font-size: 2rem;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    text-transform: uppercase;
}
.expert_panel_pos {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: 300;
}
.lead_card_btn {
   font-size: .9rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
   height: 2.25rem;
   border-radius: 100px;
   padding: 0 1.3rem;
   font-weight: 500;
   color: #0C4242;
   gap: .5rem;
   position: relative;
   z-index: 0;
   flex: 0 0 auto;
}
.about_experts_all {
    margin-top: 2em;
}


/* --- Truyền thông --- */
.about_media {
    padding: 2rem 0;
}
.about_media_head {
    justify-content: center;
}

/* --- Đặt lịch hẹn ngay --- */
.about_booking {
    background-size: cover;
    background-position: center;
    padding: 6rem 0 7rem;
    margin-top: 2rem;
}
.about_booking .col.large-12.small-12:before {
    content: '';
    border-radius: 1rem;
    box-shadow: 20px 20px 40px 0px #B8978099;
    width: 89%;
    position: absolute;
    bottom: 0;
    height: 14rem;
    background: #E9D9CD80;
}
.about_booking_model {
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30rem;
    right: -6rem;
}
.about_booking_model img {
    width: calc(100% + 0rem);
    max-width: unset;
    height: auto;
    display: block;
    margin: 0 auto;
    left: revert-layer;
}


/* --- Responsive giới thiệu --- */



/* ============================================================
   NÚT CHUYỂN SLIDE — DÙNG CHUNG TOÀN TRANG
   ============================================================ */
.slider_nav {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.slider_nav_btn,
.about_banner_swiper .swiper-button-next,
.about_banner_swiper .swiper-button-prev,
.news_cat_thumbs .swiper-button-next,
.news_cat_thumbs .swiper-button-prev {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #9ABDB666;
    color: var(--vita-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    line-height: normal;
    padding: 0;
    box-shadow: 20px 20px 40px 0px #00000029;
    border: none !important;
}
.slider_nav_btn:hover,
.about_banner_swiper .swiper-button-next:hover,
.about_banner_swiper .swiper-button-prev:hover,
.news_cat_thumbs .swiper-button-next:hover,
.news_cat_thumbs .swiper-button-prev:hover {
    background: var(--vita-green) !important;
    color: #fff;
}
/* Icon mũi tên SVG trong nút (fill=currentColor → theo color của nút) */
.slider_nav_btn svg {
    width: 1.05rem;
    height: auto;
    display: block;
}
/* Swiper 11 inject sẵn <svg> chevron vào nút lúc client — ẩn đi để dùng mũi tên SVG của mình (mask ::after) */
.about_banner_swiper .swiper-button-prev > svg,
.about_banner_swiper .swiper-button-next > svg,
.news_cat_thumbs .swiper-button-prev > svg,
.news_cat_thumbs .swiper-button-next > svg {
    display: none;
}
/* Đổi icon mặc định của Swiper (banner slider) sang mũi tên SVG dùng chung — inject qua mask, theo currentColor */
.about_banner_swiper .swiper-button-next::after,
.about_banner_swiper .swiper-button-prev::after,
.news_cat_thumbs .swiper-button-next::after,
.news_cat_thumbs .swiper-button-prev::after {
    content: "";
    width: 1.05rem;
    height: 0.55rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.about_banner_swiper .swiper-button-prev::after,
.news_cat_thumbs .swiper-button-prev::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 11'%3E%3Cpath d='M0.205058 4.66128C-0.0683092 4.93464 -0.0683092 5.37786 0.205058 5.65122L4.65983 10.106C4.9332 10.3794 5.37641 10.3794 5.64978 10.106C5.92315 9.83263 5.92315 9.38941 5.64978 9.11605L1.68998 5.15625L5.64978 1.19645C5.92315 0.923085 5.92315 0.47987 5.64978 0.206503C5.37641 -0.0668645 4.9332 -0.0668642 4.65983 0.206503L0.205058 4.66128ZM20.499 5.15625V4.45625L0.700033 4.45625V5.15625V5.85625L20.499 5.85625V5.15625Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 11'%3E%3Cpath d='M0.205058 4.66128C-0.0683092 4.93464 -0.0683092 5.37786 0.205058 5.65122L4.65983 10.106C4.9332 10.3794 5.37641 10.3794 5.64978 10.106C5.92315 9.83263 5.92315 9.38941 5.64978 9.11605L1.68998 5.15625L5.64978 1.19645C5.92315 0.923085 5.92315 0.47987 5.64978 0.206503C5.37641 -0.0668645 4.9332 -0.0668642 4.65983 0.206503L0.205058 4.66128ZM20.499 5.15625V4.45625L0.700033 4.45625V5.15625V5.85625L20.499 5.85625V5.15625Z'/%3E%3C/svg%3E");
}
.about_banner_swiper .swiper-button-next::after,
.news_cat_thumbs .swiper-button-next::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 11'%3E%3Cpath d='M20.294 4.66128C20.5673 4.93464 20.5673 5.37786 20.294 5.65122L15.8392 10.106C15.5658 10.3794 15.1226 10.3794 14.8492 10.106C14.5759 9.83263 14.5759 9.38941 14.8492 9.11605L18.809 5.15625L14.8492 1.19645C14.5759 0.923085 14.5759 0.47987 14.8492 0.206503C15.1226 -0.0668645 15.5658 -0.0668642 15.8392 0.206503L20.294 4.66128ZM0 5.15625V4.45625L19.799 4.45625V5.15625V5.85625L0 5.85625V5.15625Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 11'%3E%3Cpath d='M20.294 4.66128C20.5673 4.93464 20.5673 5.37786 20.294 5.65122L15.8392 10.106C15.5658 10.3794 15.1226 10.3794 14.8492 10.106C14.5759 9.83263 14.5759 9.38941 14.8492 9.11605L18.809 5.15625L14.8492 1.19645C14.5759 0.923085 14.5759 0.47987 14.8492 0.206503C15.1226 -0.0668645 15.5658 -0.0668642 15.8392 0.206503L20.294 4.66128ZM0 5.15625V4.45625L19.799 4.45625V5.15625V5.85625L0 5.85625V5.15625Z'/%3E%3C/svg%3E");
}

/* ============================================================
   TRANG KHÁCH HÀNG
   ============================================================ */
.heading_title {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--vita-green);
    margin: 0 0 2rem;
    position: relative;
}

/* --- Video nổi bật --- */
.cus_videos {
    padding: 7rem 0 0;
}
.cus_videos_grid {
    display: grid;
    grid-template-columns: 32.5rem calc(100% - 32.5rem);
    gap: 2rem;
}
/* Swiper trong grid: bắt buộc min-width:0 để track không nở theo nội dung */
.cus_videos_left,
.cus_videos_right {
    min-width: 0;
}
.cus_videos_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cus_vleft_swiper {
    width: 100%;
    overflow: hidden !important;
    padding: 1rem 0 2rem !important;
    margin: -1rem 0 -2rem !important;
}
.cus_vright_swiper {
    width: 100%;
    overflow: visible !important;
}
.cus_vright_swiper .swiper-slide {
    opacity: 0;
    transition: .6s all;
    pointer-events: none;
}
.cus_vright_swiper .swiper-slide.swiper-slide-active,
.cus_vright_swiper .swiper-slide.swiper-slide-next,
.cus_vright_swiper .swiper-slide.swiper-slide-next+div {
    opacity: 1;
    pointer-events: unset;
}
.cus_vright_swiper a.video_card,
.cus_vleft_swiper a.video_card {
    box-shadow: 20px 20px 40px 0px #00000029;
}
.cus_videos_title {
    margin-bottom: 1.2rem !important;
}
.video_card {
    position: relative;
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #222;
}
.video_card--big {height: 24rem;width: 100%;}
.video_thumb,
.video_thumb span,
.video_thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.video_thumb img {
    object-fit: cover;
}
.video_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.2rem;
    height: 2.3rem;
    background: #ff0000;
    border-radius: 0.5rem;
    z-index: 2;
    transition: transform 0.3s ease;
}
.video_play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent #fff;
}
.video_card:hover .video_play {
    transform: translate(-50%, -50%) scale(1.1);
}
.video_card_title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.6rem 1rem 0.9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    display: none;
}
.video_card--big .video_card_title {
    font-size: 0.95rem;
    padding: 2.2rem 1.4rem 1.2rem;
}
.cus_vright_swiper .video_card {
    height: 6rem;
    width: 100%;
}
.cus_vright_swiper .video_card_title {
    font-size: 0.68rem;
    padding: 1.2rem 0.8rem 0.7rem;
}

/* --- Cảm nhận khách hàng --- */
.cus_testi {
    padding: 7rem 0;
}
.cus_testi_heading {
    margin-bottom: 1rem !important;
}
.cus_testi_quote {
    display: block;
    font-size: 3rem;
    line-height: 0.6;
    color: var(--vita-green);
    font-family: Georgia, serif;
    margin-bottom: 0.8rem;
}
.cus_testi_swiper {
    margin-bottom: 0.5rem;
}
.testi_stars {
    color: var(--tab-active);
    letter-spacing: 0.15em;
    font-size: 0.95rem;
    margin: 1.2rem 0;
}
.testi_content {
    font-size: 1.2rem;
    color: #555;
    margin: 0 0 1.2rem;
    max-width: 26rem;
}
.testi_name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--vita-green);
}
.cus_testi_media {
    aspect-ratio: 1 / 1;
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 20px 20px 40px 0px #00000029;
}
.cus_testi_media video,
.cus_testi_media span,
.cus_testi_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Trước & sau điều trị --- */
.cus_ba {
    padding: 7rem 0;
    background-size: cover;
    background-position: center;
    background-color: #efe6d3;
}
.cus_ba_swiper {
    overflow: visible !important;
    padding: 0.5rem 0 2.5rem;
}
.cus_ba_swiper .swiper-slide {
    transition: opacity 0.3s ease;
}
.cus_ba_swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}
.cus_ba_swiper .swiper-pagination {
    bottom: 0;
}
.cus_ba_swiper .swiper-pagination-bullet {
    background: #0C4242;
    opacity: 0.3;
}
.cus_ba_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
.cus_ba_title {
    margin: 0 0 0.8rem;
    padding: 0;
}
.cus_ba_desc {max-width: 40rem;margin: 2rem auto;}
.cus_ba_slider_wrap {
    position: relative;
    padding: 0 3rem;
}
.cus_ba_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.cus_ba_prev {
    left: -1rem;
}
.cus_ba_next {
    right: -1rem;
}
.ba_card {
    border-radius: 0.8rem;
    padding: 0;
    box-shadow: 20px 20px 40px 0px #B8978099;
}
.ba_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
    overflow: hidden;
}
.ba_img {
    position: relative;
    overflow: hidden;
}
.ba_img span,
.ba_img img {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    display: block;
    border-radius: 1rem 1rem 0 0;
}
.ba_tag {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(30, 40, 35, 0.7);
    border-radius: 0.3rem;
    display: none !important;
}
.ba_tag--after {
    background: var(--tab-active);
}
.ba_caption {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--vita-green);
    margin-top: 0;
    background: linear-gradient(
118deg, #FFFFFF 0%, #f4e4d8 23.08%, #f4e4d8 43.27%, #FFFFFF 65.38%, #f4e4d8 100%);
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .4rem;
    border-radius: 0 0 1rem 1rem;
}

/* --- Responsive khách hàng --- */



/* ============================================================
   TRANG CHỦ — SECTION 10 CHI NHÁNH
   ============================================================ */
.home_intro {
    background-image: var(--intro-bg);
    background-size: cover;
    background-position: center;
    background-color: #eef0f0;
    min-height: 44rem;
    display: flex;
    align-items: flex-start;
    padding: 13rem 0 0 0;
}
@media (max-width: 767px) {
    .home_intro {
        background-image: var(--intro-bg-mobile, var(--intro-bg));
    }
}
.home_intro_content {
    max-width: 37rem;
    margin-left: auto;
    text-align: center;
}
.home_intro_title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
    font-size: 2.5rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--vita-green);
}
.home_intro_icon {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
}
.home_intro_desc {
 
}



/* ============================================================
   TRANG CHỦ — SECTION THÀNH TỰU (bento 5 box)
   ============================================================ */
.home_ms {
    padding: 7rem 0 5rem;
    background: #fffdfd;
}
.home_ms_title {
 font-size: 2.5rem;
 color: #0a4241;
 font-weight: 500;
}
.home_ms_desc {margin-bottom: 1.7rem;}
.home_ms_grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b c"
        "d b e";
    gap: 1rem;
    height: 36rem;
    max-width: 67rem;
    margin: auto;
}
.ms_count_5 .ms_box:nth-child(1) {grid-area: a;height: 24rem;}
.ms_count_5 .ms_box:nth-child(2) { grid-area: b; }
.ms_count_5 .ms_box:nth-child(3) { grid-area: c; }
.ms_count_5 .ms_box:nth-child(4) { grid-area: d; }
.ms_count_5 .ms_box:nth-child(5) { grid-area: e; }
.ms_box {
    position: relative;
    border-radius: 0.8rem;
    overflow: hidden;
    min-height: 0;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.ms_box:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(180deg, #D7D6D6 0%, #E6E6E6 23.08%, #F2F2F2 43.27%, #FFFFFF 65.38%, #C4C0C0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 0.8rem;
    z-index: 1;
}
/* Bento ở chế độ slider (≤1199): mỗi box có tỉ lệ cố định */
.home_ms_swiper .ms_box {
    aspect-ratio: 4 / 3;
}
.ms_media,
.ms_media span,
.ms_media img,
.ms_media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ms_media img,
.ms_media video {
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ms_box:hover .ms_media img {
    transform: scale(1.07);
}
.ms_overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.4rem 1.5rem;
    color: #fff;
}
.ms_number {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.ms_box:nth-child(2) .ms_number {
    font-size: 3.3rem;
}
.ms_label {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0;
    color: #0C4242;
    line-height: 1.4;
}
.ms_maplink {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.7rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}
.home_ms_more {
    margin-top: 3rem;
}
.home_ms_more .button_link.outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.home_ms_more .button_link.outline:hover {
    background: #fff;
    color: var(--vita-green);
}




/* ============================================================
   TRANG CHỦ — SECTION DẪN ĐẦU (slider center-mode)
   ============================================================ */
.home_lead {
    padding: 4rem 0;
    background: #f6efe9;
    overflow: hidden;
}
.home_lead_title {
    font-size: 2.2rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 2rem;
}
.home_lead_title_1 {
    display: block;
    color: var(--vita-green);
}
.home_lead_title_2 {
    display: block;
    color: var(--tab-active);
}
.lead_slider_wrap {
    position: relative;
    padding: 0;
}
.lead_swiper {
    padding: 3.5rem 0;
    overflow: visible !important;
}
.lead_swiper .swiper-slide {
    transition: transform 0.45s ease, opacity 0.45s ease;
    transform: scale(0.92);
    opacity: 0;
}
.lead_swiper .swiper-slide-prev,
.lead_swiper .swiper-slide-active,
.lead_swiper .swiper-slide-next {
    opacity: 1;
}
.lead_swiper .swiper-slide-active {
    transform: scale(1.1);
    z-index: 2;
}
.lead_card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--tab-bg);
    box-shadow: 0 0.6rem 1.6rem rgb(0 0 0 / 45%);
}
.lead_card_img,
.lead_card_img span,
.lead_card_img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.lead_card_img img {
    object-fit: cover;
    display: block;
}
.lead_card_body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.8rem;
    color: #fff;
}
.lead_card_title {
    margin: 0 0 0.4rem;
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 400;
    color: #fff;
}
.lead_card_desc {
   margin: 0;
   font-size: 1.2rem;
   max-width: 10rem;
}
.lead_card_btn {
    border-radius: 100px;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
   font-size: 1rem;
    background: #9ABDB666;
    color: #0C4242;
    padding: 0 1.3rem;
    gap: .5rem;
    transition: .5s all;
    text-transform: uppercase;
    font-weight: 500;
    backdrop-filter: blur(8px);
}
.lead_card_btn:hover {
}
.lead_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
}
.lead_prev {
    left: 0;
}
.lead_next {
    right: 0;
}
.home_lead_more {
    margin-top: 1.5rem;
}


/* ============================================================
   TRANG CHỦ — SECTION GIẢI THƯỞNG (nền tối, slider ảnh)
   ============================================================ */
.home_awards {
    background: #fff;
    padding: 3.5rem 0 4rem;
    overflow: hidden;
}
.home_awards_title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
}
.home_awards_sub {

}
.awards_slider_wrap {
    position: relative;
    padding: 0 3.5rem;
}
.awards_swiper {
    padding: 1rem 0 2rem;
    overflow: visible !important;
}
.awards_swiper .swiper-slide {
    height: auto;
}
.award_card {
    border-radius: 0.8rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #222;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.award_card span,
.award_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.awards_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
}
.awards_prev {
    left: 0;
}
.awards_next {
    right: 0;
}
.home_awards_bottom {display: flex;justify-content: center;}
.home_awards_bottom_title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 500;
    color: #0C4242;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.home_awards_desc {font-size: 1rem;}
.home_awards_btn.button_link.outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #0C4242 !important;
    background: none;
    font-size: 700;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.home_awards_btn.button_link.outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: awards_btn_shimmer 2.5s ease-in-out infinite;
}
@keyframes awards_btn_shimmer {
    0%   { left: -75%; }
    28%  { left: 125%; }
    100% { left: 125%; }
}
.home_awards_btn.button_link.outline:hover {
    background: #fff;
    color: var(--vita-green);
}

/* ============================================================
   TRANG CHỦ — SECTION CHUYÊN TRANG NỔI BẬT (blog slider)
   ============================================================ */
.home_blog {
    color: #fff;
    padding: 3.5rem 0 4rem;
    overflow: hidden;
}
.home_blog_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.home_blog_title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
.home_blog_nav {
    margin: 0;
}
.blog_card {
    display: block;
    color: inherit;
}
.blog_card_img {
    aspect-ratio: 4 / 3;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #222;
}
.blog_card_img span,
.blog_card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog_card:hover .blog_card_img img {
    transform: scale(1.04);
}
.blog_card_body {
    padding: 1rem 0 0;
}
.blog_card_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.blog_card_cat {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tab-active);
}
.blog_card_info {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.blog_card_title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

main#main.home_page {
    background: #fff;
}

/* section 7/8 trên trang chủ dùng lại CSS .about_experts / .cus_testi */
.home_page .about_experts,
.home_page .cus_testi {
    padding: 3rem 0;
}



/* ============================================================
   HEADER OVERLAY — chừa chỗ cho các trang KHÔNG có banner đầu
   (đặt cuối file để override padding shorthand của từng trang)
   ============================================================ */
.news_category,
.news_detail,
.doctor_detail,
.offer_detail,
.contact_page {
    padding-top: 5rem;
}

/* ============================================================
   TRANG CHỦ — SECTION 10: LONGEVITY (nền GIF)
   ============================================================ */
.home_longevity {
    position: relative;
    background-color: #7a6a5c;
    min-height: 40rem;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}
.home_longevity_bg {
    position: absolute;
    inset: 0;
    z-index: 1;
     background: #644A37;
}
.home_longevity_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: luminosity;
}
.home_longevity .row {
    position: relative;
    z-index: 2;
}
.home_long_content {
    max-width: 38rem;
    margin-left: 12%;
}
.home_long_title {
    margin: 0;
    font-size: 3rem;
    line-height: 1.35;
    font-weight: 400;
    color: #C4E1DB;
    letter-spacing: -1px;
}
.home_long_title i,
.home_long_title em {
    font-style: italic;
}
.home_long_divider {
    display: block;
    width: 7rem;
    height: 0.05rem;
    background: rgba(236, 228, 215, 0.6);
    margin: 1.2rem 0;
}
.home_long_desc {
    color: rgba(236, 228, 215, 0.88);
    max-width: 33rem;
    font-size: 1.2rem;
}


/* ============================================================
   TRANG DỊCH VỤ — CHI TIẾT (HTML do KH cung cấp: svd1/svd2/svd3)
   ============================================================ */
.service_detail .heading_title {
    color: #ece4d7;
}
/* --- svd1: hero nền tối --- */
.svd1 {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 40rem;
    display: flex;
    align-items: center;
    padding: 6rem 0 3rem;
    color: #ece4d7;
}
.svd1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(0 0 0 / 10%), transparent);
}
.svd1 .row {
    position: relative;
    z-index: 1;
    align-items: center;
    width: 100%;
}
.svd1_sub {
    font-family: "Beautique Display", serif;
    font-style: italic;
    font-size: 2.6rem;
    color: #FFFFFF;
    margin-bottom: 0.4rem;
}
.svd1 .heading_title {
    font-size: 3.6rem;
    line-height: 1.1;
    margin: 0 0 1.2rem;
    color: #FFFFFF;
}
.svd1_content .content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #FFFFFF;
}
@media (min-width: 768px) {
    .service_detail .svd1_content .content {
        font-weight: 300;
    }
}
.svd1_img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.6rem;
}

/* --- svd2: nền ảnh + glass card + chứng nhận + giải thưởng --- */
.svd2 {
    position: relative;
    padding: 4rem 0 0;
    overflow: hidden;
    color: #fff;
    min-height: 40rem;
}
.svd2_img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.svd2_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.svd2_img_mobile {
    display: none;
}
@media (max-width: 767px) {
    .svd2_img_pc {
        display: none;
    }
    .svd2_img_mobile {
        display: block;
    }
}
.svd2 .row {
    position: relative;
    z-index: 2;
}
.svd2_content {
    max-width: 36rem;
    margin-left: auto;
    background: rgba(20, 25, 22, 0.35);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    padding: 2.5rem 1.6rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(294.95deg, rgba(255, 255, 255, 0.3) 1.19%, rgba(12, 66, 66, 0.3) 90.64%);
    background-blend-mode: multiply;
    backdrop-filter: blur(75.01988220214844px);
    font-weight: 300;
}
.svd2_content strong {
    color: #fff;
}
.svd2_wrap {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
    z-index: 2;
    justify-content: center;
}
.svd2_wrap_left {
    min-width: 0;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    max-width: 42rem;
    width: 100%;
}
.svd2_certs .item_cn {
    display: flex;
    justify-content: center;
}
.svd2_certs .item_cn img {
    height: 18rem;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.svd2_wrap_right h3 {
    font-family: "Beautique Display", serif;
    font-size: 1.7rem;
    color: #fff;
    margin: 0 0 0.6rem;
}
.svd2_wrap_right .content {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

/* --- svd3 + đặt lịch: gộp chung 1 section nền sáng --- */
.svd3_group {
    background: #eef0ec;
}
.svd3_group .svd3 {
    background: none;
}
.svd3_group .about_booking {
    background-image: none !important;
    margin-top: 0;
}
.svd3 {
    padding: 7rem 0 3rem;
}
.svd3 .col.large-12 {
    display: flex;
    gap: 3rem;
}
.svd3_wrap {
    flex: 0 0 42%;
    max-width: 42%;
}
.svd3_img {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 16.88px 16.88px 33.76px 0px #00000029;
    position: relative;
}
.svd3_img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.8rem;
}
.svd3_wrap_right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.svd3_wrap_right h2 {
    font-family: "Beautique Display", serif;
    font-size: 2.5rem;
    color: #fff;
    margin: 0 0 1.2rem;
    font-weight: 500;
}
.svd3_wrap_right .content ul {
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
}
.svd3_wrap_right .content li {
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 0.5rem;
}
.slider_hieu_qua .item_hq {
    display: flex;
    justify-content: center;
    box-shadow: 16.88px 16.88px 33.76px 0px #00000029;
    border-radius: .8rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.slider_hieu_qua .item_hq:hover img {
    transform: scale(1.08);
}
.slider_hieu_qua .item_hq:before,
.svd3_img:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E6E6E6 23.08%, #F2F2F2 43.27%, #FFFFFF 65.38%, #C4C0C0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: .8rem;
}
.svd3_img:before {
    border-radius: 1rem;
}
.slider_hieu_qua .item_hq img {
    width: 100%;
    max-width: 14rem;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    max-height: 15rem;
    transition: transform .4s ease;
}

/* Slider ảnh chi tiết dịch vụ (dùng chung: chứng nhận center-mode + hiệu quả) */
.svc_slider {
    position: relative;
    padding: 0 3.5rem;
}
.svc_slider .slider_nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.svc_slider_prev { left: 0; }
.svc_slider_next { right: 0; }
.svc_slider_swiper {
    overflow: visible !important;
    padding: 0;
}
.svc_slider_swiper .swiper-wrapper {
    align-items: center;
}
.svc_slider_swiper .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
    transition: opacity 0.3s ease;
}
.svc_slider_swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}
/* center-mode: item giữa nổi bật (2 bên mờ + thu nhỏ) */
.svc_slider--center .swiper-slide > div {
    transition: opacity 0.4s ease, scale 0.4s ease;
    opacity: 1;
    scale: 0.82;
}
.svc_slider--center .swiper-slide-active > div {
    opacity: 1;
    scale: 1;
}

/* Hàng ảnh chi tiết dịch vụ (chứng nhận + hiệu quả) — tĩnh, tối đa 3 item, item giữa zoom */
.svc_list {
    display: grid;
    grid-template-columns: repeat(var(--svc-cols, 3), minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0 2rem;
}
.svc_list_item {
    display: flex;
    justify-content: center;
    min-width: 0;
}
.svc_list--center .svc_list_item > div {
    transition: scale 0.4s ease;
    scale: 0.82;
}
.svc_list--center .svc_list_item.is-middle > div {
    scale: 1.1;
}



/* ============================================================
   TRANG DỊCH VỤ — LANDING (card danh mục so le)
   ============================================================ */
.service_cats {
    background-size: cover;
    background-position: top center;
    padding: 5rem 0 3.5rem;
}
.service_cats_head {
    margin-bottom: 2.5rem;
}
.service_cats_title {
    font-family: "Beautique Display", serif;
    font-size: 4rem;
    color: #fff;
    margin: 0 0 1.2rem;
    font-weight: 500;
}
.service_cats_btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1.6rem;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--vita-green);
    background: linear-gradient(132.8deg, rgba(14, 66, 64, 0.15) 28.6%, rgba(11, 63, 61, 0.5) 100%);
    background-blend-mode: multiply;
    color: #fff;
    position: relative;
}
.svc_card {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 2.3rem 4rem;
    margin-bottom: 2.5rem;
    color: inherit;
    position: relative;
    border-radius: 2rem;
    backdrop-filter: blur(86.45px);
    -webkit-backdrop-filter: blur(86.45px);
    background: linear-gradient(294.95deg, rgba(249, 242, 230, 0.3) -13.3%, rgba(100, 72, 50, 0.3) 90.64%);
    background-blend-mode: multiply;
    box-shadow: 20px 20px 40px 0px #B8978099;
    max-width: 62rem;
    margin: auto;
}
a.svc_card+a.svc_card {
    margin-top: 2.4rem;
}
.svc_card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 2rem;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    background-blend-mode: multiply;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.svc_card--reverse {
    flex-direction: row-reverse;
}
.svc_card_img {
    border-radius: 1.7rem;
    overflow: hidden;
    background: var(--tab-bg);
    width: 26rem;
    height: 15.5rem;
}
.svc_card_img span,
.svc_card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.svc_card:hover .svc_card_img img {
    transform: scale(1.07);
}
.svc_card_body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
}
.svc_card_num {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--vita-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 2rem;
    background: linear-gradient(134.25deg, rgba(14, 66, 64, 0.15) 22.24%, rgba(12, 66, 66, 0.6) 76.76%);
    background-blend-mode: multiply;
    position: relative;
}
.svc_card_title {
    font-family: "Beautique Display", serif;
    font-size: 2.25rem;
    color: var(--vita-green);
    margin: 0 0 1.2rem;
    line-height: 1.2;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
    text-transform: uppercase;
    font-weight: 500;
}
.svc_card_sub {
    display: block;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 1.2rem;
    color: #0C4242;
    font-weight: 400;
    margin-top: 0.2rem;
    text-transform: math-auto;
}
.svc_card_desc {
    margin: 0;
    line-height: 1.6;
    color: #0C4242;
    font-weight: 300;
}

/* ============================================================
   TRANG DỊCH VỤ — DANH MỤC
   ============================================================ */
.svcat_banner {
    position: relative;
    min-height: 48rem;
    display: flex;
    align-items: center;
    background-image: var(--svcat-banner-bg);
    background-size: cover;
    background-position: center;
    background-color: #cbb8a4;
    padding: 6rem 0 3rem;
    overflow: hidden;
}
.svcat_banner_card {
    position: relative;
    z-index: 2;
    max-width: 35rem;
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: 2rem 200px 2rem 2rem;
    color: #fff;
    background: linear-gradient(294.95deg, rgba(249, 242, 230, 0.3) -13.3%, rgba(100, 72, 50, 0.3) 90.64%);
    background-blend-mode: multiply;
}
.svcat_banner_card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 2rem 200px 2rem 2rem;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
}
.svcat_banner_card .mota {
    border-radius: .6rem;
    padding: 1rem;
    position: relative;
    font-size: .76rem;
    margin-bottom: .5rem;
}
.svcat_banner_card .mota::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: .6rem;
}
.svcat_banner_card .mota p:last-child {
    margin: 0;
}
.svcat_banner_title {
    font-weight: 400;
    font-size: 4rem;
    line-height: 1;
    color: #fff;
    margin: 0 0 1rem;
    position: relative;
}
.svcat_banner_sub {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.5;
    display: block;
    position: unset;
    max-width: unset;
    margin: 0;
}
.svcat_banner_desc {
    margin: 0;
    font-size: .7rem;
    line-height: 1.7;
    color: #FFFFFF;
}

/* --- Slider danh mục con (center-mode, nền tối) --- */
/* ===== Gộp 3 section trên nền silk ===== */
.svcat_group {
    background-image: url("https://vitaclinic.thuythu.vn/site-data/wp-content/uploads/2026/08/8472ef098725e7ff3655410c5285a3de-1-2-1-scaled.png");
    background-size: cover;
    background-position: top center;
}
.svcat_group .svcat_subs,
.svcat_group .svcat_list {
    background: none;
}
.svcat_group button.slider_nav_btn {
    background: rgb(255 255 255 / 40%);
}
.svcat_group button.slider_nav_btn:hover {
    background: #9ABDB666 !important;
    color: var(--vita-green) !important;
}
.svcat_group .about_booking {
    background-image: none !important;
    margin-top: 0;
}
/* svcat_list trên nền silk sáng: chữ tiêu đề + phân trang chuyển tối */
.svcat_group .svcat_list {
    color: var(--vita-green);
}
.svcat_group .svcat_list_title {
    color: var(--vita-green);
}
.svcat_group .svcat_list_sub {
    color: #7F7F7F;
    font-size: 1.2rem;
}
.svcat_group .svcat_list .doctor_page_btn {
    color: var(--vita-green);
}
.svcat_group .svcat_list .doctor_page_btn.active {
    background: var(--vita-green);
    background: #9ABDB666 !important;
}

/* ===== Slider danh mục con — style giống offer_cat_slider (vòng tròn to, center zoom, loop, mũi tên 2 đầu) ===== */
.svcat_subs {
    padding: 3rem 0 2rem;
}
.svcat_subs_wrap {
    position: relative;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0 8rem;
}
.svcat_subs_swiper {
    padding-bottom: 2rem !important;
}
.svcat_subs_swiper .swiper-pagination {
    bottom: 0;
}
.svcat_subs_swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    width: .75rem;
    height: .75rem;
    transition: .5s all;
}
.svcat_subs_swiper .swiper-pagination-bullet-active {
    background: #0C4242;
}
.svcat_subs_swiper .swiper-wrapper {
    align-items: center;
}
.svcat_subs_swiper .swiper-slide {
    display: flex;
    justify-content: center;
}
.sub_thumb {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    scale: 0.8;
    opacity: 1;
    transition: scale 0.4s ease, opacity 0.4s ease;
}
.svcat_subs_swiper .swiper-slide-active .sub_thumb {
    scale: 1;
    opacity: 1;
}
.sub_thumb_img {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    overflow: hidden;
    background: #B8978099;
    box-shadow: 25.88px 25.88px 51.76px 0px #00000029;
    display: block;
    border-image-source: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
}
.sub_thumb_img span,
.sub_thumb_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sub_thumb_name {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-transform: none;
}
.svcat_subs_swiper .swiper-slide-active .sub_thumb_name {
    font-weight: 500;
}
.svcat_arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
}
.svcat_prev { left: 0; }
.svcat_next { right: 0; }

/* --- Danh sách dịch vụ --- */
.svcat_list {
    padding: 2.5rem 0 3.5rem;
    background: #0f0f10;
    color: #fff;
}
.svcat_list_title {
    color: #fff;
    margin: 0 0 0.5rem;
}
.svcat_list_sub {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 2rem;
}
.svcat_services {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    transition: opacity 0.2s ease;
}
.svcat_services.is-loading {
    opacity: 0.5;
    pointer-events: none;
}
.svc_item {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    border-radius: 2rem;
    overflow: hidden;
    padding: 2rem 5rem;
    background: linear-gradient(294.95deg, rgba(249, 242, 230, 0.3) -13.3%, rgba(100, 72, 50, 0.3) 90.64%);
    background-blend-mode: multiply;
    box-shadow: 20px 20px 40px 0px #00000029;
    backdrop-filter: blur(20px);
    cursor: pointer;
    position: relative;
}
.svc_item:before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(136.71deg, rgba(255, 255, 255, 0.15) 8.4%, rgba(255, 255, 255, 0.85) 37.09%, rgba(255, 255, 255, 0.15) 68.28%, rgba(255, 255, 255, 0.85) 94.89%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 2rem;
}
.svc_item_img {
    flex: 0 0 22rem;
    max-width: 22rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.7rem;
    overflow: hidden;
    background: #000;
}
.svc_item_img span {
    width: 100%;
    height: 100%;
    display: block;
    background: url('/assets/images/svnen.png') center/cover no-repeat;
}
.svc_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.svc_item_body {
    flex: 1;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.svc_item_label {
    font-family: "Beautique Display", serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #0C4242;
    margin-bottom: 0.1rem;
    font-weight: 500;
}
.svc_item_name {
    font-family: "Beautique Display", serif;
    margin: 0 0 0.6rem;
    font-size: 2.5rem;
    color: #0C4242;
    font-weight: 500;
}
.svc_item_desc {
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #687276;
    font-style: italic;
    font-weight: 300;
}
.svc_item_actions {
    display: flex;
    gap: 6rem;
    flex-wrap: wrap;
}
.svc_item_actions a:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    border-radius: .6rem;
    border-radius: 100px;
}
.svc_item_actions a.footer_btn.style_2 {
    background: #0C4242 !important;
}
.svc_item_actions a.footer_btn:not(.style_2) {
    background: linear-gradient(138.98deg, rgba(14, 66, 64, 0.15) -2.25%, rgba(12, 66, 66, 0.6) 76.91%);
    background-blend-mode: multiply;
}
.svc_item .button_link.outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.svc_item .button_link.outline:hover {
    background: #fff;
    color: var(--vita-green);
}
/* Phân trang trên nền tối */
.svcat_list .doctor_page_btn {
    color: #fff;
}
.svcat_list .doctor_page_btn.active {
    background: var(--tab-active);
}
.svcat_list .doctor_page_btn:disabled {
    opacity: 0.35;
}
.svc_empty {
    text-align: center;
    color: var(--muted);
    padding: 2rem 0;
}
.service_detail section.svd1 {
    padding: 0;
}

.service_detail section.svd1 .svd1_img {
    max-width: unset;
    width: calc(100% + 9rem);
}
section.svd1.style2 .svd1_img {
    display: none;
}
section.svd1.style2 .row {
    display: none;
}
.svd3_wrap_right .content {
    color: #fff;
    margin-bottom: 2rem;
    max-height: 9rem;
    overflow: auto;
    padding-right: .5rem;
    font-size: 1rem;
}
.svd3_wrap_right .content::-webkit-scrollbar-track {
    background-color: #f5f5f529;
}
.svd3_wrap_right .content::-webkit-scrollbar {
    width: 0.317rem;
    background-color: #ffffff1a;
}
.svd3_wrap_right .content::-webkit-scrollbar-thumb {
    background-color: #54655e;
}
.svcat_group .sub_thumb_name {
    font-size: 1rem;
    line-height: 1.4;
}

.svcat_group button.sub_thumb {
    padding: 0;
}

.svcat_group button.slider_nav_btn {
    left: 5rem;
}

.svcat_group  button.svcat_next {
    left: unset;
    right: 5rem;
}
.service_cats .row {
    max-width: 65rem;
}

.service_cats section.about_booking {
    background: none !important;
}

/* ============================================================
   TRANG CHỦ — SECTION 5: TRẢI NGHIỆM TRỌN VẸN
   ============================================================ */
.home_s5 {
    padding: 4rem 0 2rem;
    background: #fff;
}
.home_s5_heading {
    margin: 0 0 2.5rem;
}
.s5_block_title {
    font-family: 'Beautique Display', serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--vita-green);
    margin: 0;
}
.s5_more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0C4242;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #0C4242;
    position: relative;
    overflow: hidden;
}
.s5_more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.s5_more:hover::before {
    animation: s5_more_shimmer 0.55s ease forwards;
}
@keyframes s5_more_shimmer {
    0%   { left: -75%; }
    100% { left: 125%; }
}

/* --- A: Dịch vụ ưu đãi --- */
.s5_svc {
    background: #E7DBCE;
    border-radius: 1.5rem;
    padding: 2.6rem 0 3rem;
    margin-bottom: 2.5rem;
    max-width: 93rem;
    margin: auto;
    background: linear-gradient(180deg, rgba(192, 186, 174, 0.3) 0%, rgba(100, 72, 50, 0.3) 100%);
    background-blend-mode: multiply;
    position: sticky;
    top: 4rem;
}
.s5_svc .s5_block_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    margin-bottom: 2rem;
}
.s5_svc_slider {
    position: relative;
    padding: 0 3.5rem;
    margin: 0 -5rem;
}
.s5_svc_slider .slider_nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    left: -2rem;
}
.s5_svc_prev { left: 0.4rem; }
.s5_svc_next { right: 0.4rem; }
.s5_svc_swiper {
    overflow: visible !important;
    padding: 0.5rem 0 2rem;
}
.s5_svc_swiper .swiper-slide {
    height: auto;
    transition: opacity 0.3s ease;
}
.s5_svc_swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}
.s5_svc_card {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background: #0C424299;
    height: 100%;
    padding: 1rem;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.s5_svc_img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.2rem;
}
.s5_svc_img span,
.s5_svc_img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.s5_svc_body {
    padding: 0;
}
.s5_svc_name {
    margin: 0 0 0.3rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}
.s5_svc_sub {
    display: block;
    font-size: 0.72rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
/* Icon check tròn dùng chung S5 */
.s5_check {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--tab-active);
    margin-top: 0;
}
.s5_svc_price {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.s5_svc_now {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
}
.s5_svc_old {
    text-decoration: line-through;
    color: #fff;
    font-size: 0.85rem;
    opacity: .5;
}

/* --- B: LumiPass --- */
.s5_lumi {
    border-radius: 1.5rem;
    padding: 2.6rem 2.2rem 3rem;
    margin-bottom: 2.5rem;
    max-width: 93rem;
    margin: 2.4rem auto 0;
    background: linear-gradient(360deg, #DAC4B4 0%, #F8F5F3 100%);
    position: sticky;
    top: 4rem;
}
.s5_lumi_tabs {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    border-radius: 100px;
    padding: 0.3rem;
    width: fit-content;
    margin: 1.4rem auto 2.2rem;
}
.s5_lumi_tabs_mobile {
    display: none;
    max-width: 24rem;
    margin: 1.4rem auto 2.2rem;
}
.s5_lumi_tab {
    border: none;
    background: none;
    padding: 0.55rem 1.5rem;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #644A37;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    background: #E9D9CD;
    padding: 0;
    height: 2rem;
    min-width: 12rem;
    border-radius: .6rem;
}
.s5_lumi_tab.active,
.s5_lumi_tab:hover {
    background: #B89780;
    color: #fff;
}
.s5_lumi_swiper {
    margin: 0 auto;
}
.s5_lumi_swiper .swiper-slide {
    height: auto;
}
.s5_plan {
    display: flex;
    gap: 1.5rem;
    height: 100%;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1.8rem;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.05);
}
.s5_plan.is-highlight .s5_plan_name {background: linear-gradient(90deg, #BE9D86 0%, #EAE3DE 25%, #BE9D86 49.04%, #EAE3DE 68.75%, #BE9D86 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.s5_plan_head {
    flex: 0 0 40%;
    border-right: 1px solid #eee;
    padding-right: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: flex-start;
}
.s5_plan_name {
    font-family: 'Beautique Display', serif;
    font-size: 1.7rem;
    letter-spacing: 0.12em;
    color: var(--vita-green);
    opacity: 0.55;
    margin: 0 0 0.2rem;
    background: linear-gradient(90deg, #B4B4B6 0%, #7C7C7C 24.56%, #B4B4B6 46.34%, #E0E0E0 68.09%, #B4B4B6 98.22%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    width: auto;
}
.s5_plan_sub {
    font-size: 0.6rem;
    color: #687276;
    margin: 0 0 5rem;
    line-height: 1.4;
    font-style: italic;
}
.s5_plan_old {
    font-size: 1rem;
    color: #0C4242;
    text-decoration: line-through;
    margin-bottom: 0.1rem;
    font-weight: 300;
    opacity: .5;
}
.s5_plan_price {
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--vita-green);
    margin-bottom: 1rem;
    line-height: 1.2;
}
.s5_plan_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.55rem 1.2rem;
    border-radius: 0.4rem;
    background: #8B9E86;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: all 0.3s ease;
    background: linear-gradient(138.98deg, rgba(14, 66, 64, 0.15) -2.25%, rgba(12, 66, 66, 0.6) 76.91%);
    background-blend-mode: multiply;
    border-radius: 100px;
}
.s5_plan_feats {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.s5_plan_feats li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: .9rem;
    color: #555;
    line-height: 1.45;
    margin: 0;
}
.s5_lumi_more {
    margin-top: 2.2rem;
}

/* --- C: Gói thành viên --- */
.s5_mem {
    background: #D9E4DE;
    border-radius: 1.5rem;
    padding: 2.6rem 0 3rem;
    max-width: 93rem;
    margin: 2.4rem auto 0;
    background: linear-gradient(360deg, #ADC7C7 0%, #E2EAEA 100%);
}
.s5_mem .s5_block_title {
    margin-bottom: 2rem;
}
.s5_mem_slider {
    position: relative;
    padding: 0 3.5rem;
    margin: 0 -5rem;
}
.s5_mem_slider .slider_nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    left: -2rem;
}
.s5_mem_prev { left: 0.4rem; }
.s5_mem_next { right: 0.4rem; }
.s5_mem_swiper {
    overflow: visible !important;
    padding: 0.5rem 0 2rem;
}
.s5_mem_swiper .swiper-slide {
    height: auto;
    transition: opacity 0.3s ease;
}
.s5_mem_swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}
.s5_mem_card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    padding: 1.9rem 1.7rem;
    box-shadow: 20px 20px 40px 0px #00000029;
}
.s5_mem_top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    position: relative;
}
.s5_mem_name {
    font-family: 'Beautique Display', serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    color: var(--vita-green);
    margin: 0 0 0.2rem;
    background: linear-gradient(90deg, #B4B4B6 0%, #7C7C7C 24.56%, #B4B4B6 46.34%, #E0E0E0 68.09%, #B4B4B6 98.22%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
.s5_mem_sub {
    font-size: .9rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.45;
}
.s5_mem_badge {
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0 0 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    top: -1.9rem;
    right: 1rem;
}
.s5_mem_card--silver .s5_mem_badge { background: #9AA0A6; }
.s5_mem_card--gold .s5_mem_badge { background: #C7A15A; }
.s5_mem_card--diamond .s5_mem_badge { background: #2C3E46; }
.s5_mem_label {
    font-size: .9rem;
    font-weight: 700;
    color: #687276;
}
.s5_mem_feats {
    list-style: none;
    margin: 0.6rem 0 1.3rem;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.s5_mem_feats li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: .9rem;
    color: #555;
    line-height: 1.45;
}
.s5_mem_pricewrap {
    margin-top: auto;
}
.s5_mem_pricelabel {
    display: block;
    font-size: .9rem;
    color: #687276;
    margin-bottom: 0.15rem;
}
.s5_mem_price {
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--vita-green);
}
.s5_mem_more {
    margin-top: 2.2rem;
}
h3.s5_block_title {
    text-align: center;
    color: #644A37;
    font-weight: 500;
}

.s5_svc_slider .slider_nav_btn.s5_svc_next {
    left: unset;
    right: -2rem;
}
.s5_lumi .row {
    max-width: 94%;
}

.s5_plan_btn span.ic {
    display: none;
}
.s5_mem_badge svg {
    width: 52%;
    height: auto;
}
.s5_check {
    color: #0c4242;
}

.s5_mem_slider .slider_nav_btn.s5_mem_next {
    left: unset;
    right: -2rem;
}

.s5_mem_card.s5_mem_card--gold .s5_mem_name {
    background: linear-gradient(90deg, #998C58 0%, #D2CDBA 25%, #998C58 49.04%, #D2CDBA 68.75%, #998C58 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.s5_mem_card.s5_mem_card--diamond {}

.s5_mem_card.s5_mem_card--diamond h4.s5_mem_name {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.s5_mem_top:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
88deg, rgba(223, 223, 223, 0) 0%, #DFDFDF 48.08%, rgba(223, 223, 223, 0) 100%);
}

.s5_mem_feats li svg.s5_check {
    margin-top: .2rem;
}
.site_header {
    position: fixed;
    top: 0;
    max-width: 80rem;
    margin: auto;
    background: #9696961A;
    border-radius: .6rem;
    top: 1rem;
    transition: .5s all;
}
/* blur nền header đặt ở pseudo (không đặt trên .site_header) — nếu đặt trên header thì
   backdrop-filter của .submenu bên trong không blur được nền trang phía sau */
.site_header:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(100px);
    pointer-events: none;
}
.header_icon svg {
    width: 1rem;
    height: auto;
}

.row.items-center.site_header_inner:after {
    display: none;
}
.wrap_content_post {
    box-shadow: 20px 20px 40px 0px #00000029;
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 1rem;
    margin-left: 2rem;
    font-weight: 300;
    line-height: 1.7;
}

body.goto-here.type-post {
    background: #E9D9CD;
}
.type-post main#main {
    background: #E9D9CD;
}

.wrap_content_post img {
    box-shadow: 20px 20px 40px 0px #00000029;
}

.wrap_content_post h1 { font-size: 2.2rem; font-weight: 600; line-height: 1.25; margin: 1.5rem 0 0.8rem; }
.wrap_content_post h2 { font-size: 1.8rem; font-weight: 500; line-height: 1.3;  margin: 1.4rem 0 0.7rem; }
.wrap_content_post h3 { font-size: 1.4rem; font-weight: 500; line-height: 1.35; margin: 1.2rem 0 0.6rem; }
.wrap_content_post h4 { font-size: 1.1rem; font-weight: 500; line-height: 1.4;  margin: 1rem 0 0.5rem; }
.wrap_content_post h5 { font-size: 0.9rem; font-weight: 500; line-height: 1.4;  margin: 0.8rem 0 0.4rem; }
.wrap_content_post a:not(.related_blog_card) {
    text-decoration: underline;
}

.wp-caption .wp-caption-text {
    background: transparent;
    padding: 0;
   font-size: 1rem;
    font-style: unset;
}

span.related_blog_overlay {
    display: none;
}
.s5_mem {
    z-index: 9;
    position: sticky;
    top: 4rem;
}
header#header.site_header--sticky {
    top: 0;
    max-width: 100%;
    background: #4F3E3166;
    border-radius: 0;
}
header#header.site_header--sticky:before {
    opacity: 0;
}
.about_banner_swiper .swiper-button-next, .about_banner_swiper .swiper-button-prev {
   
    background: transparent;
}

.about_banner_swiper .swiper-button-next:before, .about_banner_swiper .swiper-button-prev::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 50%;

    background: linear-gradient(
        180deg,
        rgba(198, 198, 198, 0.5) 0%,
        rgba(155, 155, 155, 0.5) 28.85%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        rgba(148, 148, 148, 0.5) 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}
.ms_count_5 .ms_box:nth-child(5) .ms_overlay {
    justify-content: center;
    align-items: flex-start;
}

.ms_count_5 .ms_box:nth-child(5) a.footer_btn,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn {
    margin-top: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .7rem;
    text-transform: uppercase;
    background: none !important;
    background: #ffffff30;
    backdrop-filter: blur(7px);
    height: 2.4rem;
    background: #9ABDB666 !important;
    font-size: .6rem;
}

.ms_count_5 .ms_box:nth-child(5) a.footer_btn span.ic,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn span.ic {
    display: flex;
    align-items: center;
}
.ms_count_5 .ms_box:nth-child(5) a.footer_btn path,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn path {
    transition: .5s all;
}
.ms_count_5 .ms_box:nth-child(5) a.footer_btn:hover,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn:hover {
    background: var(--vita-green) !important;
}
.ms_count_5 .ms_box:nth-child(5) a.footer_btn:hover path,
.home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn:hover path {
    fill: #fff;
}
a.header_icon.header_account {
    flex: 0 0 auto;
    display: none; /* tạm ẩn */
}
span.search_popup_ic {
    display: none;
}

input.search_popup_input {
    height: 2.8rem;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    padding: 0;
    font-size: 2rem;
    font-family: 'Beautique Display', 'Helvetica Neue', Arial, sans-serif !important;
    color: #fff !important;
    box-shadow: none !important;
    margin-bottom: .5rem;
}

button.search_popup_submit {
    margin: 0;
    padding: 0;
    border-radius: .6rem;
    padding: 0 1rem;
    border-radius: 100px;
    height: 2.8rem;
}

.search_popup_close {
    margin: 0;
    top: 0;
    right: 0;
    padding: 0;
    line-height: normal;
    max-height: unset;
    min-height: unset;
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
input.search_page_input {
    border-radius: 100px;
    margin: 0;
}
.button_link.outline:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.button_link {
    position: relative;
}
.service_cats_btn:before,.svc_card_num:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(
143deg, #dce3e2, transparent);
    background-blend-mode: multiply;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.template-offer  header#header,
.type-offer header#header {
    background: #4f3e3175;
}
a.button_link.outline.home_awards_btn:before {
    display: none;
}
.home_intro_desc a {
    text-decoration: underline;
}
span.heading_highlight {
    color: #644a37;
}
.s5_svc_img img {
    scale: 1;
    transition: .5s all;
}

.s5_svc_card:hover .s5_svc_img img {
    scale: 1.2;
}
.booking_popup_close {
    padding: 0;
    min-height: unset;
}
.about_badge_icon img {
    transform: rotateY(0deg);
    transition: 1s all;
}

.about_badge:hover .about_badge_icon img {
    transform: rotateY(360deg);
}
/* ============ BANNER BREADCRUMB ============ */
.about_banner { position: relative; }
.banner_breadcrumb {
    position: absolute;
    top: 6.5rem;
    left: 0;
    right: 0;
    z-index: 10;
}
.banner_breadcrumb_list {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.banner_breadcrumb_item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.banner_breadcrumb_link,
.banner_breadcrumb_current,
.banner_breadcrumb_sep {
    font-size: 1rem;
    line-height: 1;
    color: rgba(255,255,255,0.8);
}
.banner_breadcrumb_link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    transition: color 0.2s;
}
.banner_breadcrumb_link:hover { color: #fff; }
a.banner_breadcrumb_link svg {
    width: .8rem;
    height: auto;
}
.banner_breadcrumb_home_icon { flex-shrink: 0; }
.banner_breadcrumb_current {
    color: #fff;
    font-weight: 500;
}
.banner_breadcrumb_sep { opacity: 0.6; }

/* ============ PAGE BREADCRUMB (nền trắng/sáng — chữ tối) ============ */
.page_breadcrumb { margin: 1.5rem 0 1rem; }
.page_breadcrumb_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.page_breadcrumb_item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.page_breadcrumb_link,
.page_breadcrumb_current,
.page_breadcrumb_sep {
    font-size: 1rem;
    line-height: 1;
    color: #0C4242;
}
.page_breadcrumb_link svg {
    width: .9rem;
    height: auto;
}
.template-service .page_breadcrumb_link,
.template-service .page_breadcrumb_current,
.template-service .page_breadcrumb_sep {
    color: #fff;
}
.template-service .page_breadcrumb_link svg path,
.template-service .page_breadcrumb_current svg path {
    fill: #fff;
}
.page_breadcrumb_link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.page_breadcrumb_link:hover { opacity: 1; }
.page_breadcrumb_current {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.page_breadcrumb_sep { opacity: 0.4; }

/* Breadcrumb trang bác sĩ */
.type-doctor .page_breadcrumb_link {
    color: #B89780;
    opacity: 1;
}
.type-doctor .page_breadcrumb_link svg path {
    fill: #B89780;
}
.type-doctor .page_breadcrumb_sep {
    color: #B89780;
    opacity: 0.6;
}
.type-doctor .page_breadcrumb_current {
    color: #0C4242;
}
.type-doctor .page_breadcrumb_current svg path {
    fill: #0C4242;
}

/* ============ STICKY CONTACT BAR ============ */
.sticky_bar {
    position: fixed;
    right: 1.2rem;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: rgba(220, 225, 220, 0.72);
    backdrop-filter: blur(6px);
    border-radius: 3rem;
    padding: 0.7rem 0.5rem;
}
.sticky_bar_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: none;
    background: #fff;
    padding: 0;
    text-decoration: none;
}
.sticky_bar_btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sticky_bar_btn:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.sticky_bar_btn--top {
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sticky_bar_btn--top.is_visible {
    opacity: 1;
    pointer-events: auto;
}
.sticky_bar_btn--top svg {
    display: block;
}
.sticky_bar_btn--top {
    opacity: 1 !important;
    margin: 0;
}
.service_cats .page_breadcrumb {
    margin-bottom: 4rem;
}
.ms_text {
    display: flex;
    flex-direction: column;
}

.ms_count_5 .ms_box:nth-child(5) .ms_text {
    flex-direction: unset;
    gap: 1rem;
    align-items: center;
}
.ms_count_5 .ms_box:nth-child(4) .ms_text {
    flex-direction: unset;
    align-items: center;
    gap: 1rem;
}
.sub_thumb_img:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, #B4B4B6 0%, #E0E0E0 24.64%, #FFFFFF 47.18%, #FFFFFF 69.32%, #F5F5F5 80.38%, #B4B4B6 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}


span.sub_thumb_img {
    position: relative;
}
.news_viewall_mobile {
    display: none !important;
}

/* ============================================================
   RESPONSIVE — @media (gom cuối file, PC trước, tablet 64rem rồi mobile 48rem)
   ============================================================ */
@media (max-width: 64rem) {
    .site_menu {
        display: none;
    }
    .header_burger {
        display: flex;
    }
    .site_menu_mobile {
        display: block;
    }
    .site_menu_overlay {
        display: block;
    }
    .site_footer_top {
        grid-template-columns: 1fr 1fr;
    }
    .footer_brand {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }
    .site_footer_main {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }
    .doctor_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .page_banner_title {
        font-size: 2rem;
    }
    .news_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about_badges {
        grid-template-columns: repeat(2, 1fr);
    }
    .cus_videos_grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .home_intro_content {
        margin: 0 auto;
    }
    .home_ms_grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "b b"
            "a c"
            "d e";
        height: auto;
    }
    .ms_box {
        aspect-ratio: 4 / 3;
    }
    .ms_box:nth-child(2) {
        aspect-ratio: 16 / 10;
    }
    .svd1 .heading_title { font-size: 2.2rem; }
    .svd2_wrap.flex {}
    .svd3 .col.large-12 {}
    .svd3_wrap { flex: 0 0 auto; max-width: 100%; }
    .svc_card,
    .svc_card--reverse {
        flex-direction: column;
    }
    .svc_card_img {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .svcat_banner .heading_title { font-size: 2.2rem; }
}

@media (max-width: 48rem) {
    .contact_page .heading_title {
        font-size: 1.8rem;
    }
    .contact_hero_left {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }
    .contact_form_card {
        padding: 1.4rem;
    }
    .branch_name {
        font-size: 1.3rem;
    }
    .contact_form .form_row--2col {
        flex-direction: column;
    }
    .offer_card {
        flex-direction: column;
    }
    .offer_card_img {
        max-width: 100%;
        flex-basis: auto;
    }
    .offer_detail_content {
        padding-left: 0;
        margin-top: 1.5rem;
    }
    .offer_summary_item {
        flex-direction: column;
        align-items: flex-start;
    }
    .booking_popup .wrap_about_booking_form {
        flex-direction: column;
    }
    .booking_popup .about_booking_form {
        padding: 2rem;
    }
    .booking_popup .about_booking_model {
        display: none;
    }
    .site_footer_top,
    .site_footer_main {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .doctor_grid {
        grid-template-columns: 1fr;
    }
    .page_banner--compose {
        min-height: 16rem;
    }
    .page_banner_person {
        display: none;
    }
    .page_banner_title {
        font-size: 1.6rem;
    }
    .doctor_detail_card {
        flex-direction: column;
    }
    .doctor_detail_avatar {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .news_grid {
        grid-template-columns: 1fr;
    }
    .news_section_head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .news_detail_sidebar {
        position: static;
        margin-bottom: 1.5rem;
    }
    .related_blog_card {
        flex-direction: column;
    }
    .related_blog_thumb {
        flex: 0 0 auto;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }
    .experts_gallery_mobile {
        height: 22rem;
        align-items: center;
        gap: 0;
    }
    .experts_gallery_mobile .expert_panel_slot {
        flex: 0 0 15%;
        max-width: 15%;
        height: 18rem;
        overflow: hidden;
        border-radius: .8rem;
        position: relative;
    }
    .experts_gallery_mobile .expert_panel_slot--active {
        flex: 0 0 70%;
        max-width: 70%;
        height: 22rem;
    }
    .experts_gallery_mobile .expert_panel {
        width: 100%;
        height: 100%;
        animation: expert_panel_fade .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    @keyframes expert_panel_fade {
        from { opacity: .4; }
        to { opacity: 1; }
    }
    .experts_gallery_mobile .expert_panel_img img {
        animation: expert_panel_img_fade .65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    @keyframes expert_panel_img_fade {
        from { opacity: .55; }
        to { opacity: 1; }
    }
    .expert_panel_name,
    .expert_panel_pos {
        font-size: 1rem;
        white-space: unset;
    }
    .expert_panel_pos {
       font-size: 1rem;
    }
    span.expert_panel_pos {
        line-height: 1.4;
        display: block;
    }
    .lead_card_btn {
        flex: 0 0 auto;
        height: 1.8rem;
        font-size: .5rem;
        padding: 0 .8rem;
    }
    .lead_card_btn svg {
        width: .8em;
    }
    .expert_panel_content {
        flex: unset;
        padding: .7rem;
        bottom: .8rem;
        right: .8rem;
        left: .8rem;
    }
    .experts_gallery {
        box-shadow: none;
    }
    .expert_panel_slot.expert_panel_slot--prev {
        border-radius: .8rem 0 0 .8rem;
    }
    .expert_panel_slot.expert_panel_slot--next {
        border-radius: 0 .8rem .8rem 0;
    }
    .home_page .about_experts h2.heading_title {
        margin-bottom: 0;
    }
    .home_awards {
        padding-bottom: 2rem;
    }
    .about_badges {
        grid-template-columns: 1fr;
        margin-top: 0;
        border-radius: 0;
    }
    .about_vision_cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .about_banner_slide.page_banner--compose {
        min-height: 17rem;
    }
    .about_booking_model {
        margin-bottom: 1.5rem;
    }
    .cus_testi_media {
        margin-top: 1.5rem;
    }
    .cus_ba_slider_wrap {
        padding: 0;
    }
    .cus_ba_arrow {
        display: none;
    }
    .home_intro {
        min-height: 0;
        background-position: right center;
    }
    .home_intro_title {
        font-size: 2rem;
    }
    .home_ms_grid {
        grid-template-columns: 1fr;
        grid-template-areas: "b" "a" "c" "d" "e";
    }
    .lead_slider_wrap {
        padding: 0;
    }
    .lead_arrow {
        display: none;
    }
    .lead_card_title {
        font-size: 1.4rem;
    }
    .home_awards_bottom {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .awards_slider_wrap {
        padding: 0;
    }
    .awards_arrow {
        display: none;
    }
    .home_long_content {
        margin-left: 0;
    }
    .home_long_title {
        font-size: 1.7rem;
    }
    .svc_item { flex-direction: column; }
    .svc_item_img { flex: 0 0 auto; max-width: 100%; }
    .svcat_subs_wrap { padding: 0; }
    .svcat_arrow { display: none; }
}


@media (max-width: 1199px) {
    html { font-size: 1.3vw; }

    /* Header dạng mobile: ẩn menu ngang, hiện burger, logo căn giữa, controls chia 2 bên */
    .site_menu {
        display: none;
    }
    .header_burger {
        display: flex;
    }
    .site_menu_mobile,
    .site_menu_overlay {
        display: block;
    }
    .site_header_inner {
        position: relative;
        justify-content: space-between;
    }
    .site_logo {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        pointer-events: none;
    }
    .site_logo a {
        display: inline-block;
        pointer-events: auto;
    }

    .svc_card_body {
    width: 100%;
}
.site_header {
    top: 0;
    border-radius: 0;
    background: #96969666;
    background: #4F3E3166;
}
button.header_lang {
    display: none;
}

.header_btn {
    font-size: 0;
    background: transparent;
    padding: 0;
}

.header_btn span {
    display: none;
}

.site_header_right {
    justify-content: flex-end;
}

.header_burger {
    margin: 0;
}

.site_header {
    height: 4rem;
    display: flex;
    align-items: center;
}
}
@media (max-width: 991px) {
    html { font-size: 1.7vw; }

    /* Section đặt lịch: form đầy hàng, ẩn model (dùng chung nhiều trang) */
    .wrap_about_booking_form {
        flex-direction: column;
        max-width: 100%;
    }
    .about_booking_form {
        flex: none;
        width: 100%;
        padding: 2.4rem 2rem;
    }
    .about_booking_model {
        display: none;
    }
    .about_booking .row.items-center > .col {
        width: 100%;
        max-width: 100%;
    }
    .row {
    max-width: 56rem;
}

.home_ms_title {
    font-size: 2rem;
}

.home_intro {min-height: 28rem;padding-top: 7rem;}

.home_intro_content {
    margin: 0 0 0 auto;
}

.contact_form input, .contact_form select {
    min-height: 2.7rem;
}
.svd3_wrap_right .content {
    margin-bottom: 0rem;
}
.service_detail section.svd1 {
    min-height: 30rem;
}
.page_banner_person img {
    width: 41rem;
}

.template-customer section.page_banner {
    min-height: 37rem;
    height: auto;
}
}
@media (max-width: 767px) {
    html {font-size: 3.4vw;}

    .about_booking_form {
        padding: 2rem 1.4rem;
    }

    /* Stack mọi cột flatsome 2-col (medium-N) trên mobile */
    .col.medium-4,
    .col.medium-5,
    .col.medium-6,
    .col.medium-7,
    .col.medium-8 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    .contact_hero_left {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }
    .branch_body_inner .col.large-7 {
        padding-right: 0;
    }

    /* Tin tức + Liên hệ + LumiPass: tabs → select */
    .news_cat_tabs,
    .contact_tabs_nav,
    .s5_lumi_tabs {
        display: none;
    }
    .news_cat_tabs_mobile,
    .contact_tabs_mobile,
    .s5_lumi_tabs_mobile {
        display: block;
    }

    /* Banner: ẩn arrow, hiện dots */
    .about_banner_swiper .swiper-button-prev,
    .about_banner_swiper .swiper-button-next {
        display: none;
    }
    .about_banner_swiper .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
    }

    /* Section 5: LumiPass gói stack dọc */
    .s5_lumi {
        padding: 2rem 1rem 2.5rem;
    }
    .s5_lumi_plans {
        grid-template-columns: 1fr;
    }
    .s5_plan {
        flex-direction: column;
        gap: 1rem;
        padding: 1.6rem 1.4rem;
    }
    .s5_plan_head {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 0 0 1rem;
    }
.home_ms {
    padding: 3rem 0 5rem;
}

.home_ms_title {
    font-size: 2rem;
}

.heading_title {
    font-size: 2rem;
}

.home_awards_bottom {
    flex-direction: column;
}

.home_awards_bottom_left {width: 100%;}

.home_awards_desc {
    font-size: 1.2rem;
}

.home_page .about_experts h2.heading_title {
    max-width: 20rem;
    margin: 0 auto 2rem;
}

section.about_media.news_section {
    padding: 3rem 0;
}

.contact_form_title {
    font-size: 2rem;
}

.about_booking {
    padding: 3rem 0;
}

.row.site_footer_top {
    padding: 3rem 10px 0;
}

.row.site_footer_main {
    padding: 0 10px;
}

.footer_address {
    font-size: 1.5rem;
}

.footer_col_title {
    font-size: 1.5rem;
}

.footer_links a {
    font-size: 1.5rem;
}

.home_longevity {
    min-height: 21rem;
}
.about_vision {
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom: 18rem;
    padding-top: 3rem;
}

.about_vision_cols {
    padding-bottom: 2rem;
}

.about_badges {
    flex-wrap: wrap;
    padding: 2rem 1rem;
    background: #644A37;
    row-gap: 1rem;
}

.about_badge {
    width: 50%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem;
}

.about_badge+.about_badge {
    border: none;
}

.about_badge_icon {
    border: 1px solid #fff;
}

.about_vision_col {
    text-align: center;
}

.about_vision_col .wp_content {
    text-align: center;
}


.page_banner_content {
    padding: 0 10px;
    text-align: center;
}

.staff_card_img {
    height: 17rem;
}

.staff_card_head {
    padding: 1rem;
}

.about_experts h2.heading_title {
    max-width: 20rem;
    margin: 0 auto 1rem;
}
.service_cats_title {
    font-size: 2rem;
}

.service_cats_btn {
    font-size: 1rem;
}

.svc_card {
    padding: 1rem;
    gap: 1.5rem;
}

.svc_card_num {
    font-size: 2rem;
}

.svc_card_title {
    font-size: 1.8rem;
}

.service_cats section.about_booking {
    margin: 0;
}
.about_vision {
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom: 2rem;
    padding-top: 3rem;
}

.about_vision_cols {
    padding-bottom: 2rem;
}

.about_badges {
    flex-wrap: wrap;
    padding: 2rem 1rem;
    background: #644A37;
    row-gap: 1rem;
}

.about_badge {
    width: 50%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem;
}

.about_badge+.about_badge {
    border: none;
}

.about_badges_swiper .swiper-pagination {
    display: none;
}

.about_badges_swiper .about_badge {
    margin: 0;
    gap: .5rem;
}

.about_badges_swiper:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 1rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #E6E6E6 23.08%, #F2F2F2 43.27%, #FFFFFF 65.38%, #C4C0C0 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.about_badge_icon {
    backdrop-filter: blur(19px);
    background: rgb(100 74 55 / 20%);
    border: none;
    width: 2.5rem;
    height: 2.5rem;
}

.about_badge_title {
    font-size: .9rem;
}

.about_badge_icon:before {
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
}

.about_badges_slider {
    position: relative;
}

.about_badges_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    background: rgb(130 101 76 / 20%);
    border-radius: 100px;
    border: none;
    backdrop-filter: blur(7px);
    left: .45rem;
}

.about_badges_arrow svg {
    max-width: 50%;
    height: auto;
}

.about_badges_arrow:before {
    content: '';
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.about_badge_desc {
    font-size: .7rem;
}

button.about_badges_arrow.about_badges_arrow_next {
    left: unset;
    right: .45rem;
}

.about_badge_icon {
    border: none;
}

.about_vision_col {
    text-align: center;
}

.about_vision_col .wp_content {
    text-align: center;
}


.page_banner_content {
    padding: 0 10px;
    text-align: center;
}

.staff_card_img {
    height: 17rem;
}

.staff_card_head {
    padding: 1rem;
}

.about_experts h2.heading_title {
    max-width: 20rem;
    margin: 0 auto 1rem;
}
.svc_card_body {
    width: 100%;
}
.svcat_banner { min-height: 36rem; aspect-ratio: 9 / 16; }
.svcat_banner_title {font-size: 2rem;}

.svcat_banner_sub {
    position: unset;
    margin: 0;
    max-width: unset;
    font-size: 1.2rem;
}

.svcat_banner_card {
    padding: 2rem;
    border-radius: 2rem 100px 2rem 2rem;
}
.svcat_banner_card::before {
    border-radius: 2rem 100px 2rem 2rem;
}

.svcat_banner_desc {
    font-size: 1rem;
}

.svc_item {
    padding: 1.8rem 1rem;
}

.svcat_group .svcat_list_sub {
    color: #fff;
}

.svc_item_name {
    font-size: 1.7rem;
}

.svc_item_label {
    font-size: 1.2rem;
}
.service_detail section.svd1 {
    padding-top: 10rem;
}

.service_detail section.svd1 .svd1_img {
    width: 100%;
    margin-top: 2rem;
}

.svd1_content {
    text-align: center;
}

.service_detail section.svd1 .svd1_img {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 100%;
}

.service_detail section.svd1 {
    height: 51rem;
    align-items: flex-end;
    padding-bottom: 2rem;
    overflow: hidden;
}

.service_detail section.svd1>.row,.service_detail section.svd1>.row>.col {
    position: unset;
}

.service_detail section.svd1 .col.large-5.medium-5 {
    position: relative;
    z-index: 12;
}

.service_detail section.svd1 .svd1_img img {
    max-width: unset;
    height: 104%;
    width: 161%;
    object-fit: cover;
    opacity: .7;
    object-position: top center;
    display: block;
    margin: auto;
    position: absolute;
    left: 47%;
    transform: translateX(-50%);
}

.service_detail section.svd1 .svd1_content {
    padding: 0 5rem;
}

.svd1_sub {
    font-size: 1.5rem;
}

.svd1 .heading_title {
    font-size: 2rem;
}

.svd2_wrap {
    flex-direction: column;
    align-items: center;
}

.svd2_wrap_right {
    width: 100%;
    text-align: center;
    padding: 2rem;
}

.svd2_wrap_right {
    order: -1;
    margin: 0;
}

.svd2_wrap:before {
    height: 100%;
}

.svd2_wrap_right .content {
    font-size: 1.5rem;
}

.svd2_content {
    max-width: 100%;
    font-size: 1.5rem;
    line-height: 1.6;
}

.svd3 .col.large-12 {
    flex-direction: column;
}

.svd3_group .svd3 {
    padding: 4rem 0 3rem;
}

.svd3_wrap_right h2 {
    font-size: 2rem;
}

.svd3_wrap_right .content li {
    font-size: 1rem;
}

.svd3_wrap_right .content {
    font-size: 1rem;
}
.doctor_detail_card {
    padding: 2rem;
}

.doctor_detail_card form.contact_form {
    padding: 0;
}

.doctor_acc_head {
    font-size: 1.5rem;
}

.doctor_page .heading_title, .doctor_detail .heading_title {
    font-size: 2rem;
}

h2.heading_title.doctor_advisor_title {
    text-align: center;
}
.article_card_cat {
    font-size: 1rem;
}

.article_card_info {
    font-size: 1rem;
}
.news_section_head {
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

/* Desktop: head + btn trên cùng hàng */
.news_section_col .news_section_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 767px) {
    a.button_link.outline.news_viewall_btn.news_viewall_pc {
        display: none;
    }
    .col.large-12.news_section_col {
        display: flex;
        flex-direction: column;
    }
    .news_viewall_mobile {
        display: inline-flex;
        align-self: center;
        margin-top: 1.2rem;
    }
    .news_share + .news_toc {
        display: none;
    }
}

.news_mid_inner {
    padding: 0 10px;
}

.news_mid_banner {
    min-height: 24rem;
}
.news_grid {
    gap: 2rem;
}
.offer_cat_slider {
    padding: 0;
}

.offer_cat_slider .slider_nav_btn.offer_cat_next {
    right: 0;
}

.offer_cat_slider .slider_nav_btn {
    left: 0;
}

.offer_card_body {
    padding: 1rem 0;
}

.offer_card_partner {
    font-size: 2rem;
}
.offer_cat_logo {
    width: 6rem;
    height: 6rem;
    box-shadow: -0.2px 7.8px 12.6px 0px #00000029;
}

.offer_cat_swiper .swiper-slide-active .offer_cat_logo {
    width: 6rem;
    height: 6rem;
}

.offer_cat_name {
    font-size: 1rem;
}

.offer_category {
    padding: 4rem 0 0;
}
.offer_cat_swiper {
    padding: 3rem 2rem;
}
.offer_detail_img img {width: 100%;}

.offer_detail_actions {
    gap: 1rem;
}
.template-customer section.page_banner {
    min-height: 6rem;
    height: auto;
    padding: 7rem 10px 2rem;
}

.page_banner_quote {
    max-width: 100%;
}

.page_banner_quote_text {
    font-size: 1.3rem;
}

.page_banner_quote_author {
    font-size: 1.2rem;
}

.cus_videos {
    padding: 4rem 0 0;
}

.cus_testi {
    padding-bottom: 4rem;
}

.cus_ba {
    padding: 4rem 0;
}
.contact_tabs {
    padding: 4rem 0 0;
}
.branch_body .row {
    margin: 0 !important;
}

.branch_body .row>* {
    padding: 0;
}

.branch_info {
    margin-bottom: 1rem;
}
.s5_plan_sub {}

.home_s5 h2.heading_title {
    font-size: 1.7rem;
}

h3.s5_block_title {
    font-size: 1.6rem;
}

.s5_svc_sub {
    font-size: 1rem;
}

.s5_svc_name {
    font-size: 1.5rem;
}
.s5_svc_slider {
    margin: 0;
}

.s5_svc_slider .slider_nav_btn.s5_svc_next {
    right: 0rem;
}

.s5_svc_slider .slider_nav_btn {
    left: 0;
}
.s5_svc {
    border-radius: 0;
}

.s5_lumi {
    margin: 0;
}

p.s5_plan_sub {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.s5_plan_name {
    font-size: 1.8rem;
}

.s5_plan_feats li {
   font-size: 1rem;
}

.s5_mem_slider {
    margin: 0;
}

.s5_mem_slider .slider_nav_btn {
    left: 0;
}

.s5_mem_slider .slider_nav_btn.s5_mem_next {
    right: 0;
}
.page_banner {
    height: auto;
    min-height: unset !important;
    aspect-ratio: 9 / 16;
}
.home_intro {
    padding-top: 4rem;
    min-height: 22rem;
}
.template-offer h1.page_banner_title {
    font-size: 2.5rem;
}
}

/* ============ Icon user header (ảnh) ============ */
.header_account_img {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    display: block;
}

/* ============ Popup tìm kiếm (mở từ icon search) ============ */
/* ======== SEARCH POPUP (redesign) ======== */
.search_popup {
    position: fixed;
    inset: 0;
    z-index: 500;
    visibility: hidden;
    pointer-events: none;
}
.search_popup.is-open {
    visibility: visible;
    pointer-events: auto;
}
.search_popup_backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.search_popup.is-open .search_popup_backdrop {
    opacity: 1;
}
.search_popup_panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(100px);
    background: rgb(255 255 255 / 40%);
    backdrop-filter: blur(100px);
    padding: 2.5rem calc(calc(100vw - 72rem)/2);
    transform: translateY(-100%);
    transition: transform 0.35s ease;
}
.search_popup.is-open .search_popup_panel {
    transform: translateY(0);
}
/* Search bar */
.search_popup_bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid #ffff;
    max-width: 54rem;
}
.search_popup_ic {
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0.9;
}
.search_popup_input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 1.8rem;
    color: #fff;
    padding: 0;
    font-family: inherit;
    font-weight: 300;
}
.search_popup_input::placeholder {
    color: rgba(255,255,255,0.6);
}
.search_popup_close {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 0.3rem;
}
.search_popup_close:hover { opacity: 1; }
/* Body: 2 cột */
.search_popup_body {
    display: flex;
}
.search_popup_section_label {
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 1rem;
    font-weight: 500;
}
/* Gợi ý */
.search_popup_sugg_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.search_popup_sugg_item {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    padding: 0.3rem 0;
    font-family: inherit;
    transition: color 0.2s;
}
.search_popup_sugg_item:hover { color: #fff; }
/* Service grid */
.search_popup_svc_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}
.search_popup_svc_card {
    text-decoration: none;
}
.search_popup_svc_img {
    position: relative;
    border-radius: 0.8rem;
    overflow: hidden;
    aspect-ratio: 1/1;
}
.search_popup_svc_img span,
.search_popup_svc_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.search_popup_svc_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.8rem;
    gap: 0.4rem;
}
.search_popup_svc_name {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.3;
}
.search_popup_svc_desc {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search_popup_svc_more {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    letter-spacing: 0.05em;
    width: fit-content;
}
.search_popup_svc_title {
    font-size: 1rem;
    color: #fff;
    margin: 0.5rem 0 0;
    font-weight: 500;
}

/* ============ Trang kết quả tìm kiếm (giống Tin tức) ============ */
.search_page {
    padding: 7rem 0 5rem;
}
.search_page_head {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.search_page_title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.search_page_form {
    display: flex;
    gap: 0.6rem;
    margin: 0 auto;
}
.search_page_input {
    flex: 1;
    min-width: 0;
    height: 2.8rem;
    padding: 0 1.2rem;
    border: 0.05rem solid #d7e0dd;
    border-radius: 100px;
    font-size: 0.9rem;
    color: #0C4242;
    outline: none;
    font-family: inherit;
}
.search_page_btn {
    flex: 0 0 auto;
    border: none;
    background: #0C4242;
    color: #fff;
    border-radius: 100px;
    padding: 0 1.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}
.search_page_btn:hover {
    background: var(--vita-green-2);
}
.search_page_result_info {
    margin-top: 1rem;
    color: #6b8080;
    font-size: 0.9rem;
}
.search_grid {
    transition: opacity 0.25s ease;
}
.search_grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ============ Trang 404 ============ */
.notfound_page {
    padding: 9rem 0 6rem;
}
.notfound_inner {
    text-align: center;
    max-width: 45rem;
    margin: 0 auto;
}
.notfound_code {
    font-family: "Beautique Display", serif;
    font-size: 7rem;
    line-height: 1;
    color: #0C4242;
    letter-spacing: 0.05em;
}
.notfound_title {
    font-size: 1.8rem;
    margin: 0.8rem 0 0.6rem;
    color: #0C4242;
}
.notfound_desc {
    color: #0C4242;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.6rem;
}
.notfound_btn {
    display: inline-flex;
    align-items: center;
    background: #0C4242;
    color: #fff;
    border-radius: 100px;
    padding: 0.75rem 1.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.3s ease;
}
.notfound_btn:hover {
    background: var(--vita-green-2);
}
.img_cols_item img {
    margin: 0;
    box-shadow: 20px 20px 40px 0px #00000029;
    border-radius: 20px;
}

/* ============ Trang chính sách (chinh-sach-*) ============ */
.policy_page {
    padding: 6rem 0 6rem;
    background: #fff;
}
.policy_page .page_breadcrumb {
    margin-bottom: 2rem;
}
.policy_menu_sticky {
    position: sticky;
    top: 6rem;
}
.policy_menu {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid #E7EBEA;
}
.policy_menu li {
    margin: 0;
}
.policy_menu li a {
    display: block;
    padding: 0.6rem 0 0.6rem 1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: #5C7373;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.policy_menu li a:hover {
    color: #0C4242;
}
.policy_menu li.is-active a {
    color: #0C4242;
    font-weight: 700;
    border-left-color: #0C4242;
}
.policy_content_head {
    margin-bottom: 1.5rem;
}
.policy_subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0C4242;
    margin-bottom: 0.6rem;
}
.policy_subtitle::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #0C4242;
}
.policy_title {
    font-family: "Beautique Display", serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #0C4242;
    margin: 0 0 1.5rem;
}
.policy_content p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4A5C5C;
    margin: 0 0 1.2rem;
}
.policy_content p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .policy_menu_sticky {
        position: static;
        margin-bottom: 2rem;
    }
    .policy_content p {
        font-size: 1.5rem;
    }
    .policy_title {
        font-size: 2rem;
    }
    .policy_menu li a {
        font-size: 1.5rem;
    }
    .policy_subtitle {
        font-size: 1.2rem;
    }
}

/* Search popup + trang search + 404 responsive */
@media (max-width: 767px) {
    .search_popup_form {
        flex-wrap: wrap;
    }
    .search_popup_submit {
        width: 100%;
        margin-top: 0.6rem;
    }
    .search_page_form {
        flex-wrap: wrap;
    }
    .search_page_btn {
        width: 100%;
        height: 2.8rem;
    }
    .notfound_code {
        font-size: 5rem;
    }
    .svd2_wrap_left {
    width: 100%;
}

.wrap_content_post {
    margin: 0;
}
}

@media (max-width: 767px) {
    .news_cat_thumbs {
        padding: 0;
    }
    .news_thumb_arrow {
        display: none;
    }
}

@media (max-width: 767px) {
    .search_popup_panel {
        padding: 2rem;
    }
    .search_popup_body {
        flex-direction: column;
    }
    .search_popup_svc_desc {
        font-size: 1rem;
    }
    .search_popup_services {
        width: 100%;
        max-height: 43rem;
        overflow: auto;
    }
    .search_popup_svc_grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .search_popup_svc_bottom a.lead_card_btn {
        font-size: 1rem;
        height: 3rem;
        padding: 0 1rem;
    }
    .search_popup_svc_bottom a.lead_card_btn svg {
        width: 1rem;
    }
    span.search_popup_svc_name {
        font-size: 1.4rem;
    }
    .search_popup_section_label {
        font-size: 1.6rem;
    }
    button.search_popup_sugg_item {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    main#main.customer_page .row.page_banner_inner {
        padding: 2rem 0 0;
    }
    .page_banner_person {
        display: block !important;
        height: auto;
    }
    main#main.customer_page section.page_banner.page_banner--compose {
        padding-bottom: 24rem;
    }
    .page_banner_person {
        height: auto;
    }
}

@media (max-width: 767px) {
    /* Fix overflow slider mobile — tất cả swiper dùng slidesPerView lẻ */
    .cus_vright_swiper,
    .awards_swiper,
    .article_swiper,
    .home_blog_swiper,
    .svcat_subs_swiper,
    .s5_svc_swiper,
    .s5_mem_swiper {
        overflow: hidden !important;
    }
    .s5_mem_card {
        box-shadow: 5px 5px 9px 0px #00000029;
    }
    .s5_mem_swiper {
        padding: 1rem;
    }
    .s5_svc_swiper {
        padding: 1rem;
        margin: -1rem 0;
    }
    .s5_svc_card {
        box-shadow: 5px 5px 9px 0px #00000029;
    }
    .s5_lumi_swiper {
        padding-bottom: 3rem !important;
    }
    .contact_form_title {
        text-align: center;
    }
    .contact_form_desc {
        text-align: center;
    }
    .contact_form input,
    .contact_form select {
        height: 4rem;
        min-height: 3.3rem;
    }
    .contact_form .form_select_trigger {
        height: 4rem;
    }
    .contact_form .form_select_trigger span {
        font-size: 16px;
    }
    .contact_form .form_select_list button {
        padding: .7rem 0;
        font-size: 1.4rem;
    }
    .contact_form .button_submit {
        font-size: 1.1rem;
    }
    .contact_form .form_row {
        margin-bottom: 1rem;
        gap: 1rem;
    }
    .about_booking_form {
        padding: 3rem 2rem;
    }
    .page-doctor h1.page_banner_title {
        font-size: 1.6rem;
    }
    .offer_cat_swiper {
        padding: 3rem 1rem;
        max-width: 78%;
    }
    .offer_cat_logo {
        box-shadow: 0 3.8px 7.6px 0px #00000029;
    }
    .offer_footnote {
        font-size: 1.2rem;
    }
    .footer_btn {
        gap: .7rem;
        height: 3rem;
        font-size: 1rem;
    }
    .footer_btn svg {
        /* width: .9rem; */
    }
    body {
        font-size: 1.5rem;
    }
    /* Ẩn arrows các slider bị lệch trên mobile */
    .lead_slider_wrap .lead_arrow,
    .awards_slider_wrap .awards_arrow {
        display: none;
    }
    .lead_swiper .swiper-pagination {
        display: block;
    }
    .lead_slider_wrap {
        padding-bottom: 2rem;
    }
    .lead_slider_wrap .swiper-pagination {
        bottom: -1.5rem;
    }
}

/* ======== TOC Mobile: floating button + panel ======== */
.news_toc_mobile {
    display: none;
}
@media (max-width: 991px) {
    .news_toc_mobile {
        display: block;
        position: fixed;
        right: 1rem;
        bottom: 18rem;
        z-index: 300;
    }
    .news_toc_mobile_btn {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        background: var(--vita-green, #0C4242);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0.2rem 1rem rgba(0,0,0,0.25);
    }
    .news_toc_mobile_panel {
        position: absolute;
        bottom: calc(100% + 0.6rem);
        right: 0;
        width: 16rem;
        background: #fff;
        border-radius: 0.8rem;
        box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.18);
        overflow: hidden;
    }
    .news_toc_mobile_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 1rem;
        background: var(--vita-green, #0C4242);
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
    }
    .news_toc_mobile_head button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 0.9rem;
        line-height: 1;
        padding: 0;
    }
    .news_toc_mobile_panel ul {
        list-style: none;
        margin: 0;
        padding: 0.5rem 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    .news_toc_mobile_panel ul li a {
        display: block;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        color: #0C4242;
        line-height: 1.4;
        text-decoration: none;
        border-left: 0.2rem solid transparent;
        transition: background 0.15s, border-color 0.15s;
    }
    .news_toc_mobile_panel ul li a:hover,
    .news_toc_mobile_panel ul li.active a {
        background: #f0f7f5;
        border-left-color: var(--vita-green, #0C4242);
    }
}

@media (max-width: 767px) {
    .home_intro {
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
        padding-bottom: 13rem;
    }
}

/* Dots: home_ms_swiper, lead_swiper, s5_lumi_swiper */
.home_ms_swiper,
.lead_swiper,
.s5_lumi_swiper {
    padding-bottom: 2rem !important;
}
.home_ms_swiper .swiper-pagination-bullet,
.lead_swiper .swiper-pagination-bullet,
.s5_lumi_swiper .swiper-pagination-bullet {
    background: #0C4242;
    opacity: 0.3;
}
.home_ms_swiper .swiper-pagination-bullet-active,
.lead_swiper .swiper-pagination-bullet-active,
.s5_lumi_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
.lead_swiper .swiper-pagination {
    display: none;
}

@media (max-width: 991px) {
    .news_toc_mobile button {
        padding: 0;
        margin: 0;
    }
    .news_toc_mobile_btn {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        background: var(--vita-green, #0C4242);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.25);
    }
}

/* about_vision_swiper + about_badges_swiper dots */
.about_vision_swiper,
.about_badges_swiper {
    padding-bottom: 2rem !important;
    overflow: hidden !important;
}
.about_vision_swiper .swiper-pagination-bullet,
.about_badges_swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.about_vision_swiper .swiper-pagination-bullet-active,
.about_badges_swiper .swiper-pagination-bullet-active {
    opacity: 1;
}
.about_badges_swiper .about_badge {
    height: 100%;
}

@media (max-width: 767px) {
    .svc_item_actions {
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .about_badges_swiper {
        background: rgb(184 151 128 / 20%);
        border-radius: 1rem;
        backdrop-filter: blur(9px);
        margin-top: 10rem;
        padding: 0 !important;
        max-width: 90%;
    }
    .about_badge {
        width: 100%;
        margin: 1rem 0;
        padding: 1rem;
    }
    .about_badges_swiper .about_badge {
        position: relative;
    }
    .about_badges_swiper .about_badge:before {
        content: '';
        position: absolute;
        top: 1rem;
        bottom: 1rem;
        right: 0;
        width: 1px;
        background: linear-gradient(180deg, rgba(198, 198, 198, 0.5) 0%, rgba(155, 155, 155, 0.5) 28.85%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(148, 148, 148, 0.5) 100%);
    }
    .about_vision_swiper .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #949494;
    }
}

@media (max-width: 767px) {
    .cus_vright_swiper .video_card {
        height: 12rem;
    }
}

button.f-button {
    background: transparent !important;
}

button.f-button.is-close-button {
    background: #0C4242 !important;
    width: 2rem;
    height: 2rem;
    border-radius: 100px;
    top: .4rem;
    right: .4rem;
    min-width: unset;
    min-height: unset;
}

/* Chặn Safari auto-zoom khi focus input (font-size phải >= 16px) */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 16px !important;
    }
}


/* ============ MOBILE FAB ============ */
.mobile_booking_fab {
    display: none;
}
@keyframes fab_pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 767px) {
    .header_btn { display: none !important; }
    .mobile_booking_fab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 500;
        background: #0C4242;
        color: #fff;
        border: none;
        border-radius: 100px;
        padding: 0.7rem 1.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: 0 0.4rem 1.2rem rgba(12, 66, 66, 0.35);
        margin: 0;
        min-width: 14rem;
        justify-content: center;
        font-size: 1rem;
    }
    .mobile_booking_fab::before,
    .mobile_booking_fab::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        background: rgba(12, 66, 66, 0.45);
        animation: fab_pulse 3s ease-out infinite;
        pointer-events: none;
    }
    .mobile_booking_fab::after {
        animation-delay: 1s;
    }
    .lead_swiper .swiper-pagination {
        display: block;
    }
    .news_share_btn svg {
        width: 70%;
        height: auto;
    }
    .home_ms_swiper {
        padding-bottom: 3rem !important;
    }
    .doctor_acc_ic svg {
        width: 1rem;
    }
            .news_viewall_mobile {
            display: inline-flex !important;
            align-self: center;
            margin-top: 1.2rem;
        }
}

@media (max-width: 767px) {
    html {
        font-size: 3.4vw;
    }
    .svd2_img .svd2_img_pc {
        display: none !important;
    }
    .svd2_img .svd2_img_mobile {
        display: block !important;
    }
    .svd2_certs .item_cn img {
        height: 9rem;
    }
    .branch_addr_mini,
    .branch_addr_mini b {
        font-size: 1.2rem;
    }
    .branch_address,
    .branch_time {
        font-size: 1.2rem;
    }
    .contact_branches {
        padding: 1rem 0 2rem;
    }
    .home_page .page_banner_title {
        font-size: 3rem;
    }
    .page_banner {
        padding-bottom: 3rem;
    }
    .site_header:before {
        display: none;
    }
    .template-offer .page_banner_person {
        right: 0;
        height: 100%;
        display: flex !important;
        align-items: flex-end;
        justify-content: flex-start !important;
    }
    .template-offer span.page_banner_overlay {
        opacity: 1;
        background: rgb(0 0 0 / 50%);
        z-index: 4;
    }
    .template-offer .page_banner_person img {
        width: 41rem;
        max-width: unset;
        float: unset !important;
        transform: translateX(3rem);
    }
    .template-offer .page_banner_content {
        margin: 0;
        text-align: center;
    }
    .template-offer section.page_banner.page_banner--compose {
        align-items: flex-end;
        text-align: center;
    }
    .template-offer h1.page_banner_title br {
        display: none;
    }
    .contact_hero {
        padding-top: 0;
    }
    .svcat_banner:before {
        content: ';';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .2;
    }
    .svcat_banner {
        align-items: flex-end;
        background-image: var(--svcat-banner-bg-mobile, var(--svcat-banner-bg));
    }
    .customer_page .page_banner_person {
        position: absolute;
        bottom: 0;
        display: flex !important;
        justify-content: center;
    }
    .customer_page .page_banner_person img {
        max-width: unset;
        width: 76rem;
        position: relative;
        left: 21rem;
    }
    main#main.customer_page section.page_banner.page_banner--compose {
        padding: 0 10px !important;
        aspect-ratio: 9 / 16;
        align-items: flex-end;
        padding-bottom: 3rem !important;
    }
    .template-customer span.page_banner_overlay[aria-hidden="true"] {
        background: #000;
        z-index: 4;
        opacity: .3;
    }
    .ms_text {
        align-items: center;
        text-align: center;
        gap: .5rem;
    }
    .home_ms_swiper {
        overflow: unset !important;
    }
    .home_ms_swiper .ms_box {
        aspect-ratio: 1 / 1;
        height: auto !important;
    }
    .ms_overlay a.footer_btn {
        margin-top: .5rem;
    }
    .ms_overlay {
        background: linear-gradient(0deg, #fff, transparent);
        justify-content: flex-end;
        align-items: center;
    }
    .home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn {
        display: inline-flex;
        margin: .5rem 0 0;
        width: auto;
        gap: .5rem;
        font-size: .9rem;
    }
    .home_ms_swiper.ms_count_5 .swiper-slide:nth-child(5) .ms_box a.footer_btn svg {
        width: .8rem;
        height: auto;
    }
    .sticky_bar_btn {
        width: 4rem;
        height: 4rem;
    }
    .sticky_bar {
        bottom: 2rem;
        transform: unset;
    }
}

.news_viewall_btn:hover path {
    fill: #fff;
}

.news_viewall_btn path {
    transition: .5s all;
}

@media (max-width: 767px) {
    .site_footer {
        background-image: url(/assets/images/bg-footer2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        padding-bottom: 5rem;
    }
    .site_footer:before {
        content: '';
        background: rgb(112, 142, 134, .8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .site_footer>.row {
        position: relative;
        z-index: 2;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1rem;
    }
    .footer_socials {
        justify-content: center;
        justify-content: space-around;
    }
    .footer_label {
        color: #fff;
        font-size: 1.3rem;
    }
    .footer_hotline, .footer_hours {
        color: #fff;
    }
    .footer_logo img {
        filter: brightness(0) invert(1);
    }
    .footer_col_title {
        color: #fff;
    }
    .footer_address {
        color: #fff;
    }
    .footer_links a {
        color: #fff;
    }
    .footer_social {
        width: 3rem;
        height: 3rem;
    }
    .site_footer_bottom {
        color: #fff;
        position: relative;
    }
    .footer_badges {
        align-items: center;
    }
    .booking_popup_close {
        right: .5rem;
        top: .5rem;
    }
    .svc_item_actions {
        flex-wrap: nowrap;
    }
    .footer_btn {
        font-size: 1rem;
        padding: 0 1.2rem;
    }
    .related_blog_body a.lead_card_btn {
        height: 2.6rem;
        font-size: 1rem;
    }
    .article_card_img .article_card_more_btn {
        display: inline-flex !important;
    }
    .testi_content {
        font-size: 1.5rem;
    }
    .testi_name {
        font-size: 1.3rem;
    }
    .ms_label {
        font-size: 1.3rem;
    }
    .s5_more {
        font-size: 1.2rem;
    }
    .home_awards_btn.button_link.outline {
        font-size: 1.2rem;
    }
    .article_card_title {
        font-size: 1.5rem;
    }
    .svcat_banner_card .mota {
        font-size: 1.5rem;
    }
    .svcat_banner_desc {
        font-size: 1.2rem;
    }
    .svc_item_desc {
        font-size: 1.5rem;
    }
    .service_detail section.svd1 .svd1_content {
        padding: 0 2rem;
    }
    .svd1_content .content {
        font-size: 1.5rem;
    }
    .svd3_wrap_right .content li {
        font-size: 1.5rem;
    }
    .svd3_wrap_right .content {
        font-size: 1.5rem;
        max-height: unset;
    }
    .svd3_wrap_right .content ul {
        padding-left: 2rem;
    }
    .doctor_list {
        padding: 4rem 0;
    }
    .doctor_search input {
        font-size: 1.5rem;
    }
    .doctor_search input::placeholder {
        font-size: 1.5rem;
    }
    .doctor_card_name {
        font-size: 1.5rem;
    }
    .doctor_card_specialty {
        font-size: 1.3rem;
    }
    .cus_videos .content {
        font-size: 1.5rem;
    }
    .branch_desc {
        font-size: 1.5rem;
    }
    .branch_address, .branch_time {
        font-size: 1.5rem;
    }
    .branch_name {
        font-size: 1.6rem;
    }
    .branch_addr_mini, .branch_addr_mini b {
        font-size: 1.5rem;
    }
    .home_long_desc {
        font-size: 1.5rem;
    }
    .home_long_title {
        font-size: 2rem;
    }
    .about_experts_all a {
        font-size: 1.2rem;
    }
}

.offer_detail_actions a.footer_btn.style_2 path {
    fill: #fff;
}

@media (min-width: 768px) {
    .template-contact main#main {
        background: #fff;
    }
    .template-contact footer#footer {
        background: #E9D9CD4D;
    }
    .offer_summary_item a.footer_btn:hover path {
        fill: #fff;
    }
    .offer_summary_item a.footer_btn path {
        transition: .5s all;
    }
    .news_detail_sidebar h3.doctor_side_name {
        font-size: 1.6rem;
    }

    .news_detail_sidebar  span.doctor_side_pos {
        font-size: 1.2rem;
    }

    .news_detail_sidebar p.doctor_side_desc {
        font-size: 1.2rem;
    }
}
.related_blog_body a.lead_card_btn {
    text-decoration: none;
}

@media (max-width: 767px) {
    .service_detail section.svd1 .svd1_img img {
        opacity: 1;
    }

    .service_detail section.svd1 .svd1_img:before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(0deg, rgb(0 0 0 / 30%), transparent);
        z-index: 2;
    }
}