/* =============================================================
   CONGTHONGTIN - PUBLIC WEBSITE
   CSS dùng chung cho toàn bộ website Tân Tiến Thành
   ============================================================= */

:root {
    --ttt-orange: #F26A3D;
    --ttt-orange-dark: #DF5429;
    --ttt-orange-deep: #C94420;
    --ttt-orange-soft: #FF9A6A;
    --ttt-cream: #FFF8F4;
    --ttt-cream-2: #F9EEE8;
    --ttt-text: #2D2927;
    --ttt-muted: #716965;
    --ttt-footer: #292523;
    --ttt-footer-soft: #342F2C;
    --ttt-border: rgba(45, 41, 39, .08);
    --ttt-shadow: 0 14px 38px rgba(64, 42, 32, .08);
    --ttt-radius: 20px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ttt-text);
    background: #fff;
}

img {
    max-width: 100%;
}

.body-content {
    min-height: 55vh;
}


/* =============================================================
   NAVBAR
   ============================================================= */

.ttt-navbar {
    background: linear-gradient(
        90deg,
        #E8491E 0%,
        #F06F48 100%
    );
    box-shadow: 0 5px 22px rgba(117,39,16,.16);
}

.ttt-navbar .container-fluid {
    max-width: 1600px;
}

.ttt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    text-decoration: none;
}

.ttt-brand-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}

.ttt-brand-text {
    line-height: 1.15;
    color: #fff;
}

.ttt-brand-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.ttt-brand-slogan {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    opacity: .88;
    white-space: nowrap;
}

.navbar-toggler {
    border-color: rgba(255,255,255,.35);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    filter: invert(1);
}

.ttt-navbar .nav-link {
    color: rgba(255,255,255,.92) !important;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.2;
    border-radius: 9px;
    padding: 10px 8px !important;
    white-space: nowrap;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.ttt-navbar .nav-link:hover,
.ttt-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.15);
}

.ttt-navbar .nav-link:hover {
    transform: translateY(-1px);
}


/* =============================================================
   THI THỬ
   Chỉ style nút. Không liên quan logic ThiThu.
   ============================================================= */

.ttt-navbar .nav-link-thithu {
    background: #fff !important;
    color: var(--ttt-orange-dark) !important;
    margin-left: 5px;
    padding-left: 13px !important;
    padding-right: 13px !important;
    box-shadow: 0 5px 16px rgba(80,23,7,.16);
}

.ttt-navbar .nav-link-thithu:hover,
.ttt-navbar .nav-link-thithu.active {
    background: #FFF6F1 !important;
    color: #BF3914 !important;
}


/* =============================================================
   PAGE BANNER - dùng chung cho trang con
   ============================================================= */

.page-banner {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
}

.page-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.43);
}

.page-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
}

.page-banner-content h1 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 42px;
    font-weight: 800;
}

.page-banner-content p {
    max-width: 780px;
    margin: 0 auto;
    color: rgba(255,255,255,.94);
    font-size: 17px;
    line-height: 1.7;
}


/* =============================================================
   SECTION
   ============================================================= */

.public-section,
.section-padding {
    padding: 70px 0;
}

.section-soft {
    background: var(--ttt-light);
}

.section-title {
    margin-bottom: 38px;
}

.section-title .line {
    width: 70px;
    height: 3px;
    margin: 16px auto 22px;
    background: var(--ttt-orange);
}

.section-subtitle {
    max-width: 780px;
    margin: 0 auto;
    color: var(--ttt-muted);
    line-height: 1.75;
}


/* =============================================================
   BUTTON
   ============================================================= */

.btn-ttt {
    padding: 10px 20px;
    color: #fff;
    background: var(--ttt-orange);
    border-color: var(--ttt-orange);
    border-radius: 10px;
    font-weight: 700;
    transition: all .2s ease;
}

.btn-ttt:hover,
.btn-ttt:focus {
    color: #fff;
    background: var(--ttt-orange-dark);
    border-color: var(--ttt-orange-dark);
    transform: translateY(-1px);
}


/* =============================================================
   CARD CHUNG
   ============================================================= */

.portal-card,
.teacher-card,
.news-card,
.honor-card,
.related-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ttt-border);
    border-radius: var(--ttt-radius);
    overflow: hidden;
    box-shadow: var(--ttt-shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.portal-card:hover,
.teacher-card:hover,
.news-card:hover,
.honor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.portal-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.portal-card-link:hover,
.portal-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.portal-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.portal-card-body {
    padding: 22px;
}

.portal-card-title {
    margin-bottom: 10px;
    color: var(--ttt-text);
    font-weight: 700;
}

.portal-card-text {
    color: var(--ttt-muted);
    line-height: 1.65;
}

.portal-card-text img,
.article-content img,
.teacher-richtext img,
.honor-content img,
.contact-richtext img,
.program-content img,
.about-section-content img,
.about-content img {
    max-width: 100%;
    height: auto;
}


/* =============================================================
   GIẢNG VIÊN
   ============================================================= */

.teacher-image {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    object-fit: cover;
    display: block;
}

.teacher-body {
    padding: 22px;
    text-align: center;
}

.teacher-name {
    margin-bottom: 6px;
    color: var(--ttt-text);
    font-size: 21px;
    font-weight: 700;
}

.teacher-degree,
.teacher-meta {
    margin-bottom: 5px;
    color: var(--ttt-orange-dark);
    font-size: 14px;
    font-weight: 700;
}

.teacher-specialty {
    margin-bottom: 12px;
    color: #777;
    font-size: 14px;
}

.teacher-description {
    color: var(--ttt-muted);
    line-height: 1.6;
}


/* =============================================================
   TIN TỨC
   ============================================================= */

.news-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.news-body {
    padding: 22px;
}

.news-type,
.article-type {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 30px;
    background: #FFF0E9;
    color: var(--ttt-orange-dark);
    font-size: 12px;
    font-weight: 700;
}

.news-date {
    margin: 8px 0;
    color: #999;
    font-size: 13px;
}

.news-title {
    color: var(--ttt-text);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
}

.news-summary {
    color: var(--ttt-muted);
    line-height: 1.65;
}

.news-more,
.back-link,
.btn-back {
    color: var(--ttt-orange-dark);
    text-decoration: none;
    font-weight: 700;
}

.news-more:hover,
.back-link:hover,
.btn-back:hover {
    color: var(--ttt-orange);
}


/* =============================================================
   VINH DANH
   ============================================================= */

.honor-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.honor-body {
    padding: 22px;
    text-align: center;
}

.honor-name {
    color: var(--ttt-text);
    font-weight: 700;
}

.honor-meta {
    color: #888;
    font-size: 14px;
}

.honor-achievement {
    color: #555;
    line-height: 1.65;
}


/* =============================================================
   ALBUM / GALLERY
   ============================================================= */

.album-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--ttt-radius);
    background: #222;
    box-shadow: var(--ttt-shadow);
}

.album-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.album-card:hover .album-image {
    transform: scale(1.05);
}

.album-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 70px 22px 20px;
    color: #fff;
    background: linear-gradient(
        0deg,
        rgba(0,0,0,.82),
        rgba(0,0,0,0)
    );
}

.album-overlay h5,
.album-title {
    color: #fff;
    font-weight: 700;
}

.album-link {
    color: inherit;
    text-decoration: none;
}

.gallery-item,
.about-gallery-item,
.program-gallery-item {
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.gallery-item img,
.about-gallery-item img,
.program-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.gallery-item:hover img,
.about-gallery-item:hover img,
.program-gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-caption,
.about-gallery-caption,
.program-gallery-caption {
    padding: 12px 15px;
    color: #666;
    background: #fff;
    font-size: 14px;
}


/* =============================================================
   RICH CONTENT / DETAIL
   ============================================================= */

.article-section,
.teacher-detail,
.honor-detail {
    padding: 65px 0;
}

.article-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.article-title,
.teacher-detail-name {
    color: var(--ttt-text);
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
}

.article-content,
.teacher-richtext,
.honor-content,
.program-content,
.about-section-content,
.about-content,
.contact-richtext {
    color: #4f4f4f;
    font-size: 17px;
    line-height: 1.8;
}

.article-summary,
.honor-achievement {
    padding: 20px 24px;
    background: var(--ttt-light);
    border-left: 4px solid var(--ttt-orange);
    border-radius: 10px;
}

.article-image,
.teacher-detail-image,
.honor-detail-image,
.program-main-image,
.about-main-image {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
}

.related-section {
    padding: 55px 0 70px;
    background: var(--ttt-light);
}


/* =============================================================
   FILTER / PAGINATION
   ============================================================= */

.news-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}

.news-filter a {
    padding: 9px 16px;
    color: #555;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
}

.news-filter a.active,
.news-filter a:hover {
    color: #fff;
    background: var(--ttt-orange);
    border-color: var(--ttt-orange);
}

.pagination .page-link {
    color: var(--ttt-orange-dark);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--ttt-orange);
    border-color: var(--ttt-orange);
}


/* =============================================================
   CONTACT
   ============================================================= */

.contact-card {
    height: 100%;
    padding: 28px;
    background: #fff;
    border-radius: var(--ttt-radius);
    box-shadow: var(--ttt-shadow);
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: var(--ttt-orange-dark);
    background: #FFF0E9;
    border-radius: 50%;
    font-size: 22px;
}


/* =============================================================
   FOOTER
   ============================================================= */

