:root {
    --duration-short: 100ms;
    --duration-default: 200ms;
    --duration-announcement-bar: 250ms;
    --duration-medium: 300ms;
    --duration-long: 500ms;
    --duration-extra-long: 600ms;
    --duration-extra-longer: 750ms;
    --duration-extended: 3s;
    --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
    --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
    --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

@font-face {
    font-family: "BeVietnamPro-SemiBold";
    src: url(/wp-content/themes/flatsome-child/img/BeVietnamPro-SemiBold.ttf);
    display: swap
}

@font-face {
    font-family: "BeVietnamPro-Regular";
    src: url(/wp-content/themes/flatsome-child/img/BeVietnamPro-Regular.ttf);
    display: swap
}

.container_custom {
    max-width: 1404px;
}

*,
body {
    font-family: 'BeVietnamPro-Regular', sans-serif !important; 
}

#cpsmksujduhbgisxlcmwr {
    display: none !important;
}

tran-div {
    display: flex;
    transform: translateY(-50%);
    z-index: 1041;
    width: 100px;
    justify-content: center;
    margin-top: 20px;
}

tran-div.gtranslate_wrapper {
    display: none;
}

@media screen and (max-width: 849px) {
    tran-div {
        margin-top: 20px;
        flex: 1 1 0;
        order: 3;
    }

    tran-div.gtranslate_wrapper {
        display: flex;
    }
}

tran-div .gtranslate_wrapper {
    /* display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px; */
}

/* Same [gtranslate] shortcode as the bottom nav row's <tran-div> above, but
   next to the search icon in the main header row instead (template-parts/
   header/header-main.php's child-theme override) - the base tran-div
   rule's transform/margin-top were tuned for that other row's height, so
   this one needs its own reset to sit centered inline with search. */
.header-main__gtranslate {
    transform: none;
    margin-top: 0;
    width: auto;
}

.header-inner .flex-col.flex-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}

[style*=--aspect-ratio]:before {
    content: "";
    height: 0;
    display: block;
    padding-top: calc(100% /(0 + var(--aspect-ratio, 16 / 9)));
    pointer-events: none;
}

[style*=--aspect-ratio] img,
[style*=--aspect-ratio] svg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
}

[style*=--aspect-ratio] {
    position: relative;
    overflow: hidden;
}

.flex-right ul li a {
    font-size: 14px;
    font-weight: normal !important;
}

.section__news .box__colum__nth1 .news-post .box__news__inner .box__content h3 a {
    font-size: 21px;
}

.header-bottom .header-nav li .nav-dropdown {
    min-width: 300px;
}

slide-section.swiper .swiper-arrow,
.elementor-swiper .elementor-swiper-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

/* Hover effect */
slide-section.swiper:hover .swiper-arrow,
.elementor-swiper:hover .elementor-swiper-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) translateY(-50%);
    -webkit-transform: translateX(0) translateY(-50%);
}

slide-section.slideshow_swiper .swiper-button-next,
slide-section.slideshow_swiper .swiper-button-prev {
    width: 3rem;
    height: 3rem;
    margin-top: 0;
    background-color: white;
    border-radius: 50%;
    box-shadow: none;
    border: 1px solid #ebebeb;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

slide-section.slideshow_swiper .swiper-button-prev:hover,
slide-section.slideshow_swiper .swiper-button-next:hover {
    background-color: black;
    border-color: black;
    color: white;
}

slide-section.slideshow_swiper .swiper-button-next:after,
slide-section.slideshow_swiper .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

slide-section.doctor-information_swiper .swiper-button-next,
slide-section.doctor-information_swiper .swiper-button-prev {
    top: 40%;
}

slide-section.doctor-information_swiper .swiper-button-prev {
    left: 0;
}

slide-section.doctor-information_swiper .swiper-button-next {
    right: 0;
}

.swiper-button-next,
.swiper-button-prev {
    align-items: center;
    color: black;
    font-size: 1.8rem;
}

.slide-doctor__content {
    text-align: left;
    display: flex;
    flex-wrap: wrap-reverse;
}

.left__information {
    width: 60%;
}

.right__image {
    width: 40%;
    text-align: center;
}

.left__information-title {
    color: #0436b4;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 35px;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.header-bottom .header-nav>li>a {
    font-family: "BeVietnamPro-SemiBold", sans-serif !important;
}

.nav-uppercase>li>a {
    text-transform: none !important;
}

.header-bottom .header-nav li.uber__menu ul li>a,
.header-bottom .header-nav li.uber__menu ul li>a span,
.header-nav li .nav-dropdown li a {
    text-transform: none !important;
    font-size: 16px;
}

.header-bottom .header-nav li#menu-item-978 .nav-dropdown {
    min-width: 340px;
}

/* Keep all level-2 items in this dropdown as one vertical list. */
#menu-item-34573>.nav-dropdown>li {
    clear: both;
    display: block;
    float: none;
    width: 100%;
}

#menu-item-34573>.nav-dropdown>li.nav-dropdown-col {
    display: block;
}

/* Apply the same vertical layout fix to all normal dropdowns (exclude mega menu). */
.header-bottom .header-nav>li:not(.uber__menu)>.nav-dropdown>li,
.header-bottom .header-nav>li:not(.uber__menu)>.nav-dropdown>li.nav-dropdown-col {
    clear: both;
    display: block;
    float: none;
    width: 100%;
}