.ttt-footer {
    margin-top: 0;
    color: #fff;
    background: linear-gradient(
        135deg,
        #D94118 0%,
        #F06F48 100%
    );
}

.ttt-footer-top {
    padding: 55px 0 40px;
}

.ttt-footer-title {
    margin-bottom: 18px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.ttt-footer-text,
.ttt-footer a {
    color: rgba(255,255,255,.92);
}

.ttt-footer a {
    text-decoration: none;
}

.ttt-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.ttt-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ttt-footer-contact li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 11px;
    line-height: 1.55;
}

.ttt-footer-contact i {
    margin-top: 3px;
    font-size: 17px;
}

.ttt-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.ttt-footer-social a {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    font-size: 19px;
}

.ttt-footer-social a:hover {
    background: rgba(255,255,255,.25);
    text-decoration: none;
}

.ttt-facility-image {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    margin-top: 12px;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 13px;
}

.ttt-footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: 13px;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1399.98px) {
    .ttt-brand-name {
        font-size: 14px;
    }

    .ttt-brand-slogan {
        display: none;
    }

    .ttt-navbar .nav-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 11px;
    }
}

@media (max-width: 1199.98px) {
    .ttt-brand-slogan {
        display: block;
    }

    .ttt-navbar .navbar-collapse {
        padding: 15px 0 10px;
    }

    .ttt-navbar .nav-link {
        padding: 10px 12px !important;
        font-size: 13px;
    }

    .ttt-navbar .nav-link-thithu {
        display: inline-flex;
        margin-top: 7px;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .page-banner {
        min-height: 240px;
    }

    .page-banner-content h1 {
        font-size: 32px;
    }

    .public-section,
    .section-padding,
    .article-section,
    .teacher-detail,
    .honor-detail {
        padding: 45px 0;
    }

    .article-title,
    .teacher-detail-name {
        font-size: 31px;
    }
}

@media (max-width: 575.98px) {
    .ttt-brand {
        min-width: 0;
    }

    .ttt-brand-logo {
        width: 46px;
        height: 46px;
    }

    .ttt-brand-name {
        max-width: 210px;
        white-space: normal;
        font-size: 12px;
    }

    .ttt-brand-slogan {
        display: none;
    }
}

/* =============================================================
   HOME - HERO / ABOUT / TEAM
   ============================================================= */

#hero .carousel-item {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

#hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#hero .carousel-inner .carousel-item:nth-child(1) img {
    object-position: center 30%;
}

#hero .carousel-inner .carousel-item:nth-child(2) img {
    object-position: center;
}

#hero .carousel-inner .carousel-item:nth-child(3) img {
    object-position: center 70%;
}

#hero .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    pointer-events: none;
}

#hero .carousel-control-prev-icon,
#hero .carousel-control-next-icon {
    filter: invert(1);
    background-color: rgba(0,0,0,.28);
    border-radius: 50%;
    padding: 12px;
}

.about-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,.10);
}

.team-member {
    height: 100%;
}

.team-member .image-zoom-wrapper {
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    border-radius: 12px;
}

.team-member .image-zoom-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.honor-card .portal-card-image {
    aspect-ratio: 1 / 1;
}

.album-card .portal-card-image {
    aspect-ratio: 4 / 3;
}


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

.about-section {
    padding: 70px 0;
}

.about-section:nth-of-type(even) {
    background: var(--ttt-light);
}

.about-section-title {
    margin-bottom: 18px;
    color: var(--ttt-text);
    font-weight: 700;
}

.about-gallery {
    margin-top: 35px;
}


/* =============================================================
   CHƯƠNG TRÌNH
   ============================================================= */

.program-section {
    padding: 70px 0;
}

.program-section:nth-of-type(even) {
    background: var(--ttt-light);
}

.program-card {
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--ttt-shadow);
}

.program-title {
    margin-bottom: 18px;
    color: var(--ttt-text);
    font-weight: 700;
}

.program-gallery {
    margin-top: 30px;
}


/* =============================================================
   GIẢNG VIÊN - CHI TIẾT
   ============================================================= */

.teacher-detail-degree {
    margin-bottom: 8px;
    color: var(--ttt-orange-dark);
    font-size: 17px;
    font-weight: 700;
}

.teacher-detail-specialty {
    margin-bottom: 22px;
    color: #777;
}

.teacher-box {
    margin-top: 25px;
    padding: 28px;
    background: var(--ttt-light);
    border-radius: 16px;
}

.teacher-box h3 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 700;
}


/* =============================================================
   TIN TỨC
   ============================================================= */

.news-section {
    padding: 70px 0;
}

.article-date {
    margin-bottom: 25px;
    color: #999;
}

.article-summary {
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.7;
}

.article-image {
    margin-bottom: 32px;
}

.article-content iframe {
    max-width: 100%;
}

.related-body {
    padding: 18px;
}

.related-title {
    color: var(--ttt-text);
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
}

.related-link {
    text-decoration: none;
}


/* =============================================================
   VINH DANH
   ============================================================= */

.honor-section {
    padding: 70px 0;
    background: var(--ttt-light);
}

.honor-detail .honor-name {
    margin-bottom: 10px;
    font-size: 38px;
}

.honor-detail .honor-meta {
    margin-bottom: 22px;
}

.honor-detail .honor-achievement {
    margin-bottom: 28px;
    font-size: 17px;
}


/* =============================================================
   ALBUM / HÌNH ẢNH
   ============================================================= */

.album-section {
    padding: 70px 0;
}

.album-count {
    font-size: 13px;
    opacity: .9;
}

.album-header {
    padding: 55px 0 35px;
    background: var(--ttt-light);
}

.album-header .album-title {
    color: var(--ttt-text);
    font-size: 38px;
}

.album-description {
    max-width: 820px;
    color: #666;
    line-height: 1.7;
}

.gallery-section {
    padding: 45px 0 70px;
}


/* =============================================================
   LIÊN HỆ
   ============================================================= */

.contact-section {
    padding: 70px 0;
}

.contact-card h3 {
    color: var(--ttt-text);
    font-size: 18px;
    font-weight: 700;
}

.contact-card a {
    color: #555;
    text-decoration: none;
}

.contact-card a:hover {
    color: var(--ttt-orange-dark);
}

.contact-content {
    padding: 55px 0;
    background: var(--ttt-light);
}


/* =============================================================
   RESPONSIVE BỔ SUNG
   ============================================================= */

@media (max-width: 992px) {
    #hero .carousel-item {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .about-section,
    .program-section,
    .news-section,
    .honor-section,
    .album-section,
    .contact-section {
        padding: 45px 0;
    }

    .honor-detail .honor-name,
    .album-header .album-title {
        font-size: 31px;
    }
}

@media (max-width: 576px) {
    #hero .carousel-item {
        aspect-ratio: 4 / 5;
        max-height: 100svh;
    }

    #hero .carousel-control-prev,
    #hero .carousel-control-next {
        width: 18%;
    }
}

@supports not (aspect-ratio: 1 / 1) {
    #hero .carousel-item {
        height: clamp(44vh, 60vw, 70vh);
    }

    @media (max-width: 992px) {
        #hero .carousel-item {
            height: 52vh;
        }
    }

    @media (max-width: 576px) {
        #hero .carousel-item {
            height: 60vh;
        }
    }
}
/* =============================================================
   UI REFRESH 2026
   Các rule cuối file có chủ ý để ghi đè style cũ của website.
   ============================================================= */

body {
    color: var(--ttt-text);
    background: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.body-content {
    min-height: 60vh;
    overflow: hidden;
}


/* -------------------- HEADER -------------------- */

.ttt-navbar {
    padding: 9px 0 !important;
    background:
        linear-gradient(
            102deg,
            #DE4D24 0%,
            #F26338 56%,
            #F47749 100%
        ) !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 28px rgba(73, 32, 18, .14) !important;
}

.ttt-navbar .container-fluid {
    max-width: 1740px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.ttt-brand {
    min-width: 330px !important;
    gap: 14px !important;
    margin-right: 24px !important;
}

.ttt-brand-logo {
    width: 72px !important;
    height: 72px !important;
    padding: 5px;
    object-fit: contain;
    border: 3px solid rgba(255,255,255,.85);
    background: #fff;
    box-shadow: 0 7px 22px rgba(96, 36, 16, .18);
}

.ttt-brand-text {
    line-height: 1.05 !important;
}

.ttt-brand-name {
    color: #fff;
    font-size: 27px !important;
    font-weight: 800 !important;
    letter-spacing: -.35px;
    text-transform: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.08);
}

.ttt-brand-slogan {
    display: block !important;
    margin-top: 7px !important;
    color: rgba(255,255,255,.93);
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: .05px;
}

.ttt-navbar .nav-link {
    position: relative;
    padding: 11px 10px !important;
    color: rgba(255,255,255,.94) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .15px;
    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease !important;
}

.ttt-navbar .nav-link:hover,
.ttt-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.15) !important;
    transform: translateY(-1px);
}

.ttt-navbar .nav-link.active:not(.nav-link-thithu)::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 10px;
    background: rgba(255,255,255,.9);
}

.ttt-navbar .nav-link-thithu {
    margin-left: 8px !important;
    padding: 11px 17px !important;
    color: var(--ttt-orange-dark) !important;
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(87, 30, 11, .16) !important;
}

.ttt-navbar .nav-link-thithu:hover,
.ttt-navbar .nav-link-thithu.active {
    color: var(--ttt-orange-deep) !important;
    background: #FFF5F0 !important;
    transform: translateY(-2px);
}


/* -------------------- HERO -------------------- */

#hero {
    background: #eee8e4;
}

#hero .carousel-item {
    height: clamp(330px, 34vw, 520px) !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}

#hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center !important;
}

#hero .carousel-item::after {
    background:
        linear-gradient(
            180deg,
            rgba(25,20,18,.03) 0%,
            rgba(25,20,18,.12) 100%
        ) !important;
}

#hero .carousel-control-prev,
#hero .carousel-control-next {
    width: 8%;
}

#hero .carousel-control-prev-icon,
#hero .carousel-control-next-icon {
    width: 42px;
    height: 42px;
    padding: 8px !important;
    background-size: 52% 52%;
    background-color: rgba(34,29,27,.36) !important;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 5px 15px rgba(0,0,0,.14);
}


/* -------------------- SECTIONS -------------------- */

.section-padding,
.public-section {
    padding: 82px 0 !important;
}

.section-soft {
    background:
        linear-gradient(
            180deg,
            #FFF9F6 0%,
            #FFF4EE 100%
        ) !important;
}

.section-title {
    margin-bottom: 42px !important;
}

.section-title h1,
.section-title h2 {
    color: var(--ttt-text) !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
}

.section-title .line {
    width: 72px !important;
    height: 4px !important;
    margin: 16px auto 20px !important;
    border-radius: 99px;
    background:
        linear-gradient(
            90deg,
            var(--ttt-orange-dark),
            var(--ttt-orange-soft)
        ) !important;
}

.section-subtitle {
    max-width: 820px !important;
    color: var(--ttt-muted) !important;
    font-size: 16px;
    line-height: 1.8 !important;
}

.about-image,
.program-main-image,
.article-image,
.teacher-detail-image,
.honor-detail-image {
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(56,40,32,.11) !important;
}

.about-content,
.program-content,
.article-content,
.teacher-richtext,
.honor-content,
.contact-richtext {
    color: #554F4B !important;
    line-height: 1.86 !important;
}


/* -------------------- CARDS -------------------- */

.portal-card,
.teacher-card,
.news-card,
.honor-card,
.related-card {
    border: 1px solid rgba(54,44,39,.065) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 14px 38px rgba(55,38,30,.075) !important;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

.portal-card:hover,
.teacher-card:hover,
.news-card:hover,
.honor-card:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(242,106,61,.20) !important;
    box-shadow: 0 22px 48px rgba(55,38,30,.12) !important;
}

.portal-card-image,
.news-image,
.teacher-image,
.honor-image {
    transition: transform .38s ease;
}

.portal-card:hover .portal-card-image,
.news-card:hover .news-image,
.teacher-card:hover .teacher-image,
.honor-card:hover .honor-image {
    transform: scale(1.025);
}

.portal-card-body,
.teacher-body,
.news-body,
.honor-body {
    padding: 24px !important;
}

.portal-card-title,
.teacher-name,
.news-title,
.honor-name {
    color: var(--ttt-text) !important;
}

.btn-ttt {
    padding: 11px 20px !important;
    color: #fff !important;
    background:
        linear-gradient(
            100deg,
            var(--ttt-orange-dark),
            var(--ttt-orange)
        ) !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(223,84,41,.18);
    font-weight: 700 !important;
}

.btn-ttt:hover,
.btn-ttt:focus {
    color: #fff !important;
    background:
        linear-gradient(
            100deg,
            var(--ttt-orange-deep),
            var(--ttt-orange-dark)
        ) !important;
    transform: translateY(-2px);
    box-shadow: 0 11px 22px rgba(201,68,32,.22);
}


/* -------------------- ALBUM / HOẠT ĐỘNG -------------------- */

.album-card {
    border-radius: 22px !important;
    box-shadow: 0 14px 38px rgba(55,38,30,.09) !important;
}

.album-overlay {
    padding: 72px 22px 20px !important;
    background:
        linear-gradient(
            0deg,
            rgba(28,24,22,.86) 0%,
            rgba(28,24,22,.12) 78%,
            transparent 100%
        ) !important;
}

.album-overlay h5 {
    font-size: 18px;
    line-height: 1.4;
}


/* -------------------- FOOTER -------------------- */

.ttt-footer {
    position: relative;
    color: rgba(255,255,255,.92) !important;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(242,106,61,.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #25211F 0%,
            #312B28 52%,
            #282321 100%
        ) !important;
}

.ttt-footer-accent {
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--ttt-orange-deep),
            var(--ttt-orange),
            #FFB084
        );
}

.ttt-footer-top {
    padding: 68px 0 54px !important;
}

.ttt-footer .container {
    max-width: 1220px;
}

.ttt-footer-panel {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background: rgba(255,255,255,.045);
    box-shadow: 0 16px 36px rgba(0,0,0,.09);
    backdrop-filter: blur(4px);
}

.ttt-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ttt-footer-logo {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    object-fit: contain;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
}

.ttt-footer-brand-name {
    margin: 0 0 4px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.ttt-footer-brand-slogan {
    color: #F9B498;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.ttt-footer-intro {
    margin: 0 0 24px;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.8;
}

.ttt-footer-contact {
    display: grid;
    gap: 15px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ttt-footer-contact li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

.ttt-footer-contact-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    color: #FFB08B;
    border-radius: 11px;
    background: rgba(242,106,61,.14);
}

.ttt-footer-contact-icon i {
    margin: 0 !important;
    font-size: 18px !important;
}

.ttt-footer-label {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.ttt-footer a {
    color: rgba(255,255,255,.91) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.ttt-footer a:hover {
    color: #FFB08B !important;
}

.ttt-footer-social {
    display: flex !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

.ttt-footer-social a {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px !important;
    background: rgba(255,255,255,.07) !important;
    font-size: 18px !important;
}

.ttt-footer-social a:hover {
    color: #fff !important;
    background: var(--ttt-orange-dark) !important;
    transform: translateY(-2px);
}

.ttt-campus-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.ttt-campus-number {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    color: #fff;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--ttt-orange-dark),
            var(--ttt-orange)
        );
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    font-size: 17px;
    font-weight: 800;
}

.ttt-campus-kicker {
    margin-bottom: 2px;
    color: #F9B498;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.ttt-campus-heading h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.ttt-campus-address {
    min-height: 82px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.82) !important;
}

.ttt-campus-address i {
    margin-top: 4px;
    color: #FFB08B;
    font-size: 18px;
}

.ttt-facility-image {
    width: 100% !important;
    height: 190px !important;
    max-height: none !important;
    display: block !important;
    margin-top: 20px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.ttt-footer-bottom {
    padding: 20px 0 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(0,0,0,.13);
    font-size: 13px !important;
}

.ttt-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255,255,255,.62);
}

.ttt-footer-bottom-tagline {
    color: rgba(255,255,255,.78);
    font-weight: 600;
}


/* -------------------- AOS -------------------- */

[data-aos] {
    will-change: transform, opacity;
}


/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 1599.98px) {
    .ttt-brand {
        min-width: 290px !important;
    }

    .ttt-brand-logo {
        width: 64px !important;
        height: 64px !important;
    }

    .ttt-brand-name {
        font-size: 23px !important;
    }

    .ttt-brand-slogan {
        font-size: 12.5px !important;
    }

    .ttt-navbar .nav-link {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 1399.98px) {
    .ttt-navbar .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .ttt-brand {
        min-width: 0 !important;
    }

    .ttt-navbar .navbar-collapse {
        margin-top: 12px;
        padding: 14px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 16px;
        background: rgba(118,38,14,.12);
    }

    .ttt-navbar .nav-link {
        padding: 11px 13px !important;
        font-size: 13px !important;
    }

    .ttt-navbar .nav-link-thithu {
        display: inline-flex;
        margin-top: 6px !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 991.98px) {
    #hero .carousel-item {
        height: clamp(300px, 49vw, 460px) !important;
    }

    .section-padding,
    .public-section {
        padding: 64px 0 !important;
    }

    .ttt-footer-top {
        padding: 54px 0 42px !important;
    }
}

@media (max-width: 767.98px) {
    .ttt-navbar {
        padding: 7px 0 !important;
    }

    .ttt-brand-logo {
        width: 56px !important;
        height: 56px !important;
    }

    .ttt-brand-name {
        font-size: 20px !important;
    }

    .ttt-brand-slogan {
        font-size: 11.5px !important;
    }

    #hero .carousel-item {
        height: clamp(250px, 67vw, 390px) !important;
    }

    #hero .carousel-control-prev,
    #hero .carousel-control-next {
        width: 14%;
    }

    .section-padding,
    .public-section {
        padding: 54px 0 !important;
    }

    .section-title {
        margin-bottom: 34px !important;
    }

    .ttt-footer-panel {
        padding: 24px;
    }

    .ttt-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .ttt-navbar .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ttt-brand {
        gap: 10px !important;
        margin-right: 8px !important;
    }

    .ttt-brand-logo {
        width: 50px !important;
        height: 50px !important;
    }

    .ttt-brand-name {
        max-width: 190px;
        font-size: 17px !important;
        white-space: normal !important;
    }

    .ttt-brand-slogan {
        max-width: 190px;
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    #hero .carousel-item {
        height: 300px !important;
    }

    .section-padding,
    .public-section {
        padding: 48px 0 !important;
    }

    .ttt-facility-image {
        height: 175px !important;
    }
}
/* =============================================================
   UI REFRESH V2
   ============================================================= */