/* Keep 3rd-level dropdowns hidden until user hovers parent item. */
.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column {
    background: #fff;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    left: 100%;
    margin: 0;
    min-width: 260px;
    opacity: 0;
    padding: 12px 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    visibility: hidden;
    z-index: 12;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children {
    position: relative;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children:hover>.sub-menu.nav-column,
.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.current-dropdown.menu-item-has-children>.sub-menu.nav-column {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li {
    clear: both;
    float: none;
    width: 100%;
}

/* Styling for level-3 panel to match the top menu tone. */
.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column {
    background: #eef4fb;
    border: 1px solid #e6edf3;
    border-radius: 12px;
    overflow: hidden;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li>a {
    align-items: center;
    color: #0d2538;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 46px;
    padding: 10px 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li+li>a {
    border-top: 1px solid #edf3f7;
}

.header-bottom .header-nav .nav-dropdown li.menu-item-has-children>a {
    align-items: center;
    display: flex;
    padding-right: 11px;
}

.header-bottom .header-nav .nav-dropdown li.menu-item-has-children>a::after {
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
    height: 7px;
    margin-left: auto;
    margin-right: 6px;
    opacity: 0.65;
    transform: rotate(45deg);
    width: 7px;
}

.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li>a:hover,
.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li.current-menu-item>a,
.header-bottom .header-nav .nav-dropdown>li.nav-dropdown-col.menu-item-has-children>.sub-menu.nav-column>li.current_page_item>a {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(31, 108, 143, 0.1) 100%);
    color: #0436b4;
}

.left__information-description {
    padding: 0 50px 0 0;
}

.left__information-description p {
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.left__information-button a {
    background: #0436b4;
    background: -moz-linear-gradient(left, #0436b4 0%, #1f6c8f 100%);
    background: -webkit-linear-gradient(left, #0436b4 0%, #1f6c8f 100%);
    background: linear-gradient(to right, #0436b4 0%, #1f6c8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0436b4', endColorstr='#1f6c8f', GradientType=1);
    margin: auto;
    border-radius: 40px;
    padding: 9px 30px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    display: inline;
}

.left__information-button a:hover {
    background: #062c78;
}

.section__doctor-information {
    padding: 50px 15px;
}

.section__doctor-information .thumbnail-slide span {
    display: block;
    color: #fff;
    font-size: 10px;
    border: 1px solid #eaeaea;
    text-align: center;
    padding: 4px 0;
    border-bottom: 1px solid #b3b3b3;
    font-weight: 600;
    background: #0436b4;
    background: -moz-linear-gradient(left, #0436b4 0%, #1f6c8f 100%);
    background: -webkit-linear-gradient(left, #0436b4 0%, #1f6c8f 100%);
    background: linear-gradient(to right, #0436b4 0%, #1f6c8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0436b4', endColorstr='#1f6c8f', GradientType=1);
}

.section__doctor-information .thumbnail-slide span.customize_span {
    background: #fff;
    color: #333;
}

.section__doctor-information .thumbnail-slide .swiper-slide-thumb-active,
.section__doctor-information .thumbnail-slide .swiper-slide:hover {
    background: url(../../img/bg.png) !important;
    background-size: cover !important;
}

.section__doctor-information .thumbnail-slide {
    margin: 10px 0 0 0;
}

.chinhquy__Dc {
    margin-bottom: 0;
}

slide-section.slideshow_swiper .slide-item {
    height: auto;
}

slide-section.doctor-information_swiper .slide-item {
    height: 600px;
}

slide-section.slideshow_swiper .slide-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.swiper-slide::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.img__tel,
.tel__phone {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.header__tel .tel__phone a {
    width: 100%;
}

.section__customer {
    padding: 60px 0;
}

.content__video span {
    font-weight: bold;
    font-size: 15px;
}

.layout__caket .left__camket h2,
.title__home__heading a,
.section__news .box__colum__nth1 .news-post .box__news__inner .box__content h3 a {
    color: #0436b4
}

.map__inner a {
    background-color: #062c78
}

.cd-popup-container .form__call {
    box-sizing: border-box;
    background: rgb(21, 96, 161);
    background: linear-gradient(167deg, rgba(21, 96, 161, 1) 23%, rgba(59, 130, 246, 1) 100%);
    border-radius: 15px;
    padding: 35px 35px 0 35px;
}

.cd-popup-container {
    max-width: 525px;
    top: 25%;
}

.cd-popup-container .cd-popup-close {
    background: none;
    top: 5px
}

.form__call .form__header p {
    padding: 0 0 15px 0;
}

.form__call p.form__title {
    background: -webkit-linear-gradient(#fafafa, #ffe296);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 26px;
    line-height: normal;
}

.form__call p.form__description {
    color: white;
    font-size: 14px;
}

.form__content {
    width: 90%;
    margin: 0 auto;
}

.form__content input,
.form__content select {
    border-radius: 15px;
}

.form__content input[type='submit'] {
    width: 100%;
    background: rgb(250, 250, 250);
    background: radial-gradient(circle, rgba(250, 250, 250, 1) 0%, rgba(255, 226, 150, 1) 100%);
    color: #1560a1;
}

.cd-popup-container .wpcf7-response-output {
    color: white;
}

.phone__top {
    position: absolute;
    top: 22.6%;
    left: 48.6%;
    z-index: 1;
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone__top svg {
    width: 35px;
    height: 35px;
}

.border-gradient {
    background: -webkit-linear-gradient(left top, #1560a1 0%, #0436b4 100%);
}

.phone__top--svg {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 50%;
    width: 47px;
    height: 47px;
}

.cd-popup-bg.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-bg {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding-bottom: 250px;
    background-color: rgb(0 0 0 / .63);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    z-index: 9999999999;
}

.cd-popup,
.cd-popup-tt,
.cd-popup-bg {
    background-color: rgb(255 255 255 / .63);
}

.cd-popup-tt {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding-bottom: 250px;
    background-color: rgb(0 0 0 / .63);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    z-index: 9999999999
}

.cd-popup-tt.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s 0s, visibility 0s 0s
}

#elementor-library-9 {
    height: 420px;
}

#elementor-library-7 {
    height: 804px;
}

.cd-popup-container p {
    font-family: 'Montserrat';
}

contact-menu {
    position: fixed;
    z-index: 3;
    right: 10px;
    top: 205px;
    width: 80px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 35px;
    background: #FFFFFF;
    opacity: 0;
    pointer-events: none;
    transition: transform .3s, opacity .3s;
}

contact-menu.active {
    opacity: 1;
    pointer-events: inherit;
}

contact-menu ul {
    list-style: none;
    margin: 0;
    padding: 16px 0;
    box-sizing: border-box;
}

contact-menu ul li {
    padding: 2px 0;
}

contact-menu ul li a {
    font-size: 12px;
    white-space: nowrap;
    color: #0d6799;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

contact-menu ul li a.image-contact {
    height: 50px;
}

contact-menu ul li a img {
    margin: 0 auto;
    width: 50px;
}

/* Mobile-only (see the max-width:993px override below) - #whole-sale's
   "Yêu cầu gọi lại" pill already covers this on desktop. */
.contact-menu__hotline {
    display: none;
}

form.wpcf7-form {
    margin-bottom: 0;
}

mobile-bar {
    position: fixed;
    bottom: 0;
    display: block;
    left: 0;
    right: 0;
    background: white;
    z-index: 111;
    border-top: 1px solid lightgray;
    transform: translateY(100%);
    transition: all 0.4s;
}

mobile-bar.active {
    transform: translateY(0);
}

mobile-bar ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    padding: 0;
}

mobile-bar ul li {
    margin: 5px;
    background-color: lightgray;
    border-radius: 10px;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

mobile-bar ul li a,
mobile-bar ul li button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
}

mobile-bar ul li span {
    padding-top: 5px;
}

mobile-bar ul li p {
    padding-top: 15px;
}


mobile-bar ul li button {
    margin: 0;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 0;
    padding: 0;
    text-transform: none;
    padding-top: 5px;
}

.support-ultility {
    display: none;
}

.ct__products-grid {
    display: flex;
    flex-wrap: wrap;
}

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

.ct_container h1 {
    color: #0436b4;
    font-family: 'Helvetica', sans-serif;
    line-height: 38px;
    margin: 30px 0 30px 0;
    font-size: 26px;
    text-transform: uppercase;
}

.ct__products-grid .product-item {
    flex: 1 0 21%;
    box-sizing: border-box;
    margin: 1%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}

.ct__products-grid .product-thumbnail img {
    max-width: 100%;
    height: auto;
}

.ct__products-grid .product-description {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
}

.ct__products-grid .button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}

.ct__products-grid .button:hover {
    background-color: #005177;
}

.ct__product-detail {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

.ct__product-detail .product-images {
    flex: 1 1 50%;
    padding-right: 20px;
}

.ct__product-detail .product-info {
    flex: 1 1 50%;
    padding-left: 20px;
}

.ct__product-detail .product-description {
    margin: 20px 0;
}

.ct__product-detail .product-add-to-cart .button {
    display: inline-block;
    padding: 0px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}

.ct__product-detail .product-add-to-cart .button:hover {
    background-color: #005177;
}

.ct__product-detail img {
    width: 100%;
}

.mobile-nav .cart-item {
    display: none;
}

.close_button {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    padding: 5px 15px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    opacity: 0.8;
    cursor: pointer;
}

popup-cus.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

popup-cus {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8) !important;
    position: fixed;
    z-index: 1005;
    top: 0;
    left: 0;
    cursor: pointer;
}

/* ===== Lucky wheel popup (template-parts/lucky-wheel/lucky-wheel.php) =====
   Two panels (.lw-panel--wheel / .lw-panel--gift) inside <popup-cus>,
   toggled via its [data-step] attribute - only one is ever visible. */

.lw-panel {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1006;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 92vw;
    cursor: default;
}

popup-cus[data-step="wheel"] .lw-panel--wheel {
    display: block;
}

popup-cus[data-step="gift"] .lw-panel--gift {
    display: block;
}

.lw-box {
    background: linear-gradient(167deg, rgba(21, 96, 161, 1) 23%, rgba(59, 130, 246, 1) 100%);
    border-radius: 24px;
    padding: 26px 20px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.lw-title {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .5px;
    margin: 0 0 4px;
    background: -webkit-linear-gradient(#fafafa, #ffe296);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lw-subtitle {
    color: #dce7ff;
    font-size: 13px;
    margin: 0 0 18px;
}

.lw-wrap {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto;
}

/* .lw-dial rotates as a whole (JS sets its transform); it holds the
   CSS-generated slice fill, the ring artwork on top of that (lucky-wheel-
   dial.webp, design/vongtron.webp - a gold/blue border with a transparent
   center), and one label span per prize on top of both - see the PHP
   doc-comment on flatsome_child_lucky_wheel_dial_markup(). */
.lw-dial {
    position: absolute;
    inset: 0;
}

/* Background alternating navy/white slices (one pair per prize) - the
   conic-gradient itself is generated inline per-prize-count in PHP. */
.lw-dial-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.lw-dial-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* One .lw-seg per prize: a zero-size point rotated to the slice's middle
   angle and pushed outward, with the label span counter-rotated back to
   upright - see the PHP doc-comment on flatsome_child_lucky_wheel_dial_markup(). */
.lw-seg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

/* width/font-size are set inline per-label (they scale down as prize count
   grows - see flatsome_child_lucky_wheel_dial_markup()); transform (which
   includes the translate(-50%,-50%) self-centering) is also inline since it
   must combine with each label's own rotate angle. */
.lw-seg > span {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    transform-origin: center;
    text-align: center;
    font-weight: 800;
    line-height: 1.15;
    color: #062c78;
    /* White halo (readable-on-anything technique): dark navy text stays
       legible on the artwork's white wedges directly, and this halo keeps it
       legible on the blue wedges too, regardless of which wedge a label's
       dynamic angle happens to land on (see the artwork/label-count tradeoff
       note on flatsome_child_lucky_wheel_dial_markup()). */
    text-shadow:
        0 0 3px #fff, 0 0 3px #fff,
        1px 1px 0 #fff, -1px -1px 0 #fff,
        1px -1px 0 #fff, -1px 1px 0 #fff;
}

/* .lw-hub (lucky-wheel-hub.webp, design/vongtron-muiten.webp) is the same
   690x690 canvas as .lw-dial-bg, so stacking it at the same inset:0 size
   lines its arrow/hub up with the dial with no manual offset - it sits on
   top (higher z-index) and does NOT rotate, acting as the fixed spin
   button/pointer. */
.lw-hub {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.lw-hub.is-disabled {
    cursor: not-allowed;
    opacity: .85;
}

.lw-hint {
    color: #dce7ff;
    font-size: 12px;
    margin: 16px 0 0;
}

.lw-gift-box {
    background: linear-gradient(160deg, #4544b9 0%, #0436b4 100%);
    border-radius: 24px;
    padding: 30px 26px 22px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.lw-gift-heading {
    margin: 0 0 6px;
    font-size: 14px;
    color: #cdd3ff;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.lw-gift-name {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    background: -webkit-linear-gradient(#fafafa, #ffe296);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lw-gift-note {
    margin: 0 0 18px;
    font-size: 13px;
    color: #e3e6ff;
}

.lw-form input,
.lw-form select {
    display: block;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 50px;
    padding: 0 18px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #1e2a5b;
}

.lw-form input:focus,
.lw-form select:focus {
    outline: 2px solid #ffcd4a;
}

.lw-form input[type='submit'] {
    background: rgb(250, 250, 250);
    background: radial-gradient(circle, rgba(250, 250, 250, 1) 0%, rgba(255, 226, 150, 1) 100%);
    color: #1560a1;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .5px;
}

#whole-sale {
    margin-left: 5px;
    z-index: 1004 !important;
    padding: 8px 16px;
}

#whole-sale .box__tel {
    background: rgb(18, 88, 157);
    background: linear-gradient(280deg, rgba(18, 88, 157, 1) 26%, rgba(59, 130, 246, 1) 99%);
}

#whole-sale .box__tel .cd-popup-trigger {
    font-size: 16px;
    font-weight: bold;
}

.wpcf7-spinner {
    display: none;
}

.button.icon.is-small i {
    top: 0.5px;
    left: 1px;
}

.layout__caket .left__camket h2 {
    font-family: 'BeVietnamPro-Regular', sans-serif;
}

.site-main {
    background: none;
}

/* ===== spin-section ("Vòng quay may mắn - Đón nụ cười xinh", page-bottom
   teaser - template-parts/home/home-content.php's flatsome_child_home_
   spin_section()). Reuses .lw-wrap/.lw-dial/.lw-seg etc. from the lucky
   wheel popup CSS above (those selectors aren't scoped to popup-cus). ===== */
spin-section {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 70px 0;
}

.spin__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Bigger than the popup's wheel (350px) - matches $wheel_size passed to
   flatsome_child_lucky_wheel_dial_markup() in flatsome_child_home_spin_
   section(), which sizes label_radius/label_width to fit this. */
.spin__wheel .lw-wrap {
    margin: 0;
    width: 460px;
    height: 460px;
}

.spin__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 460px;
}

.spin__title-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.spin__gift-name {
    display: none;
    color: #0436b4;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 16px;
}

.spin__gift-name.is-visible {
    display: block;
}

.spin__form {
    width: 100%;
    background: #eaf3ff;
    border-radius: 16px;
    padding: 24px;
}

.spin__form input {
    display: block;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #fff;
    padding: 0 18px;
    margin-bottom: 14px;
    font-size: 15px;
    color: #1e2a5b;
}

.spin__form input:focus {
    outline: 2px solid #0436b4;
}

.spin__form input[type='submit'] {
    width: auto;
    min-width: 160px;
    margin-bottom: 0;
    background: #0436b4;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: .5px;
}

.spin__form input[type='submit']:hover {
    background: #062c78;
}

@media only screen and (max-width: 993px) {
    .spin__container {
        flex-direction: column;
        text-align: center;
    }

    .spin__content {
        align-items: center;
        max-width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    /* 400x400 as requested, but clamped against the viewport (not the
       parent) - .spin__wheel is a flex item with no width of its own, so
       it shrink-wraps around this box instead of constraining it, which
       means a plain "max-width:100%" here has nothing correct to resolve
       against and the wheel bleeds off the right edge on phones narrower
       than ~430px. calc(100vw - 32px) keeps it centered and fully on-
       screen down to the smallest phones, capping at 400 above that. */
    .spin__wheel .lw-wrap {
        width: min(400px, calc(100vw - 32px));
        height: min(400px, calc(100vw - 32px));
    }

    /* Prize label font-size is set inline per-span by PHP
       (flatsome_child_lucky_wheel_dial_markup()) and is intentionally the
       same regardless of $wheel_size (only prize count shrinks it) - it's
       tuned for the wheel's full 400-460px size, so it needs a step down
       to still fit once the wheel itself is this much smaller. !important
       is required to beat the inline style. */
    .spin__wheel .lw-seg > span {
        font-size: 8px !important;
    }

    /* Label radius (how far out from the hub each prize name sits) is
       also baked in by PHP as part of each .lw-seg's inline transform
       (rotate(mid) translateY(-125px) for this $wheel_size=460 wheel) -
       lucky-wheel.php reads --lw-label-radius (falling back to its
       computed default) so only the radius can be overridden here
       without needing to know each segment's own rotate angle. */
    .spin__wheel .lw-seg {
        --lw-label-radius: 112px;
    }

    spin-section {
        padding: 40px 0;
    }
}

.section__news {
    padding: 0 0 10px 0;
}

.title_congnghe,
.des_congnghe {
    text-align: center;
}

.title_congnghe span {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 25px;
    color: #0436b4;
}

.des_congnghe span {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.bot__gradient {
    width: 50%;
    height: 5px;
    background: black;
    margin: 10px auto 120px auto;
    background: rgb(18, 88, 157);
    background: linear-gradient(280deg, rgba(18, 88, 157, 1) 26%, rgba(59, 130, 246, 1) 99%);
}

.back__gradient {
    width: 100%;
    height: 110px;
    background: rgb(18, 88, 157);
    background: linear-gradient(280deg, rgba(18, 88, 157, 1) 26%, rgba(59, 130, 246, 1) 99%);
    text-align: center;
    border-radius: 9px;
    padding-top: 10px;
    position: absolute;
    top: 110px;
}

.back__gradient span {
    font-weight: bold;
    font-size: 21px;
    line-height: normal;
    color: white;
}

.mobile__congnghe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.mobile__congnghe .item__congnghe {
    width: 48%;
}

.list__congnghe {
    position: relative;
}

.img_congnghe_mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 120px;
    border-radius: 9px;
}

.img_congnghe_mobile img {
    width: 90%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.content__congnghe {
    text-align: center;
}

.content__congnghe h4 {
    text-transform: uppercase;
    font-weight: bold;
    line-height: normal;
    font-weight: bold !important;
}

.content__congnghe p {
    line-height: normal;
    font-size: 16px;
    font-weight: 400;
    min-height: 60px;
}

.content__bottom {
    width: 100%;
    height: 8px;
    background: rgb(18, 88, 157);
    background: linear-gradient(280deg, rgba(18, 88, 157, 1) 26%, rgba(59, 130, 246, 1) 99%);
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.swiper-pagination-bullet {
    width: 14px !important;
    height: 14px !important;
    margin: 5px !important;
}

.swiper-horizontal>.swiper-pagination-bullets {
    bottom: 0px;
}

.right__camket {
    padding: 46px 25px 22px;
}

.nav li.has-icon-left>a>i,
.nav li.has-icon-left>a>img,
.nav li.has-icon-left>a>svg,
.header-bottom .header-nav li.uber__menu .nav-dropdown li>a>img {
    margin-right: 12px;
}

.hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


@media (max-width: 812px) {
    .layout__caket .left__camket h2 {
        font-size: 17px;
    }
}

@media only screen and (max-width: 993px) {
    .inner__congnghe {
        background-color: white;
        border-radius: 9px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    slide-section.slideshow_swiper.swiper .swiper-arrow {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) translateY(-50%);
        -webkit-transform: translateX(0) translateY(-50%);
    }

    slide-section.doctor-information_swiper.swiper .swiper-arrow {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .left__information {
        width: 100%;
    }

    .right__image {
        width: 100%;
        padding: 0 0 20px 0;
    }

    .section__doctor-information {
        padding: 15px 15px;
    }

    .left__information-button a {
        border-radius: 40px;
        padding: 7px 10px;
        color: #fff;
        font-size: 10px;
    }

    .left__information-title {
        font-size: 22px;
        line-height: 24px;
    }

    .left__information-description p {
        font-size: 13px;
        line-height: 20px;
        margin: 0 0 10px 0;
    }

    .left__information-description {
        padding: 0;
    }

}

@media only screen and (max-width: 575px) {

    slide-section.doctor-information_swiper .slide-item {
        height: 500px;
    }

    .cd-popup-container {
        max-width: 320px;
    }

    .phone__top {
        left: 43%;
    }

    footer#footer {
        padding-bottom: 80px;
    }

    .lw-wrap {
        width: 240px;
        height: 240px;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .animate--ambient>img,
    .animate--ambient>svg {
        animation: animateAmbient 30s linear infinite;
    }

    @keyframes animateAmbient {
        0% {
            transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
        }

        100% {
            transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
        }
    }

    .scroll-trigger.animate--fade-in,
    .scroll-trigger.animate--slide-in {
        opacity: 0.01;
    }

    .scroll-trigger.animate--slide-in {
        transform: translateY(2rem);
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
        opacity: 1;
        animation: var(--animation-fade-in);
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
        animation: var(--animation-slide-in);
        animation-delay: calc(var(--animation-order) * 75ms);
    }

    .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
    .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
    .scroll-trigger.scroll-trigger--design-mode .slider,
    .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
        opacity: 1;
        animation: none;
        transition: none;
    }

    .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
        transform: translateY(0);
    }

    @keyframes slideIn {
        from {
            transform: translateY(2rem);
            opacity: 0.01;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0.01;
        }

        to {
            opacity: 1;
        }
    }
}

/* ===== section__gioithieu ("Giới thiệu" - SC Dental / "Chuẩn y khoa,
   kiến tạo nụ cười bền vững", right under the hero banner - template-
   parts/home/home-content.php's flatsome_child_home_page_content(),
   matching design/section-gioithieu.jpg): one plain photo on the left,
   a title/subtitle/checklist column on the right. ===== */
.section__gioithieu {
    padding: 70px 0;
}

.gioithieu__layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.gioithieu__media {
    /* flex: 0 0 460px; */
    width: 460px;
}

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

.gioithieu__content {
    flex: 1;
    min-width: 0;
}

/* font-size/weight matched to every other home-page section title (32px/
   800 title, 17px/700 subtitle) - see the sitewide sync note by
   .section__service below. */
.gioithieu__title {
    color: #0436b4;
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: .5px;
}

.gioithieu__subtitle {
    color: #0a1f44;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.gioithieu__divider {
    display: block;
    width: 70px;
    height: 3px;
    background: #0436b4;
    margin-bottom: 26px;
}

.gioithieu__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gioithieu__points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
}

.gioithieu__check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

@media only screen and (max-width: 993px) {
    .gioithieu__layout {
        flex-direction: column;
        text-align: center;
    }

    .gioithieu__media {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .gioithieu__divider {
        margin-left: auto;
        margin-right: auto;
    }

    .gioithieu__points li {
        text-align: left;
    }
}

@media only screen and (max-width: 575px) {
    .section__gioithieu {
        padding: 40px 0;
    }

    .gioithieu__title {
        font-size: 26px;
    }

    .gioithieu__subtitle {
        font-size: 16px;
    }
}

/* Sitewide section-title sync: every home-page section heading (gioithieu,
   service, congnghe, doctorteam, camket, customer-gallery, video) now
   shares the same 32px/800 title + 17px/700 subtitle scale. .title__serice
   and .title__home__heading are legacy rules from the parent theme's own
   style.css (44px and 30px respectively, loaded before this file per
   functions.php) - overridden here rather than edited in place, same
   pattern this stylesheet already uses everywhere else. */
.title__serice h2 {
    font-size: 32px;
    font-weight: 800;
}

.title__home__heading {
    font-size: 32px;
    font-weight: 800;
}

/* ===== section__service bottom wave + full-width banner underneath it
   (template-parts/home/home-content.php's flatsome_child_home_page_
   content()). img/home/lineduoi.jpg is a wide, short wave graphic (white
   top blending into the section's white background, blue curve at the
   very bottom edge) - stretched to the section's own width via
   background-size so it scales without distorting on any viewport. ===== */
.section__service {
    background-image: url(../../img/home/lineduoi.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
}

.section__service-banner {
    width: 100%;
}

.service-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

/* banner__congnghe (tech section's top banner, template-parts/home/home-
   content.php) no longer uses Flatsome's --aspect-ratio crop utility -
   full width, natural height instead. */
.banner__congnghe img {
    display: block;
    width: 100%;
    height: auto;
}

/* =====================================================================
   section__trust-group: shared wrapper around "Công nghệ" + "Đội ngũ
   bác sĩ" + "Cam kết" (template-parts/home/home-content.php), matching
   design/section__trust-group.png. One continuous background image
   (img/home/bg-m4.webp) spans all three sections: dark navy/circuit
   art behind "Công nghệ" fading to a light blue backdrop behind "Đội
   ngũ bác sĩ" and "Cam kết". background-size: cover keeps it filling
   the whole (much taller) group regardless of viewport - #0436b4 is
   just the split-second load fallback, matched to the image's own
   dark top band. Heading text color is set per-section below to match
   whichever part of the gradient it sits on (white on the dark
   "Công nghệ" band, navy on the light "Đội ngũ bác sĩ"/"Cam kết"
   bands). Card-level text (camket cards, doctor tab cards, the tab
   content panel) keeps its own opaque background either way, so it's
   unaffected by whatever sits behind the group.
   ===================================================================== */
.section__trust-group {
    background: #0436b4 url(../../img/home/bg-m4.webp) center top no-repeat;
    background-size: cover;
}

.trust-group__gold-line {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Công nghệ: heading + self-service tab repeater ---- */
.section__congnghe .container {
    padding-top: 40px;
    padding-bottom: 60px;
}

.congnghe__heading {
    text-align: center;
    margin-bottom: 30px;
}

/* h2 holds the small "NHA KHOA SC DENTAL" kicker line, p holds the big
   slogan below it (design/section__trust-group.png) - sized opposite
   of doctorteam/camket's heading pattern (big h2 + small p) since here
   it's the admin-entered *subtitle* that's the visually dominant line. */
.congnghe__heading h2 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 8px;
    opacity: .9;
}

.congnghe__heading p {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.congnghe__tabs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0 0 30px;
    padding: 0;
}

.congnghe__tabs li {
    cursor: pointer;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: #0436b4;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: background .2s, color .2s;
}

.congnghe__tabs li:hover {
    background: #1a4fc4;
}

.congnghe__tabs li.current {
    background: #fff;
    color: #0436b4;
    border-color: #fff;
}

/* Tab content panel background - temporary blue-white gradient (design/
   tabcontent.png), to be replaced once the final artwork is ready. */
.congnghe__panel {
    position: relative;
    background: linear-gradient(180deg, #eaf3ff 0%, #ffffff 65%);
    border-radius: 12px;
    padding: 40px;
    overflow: hidden;
}

.congnghe__ribbon {
    position: absolute;
    left: 0;
    top: 0;
}

.congnghe__ribbon span {
    display: inline-block;
    background: #0436b4;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    padding: 14px 34px 14px 24px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}

.congnghe__gallery {
    display: flex;
    gap: 16px;
    height: 420px;
    margin-top: 70px;
}

/* Main image swiper (left) synced to the vertical thumbs swiper (right)
   via Swiper's `thumbs` option - see assets/js/home-sliders.js. Every
   photo in the admin's "gallery" field becomes one slide in both. */
.congnghe__gallery-main {
    flex: 1;
    min-width: 0;
    height: 100%;
}

.congnghe__gallery-main .swiper-slide {
    border-radius: 8px;
    overflow: hidden;
}

.congnghe__gallery-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.congnghe__gallery-thumbs {
    flex: 0 0 180px;
    height: 100%;
}

.congnghe__gallery-thumbs .swiper-slide {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s;
}

.congnghe__gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.congnghe__gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.congnghe__content {
    margin-top: 30px;
}

/* Description + "Xem thêm" CTA share one row (design/screenshot: the
   button sits at bottom-right, in the same column as the thumbs strip
   above it) - .congnghe__toggle width matches .congnghe__gallery-
   thumbs's 180px column so the two stay visually aligned. */
.congnghe__content-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.congnghe__desc {
    flex: 1;
    color: #1a2b5c;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Collapsed by default (design/section__trust-group.png shows only the
   description + this CTA at rest) - .congnghe__toggle (assets/js/home-
   tabs.js) reveals the two highlight bullet-groups below it on click. */
.congnghe__toggle {
    flex: 0 0 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid #0436b4;
    border-radius: 8px;
    background: #0436b4;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, color .2s;
}


@media only screen and (max-width: 993px) {
    /* .congnghe__toggle's flex:0 0 180px was squeezing .congnghe__desc
       (flex:1) down to a ~140px sliver next to it in a row on narrow
       screens - stack them instead so the description gets the full
       width and the button sits on its own line under it. */
    .congnghe__content-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .congnghe__toggle {
        flex: 0 0 auto;
        align-self: flex-start;
    }
}


.congnghe__toggle:hover {
    background: #fff;
    color: #0436b4;
}

.congnghe__toggle-icon {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}

.congnghe__toggle.is-open .congnghe__toggle-icon {
    transform: rotate(-135deg);
}

.congnghe__bullets {
    display: none;
}

.congnghe__bullets.is-open {
    display: block;
}

.congnghe__bullet-group {
    margin-bottom: 20px;
}

.congnghe__bullet-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0436b4;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.congnghe__bullet-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0436b4;
}

.congnghe__bullet-group ul {
    margin: 0;
    padding-left: 18px;
}

.congnghe__bullet-group li {
    color: #1a2b5c;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 4px;
}

/* ---- Đội ngũ bác sĩ: left tab list + right detail pane ---- */
.section__doctor-team {
    padding: 60px 0;
}

.doctorteam__heading {
    text-align: center;
    margin-bottom: 40px;
}

.doctorteam__heading h2 {
    color: #0436b4;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.doctorteam__heading p {
    color: #222;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    opacity: .9;
}

.doctorteam__layout {
    display: flex;
    align-items: center;
    gap: 30px;
}

.doctorteam__tabs {
    list-style: none;
    flex: 0 0 460px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doctorteam__tab {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 16px 16px 0 0;
    border-radius: 10px;
    background: #fff;
    color: #1a2b5c;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.doctorteam__tab.current {
    background: #0436b4;
    color: #fff;
}

/* Full-height photo column (design/tknew.png) - NOT a small corner
   thumbnail, so no fixed width/height here; it stretches to match
   whatever height the info column's text ends up needing. */
.doctorteam__tab-thumb {
    flex: 0 0 36%;
    border-radius: 8px;
    overflow: hidden;
}

.doctorteam__tab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doctorteam__tab-info {
    flex: 1;
    min-width: 0;
}

.doctorteam__tab-info span {
    display: block;
    font-size: 12px;
    color: inherit;
    opacity: .8;
}

.doctorteam__tab-info strong {
    display: inline-block;
    font-size: 15px;
    text-transform: uppercase;
    color: inherit;
    margin: 2px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid currentColor;
}

.doctorteam__tab-info p {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    opacity: .85;
}

.doctorteam__panes-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Straddle the pane's left/right edge (half in, half out) instead of
   sitting outside it with a gap - centered on the edge via translate. */
.doctorteam__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.doctorteam__arrow--prev {
    left: 0;
    transform: translate(-50%, -50%);
}

.doctorteam__arrow--next {
    right: 0;
    transform: translate(50%, -50%);
}

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

.doctorteam__arrow--prev img {
    transform: scaleX(-1);
}

.doctorteam__panes {
    width: 100%;
    position: relative;
}

.doctorteam__pane {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(4, 54, 180, .15);
}

/* Beats style.css's generic ".tab__content__tab.active__ck{display:block}"
   (equal specificity, later stylesheet) so the active pane lays out as a
   photo+detail row instead of a plain block. */
.doctorteam__pane.active__ck {
    display: flex;
}

/* Corner accent: 3 diagonal ribbons flush with the pane's own top-right
   corner (design/tknew.png) - not inset/floating, so the lightest strip's
   corner touches both the top and right edges with no gap. Kept as a
   real element (not .doctorteam__pane::after) sized to sit fully within
   the pane's own box, matching its border-radius. */
.doctorteam__ribbon-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 100px;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
    border-top-right-radius: 16px;
}

/* Stripe thickness/gap measured off the native-resolution design
   (design/tknew.png, doctor-panel corner) - stripes and the white gaps
   between them are roughly equal width, not tightly packed. */
.doctorteam__ribbon-accent span {
    position: absolute;
    top: -18px;
    width: 15px;
    height: 200px;
    transform: rotate(-45deg);
    transform-origin: top right;
}

.doctorteam__ribbon-accent span:nth-child(1) {
    right: 78px;
    background: #5b6bc4;
}

.doctorteam__ribbon-accent span:nth-child(2) {
    right: 52px;
    background: #8b98d9;
}

.doctorteam__ribbon-accent span:nth-child(3) {
    right: 26px;
    background: #d8dcf3;
}

.doctorteam__photo {
    flex: 0 0 42%;
}

.doctorteam__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doctorteam__detail {
    flex: 1;
    min-width: 0;
    padding: 40px;
    position: relative;
    z-index: 1;
}

.doctorteam__detail h3 {
    color: #0436b4;
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.doctorteam__achievements {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.doctorteam__achievements li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #1a2b5c;
}

.doctorteam__achievements li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0436b4;
}

.doctorteam__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.doctorteam__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.doctorteam__btn--outline {
    background: #fff;
    color: #0436b4;
    border: 1px solid #0436b4;
}

.doctorteam__btn--fill {
    background: #0436b4;
    color: #fff;
    border: 1px solid #0436b4;
}

/* ---- Cam kết: centered heading + wrapping icon-card grid ---- */
.section__camket {
    padding: 60px 0 80px;
}

.camket__heading {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

/* font-size/weight matched to congnghe__heading p / doctorteam__heading
   h2 (32px/800) and their small companion line (17px/700) - all three
   section titles now share the same type scale. */
.camket__heading h2 {
    color: #0436b4;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.camket__subtitle {
    color: #222;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.camket__divider {
    display: block;
    width: 70px;
    height: 3px;
    background: #0436b4;
    margin: 0 auto 18px;
}

.camket__desc {
    color: #222;
    opacity: .9;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.camket__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.camket__item {
    flex: 0 1 300px;
    position: relative;
    padding-top: 36px;
}

.camket__icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
    z-index: 2;
}

.camket__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.camket__card {
    background: #06359e;
    border-radius: 16px;
    padding: 50px 24px 24px;
    min-height: 170px;
}

.camket__card h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px;
    text-align: center;
}

.camket__card p {
    color: #fff;
    opacity: .9;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

@media only screen and (max-width: 993px) {
    .congnghe__gallery {
        flex-direction: column;
        height: auto;
    }

    .congnghe__gallery-main {
        flex: none;
        width: 100%;
        height: 320px;
    }

    .congnghe__gallery-thumbs {
        flex: none;
        width: 100%;
        height: 90px;
    }

    .congnghe__panel {
        padding: 24px;
    }

    .doctorteam__layout {
        flex-direction: column;
    }

    /* Photo/detail pane reads before the doctor-picker list on mobile
       (order only changes paint order, not DOM/tab order). Arrows stay
       straddling the pane's left/right edges exactly like desktop -
       only the layout direction changed, not the arrow axis. */
    .doctorteam__panes-wrap {
        order: -1;
    }

    .doctorteam__tabs {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    /* ~1.5 tabs visible at a time - a deliberate partial peek of the next
       card as a scroll affordance, rather than a clean 1-per-screen or
       2-per-screen fit. */
    .doctorteam__tab {
        flex: 0 0 70%;
        scroll-snap-align: start;
    }


    .doctorteam__pane.active__ck {
        flex-direction: column;
    }

    .doctorteam__photo {
        flex-basis: auto;
        height: 320px;
    }

    .doctorteam__detail {
        padding: 26px;
    }

    /* contact-menu (fb/tiktok/youtube + mobile-only hotline -
       functions.php's flatsome_child_contact_menu_markup()) is fixed at
       top:205px/right:10px at every breakpoint by default, which
       permanently covers page content under it on narrow screens where
       there's no spare margin on the right. Below 993px it becomes a
       full-width centered bottom bar instead. #whole-sale's "Yêu cầu gọi
       lại" pill (a separate fixed element - functions.php echoes it via
       wp_footer, contact-menu via flatsome_before_page, so they're not
       DOM siblings) is hidden here in favor of the hotline icon taking
       its place in this same bar - a direct tel: call is one tap instead
       of opening the callback-request popup. Text labels (Facebook/
       TikTok/Youtube words, and the "Hotline" text link next to its icon)
       are dropped at this size to keep 4 icons compact in one row - the
       icons are recognizable without them. */
    contact-menu {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .15);
    }

    contact-menu ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 6px 12px;
    }

    contact-menu ul li {
        padding: 0;
    }

    contact-menu ul li a.image-contact {
        height: 30px;
    }

    contact-menu ul li a img {
        width: 30px;
    }

    contact-menu ul li a:not(.image-contact) {
        display: none;
    }

    .contact-menu__hotline {
        display: block;
    }

    #whole-sale {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .congnghe__heading h2,
    .doctorteam__heading h2 {
        font-size: 24px;
    }

    .congnghe__tabs li {
        flex: 1 1 auto;
        font-size: 12px;
        padding: 10px 12px;
    }

    .camket__item {
        flex-basis: 100%;
        max-width: 340px;
    }
}

/* .item__video a.video-lightbox-trigger: re-targets style.css's
   ".item__video a.open-video" resets (background:none, padding:0,
   display:block, position:relative + the bottom gradient ::after) at the
   new trigger class. Without this, the anchor falls back to Flatsome
   core's ".button" defaults (solid fill from this site's
   --fs-color-primary, #62be1b green, plus padding/border) showing as a
   green frame around every video card - see flatsome_child_home_video_
   item()'s doc comment. */
.item__video a.video-lightbox-trigger {
    display: block;
    position: relative;
    background: none;
    padding: 0;
    border: 0;
}

.item__video a.video-lightbox-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* ===== video-lightbox (template-parts/home/home-content.php's
   flatsome_child_home_video_lightbox_markup(), opened by
   assets/js/home-tabs.js's ".video-lightbox-trigger" handler) - same
   fixed-overlay/.is-visible toggle convention as .cd-popup/.cd-popup2 in
   style.css, sized for a 16:9 iframe instead of a small form card. ===== */
.video-lightbox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgb(0 0 0 / 85%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s 0s, visibility 0s .3s;
    z-index: 9999999999;
}

.video-lightbox.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s 0s, visibility 0s 0s;
}

.video-lightbox__inner {
    position: relative;
    width: 100%;
    max-width: 900px;
}

.video-lightbox__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-lightbox__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1a2b5c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* #whole-sale (template-parts/home/home-content.php's flatsome_child_
   global_whole_sale_markup()) no longer has its doctor photo - style.css's
   "padding-left: 58px" / right-only border-radius on .box__tel existed
   only to leave room for that absolutely-positioned photo poking out the
   left edge. Without it, go back to a plain fully-rounded pill. */
#whole-sale .box__tel {
    padding-left: 20px;
    border-radius: 30px;
}

/* footer-1/footer-2 (parent Flatsome markup) background images
   (img/hea.webp, img/bbb.webp) were removed from the theme - style.css's
   "background: url(...) !important" now 404s, leaving no background at
   all. Flat brand blue placeholder in the meantime. */
.footer-1,
.footer-2 {
    background: #0436b4 !important;
}

/* ===== "Khách hàng thực tế" results carousel (.list__ha__cus, template-
   parts/home/home-content.php's flatsome_child_home_gallery_result_slide())
   - matching the client's reference design: 3 cards where the active one
   is bigger and sits ON TOP of (overlapping) its two neighbors, not just
   side-by-side with a peek at the edges. Base card look (.result__images/
   etc.) stays defined in style.css; these rules override the card's own
   background/text color (blue card, white text per the reference) and add
   the active-slide scale/elevation on top of that. The overlap itself
   comes from a NEGATIVE spaceBetween in assets/js/home-sliders.js's Swiper
   config - z-index here makes sure the active (scaled-up) card paints
   over the neighbors it now overlaps, not under them. */
.list__ha__cus .swiper-slide {
    position: relative;
    z-index: 1;
    height: auto;
    opacity: .6;
    transform: scale(.82);
    transition: transform .4s ease, opacity .4s ease, z-index .4s;
}

.list__ha__cus .swiper-slide-active {
    z-index: 3;
    opacity: 1;
    transform: scale(1.06);
}

.list__ha__cus .swiper-wrapper {
    align-items: center;
}

.result__item {
    background: #0436b4;
    transition: box-shadow .4s ease;
}

.swiper-slide-active .result__item {
    box-shadow: 0 24px 48px rgba(4, 54, 180, .35);
}

.result__label {
    background: #0436b4;
    color: #fff;
    font-size: 13px;
    letter-spacing: .5px;
}

.result__image-col:first-child .result__label {
    border-right: 1px solid rgba(255, 255, 255, .35);
}

.result__name {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.result__service {
    color: rgba(255, 255, 255, .8);
}

@media only screen and (max-width: 575px) {
    /* Full scale would leave almost nothing of the neighbor slides
       peeking in at phone widths, so tone the effect down a bit there. */
    .list__ha__cus .swiper-slide {
        opacity: .7;
        transform: scale(.9);
    }

    .list__ha__cus .swiper-slide-active {
        transform: scale(1.02);
    }
}

@media only screen and (max-width: 849px) {
    .header-top {
        display: none !important;
    }
}

/* ===== .site-topbar (functions.php's flatsome_child_site_topbar_markup(),
   hooked to flatsome_before_header) - see the doc-comment there for why
   this exists as its own thing instead of using Flatsome's native Top Bar
   (Customizer). Desktop-only; mobile already has the phone number in its
   own header row plus the hotline/social icons in the bottom bar (see
   contact-menu's mobile rules above). ===== */
.site-topbar {
    background: linear-gradient(90deg, #0436b4 0%, #062c78 100%);
    color: #fff;
    font-size: 13px;
}

.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
}

.site-topbar__hotline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    transition: opacity .2s;
}

.site-topbar__hotline:hover {
    color: #fff;
    opacity: .8;
}

.site-topbar__hotline svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.site-topbar__info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .85);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-topbar__sep {
    opacity: .5;
}

.site-topbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.site-topbar__social img {
    width: 20px;
    height: 20px;
    display: block;
}

@media only screen and (max-width: 1200px) {
    .site-topbar__info {
        display: none;
    }
}

@media only screen and (max-width: 993px) {
    .site-topbar {
        display: none;
    }
}

/* ===== Mega-menu column styling for any 3-level menu item.
   inc/structure/structure-header.php's FlatsomeNavDropdown walker (parent
   theme) already auto-detects a real 3rd level and lays it out as a
   column grid with ZERO extra markup/config needed: any 2nd-level item
   with children gets a "nav-dropdown-col" class (displayed as
   display:table-cell, one column per item - see flatsome.css), and its
   own sub-menu gets "nav-column" instead of "nav-dropdown" (which is the
   flyout class), so 3rd-level items render as a plain in-column list
   instead of flying out sideways. So the layout was never the problem -
   only the color/weight was: Flatsome's own default for "nav-dropdown-col"
   is black/bold/uppercase, and its default .nav-dropdown-default border-
   bottom separator applies to every item indiscriminately (2nd AND 3rd
   level alike), which is what made everything look the same weight in an
   earlier attempt at this that used a wrong selector
   (".nav-dropdown .nav-dropdown", which never matches - the real 3rd-level
   class is ".nav-column") and fought Flatsome's own table-cell layout with
   a competing flexbox one. This version only touches color/weight,
   directly on Flatsome's real classes. */
.nav-dropdown .nav-dropdown-col > a {
    color: #0436b4 !important;
    font-weight: 700;
}

.nav-dropdown-default .nav-column li > a {
    color: #555 !important;
    font-weight: 400;
    text-transform: none;
    border-bottom: 0 !important;
}

.nav-dropdown-default .nav-column li > a:hover {
    color: #0436b4 !important;
}

/* Full-width, viewport-centered dropdown for any item with a real mega
   level (".has-mega-dropdown", added by functions.php's wp_nav_menu_objects
   filter). Same recipe as Flatsome's own ".nav-dropdown-full" (flatsome.
   css) - position:fixed + left:50%/translateX(-50%) centers it on the
   viewport rather than anchoring to the trigger item, so a 5-6 column
   mega menu is never cramped or forced off-screen regardless of where in
   the nav its trigger sits. Applied unconditionally here rather than
   relying on flatsome.js's own width-overflow heuristic that adds
   .nav-dropdown-full automatically - that heuristic only fires once
   content is ALREADY too wide for its shrink-to-fit box, which a 2-3
   column mega menu usually isn't, so it stayed cramped instead. */
@media only screen and (min-width: 994px) {
    li.has-mega-dropdown.current-dropdown > .nav-dropdown,
    li.has-mega-dropdown.has-dropdown:hover > .nav-dropdown {
        display: flex !important;
        flex-wrap: wrap;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 1150px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .has-mega-dropdown > .nav-dropdown > li.nav-dropdown-col {
        white-space: normal;
        flex: 1 1 0;
    }
}