/* -------------------------------------------------------------
   HOME - hiệu ứng slide-in nhìn rõ nhưng không quá rối
   ------------------------------------------------------------- */

#about [data-aos],
#services [data-aos],
#team [data-aos],
#news [data-aos] {
    backface-visibility: hidden;
}

#about .section-title,
#services .section-title,
#team .section-title,
#news .section-title {
    position: relative;
}


/* -------------------------------------------------------------
   GIỚI THIỆU + CHƯƠNG TRÌNH
   Highlight các tiêu đề section như Sứ mệnh, Tầm nhìn,...
   ------------------------------------------------------------- */

.about-section-title,
.program-title {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 22px !important;
    padding: 11px 18px 11px 20px;
    color: var(--ttt-orange-deep) !important;
    border-left: 5px solid var(--ttt-orange);
    border-radius: 0 13px 13px 0;
    background:
        linear-gradient(
            90deg,
            rgba(242,106,61,.13) 0%,
            rgba(242,106,61,.045) 74%,
            rgba(242,106,61,0) 100%
        );
    box-shadow: 0 7px 20px rgba(82,48,33,.04);
    font-weight: 800 !important;
    letter-spacing: -.25px;
}

.about-section-title::after,
.program-title::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 5px;
    width: 34px;
    height: 2px;
    border-radius: 20px;
    background: var(--ttt-orange-soft);
    opacity: .72;
}

.about-section {
    padding-top: 74px;
    padding-bottom: 74px;
}

.program-section {
    padding-top: 74px;
    padding-bottom: 74px;
}


/* -------------------------------------------------------------
   ĐỘI NGŨ
   Tạo khoảng thở rõ giữa banner và danh sách giáo viên
   ------------------------------------------------------------- */

.teacher-section {
    position: relative;
    padding: 78px 0 88px !important;
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFF9F6 100%
        );
}

.page-banner + .teacher-section {
    padding-top: 82px !important;
}

.teacher-section .row.g-4 {
    row-gap: 30px !important;
}


/* -------------------------------------------------------------
   FOOTER V2
   ------------------------------------------------------------- */

.ttt-footer-column-title {
    margin: 0;
    color: #FFB08B;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .55px;
}

.ttt-footer-title-line {
    width: 58px;
    height: 3px;
    margin: 12px 0 25px;
    border-radius: 30px;
    background:
        linear-gradient(
            90deg,
            var(--ttt-orange),
            #FFB08B
        );
}


/* CỘT CƠ SỞ */

.ttt-location-list {
    display: grid;
    gap: 14px;
}

.ttt-location-item {
    display: flex !important;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    color: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    text-decoration: none !important;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.ttt-location-item:hover {
    color: #fff !important;
    border-color: rgba(255,176,139,.34);
    background: rgba(242,106,61,.11);
    transform: translateY(-2px);
}

.ttt-location-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    color: #FFB08B;
    border-radius: 12px;
    background: rgba(242,106,61,.13);
    font-size: 18px;
}

.ttt-location-content {
    display: block;
    min-width: 0;
}

.ttt-location-content strong {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

.ttt-location-content > span {
    display: block;
    color: rgba(255,255,255,.76);
    font-size: 13.5px;
    line-height: 1.72;
}

.ttt-location-content small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    color: #FFB08B;
    font-size: 11.5px;
    font-weight: 600;
}


/* CỘT SƠ ĐỒ TRANG */

.ttt-sitemap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.ttt-sitemap a,
.ttt-sitemap-coming {
    position: relative;
    display: inline-block;
    padding: 5px 12px 5px 0;
    margin: 0 12px 8px 0;
    color: rgba(255,255,255,.88) !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none !important;
}

.ttt-sitemap a::after,
.ttt-sitemap-coming::after {
    content: "|";
    position: absolute;
    top: 5px;
    right: 0;
    color: rgba(255,255,255,.25);
}

.ttt-sitemap a:last-of-type::after {
    content: "";
}

.ttt-sitemap a:hover {
    color: #FFB08B !important;
}

.ttt-sitemap-coming {
    color: rgba(255,255,255,.42) !important;
    cursor: default;
}

.ttt-sitemap-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 23px;
    padding-top: 20px;
    color: rgba(255,255,255,.54);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12.5px;
    line-height: 1.65;
}

.ttt-sitemap-note i {
    margin-top: 2px;
    color: #FFB08B;
    font-size: 17px;
}


/* -------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .about-section,
    .program-section {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .teacher-section,
    .page-banner + .teacher-section {
        padding-top: 60px !important;
        padding-bottom: 65px !important;
    }

}

@media (max-width: 575.98px) {

    .about-section-title,
    .program-title {
        display: block;
        padding: 10px 14px 10px 16px;
        font-size: 23px;
    }

    .ttt-footer-column-title {
        font-size: 19px;
    }

    .ttt-location-item {
        padding: 14px;
    }

    .ttt-sitemap a,
    .ttt-sitemap-coming {
        font-size: 13.5px !important;
    }

}

/* =============================================================
   UX FINAL V3
   Breadcrumb + Mobile + Card/Spacing chuẩn hóa
   ============================================================= */


/* -------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------- */

.ttt-breadcrumb-bar {
    position: relative;
    z-index: 3;
    padding: 13px 0;
    background: #fff;
    border-bottom: 1px solid rgba(45,41,39,.07);
    box-shadow: 0 5px 18px rgba(55,38,30,.035);
}

.ttt-breadcrumb-detail {
    border-top: 1px solid rgba(45,41,39,.04);
}

.ttt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ttt-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.ttt-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ttt-breadcrumb li + li::before {
    content: "/";
    margin: 0 10px;
    color: #C8BDB7;
}

.ttt-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6A615C;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
}

.ttt-breadcrumb a:hover {
    color: var(--ttt-orange-dark);
}

.ttt-breadcrumb .active {
    color: var(--ttt-orange-deep);
    font-weight: 700;
}


/* -------------------------------------------------------------
   SPACING TOÀN WEBSITE
   ------------------------------------------------------------- */

.teacher-section,
.news-section,
.honor-section,
.album-section,
.contact-section,
.gallery-section {
    padding: 78px 0 86px;
}

.page-banner + .ttt-breadcrumb-bar + .teacher-section,
.page-banner + .ttt-breadcrumb-bar + .news-section,
.page-banner + .ttt-breadcrumb-bar + .honor-section,
.page-banner + .ttt-breadcrumb-bar + .album-section,
.page-banner + .ttt-breadcrumb-bar + .contact-section {
    padding-top: 72px;
}

.article-section,
.teacher-detail,
.honor-detail {
    padding-top: 62px !important;
    padding-bottom: 82px !important;
}

.related-section {
    padding-top: 62px !important;
    padding-bottom: 78px !important;
}

.album-header {
    padding-top: 54px !important;
    padding-bottom: 38px !important;
}


/* -------------------------------------------------------------
   CARD HEIGHT / TEXT RHYTHM
   ------------------------------------------------------------- */

.teacher-card,
.news-card,
.honor-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.teacher-body,
.news-body,
.honor-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.teacher-description,
.news-summary,
.honor-card .honor-achievement {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.teacher-description {
    -webkit-line-clamp: 3;
    min-height: calc(1.6em * 3);
}

.news-summary {
    -webkit-line-clamp: 3;
    min-height: calc(1.65em * 3);
}

.honor-card .honor-achievement {
    -webkit-line-clamp: 3;
    min-height: calc(1.65em * 3);
}

.teacher-body .btn,
.honor-body .btn,
.news-body .news-more {
    margin-top: auto;
}

.teacher-body .btn,
.honor-body .btn {
    align-self: center;
}

.news-body .news-more {
    align-self: flex-start;
}

.teacher-name,
.news-title,
.honor-name,
.portal-card-title {
    overflow-wrap: anywhere;
}

.teacher-specialty,
.teacher-description,
.news-summary,
.honor-achievement,
.portal-card-text {
    overflow-wrap: anywhere;
}


/* -------------------------------------------------------------
   RICH TEXT AN TOÀN TRÊN MOBILE
   ------------------------------------------------------------- */

.article-content,
.teacher-richtext,
.honor-content,
.program-content,
.about-section-content,
.about-content,
.contact-richtext {
    overflow-wrap: anywhere;
    word-break: normal;
}

.article-content table,
.teacher-richtext table,
.honor-content table,
.program-content table,
.about-section-content table,
.about-content table,
.contact-richtext table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-content iframe,
.teacher-richtext iframe,
.honor-content iframe,
.program-content iframe,
.about-section-content iframe,
.about-content iframe,
.contact-richtext iframe,
.article-content video,
.teacher-richtext video,
.honor-content video,
.program-content video,
.about-section-content video,
.about-content video,
.contact-richtext video {
    max-width: 100% !important;
}


/* -------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------- */

.pagination {
    flex-wrap: wrap;
    gap: 5px;
}

.pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px !important;
}


/* -------------------------------------------------------------
   FOCUS / ACCESSIBILITY
   ------------------------------------------------------------- */

.ttt-navbar a:focus-visible,
.btn:focus-visible,
.ttt-breadcrumb a:focus-visible,
.ttt-location-item:focus-visible,
.ttt-sitemap a:focus-visible,
.portal-card-link:focus-visible,
.album-link:focus-visible,
.news-more:focus-visible {
    outline: 3px solid rgba(255,154,106,.58);
    outline-offset: 3px;
}


/* -------------------------------------------------------------
   MOBILE QA
   ------------------------------------------------------------- */

@media (max-width: 1399.98px) {

    .ttt-navbar .navbar-collapse {
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ttt-navbar .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .ttt-navbar .nav-link-thithu {
        width: fit-content;
        min-width: 128px;
        justify-content: center;
    }

}


@media (max-width: 991.98px) {

    .teacher-section,
    .news-section,
    .honor-section,
    .album-section,
    .contact-section,
    .gallery-section {
        padding: 58px 0 66px;
    }

    .page-banner + .ttt-breadcrumb-bar + .teacher-section,
    .page-banner + .ttt-breadcrumb-bar + .news-section,
    .page-banner + .ttt-breadcrumb-bar + .honor-section,
    .page-banner + .ttt-breadcrumb-bar + .album-section,
    .page-banner + .ttt-breadcrumb-bar + .contact-section {
        padding-top: 56px;
    }

    .article-section,
    .teacher-detail,
    .honor-detail {
        padding-top: 48px !important;
        padding-bottom: 62px !important;
    }

    .row.g-5 {
        --bs-gutter-y: 2rem;
    }

}


@media (max-width: 767.98px) {

    .page-banner {
        min-height: 210px !important;
    }

    .page-banner-content {
        padding: 36px 18px !important;
    }

    .page-banner-content h1 {
        font-size: 29px !important;
        line-height: 1.2;
    }

    .page-banner-content p {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
    }

    .ttt-breadcrumb-bar {
        padding: 11px 0;
    }

    .ttt-breadcrumb {
        font-size: 12.5px;
    }

    .ttt-breadcrumb li + li::before {
        margin: 0 7px;
    }

    .teacher-card,
    .news-card,
    .honor-card,
    .portal-card,
    .album-card,
    .contact-card {
        border-radius: 17px !important;
    }

    .portal-card-body,
    .teacher-body,
    .news-body,
    .honor-body {
        padding: 20px !important;
    }

    .teacher-description,
    .news-summary,
    .honor-card .honor-achievement {
        min-height: 0;
    }

}


@media (max-width: 575.98px) {

    .ttt-breadcrumb {
        align-items: flex-start;
    }

    .ttt-breadcrumb .active {
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .teacher-section,
    .news-section,
    .honor-section,
    .album-section,
    .contact-section,
    .gallery-section {
        padding: 48px 0 54px;
    }

    .article-section,
    .teacher-detail,
    .honor-detail {
        padding-top: 38px !important;
        padding-bottom: 52px !important;
    }

    .teacher-detail-name,
    .article-title,
    .honor-name {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .teacher-detail-image,
    .honor-detail-image,
    .article-image {
        border-radius: 16px !important;
    }

    .news-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 7px;
        margin-bottom: 26px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .news-filter a {
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .btn-ttt {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ttt-footer-panel {
        border-radius: 18px !important;
    }

}


/* -------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

}

/* =============================================================
   KHACH HANG REV4
   Dropdown header / bright banner / content detail / teacher modal
   / animated backgrounds / video intro.
   ============================================================= */

:root {
    --ttt-navy: #173B57;
    --ttt-navy-deep: #102D43;
    --ttt-navy-soft: #EEF5F8;
}


/* ---------------- HEADER 20PX + DROPDOWN ---------------- */

@media (min-width: 1600px) {
    .ttt-navbar .nav-link {
        font-size: 20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: -.2px;
    }

    .ttt-navbar .nav-link-thithu {
        font-size: 18px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .ttt-navbar .nav-link {
        font-size: 17px !important;
    }
}

.ttt-dropdown-menu {
    min-width: 230px;
    padding: 10px;
    margin-top: 12px !important;
    border: 1px solid rgba(38, 31, 27, .07);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 45px rgba(45,31,24,.14);
}

.ttt-program-dropdown {
    min-width: 300px;
    max-width: 380px;
}

.ttt-dropdown-menu .dropdown-item {
    padding: 10px 12px;
    color: var(--ttt-text);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    font-weight: 600;
}

.ttt-dropdown-menu .dropdown-item:hover,
.ttt-dropdown-menu .dropdown-item:focus {
    color: var(--ttt-orange-deep);
    background: #FFF2EB;
}

.ttt-dropdown-menu .dropdown-item-all {
    margin-bottom: 5px;
    color: var(--ttt-navy);
    background: #F1F6F8;
    font-weight: 800;
}


/* ---------------- BRIGHT PAGE BANNER ---------------- */

.page-banner.page-banner-clean {
    min-height: 230px !important;
    height: clamp(230px, 21vw, 365px);
    background: #F7F3F0;
}

.page-banner.page-banner-clean::after {
    display: none !important;
}

.page-banner.page-banner-clean > img {
    filter: none !important;
    opacity: 1 !important;
    object-position: center;
}

.page-banner-content {
    display: none !important;
}


/* ---------------- DYNAMIC CONTENT BACKGROUNDS ---------------- */

.content-animated-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.content-animated-bg::before,
.content-animated-bg::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
}

.content-animated-bg::before {
    width: 360px;
    height: 360px;
    top: -170px;
    right: -130px;
    background: radial-gradient(
        circle,
        rgba(242,106,61,.10) 0%,
        rgba(242,106,61,0) 70%
    );
    animation: tttFloatBlob 10s ease-in-out infinite;
}

.content-animated-bg::after {
    width: 300px;
    height: 300px;
    bottom: -170px;
    left: -120px;
    background: radial-gradient(
        circle,
        rgba(23,59,87,.09) 0%,
        rgba(23,59,87,0) 70%
    );
    animation: tttFloatBlob 12s ease-in-out infinite reverse;
}

.content-bg-light {
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFBF8 100%
        );
}

.content-bg-warm {
    background:
        linear-gradient(
            180deg,
            #FFF8F4 0%,
            #FFFFFF 100%
        );
}

.content-bg-navy-soft {
    background:
        linear-gradient(
            180deg,
            #F4F8FA 0%,
            #FFFFFF 100%
        );
}

@keyframes tttFloatBlob {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, 18px, 0) scale(1.08);
    }
}


/* ---------------- LIST + DETAIL CARDS ---------------- */

.listing-section {
    padding: 76px 0 90px;
}

.content-detail-card,
.program-detail-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(45,41,39,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 38px rgba(55,38,30,.075);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.content-detail-card:hover,
.program-detail-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242,106,61,.22);
    box-shadow: 0 22px 50px rgba(55,38,30,.12);
}

.content-detail-media,
.program-detail-media {
    display: block;
    overflow: hidden;
}

.content-detail-media img,
.program-detail-media img {
    width: 100%;
    height: 260px;
    display: block;
    object-fit: cover;
    transition: transform .38s ease;
}

.content-detail-card:hover .content-detail-media img,
.program-detail-card:hover .program-detail-media img {
    transform: scale(1.035);
}

.content-detail-body,
.program-detail-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 26px;
}

.content-eyebrow {
    margin-bottom: 9px;
    color: var(--ttt-orange-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.content-detail-title,
.program-detail-title {
    margin: 0 0 13px;
    color: var(--ttt-navy);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
}

.content-detail-summary,
.program-detail-summary {
    margin-bottom: 18px;
    color: var(--ttt-muted);
    line-height: 1.75;
}

.content-image-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #80736C;
    font-size: 13px;
    font-weight: 600;
}

.content-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--ttt-orange-dark);
    text-decoration: none;
    font-weight: 800;
}

.content-detail-link:hover {
    color: var(--ttt-orange-deep);
}

.program-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 8px;
}


/* ---------------- DETAIL PAGES ---------------- */

.detail-content-section {
    padding: 62px 0 90px;
}

.detail-content-shell {
    max-width: 1050px;
    margin: 0 auto;
    padding: 38px;
    border: 1px solid rgba(45,41,39,.06);
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 52px rgba(55,38,30,.08);
}

.detail-heading {
    max-width: 820px;
    margin-bottom: 30px;
}

.detail-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--ttt-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.detail-heading h1 {
    margin: 0;
    color: var(--ttt-navy);
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.6px;
}

.detail-main-media {
    margin-bottom: 34px;
    overflow: hidden;
    border-radius: 22px;
}

.detail-main-media img {
    width: 100%;
    max-height: 620px;
    display: block;
    object-fit: cover;
}

.detail-richtext {
    color: #504A46;
    font-size: 17px;
    line-height: 1.9;
}

.detail-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.detail-gallery {
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid rgba(45,41,39,.08);
}

.detail-gallery-heading {
    margin-bottom: 22px;
}

.detail-gallery-heading > span {
    color: var(--ttt-orange-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.detail-gallery-heading h2 {
    margin: 6px 0 0;
    color: var(--ttt-navy);
    font-size: 28px;
    font-weight: 800;
}

.detail-gallery-item {
    display: block;
    height: 100%;
    overflow: hidden;
    color: inherit;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(55,38,30,.07);
    text-decoration: none;
}

.detail-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    transition: transform .28s ease;
}

.detail-gallery-item:hover img {
    transform: scale(1.035);
}

.detail-gallery-item span {
    display: block;
    padding: 11px 13px;
    color: #6A625D;
    font-size: 13px;
}


/* ---------------- TEACHER MODAL ---------------- */

.teacher-card-button,
.teacher-home-trigger {
    width: 100%;
    padding: 0;
    color: inherit;
    border: 0;
    text-align: inherit;
    cursor: pointer;
}

.teacher-card-media {
    position: relative;
    display: block;
    overflow: hidden;
}

.teacher-card-hover {
    position: absolute;
    inset: auto 16px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 13px;
    color: #fff;
    border-radius: 12px;
    background: rgba(23,59,87,.88);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .24s ease,
        transform .24s ease;
    font-size: 13px;
    font-weight: 700;
}

.teacher-card-button:hover .teacher-card-hover,
.teacher-card-button:focus-visible .teacher-card-hover {
    opacity: 1;
    transform: translateY(0);
}

.teacher-info-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(24,25,26,.28);
}

.teacher-info-modal .modal-header {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    padding: 0;
    border: 0;
}

.teacher-info-modal .btn-close {
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.92);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.teacher-info-modal .modal-body {
    padding: 0;
}

.teacher-modal-loading {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ttt-muted);
}

.teacher-popup {
    padding: 34px;
    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFF8F4 100%
        );
}

.teacher-popup-image {
    width: 100%;
    max-height: 590px;
    object-fit: cover;
    object-position: top center;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(55,38,30,.12);
}

.teacher-popup-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ttt-orange-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.teacher-popup-heading h2 {
    margin: 0 0 8px;
    color: var(--ttt-navy);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 800;
}

.teacher-popup-degree {
    color: var(--ttt-orange-dark);
    font-size: 16px;
    font-weight: 700;
}

.teacher-popup-specialty {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 8px;
    color: #655E59;
}

.teacher-popup-summary {
    margin: 22px 0;
    padding: 17px 19px;
    color: #544D48;
    border-left: 4px solid var(--ttt-orange);
    border-radius: 0 12px 12px 0;
    background: #FFF1E9;
    line-height: 1.7;
}

.teacher-popup-block {
    margin-top: 26px;
}

.teacher-popup-block h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--ttt-navy);
    font-size: 19px;
    font-weight: 800;
}


/* ---------------- VIDEO INTRO ABOVE FOOTER ---------------- */

.video-intro-section {
    padding: 78px 0;
    color: #fff;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(242,106,61,.30),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            var(--ttt-navy-deep) 0%,
            var(--ttt-navy) 70%,
            #1D4967 100%
        );
}

.video-intro-shell {
    position: relative;
}

.video-intro-kicker {
    display: inline-block;
    margin-bottom: 11px;
    color: #FFB18D;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.video-intro-section h2 {
    margin-bottom: 16px;
    color: #fff;
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.18;
    font-weight: 800;
}

.video-intro-section p {
    max-width: 580px;
    margin-bottom: 24px;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.8;
}

.video-intro-action {
    gap: 7px;
}

.video-cover {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: #0D2231;
    box-shadow: 0 22px 55px rgba(0,0,0,.24);
    cursor: pointer;
}

.video-cover img {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    transition: transform .38s ease;
}

.video-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(9,26,39,.06),
            rgba(9,26,39,.38)
        );
}

.video-cover:hover img {
    transform: scale(1.025);
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ttt-orange-dark);
    border: 7px solid rgba(255,255,255,.26);
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 32px rgba(0,0,0,.24);
    font-size: 34px;
    transition: transform .22s ease;
}

.video-cover:hover .video-play-button {
    transform: translate(-50%, -50%) scale(1.08);
}

.video-cover-label {
    position: absolute;
    left: 18px;
    bottom: 16px;
    padding: 7px 11px;
    color: #fff;
    border-radius: 10px;
    background: rgba(15,39,56,.78);
    font-size: 12px;
    font-weight: 700;
}

.video-intro-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #111;
}

.video-intro-modal .modal-header {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.10);
    background: #181818;
}

.video-intro-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
}

.video-intro-modal .btn-close {
    filter: invert(1);
}


/* ---------------- MOBILE REV4 ---------------- */

@media (max-width: 1399.98px) {
    .ttt-dropdown-menu {
        margin-top: 4px !important;
        border: 0;
        box-shadow: none;
    }

    .ttt-navbar .dropdown-menu {
        background: rgba(255,255,255,.97);
    }
}

@media (max-width: 767.98px) {
    .page-banner.page-banner-clean {
        min-height: 170px !important;
        height: 190px;
    }

    .listing-section {
        padding: 52px 0 62px;
    }

    .content-detail-media img,
    .program-detail-media img {
        height: 220px;
    }

    .detail-content-section {
        padding: 42px 0 58px;
    }

    .detail-content-shell {
        padding: 22px;
        border-radius: 19px;
    }

    .detail-heading h1 {
        font-size: 31px;
    }

    .teacher-popup {
        padding: 20px;
    }

    .teacher-popup-heading h2 {
        font-size: 28px;
    }

    .teacher-info-modal .modal-dialog {
        margin: 0;
        min-height: 100%;
    }

    .teacher-info-modal .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    .video-intro-section {
        padding: 56px 0;
    }

    .video-play-button {
        width: 62px;
        height: 62px;
        border-width: 5px;
        font-size: 28px;
    }

    .program-detail-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-animated-bg::before,
    .content-animated-bg::after {
        animation: none !important;
    }
}

/* =============================================================
   REV4 FIX - BACKGROUND MOTION
   Pseudo element trước đây dùng z-index:-1 nên có thể nằm sau chính
   background của section và gần như không nhìn thấy.
   ============================================================= */

.content-animated-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-size: 140% 140% !important;
    animation: tttBackgroundDrift 18s ease-in-out infinite alternate;
}

.content-animated-bg > .container {
    position: relative;
    z-index: 2;
}

.content-animated-bg::before,
.content-animated-bg::after {
    z-index: 0 !important;
    opacity: 1;
    filter: blur(1px);
    will-change: transform;
}

.content-animated-bg::before {
    width: 430px !important;
    height: 430px !important;
    top: -185px !important;
    right: -135px !important;
    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(242,106,61,.19) 0%,
            rgba(255,154,106,.10) 34%,
            rgba(242,106,61,0) 72%
        ) !important;
    animation: tttOrbOne 11s ease-in-out infinite !important;
}

.content-animated-bg::after {
    width: 390px !important;
    height: 390px !important;
    left: -145px !important;
    bottom: -175px !important;
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(23,59,87,.16) 0%,
            rgba(23,59,87,.07) 38%,
            rgba(23,59,87,0) 72%
        ) !important;
    animation: tttOrbTwo 14s ease-in-out infinite !important;
}

@keyframes tttBackgroundDrift {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 55% 35%;
    }

    100% {
        background-position: 100% 70%;
    }
}

@keyframes tttOrbOne {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    35% {
        transform:
            translate3d(-55px, 42px, 0)
            scale(1.09);
    }

    70% {
        transform:
            translate3d(25px, 82px, 0)
            scale(.94);
    }
}

@keyframes tttOrbTwo {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    40% {
        transform:
            translate3d(68px, -38px, 0)
            scale(1.08);
    }

    75% {
        transform:
            translate3d(35px, -78px, 0)
            scale(.96);
    }
}

/* Một lớp ánh sáng chuyển động nhẹ cho các section nền sáng. */
.content-bg-light,
.content-bg-warm,
.content-bg-navy-soft {
    background-repeat: no-repeat !important;
}

.teacher-modal-error {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px;
    color: #5B514C;
    text-align: left;
}

.teacher-modal-error > i {
    color: var(--ttt-orange-dark);
    font-size: 34px;
}

/* Video không có ảnh upload vẫn có thumbnail/fallback đẹp. */
.video-cover img {
    background:
        linear-gradient(
            135deg,
            #FFF8F4 0%,
            #EAF2F6 100%
        );
}

@media (prefers-reduced-motion: reduce) {
    .content-animated-bg {
        animation: none !important;
    }

    .content-animated-bg::before,
    .content-animated-bg::after {
        animation: none !important;
    }
}

/* =============================================================
   REV4 FIX4
   1. Dropdown đẹp + mở bằng hover desktop
   2. Card giáo viên đồng bộ card Thành tích
   3. Video cuối Home cân đối / tiêu đề section chuẩn
   ============================================================= */


/* -------------------------------------------------------------
   DROPDOWN HEADER - DESKTOP HOVER
   Mobile vẫn giữ click/tap của Bootstrap.
   ------------------------------------------------------------- */

.ttt-navbar .dropdown {
    position: relative;
}

/* Mũi tên mềm hơn */
.ttt-navbar .dropdown-toggle::after {
    margin-left: 7px;
    vertical-align: .16em;
    border-top-width: .32em;
    border-right-width: .28em;
    border-left-width: .28em;
    transition: transform .22s ease;
}

.ttt-dropdown-menu {
    overflow: hidden;
    padding: 9px !important;
    border: 1px solid rgba(45,41,39,.07) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.995) 0%,
            rgba(255,249,246,.995) 100%
        ) !important;
    box-shadow:
        0 22px 55px rgba(54,37,29,.15),
        0 4px 14px rgba(54,37,29,.06) !important;
}

/* Vạch nhấn phía trên menu */
.ttt-dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 10px 10px;
    background:
        linear-gradient(
            90deg,
            var(--ttt-orange-dark),
            var(--ttt-orange-soft)
        );
}

.ttt-dropdown-menu .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 10px 13px 10px 16px !important;
    margin: 2px 0;
    color: #433D39 !important;
    border-radius: 10px !important;
    background: transparent;
    font-size: 14px !important;
    line-height: 1.45;
    font-weight: 650 !important;
    white-space: normal;
    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease,
        padding-left .18s ease;
}

.ttt-dropdown-menu .dropdown-item::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    margin-right: 9px;
    border-radius: 50%;
    background: rgba(242,106,61,.38);
    transition:
        background .18s ease,
        transform .18s ease;
}

.ttt-dropdown-menu .dropdown-item:hover,
.ttt-dropdown-menu .dropdown-item:focus {
    color: var(--ttt-orange-deep) !important;
    background: rgba(242,106,61,.085) !important;
    transform: translateX(2px);
}

.ttt-dropdown-menu .dropdown-item:hover::before,
.ttt-dropdown-menu .dropdown-item:focus::before {
    background: var(--ttt-orange);
    transform: scale(1.25);
}

.ttt-dropdown-menu .dropdown-item-all {
    color: var(--ttt-navy) !important;
    background: rgba(23,59,87,.065) !important;
    font-weight: 800 !important;
}

@media (min-width: 1400px) {

    /*
       Không cần click:
       chỉ cần rê chuột vào GIỚI THIỆU / CHƯƠNG TRÌNH là menu hiện.
    */
    .ttt-navbar .dropdown > .dropdown-menu {
        display: block;
        top: calc(100% + 7px);
        left: 50%;
        margin-top: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform:
            translateX(-50%)
            translateY(8px)
            scale(.985);
        transform-origin: top center;
        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease;
    }

    .ttt-navbar .dropdown:hover > .dropdown-menu,
    .ttt-navbar .dropdown:focus-within > .dropdown-menu,
    .ttt-navbar .dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

    .ttt-navbar .dropdown:hover > .dropdown-toggle::after,
    .ttt-navbar .dropdown:focus-within > .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    /*
       Cầu nối trong suốt giữa menu cha và dropdown để rê chuột
       xuống không bị dropdown tự mất.
    */
    .ttt-navbar .dropdown > .dropdown-menu::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 14px;
    }

}


/* -------------------------------------------------------------
   CARD GIÁO VIÊN
   Đồng bộ viền / shadow với card Thành tích.
   ------------------------------------------------------------- */

.teacher-card-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    color: inherit !important;
    border: 1px solid rgba(54,44,39,.065) !important;
    border-radius: 22px !important;
    outline: 0;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(55,38,30,.075) !important;
    text-align: inherit;
    cursor: pointer;
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

.teacher-card-button:hover {
    transform: translateY(-7px);
    border-color: rgba(242,106,61,.20) !important;
    box-shadow: 0 22px 48px rgba(55,38,30,.12) !important;
}

.teacher-card-button:focus {
    outline: 0;
}

.teacher-card-button:focus-visible {
    border-color: rgba(242,106,61,.48) !important;
    box-shadow:
        0 0 0 4px rgba(242,106,61,.12),
        0 22px 48px rgba(55,38,30,.12) !important;
}

.teacher-card-button .teacher-card-media {
    width: 100%;
}

.teacher-card-button .teacher-image {
    width: 100%;
}

.teacher-card-button .teacher-body {
    width: 100%;
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px !important;
    background: #fff;
}

/* Home cũng là button nên bỏ hoàn toàn border mặc định trình duyệt */
.teacher-home-trigger {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    background: transparent !important;
}


/* -------------------------------------------------------------
   VIDEO INTRO - SECTION STYLE ĐỒNG BỘ HOME
   ------------------------------------------------------------- */

.video-intro-section {
    padding: 82px 0 76px !important;
}

.video-section-title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 42px !important;
}

.video-section-title .video-intro-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #FFB18D;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.video-section-title h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
}

.video-section-title .line {
    margin-left: auto !important;
    margin-right: auto !important;
    background:
        linear-gradient(
            90deg,
            #FFB18D,
            var(--ttt-orange)
        ) !important;
}

.video-intro-description {
    max-width: 820px !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,.80) !important;
    font-size: 16px !important;
    line-height: 1.85 !important;

    /* Giữ các lần xuống dòng người nhập trong textarea Admin */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.video-intro-card {
    max-width: 980px;
    margin: 0 auto;
}

.video-cover {
    border-radius: 24px !important;
}

.video-cover-title {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 18px;
    display: block;
    padding: 10px 14px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(15,39,56,.76);
    backdrop-filter: blur(7px);
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

.video-intro-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.video-intro-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Label cũ không còn dùng */
.video-cover-label {
    display: none !important;
}


/* -------------------------------------------------------------
   RESPONSIVE FIX4
   ------------------------------------------------------------- */

@media (max-width: 1399.98px) {

    /* Mobile/tablet: dropdown dùng click/tap Bootstrap bình thường */
    .ttt-navbar .dropdown > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ttt-navbar .dropdown > .dropdown-menu:not(.show) {
        display: none;
    }

    .ttt-navbar .dropdown > .dropdown-menu.show {
        display: block;
    }

}

@media (max-width: 767.98px) {

    .teacher-card-button {
        border-radius: 17px !important;
    }

    .video-intro-section {
        padding: 58px 0 56px !important;
    }

    .video-section-title {
        margin-bottom: 30px !important;
    }

    .video-section-title h2 {
        font-size: 30px !important;
    }

    .video-intro-description {
        font-size: 14.5px !important;
        line-height: 1.75 !important;
    }

    .video-cover-title {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 8px 10px;
        font-size: 12px;
    }

}

/* =============================================================
   REV5
   - Dropdown Giới thiệu động
   - Video nhiều card / chia cột
   - Thành tích nổi bật
   - Background motion rõ hơn
   ============================================================= */


/* ---------------- DYNAMIC DROPDOWN ---------------- */

.ttt-dynamic-dropdown {
    max-height: min(70vh, 560px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(242,106,61,.38)
        rgba(242,106,61,.06);
}

.ttt-dynamic-dropdown::-webkit-scrollbar {
    width: 7px;
}

.ttt-dynamic-dropdown::-webkit-scrollbar-track {
    background: rgba(242,106,61,.05);
}

.ttt-dynamic-dropdown::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgba(242,106,61,.34);
}

.ttt-dropdown-separator {
    height: 1px;
    margin: 7px 10px;
    background: rgba(54,44,39,.08);
}


/* ---------------- FEATURED HONOR ---------------- */

.honor-card {
    position: relative;
}

.honor-card-featured {
    border-color: rgba(242,106,61,.48) !important;
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFF9F4 100%
        ) !important;
    box-shadow:
        0 18px 45px rgba(217,89,41,.16),
        0 0 0 1px rgba(242,106,61,.08) !important;
}

.honor-card-featured:hover {
    border-color: rgba(242,106,61,.72) !important;
    box-shadow:
        0 24px 56px rgba(217,89,41,.22),
        0 0 0 1px rgba(242,106,61,.12) !important;
}

.honor-featured-badge {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            #F04425 0%,
            #F88952 100%
        );
    box-shadow: 0 8px 20px rgba(240,68,37,.26);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.honor-featured-badge i {
    color: #FFF1A8;
}


/* ---------------- MULTI VIDEO GRID ---------------- */

.video-grid-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 20px 52px rgba(0,0,0,.20);
    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.video-grid-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 64px rgba(0,0,0,.28);
}

.video-grid-card .video-cover {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.video-grid-card .video-cover img {
    aspect-ratio: 16 / 9;
}

.video-grid-body {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    padding: 22px;
    text-align: left;
}

.video-grid-body h3 {
    margin: 0 0 10px;
    color: var(--ttt-navy);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.video-grid-body p {
    margin: 0 0 18px;
    color: #655E59;
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.video-grid-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: auto;
    padding: 0;
    color: var(--ttt-orange-dark);
    border: 0;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.video-grid-link:hover {
    color: var(--ttt-orange-deep);
}


/* ---------------- BACKGROUND MOTION - RÕ HƠN ---------------- */

/*
   Bản trước khá nhẹ. Bản này tăng:
   - kích thước blob
   - opacity
   - quãng đường di chuyển
   - thêm lớp gradient nền chuyển động
   nhưng vẫn tránh gây rối nội dung.
*/

.content-animated-bg {
    background-size:
        175% 175%,
        165% 165%,
        145% 145% !important;
    animation:
        tttBackgroundDriftStrong 13s
        ease-in-out infinite alternate !important;
}

.content-bg-light {
    background-image:
        radial-gradient(
            circle at 15% 20%,
            rgba(242,106,61,.16) 0%,
            rgba(242,106,61,0) 31%
        ),
        radial-gradient(
            circle at 88% 76%,
            rgba(23,59,87,.14) 0%,
            rgba(23,59,87,0) 34%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFF8F4 100%
        ) !important;
}

.content-bg-warm {
    background-image:
        radial-gradient(
            circle at 12% 22%,
            rgba(242,106,61,.22) 0%,
            rgba(242,106,61,0) 32%
        ),
        radial-gradient(
            circle at 90% 72%,
            rgba(23,59,87,.13) 0%,
            rgba(23,59,87,0) 34%
        ),
        linear-gradient(
            180deg,
            #FFF4EC 0%,
            #FFFFFF 100%
        ) !important;
}

.content-bg-navy-soft {
    background-image:
        radial-gradient(
            circle at 15% 26%,
            rgba(242,106,61,.15) 0%,
            rgba(242,106,61,0) 30%
        ),
        radial-gradient(
            circle at 84% 68%,
            rgba(23,59,87,.20) 0%,
            rgba(23,59,87,0) 36%
        ),
        linear-gradient(
            180deg,
            #EAF3F7 0%,
            #FFFFFF 100%
        ) !important;
}

.content-animated-bg::before {
    width: 560px !important;
    height: 560px !important;
    top: -230px !important;
    right: -170px !important;
    opacity: 1 !important;
    background:
        radial-gradient(
            circle at 38% 38%,
            rgba(242,106,61,.30) 0%,
            rgba(255,154,106,.17) 34%,
            rgba(242,106,61,0) 70%
        ) !important;
    filter: blur(2px);
    animation:
        tttOrbOneStrong 9s
        ease-in-out infinite !important;
}

.content-animated-bg::after {
    width: 500px !important;
    height: 500px !important;
    left: -175px !important;
    bottom: -220px !important;
    opacity: 1 !important;
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(23,59,87,.25) 0%,
            rgba(23,59,87,.13) 38%,
            rgba(23,59,87,0) 72%
        ) !important;
    filter: blur(2px);
    animation:
        tttOrbTwoStrong 11s
        ease-in-out infinite !important;
}

@keyframes tttBackgroundDriftStrong {
    0% {
        background-position:
            0% 0%,
            100% 100%,
            0% 0%;
    }

    50% {
        background-position:
            42% 30%,
            58% 48%,
            50% 35%;
    }

    100% {
        background-position:
            92% 65%,
            10% 20%,
            100% 80%;
    }
}

@keyframes tttOrbOneStrong {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    35% {
        transform:
            translate3d(-95px, 70px, 0)
            scale(1.12);
    }

    72% {
        transform:
            translate3d(30px, 135px, 0)
            scale(.92);
    }
}

@keyframes tttOrbTwoStrong {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    38% {
        transform:
            translate3d(115px, -68px, 0)
            scale(1.12);
    }

    76% {
        transform:
            translate3d(55px, -135px, 0)
            scale(.94);
    }
}

@media (max-width: 767.98px) {
    .video-grid-body {
        min-height: auto;
        padding: 18px;
    }

    .video-grid-body h3 {
        font-size: 18px;
    }

    .content-animated-bg::before {
        width: 390px !important;
        height: 390px !important;
    }

    .content-animated-bg::after {
        width: 350px !important;
        height: 350px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-animated-bg,
    .content-animated-bg::before,
    .content-animated-bg::after {
        animation: none !important;
    }
}

/* =============================================================
   REV5 FIX6 - HOẠT ĐỘNG CAROUSEL 3D
   ============================================================= */

.activity-3d-section {
    position: relative;
}

.activity-section-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--ttt-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.activity-3d-shell {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 76px 6px;
}

.activity-3d-stage {
    position: relative;
    height: 510px;
    perspective: 1500px;
    transform-style: preserve-3d;
    overflow: hidden;
}

.activity-3d-item {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 50%;
    width: min(420px, 38vw);
    opacity: 0;
    pointer-events: none;
    transform:
        translateX(-50%)
        translateZ(-260px)
        scale(.72);
    transform-origin: center center;
    transition:
        transform .62s cubic-bezier(.22,.76,.31,1),
        opacity .48s ease,
        filter .48s ease;
    filter: saturate(.72) brightness(.88);
    will-change: transform, opacity;
}

.activity-3d-item.is-active {
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    transform:
        translateX(-50%)
        translateZ(80px)
        rotateY(0deg)
        scale(1);
    filter: none;
}

.activity-3d-item.is-prev {
    z-index: 4;
    opacity: .76;
    pointer-events: auto;
    transform:
        translateX(calc(-50% - 330px))
        translateZ(-110px)
        rotateY(24deg)
        scale(.84);
}

.activity-3d-item.is-next {
    z-index: 4;
    opacity: .76;
    pointer-events: auto;
    transform:
        translateX(calc(-50% + 330px))
        translateZ(-110px)
        rotateY(-24deg)
        scale(.84);
}

.activity-3d-item.is-far-prev {
    z-index: 2;
    opacity: .23;
    transform:
        translateX(calc(-50% - 540px))
        translateZ(-240px)
        rotateY(34deg)
        scale(.68);
}

.activity-3d-item.is-far-next {
    z-index: 2;
    opacity: .23;
    transform:
        translateX(calc(-50% + 540px))
        translateZ(-240px)
        rotateY(-34deg)
        scale(.68);
}

.activity-3d-item.is-hidden {
    opacity: 0;
    transform:
        translateX(-50%)
        translateZ(-340px)
        scale(.60);
}

.activity-3d-card {
    display: block;
    overflow: hidden;
    color: inherit;
    border: 1px solid rgba(58,45,38,.08);
    border-radius: 26px;
    background: #fff;
    box-shadow:
        0 28px 70px rgba(44,34,29,.18),
        0 10px 26px rgba(44,34,29,.08);
    text-decoration: none;
    transition:
        box-shadow .25s ease,
        border-color .25s ease;
}

.activity-3d-item.is-active .activity-3d-card:hover {
    border-color: rgba(242,106,61,.30);
    box-shadow:
        0 34px 80px rgba(44,34,29,.23),
        0 12px 30px rgba(242,106,61,.10);
}

.activity-3d-media {
    position: relative;
    height: 275px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #FFF2EA 0%,
            #EEF5F8 100%
        );
}

.activity-3d-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.activity-3d-item.is-active .activity-3d-card:hover .activity-3d-media img {
    transform: scale(1.035);
}

.activity-3d-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(23,59,87,.45);
    font-size: 58px;
}

.activity-3d-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(15,35,48,.02) 38%,
            rgba(15,35,48,.38) 100%
        );
}

.activity-3d-number {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;
    background: rgba(23,59,87,.78);
    backdrop-filter: blur(7px);
    font-size: 12px;
    font-weight: 800;
}

.activity-3d-body {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 23px 25px 25px;
}

.activity-3d-label {
    margin-bottom: 7px;
    color: var(--ttt-orange-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.activity-3d-body h3 {
    margin: 0 0 10px;
    color: var(--ttt-navy);
    font-size: 23px;
    line-height: 1.32;
    font-weight: 800;
}

.activity-3d-body p {
    display: -webkit-box;
    margin: 0 0 15px;
    overflow: hidden;
    color: #6A625D;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-3d-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--ttt-orange-dark);
    font-weight: 800;
}

.activity-3d-control {
    position: absolute;
    z-index: 10;
    top: 50%;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ttt-navy);
    border: 1px solid rgba(23,59,87,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 12px 30px rgba(44,34,29,.13);
    transform: translateY(-50%);
    font-size: 28px;
    cursor: pointer;
    transition:
        transform .20s ease,
        color .20s ease,
        background .20s ease;
}

.activity-3d-control:hover {
    color: #fff;
    background: var(--ttt-orange);
    transform:
        translateY(-50%)
        scale(1.07);
}

.activity-3d-prev {
    left: 4px;
}

.activity-3d-next {
    right: 4px;
}

.activity-3d-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.activity-3d-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(23,59,87,.22);
    cursor: pointer;
    transition:
        width .22s ease,
        background .22s ease;
}

.activity-3d-dot.is-active {
    width: 28px;
    background: var(--ttt-orange);
}


/* 1 card thì không cần hiệu ứng side card quá rộng */
.activity-3d-item:first-child:last-child {
    opacity: 1;
}


/* ---------------- RESPONSIVE 3D ---------------- */

@media (max-width: 1199.98px) {
    .activity-3d-stage {
        height: 485px;
    }

    .activity-3d-item {
        width: min(390px, 46vw);
    }

    .activity-3d-item.is-prev {
        transform:
            translateX(calc(-50% - 275px))
            translateZ(-110px)
            rotateY(21deg)
            scale(.82);
    }

    .activity-3d-item.is-next {
        transform:
            translateX(calc(-50% + 275px))
            translateZ(-110px)
            rotateY(-21deg)
            scale(.82);
    }

    .activity-3d-item.is-far-prev,
    .activity-3d-item.is-far-next {
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    .activity-3d-shell {
        padding: 5px 42px 0;
    }

    .activity-3d-stage {
        height: 445px;
        perspective: 1000px;
    }

    .activity-3d-item {
        top: 8px;
        width: min(78vw, 330px);
    }

    .activity-3d-item.is-active {
        transform:
            translateX(-50%)
            translateZ(25px)
            scale(1);
    }

    .activity-3d-item.is-prev {
        opacity: .30;
        transform:
            translateX(calc(-50% - 68vw))
            translateZ(-130px)
            rotateY(13deg)
            scale(.80);
    }

    .activity-3d-item.is-next {
        opacity: .30;
        transform:
            translateX(calc(-50% + 68vw))
            translateZ(-130px)
            rotateY(-13deg)
            scale(.80);
    }

    .activity-3d-item.is-far-prev,
    .activity-3d-item.is-far-next {
        opacity: 0;
    }

    .activity-3d-media {
        height: 220px;
    }

    .activity-3d-body {
        min-height: 165px;
        padding: 18px 19px 20px;
    }

    .activity-3d-body h3 {
        font-size: 19px;
    }

    .activity-3d-control {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .activity-3d-prev {
        left: -2px;
    }

    .activity-3d-next {
        right: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-3d-item,
    .activity-3d-card,
    .activity-3d-media img {
        transition: none !important;
    }
}