/*
Theme Name: skda
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}


/*************** TITLE   ***************/

.title-qa {
    text-align: center;
    margin-bottom: 20px;
}

.title-qa .bottom-title:before {
    right: 40px;
}

.title-qa .bottom-title:after {
    left: 40px;
}

.title-qa .bottom-title:after, .bottom-title:before {
    position: absolute;
    content: '';
    width: 90px;
    height: 3px;
    background-color: #23282d;
    top: 50%;

}

.title-qa .bottom-title {
    position: relative;
    display: inline-block;
}

.title-qa .bottom-title .bottom-icon {
    margin: 0 auto;
    font-size: 23px;
    color: #7b7b7b;
}

.title-qa h3 {
    margin-bottom: 0;
    color: #e2231a;
}

.item-qa .content {
    text-align: center;
    margin-top: -15px;
    z-index: 999;
    position: relative;
}

.item-qa .content .info {
    background-color: #f44336b0;
}

.item-qa .content .info {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

/*************** item-qa   ***************/
.item-qa .content {
    text-align: center;
    margin-top: -15px;
    z-index: 999;
    position: relative;
}

.item-qa .content .info {
    background-color: #f44336b0;
}

.item-qa .content .info {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

.item-qa img:hover {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
}

.item-qa img {
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


.item-qa .date, .item-qa .author {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 0 0 20px;
    float: left;
}

.item-qa .date {
    padding: 0 20px 0 0;
}

.list-item-qa {
    margin: 10px 0;
}

.item-qa .date:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #fff;
    line-height: 30px;
    float: left;
    border-radius: 50%;
    display: inline-block;
    margin: 13px 8px;
}

.item-qa {
    -webkit-box-shadow: 1px 3px 5px 0px rgba(158, 153, 153, 0.75);
    -moz-box-shadow: 1px 3px 5px 0px rgba(158, 153, 153, 0.75);
    box-shadow: 1px 3px 5px 0px rgba(158, 153, 153, 0.75);
    overflow: hidden;
    background: #fff;
}

.item-qa .image {
    overflow: hidden;
}

.item-qa h4.title {
    text-align: left;
    padding: 10px;
    font-size: 15px;
  
    overflow: hidden;
}
@media screen and (min-width:769px){
    .item-qa h4.title {
         height: 90px; 
    }
}
.btn-item-qa {
    text-align: center;
}

.btn-item-qa a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #e83025;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 8px 25px;
    text-align: center;
    text-decoration: none;
}

.btn-item-qa a:hover {
    background-color: #f20e00;
}

/*************** TU LIEU NGHE NHIN  ***************/
.tu-lieu-nn .title-qa h3 {
    color: #e2231a;
}
.tu-lieu-nn .title-qa .bottom-title .bottom-icon {
    color: #fff;
}

.tu-lieu-nn .title-qa .bottom-title:after, .tu-lieu-nn .bottom-title:before {
    background-color: #fff;
}

/*************** FOOTER  ***************/
@media screen and (min-width: 769px) {
    #widget-footer-1 {
        width: calc(33.3% - (0.667 * 30px)) !important;
    }


    #widget-footer-2, #widget-footer-3, #widget-footer-4, #widget-footer-5 {
        width: calc(16.675% - (0.83325 * 30px)) !important;
    }
}

/*************** page single ***************/
.single .entry-header .entry-meta li {
    border-right: 1px solid #eee;
    padding-right: 23px;
    margin-right: 20px;
    list-style: none;
    display: inline-block;
    line-height: 18px;
    margin-top: 10px;
}

.single .entry-header .entry-meta li span {
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    display: block;
    line-height: 18px;
}

.single .entry-header .entry-meta li span {
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    display: block;
    line-height: 18px;
}

.single .entry-meta li span.value {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    color: #7a7a7a;
}

/*************** page-title-wrapper ***************/
.page-title-wrapper {

    padding-bottom: 90px;
    text-align: left;
    position: relative;
    z-index: 1;
}
@media screen and (min-width:769px){
    .page-title-wrapper {
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: left;
    position: relative;
    z-index: 1;
}
} 
.page-title-wrapper h2 a {
    color: #fff;
}

.page-title-wrapper h2 {
    color: inherit;
    margin: 0;
    line-height: 54px;
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 700;
    padding-left: 25px;
    position: relative;
    border-left: 3px solid #ed1300;
}

.overlay-top-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.top_site_main {
    color: #fff;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-color: rgba(45, 51, 57, .95);
    min-height: 235px;
    margin-bottom: 20px;
}

#footer {
    background: #111;
    padding-top: 80px;
}

#footer .thim-social li a {
    color: #999;
}

#footer .thim-social li a {
    border-color: #999;
}

#footer .thim-social a {
    font-size: 16px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #999;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
    cursor: pointer;
}

#footer .thim-social ul.social_link li {
    display: inline-block;
    margin: 0;
    list-style: none;
    padding: 0;
}


#footer .copyright-content {
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid #252121;
}


#footer p.text-copyright {
    color: #879599;
    font-size: 12px;
}

#footer p.text-copyright a {
    color: #676767;
    font-size: 15px;
}

#footer p.info .fa {
    margin-right: 10px;
    color: #fff;
}

#footer p.info a {
    color: #fff;
}

#footer h3 {
    color: #fff;
}

#footer a {
    color: #999;
    font-size: 13px;
}

#footer li {
    border-top: transparent;
}

#footer .copyright-content .text-right li {
    display: inline-block;
    list-style: none;
    line-height: 30px;
    margin-left: 15px;
}

@media screen and (max-width: 768px) {
    .footer-wrapper {
        padding: 0 25px;
    }
}

/*************** WIDGET RIGHT ***************/
.post-sidebar.large-3.col {
    padding: 0;
}

#flatsome_recent_posts-2 ul {
    padding: 0 25px;
    margin-top: 15px;
}

#flatsome_recent_posts-2 .is-divider.small {
    display: none;
}

#flatsome_recent_posts-2 .widget-title {
    border-left: 3px solid #ed1300;
    padding: 10px 20px;
}

/*************** ARCHIVE POST ***************/
.archive .page-numbers.nav-pagination.links.text-center {
    text-align: right;
}

.archive .nav-pagination>li>.current,.archive .nav-pagination>li>a.current {
    border-color: #ed1300;
    background-color: #ed1300;
    color: #FFF;
    border-radius: inherit;
}

.archive .nav-pagination>li>span, .archive .nav-pagination>li>a {
    border-radius: inherit;

}
.archive .nav-pagination>li>.current, .archive .nav-pagination>li>span:hover, .archive .nav-pagination>li>a:hover {
    border-color: #ed1300;
    background-color: #ed1300;
}
.archive .heading-tt.container {
    padding: 0 15px;
    text-align: center;
}

.archive .heading-tt.container h3 {
    background: #ed1300;
    color: #fff;
    padding: 5px 0;
    font-size: 16px;
}

.archive .heading-tt.container {
    margin: 10px auto ;
}

.breadcrumbs-wrapper .container {
    border-bottom: 1px solid #eee;
    margin-bottom:10px;
}
/*************** Edugate***************/
.edugate-image.col {
    padding: 0 0 0 15px;

}

.edugate-content {
    padding: 15px 30px;
    background-color: #fafafa;
}

.edugate-content .title {
    font-size: 30px;
    line-height: 35px;
    margin: 0 0 6px 0;
    max-height: 84px;
    overflow: hidden;
    color: #49575f;
    display: inline-block;

}
.edugate-content .info .item {
    text-transform: capitalize;
    display: inline-block;
}
.edugate-content .info .author:after  {
    content: '|';
    margin: 0 5px;
    color: #bfc9ce;
}
.edugate-content .info .item a {
    color: #49575f;
    font-size: 14px;
}
.edugate-content  .info-more .item {
    display: inline-block;
    margin-right: 12px;
    color: #49575f;
}
.edugate-content .info-more {
    margin-bottom: 15px;
}

.edugate-content .btn-post {
    text-align: right;
}

.edugate-content .btn-post a {
    background-color: #ed1300;
    color: #fff;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding:10px 25px;
}

/* Header luon dinh len top khi cuon (sticky) — ban goc co class has-sticky nhung khong hoat dong
   (position:sticky bi vo hieu boi phan tu cha co overflow/transform, hay gap voi slider).
   Dung position:fixed qua JS (class .skda-scrolled) thay vi CSS sticky de chac chan hoat dong,
   kem .skda-header-spacer (JS tao) de khong bi giat noi dung khi header roi khoi flow. */
.header-wrapper.skda-scrolled {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #12100f;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: background-color .25s ease, box-shadow .25s ease;
}
.skda-header-spacer {
    width: 100%;
}

/* Mau chu Menu mac dinh la do tuoi. Khi hover/dang o trang hien tai thi doi sang den.
   (Truoc day co lop nen bo goc mo phia sau vi Menu tung de len anh nen banner — nay Menu da
   chuyen xuong nam duoi Header/tren Banner (khong con de len anh nua) nen bo han lop nen do,
   chi giu lai text.
   LUU Y: Menu chinh dung plugin Max Mega Menu, markup la .mega-menu-link (KHONG PHAI .nav>li>a
   cua Flatsome) — phai target dung class nay CSS moi co tac dung. */
#mega-menu-wrap-primary .mega-menu-link {
    color: #e2231a !important;
}
#mega-menu-wrap-primary .mega-menu-link:hover,
#mega-menu-wrap-primary .mega-menu-item.mega-current-menu-item > .mega-menu-link,
#mega-menu-wrap-primary .mega-menu-item:hover > .mega-menu-link {
    color: #16110f !important;
}

/* Can giua Menu. Chieu cao that su nam o quy tac .mega-menu-link height/line-height ben duoi (da
   giam con 25px) — min-height o day chi la san toi thieu, dat bang 25px de khong keo cao ngược
   lai. */
#header .header-inner {
    justify-content: center !important;
    min-height: 25px;
}
#header .header-nav-main {
    justify-content: center;
}
#mega-menu-wrap-primary {
    display: flex;
    align-items: center;
}
/* Chieu cao that cua Menu KHONG phai do .header-inner min-height (da sua truoc) ma do chinh CSS
   plugin Max Mega Menu tu sinh ra (file /wp-content/uploads/maxmegamenu/style.css) dat cung
   "height:50px; line-height:50px" thang tren the <a> — phai ghi de dung selector nay + !important
   moi co tac dung (file cua plugin nap SAU nen thang the neu khong co !important). Giam con 1/2
   (25px) theo yeu cau. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: 25px !important;
    line-height: 25px !important;
}
/* Chieu cao TONG THE cua khoi Menu thuc ra la do ".header-main{height: 90px}" — 1 khoi <style>
   noi tuyen Flatsome tu in ra thang trong <head> theo tuy chinh Customizer (KHONG nam trong file
   .css nao ca, phai doc HTML that moi thay). Day moi la nguyen nhan chinh khien khoi Menu van
   cao dan du da giam .mega-menu-link — link nam giua 1 khung cha cao 90px nen van thay khoang
   trong lon phia tren/duoi chu. Giam con 1/2 (45px), ap dung ca trang thai .stuck (khi cuon dinh). */
#header .header-main,
.stuck #header .header-main {
    height: 45px !important;
}

/* =====================================================================
 * KHOI "BAN TIN SKDA MOI NHAT" (2026-09-25) — thay the khoi "TIN MOI" cu
 * (shortcode list_item_qa style-1), copy dung CSS dang dung ben web moi
 * (kadence-child) cho shortcode moi [skda_bantin_moi] (xem functions.php).
 * ===================================================================== */
.skda-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
:root {
  --skda-accent: #a4161a;
  --skda-dark: #16110f;
  --skda-darker: #0c0a09;
  --skda-border: #e6dccc;
  --skda-gold: #c9a227;
  --skda-cream-2: #efe7d9;
  --skda-muted-3: #8a7f70;
  /* Dung "Roboto" (font Menu web cu dang dung, da nap san qua Google Fonts) thay vi "Lora" cua
     web moi — Lora CHUA duoc nap tren web cu, khien trinh duyet fallback ve font he thong render
     sai dau tieng Viet (VD "nhất" -> "nhâ´t", dau sac tach roi khoi chu). Dong bo font toan bo
     khoi Ban tin SKDA voi font dang dung o Menu theo dung yeu cau. */
  --skda-font-heading: "Roboto", sans-serif;
}
.skda-section { padding: 10px 0; }
.skda-section-head {
  display: flex !important; flex-wrap: nowrap !important; gap: 16px; align-items: baseline !important;
  justify-content: space-between !important;
  border-top: 2px solid var(--skda-dark); padding-top: 14px; margin-bottom: 10px;
}
.skda-section-head > .skda-section-title { flex: 1 1 auto; min-width: 0; }
.skda-section-head > .skda-section-link { flex: none !important; white-space: nowrap; }
.skda-section-title { font-family: var(--skda-font-heading); font-size: 27px; font-weight: 600; margin: 0 !important; color: var(--skda-accent); }
.skda-section-link { font-size: 13px; font-weight: 600; color: var(--skda-accent); }

.skda-news-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 14px; align-items: stretch; }
.skda-news-side { display: grid; grid-auto-rows: minmax(72px, auto); gap: 10px; }
.skda-news-card { background: #fff; border: 1px solid var(--skda-border); display: grid; grid-template-columns: 74px minmax(0, 1fr); overflow: hidden; min-height: 72px; }
.skda-news-card:hover { border-color: var(--skda-accent); }
.skda-news-card-img { background-color: var(--skda-dark); background-size: cover; background-position: center; }
.skda-news-card-body { padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.skda-news-card-title { font-family: var(--skda-font-heading); font-size: 13px; line-height: 1.3; font-weight: 600; margin: 0; color: var(--skda-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skda-news-card-date { font-size: 10.5px; color: #a2998c; }

.skda-news-featured { position: relative; overflow: hidden; background: var(--skda-dark); display: block; color: #fff; min-height: 260px; }
.skda-news-featured-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,9,.94) 8%, rgba(12,10,9,.45) 48%, rgba(12,10,9,.05) 78%); }
.skda-news-featured-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px; }
.skda-news-featured-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--skda-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .16em; padding: 7px 14px; margin-bottom: 16px; }
.skda-news-featured-title { font-family: var(--skda-font-heading); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 14px; max-width: 24ch; }
.skda-news-featured-title--sm { font-size: clamp(18px, 2vw, 25px); margin-bottom: 8px; }
.skda-news-featured-desc { font-size: 13.5px; line-height: 1.55; color: #d8cdbb; margin: 0 0 12px; max-width: 62ch; }
.skda-news-featured-meta { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: #9a8f80; }
.skda-dot { width: 4px; height: 4px; background: var(--skda-gold); border-radius: 50%; }

@media (max-width: 900px) {
  .skda-news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .skda-news-card { grid-template-columns: 60px minmax(0,1fr); }
}

/* Icon Menu (3 gach) tren mobile mau trang bi mo vao anh nen sang mau -> doi sang do de de nhin ro */
@media (max-width: 900px) {
    .header .nav-icon a,
    .header .nav-icon .header-button {
        color: #a4161a !important;
    }
    .header .nav-icon svg,
    .header .nav-icon svg * {
        fill: #a4161a !important;
        stroke: #a4161a !important;
    }
}

/* Khoang cach GIUA cac khoi lon o trang chu (Banner, Ban tin SKDA, Lua chon nganh hoc, Rap chieu
   SKDA...) — moi khoi la 1 [section] cua UX Builder, mac dinh Flatsome dat padding:30px 0 (class
   ".section" dung chung toan site, KHONG sua thang o day vi se anh huong moi trang khac — chi thu
   hep rieng cho trang chu qua class "home" body tu dong co san).
   Dung DUY NHAT margin-bottom, KHONG dung padding — de khoang cach giua 2 khoi lien tiep bat ky
   deu tuyet doi bang nhau = 5px (thay vi truoc day cong don padding-top + padding-bottom/margin
   cua ca 2 khoi lai voi nhau ra 10-15px khong deu, tuy khoi co margin rieng bakced-in hay khong). */
body.home .section {
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
}
/* Cac khoi tu than co margin rieng (copy nguyen CSS tu web moi, noi khong bi boc trong .section
   nen can margin rieng) — o day chung DA nam trong .section da co margin-bottom 5px o tren, nen
   phai xoa margin rieng di de khong bi cong don gay khoang cach to hon cac khoi khac. */
.skda-cinema { margin: 0 !important; }
.skda-principal { margin: 0 !important; }
/* RevSlider (banner) tu dat margin 0 qua inline style roi. Dat lai dung 5px duoi, dong bo voi
   khoang cach giua cac khoi con lai (khong con cong them padding cua khoi ke tiep nua). */
.rev_slider_wrapper { margin: 0 0 5px 0 !important; }

/* =====================================================================
 * KHOI HEADER LOGO MOI (2026-09-25) — theo dung thiet ke dang dung ben web
 * moi (kadence-child), chen THEM phia tren header/menu Flatsome co san,
 * KHONG dong vao cau truc noi bo cua Flatsome (sticky/mobile JS cua Flatsome
 * van hoat dong binh thuong vi khong bi dung cham). Prefix rieng "skda-bar-"
 * de khong trung ten class voi bat ky class nao cua Flatsome/plugin khac.
 * ===================================================================== */
:root {
  --skdabar-accent: #a4161a;
  --skdabar-dark: #16110f;
  --skdabar-cream: #f7f3ec;
  --skdabar-border: #e0d6c6;
  --skdabar-muted-3: #8a7f70;
  --skdabar-font-heading: "Roboto", sans-serif; /* dong bo voi font Menu, xem ghi chu o --skda-font-heading */
}
.skda-bar-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.skda-bar-header { background: var(--skdabar-cream); border-bottom: 1px solid var(--skdabar-border); }
.skda-bar-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; padding: 10px 24px;
}
.skda-bar-row > * { align-self: center; margin: 0; }
.skda-bar-logo-block { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 220px; color: inherit; text-decoration: none; }
.skda-bar-logo-img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.skda-bar-logo-text { min-width: 0; }
.skda-bar-logo-title { font-family: var(--skdabar-font-heading); font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; line-height: 1.2; color: var(--skdabar-dark); display: block; }
.skda-bar-logo-sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--skdabar-muted-3); margin-top: 3px; display: block; }

.skda-bar-search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--skdabar-border); border-radius: 999px; padding: 0 14px;
  min-width: 0; flex: 1 1 110px; max-width: 240px; height: 38px; box-sizing: border-box;
}
.skda-bar-search button {
  display: flex; align-items: center; justify-content: center; background: none !important;
  border: none !important; padding: 0 !important; margin: 0; cursor: pointer; flex: none;
  height: auto !important; min-height: 0 !important; box-shadow: none !important;
}
.skda-bar-search input[type="search"] {
  border: none !important; outline: none; background: none !important; font-family: inherit;
  font-size: 13px; color: var(--skdabar-dark); min-width: 0; width: 100%;
  padding: 0 !important; margin: 0; appearance: none; height: 100% !important;
  min-height: 0 !important; line-height: normal; box-shadow: none !important; border-radius: 0 !important;
}
.skda-bar-search input[type="search"]::placeholder { color: #a2998c; }
.skda-bar-search input[type="search"]::-webkit-search-cancel-button { display: none; }

.skda-bar-actions { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; height: 38px; }
.skda-bar-login {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: #fff !important; background: var(--skdabar-accent); padding: 0 18px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; height: 38px; box-sizing: border-box;
}
.skda-bar-login:hover { background: var(--skdabar-dark); color: #fff !important; }

@media (max-width: 900px) {
  .skda-bar-search { display: none; }
  .skda-bar-row { padding: 8px 14px; gap: 8px; }
  .skda-bar-logo-img { width: 34px; height: 34px; }
  .skda-bar-logo-block { gap: 10px; }
  .skda-bar-logo-title { font-size: 13px; }
  .skda-bar-logo-sub { font-size: 9px; margin-top: 2px; }
  .skda-bar-login { font-size: 12px; padding: 6px 13px; gap: 6px; }
  .skda-bar-login svg { width: 12px; height: 12px; }
}

/* Bo logo + o tim kiem trong thanh Menu cua Flatsome — da co roi o khoi Header phia tren, tranh
 * lap lai 2 lan. Chi thanh Menu (danh sach muc TRANG CHU/GIOI THIEU/...) la con giu lai. */
#header #logo { display: none !important; }
#header .searchform-wrapper,
#header .header-search-form-wrapper,
#header .nav-search,
#header .is-search { display: none !important; }

/* Khoi Banner "SKDA voi nhung con so" — anh nen full trang, text nam trong .skda-wrap.
 * Dong bo giao dien voi khoi cung ten ben web moi. */
.skda-stats { position: relative; overflow: hidden; background: var(--skda-darker); color: #f2e9db; padding: 0; margin: 0; }
.skda-stats-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.skda-stats-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(10,8,7,.94) 30%, rgba(124,16,21,.72) 100%); }
.skda-stats-grid { position: relative; padding: 40px 24px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; align-items: center; }
.skda-stats-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--skda-gold); margin-bottom: 10px; }
.skda-stats-title { font-family: var(--skda-font-heading); font-size: clamp(20px, 2vw, 28px); line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 10px; }
.skda-stats-desc { font-size: 13px; line-height: 1.6; color: #cabfad; margin: 0; max-width: 50ch; }
.skda-stats-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
.skda-stat-item { border-left: 2px solid rgba(201,162,39,.45); padding: 2px 0 2px 12px; }
.skda-stat-value { font-family: var(--skda-font-heading); font-size: clamp(24px, 2.4vw, 34px); line-height: 1; font-weight: 600; color: #fff; }
.skda-stat-label { font-size: 11.5px; line-height: 1.45; color: #bdb2a0; margin-top: 7px; }

@media (max-width: 900px) { .skda-stats-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .skda-stats-numbers { grid-template-columns: 1fr; } }

/* Khoi Banner "Chao mung tan sinh vien" — dong bo giao dien voi khoi cung ten ben web moi. */
.skda-btn-solid-white { background: #fff; color: #7c1015; font-weight: 600; font-size: 11.5px; padding: 7px 14px; border-radius: 999px; }
.skda-btn-solid-white:hover { background: var(--skda-dark); color: #fff; }
.skda-btn-outline-white { border: 1px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; font-size: 11.5px; padding: 7px 14px; border-radius: 999px; }
.skda-btn-outline-white:hover { background: rgba(255,255,255,.14); color: #fff; }

.skda-promo-banner {
  position: relative; overflow: hidden; background: #7c1015; min-height: 220px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch;
}
.skda-promo-banner-bg { position: absolute; inset: 0; background: linear-gradient(110deg, #4c090d 0%, #a4161a 58%, #c9a227 190%); }
.skda-promo-banner-texture { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px); }
.skda-promo-banner-body {
  position: relative; padding: 14px 22px 14px max(22px, calc((100vw - 1120px) / 2 + 24px));
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.skda-promo-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; background: var(--skda-gold); color: #2a1206; font-size: 11px; font-weight: 700; letter-spacing: .18em; padding: 7px 14px; }
.skda-promo-title { font-family: var(--skda-font-heading); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.14; font-weight: 600; color: #fff; margin: 0; max-width: 22ch; }
.skda-promo-desc { font-size: 12px; line-height: 1.5; color: #f4e7d4; margin: 0; max-width: 60ch; }
.skda-promo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.skda-promo-banner-img { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.skda-promo-banner-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--skda-accent) 0%, rgba(164,22,26,0) 42%); }
.skda-promo-banner-img::after { content: ""; position: absolute; inset: 0; background: rgba(124,16,21,.28); }
.skda-promo-year {
  position: absolute; right: max(26px, calc((100vw - 1120px) / 2 + 24px)); bottom: 22px; z-index: 1;
  font-family: var(--skda-font-heading); font-size: clamp(24px, 2.6vw, 38px); font-weight: 600;
  color: rgba(255,255,255,.9); line-height: 1;
}

/* Khoi Banner "Su kien sap dien ra" — dong bo giao dien voi khoi cung ten ben web moi. */
.skda-btn-gold { background: var(--skda-gold); color: #2a1206; font-weight: 700; font-size: 12px; padding: 9px 16px; border-radius: 999px; text-align: center; display: block; }
.skda-btn-gold:hover { background: #fff; color: #2a1206; }
.skda-link-light { font-size: 12.5px; font-weight: 600; color: #e2d8c8; text-align: center; display: block; }
.skda-link-light:hover { color: var(--skda-gold); }

.skda-event-banner {
  position: relative; overflow: hidden; background: #0c0a09; min-height: 220px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: stretch;
}
.skda-event-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.skda-event-banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,7,.72), rgba(10,8,7,.86)); }
.skda-event-date {
  position: relative; background: var(--skda-accent); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 16px 14px; padding-left: max(14px, calc((100vw - 1120px) / 2 + 24px));
}
.skda-event-date-tag { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #f3d99a; }
.skda-event-date-day { font-family: var(--skda-font-heading); font-size: 40px; line-height: 1; font-weight: 600; }
.skda-event-date-month { font-size: 13px; letter-spacing: .14em; }
.skda-event-date-line { width: 28px; height: 2px; background: var(--skda-gold); margin: 6px 0 4px; }
.skda-event-date-time { font-size: 12.5px; color: #f0dcc2; }
.skda-event-body { position: relative; padding: 18px 24px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.skda-event-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--skda-gold); }
.skda-event-title { font-family: var(--skda-font-heading); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.18; font-weight: 600; color: #fff; margin: 0; max-width: 26ch; }
.skda-event-desc { font-size: 12.5px; line-height: 1.55; color: #cabfad; margin: 0; max-width: 62ch; }
.skda-event-aside {
  position: relative; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center;
  gap: 9px; border-left: 1px solid rgba(240,232,219,.16);
  padding-right: max(20px, calc((100vw - 1120px) / 2 + 24px));
}
.skda-event-aside-info { font-size: 11.5px; line-height: 1.55; color: #cabfad; }

/* Khoi "Lua chon nganh hoc phu hop voi ban" — dong bo giao dien voi khoi cung ten ben web moi
 * (the co so, anh nen, so thu tu, mo ta, hover doi mau vien vang). */
.skda-majors-head { border-top: 2px solid var(--skda-dark); padding-top: 14px; margin-bottom: 10px; text-align: center; }
.skda-majors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, 23%), 1fr)); gap: 18px; }
.skda-major-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px;
  overflow: hidden; background: var(--skda-dark); color: #fff; border-top: 3px solid var(--skda-accent);
}
.skda-major-card:hover { border-color: var(--skda-gold); color: #fff; }
.skda-major-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1.1s ease, filter .6s ease; filter: saturate(.75); }
.skda-major-card:hover .skda-major-card-bg { transform: scale(1.16); filter: saturate(1.05); }
.skda-major-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,7,.94) 12%, rgba(10,8,7,.55) 55%, rgba(10,8,7,.18)); }
.skda-major-card-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--skda-gold); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.skda-major-card:hover .skda-major-card-line { transform: scaleX(1); }
.skda-major-card-num { position: absolute; top: 14px; left: 18px; font-family: var(--skda-font-heading); font-size: 26px; color: var(--skda-gold); line-height: 1; }
.skda-major-card-body { position: relative; padding: 22px 20px 24px; }
.skda-major-card-name { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; min-height: 2.6em; display: flex; align-items: flex-end; }
.skda-major-card-desc { font-size: 12.5px; line-height: 1.6; color: #cabfad; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Khoi "Rap chieu SKDA" — thay khoi "TU LIEU NGHE NHIN" cu, dong bo giao dien voi khoi cung
 * ten ben web moi. Du lieu video (YouTube ID that, lich cong chieu du kien) lay dung tu du lieu
 * da nhap o web moi — khong bia noi dung moi. */
.skda-btn-outline-gold { font-size: 13px; font-weight: 600; color: var(--skda-gold); border: 1px solid #4a3f2a; padding: 9px 16px; border-radius: 999px; }
.skda-btn-outline-gold:hover { background: var(--skda-gold); color: #0c0a09; }
.skda-cinema { background: #0c0a09; padding: 24px 22px 26px; position: relative; overflow: hidden; margin: 10px 0; }
.skda-cinema-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 760px; max-width: 200vw; height: 300px; background: radial-gradient(ellipse at center, rgba(201,162,39,.22), transparent 70%); animation: skda-glow 7s ease-in-out infinite; }
@keyframes skda-glow { 0%,100% { opacity: .35; } 50% { opacity: .75; } }
.skda-cinema-inner { position: relative; }
.skda-cinema-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.skda-cinema-title { font-family: var(--skda-font-heading); font-size: 23px; font-weight: 600; color: #fff; margin: 0; }
.skda-cinema-sub { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #8e8272; margin-top: 6px; }
.skda-cinema-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 18px; align-items: stretch; }
.skda-cinema-featured {
  position: relative; min-height: 340px; background-size: cover; background-position: center; background-color: var(--skda-dark);
  border: 1px solid #2a231d; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.skda-cinema-featured-texture { position: absolute; inset: 0; background: repeating-linear-gradient(to right, rgba(255,255,255,.028) 0 2px, transparent 2px 5px); }
.skda-cinema-play { width: 60px; height: 60px; border-radius: 50%; background: rgba(164,22,26,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 11px rgba(164,22,26,.16); }
.skda-cinema-featured-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(to top, rgba(8,7,6,.95), transparent); }
.skda-cinema-featured-tag { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--skda-gold); margin-bottom: 10px; }
.skda-cinema-featured-title { font-family: var(--skda-font-heading); font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 5px; }
.skda-cinema-featured-author { font-size: 13px; color: #a89c8a; }
.skda-cinema-schedule { background: #131110; border: 1px solid #262019; padding: 16px; display: flex; flex-direction: column; }
.skda-cinema-schedule-head { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--skda-gold); margin-bottom: 12px; }
.skda-cinema-schedule-row { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid #221c17; }
.skda-cinema-schedule-date { min-width: 46px; text-align: center; }
.skda-cinema-schedule-day { font-family: var(--skda-font-heading); font-size: 17px; color: #fff; line-height: 1; }
.skda-cinema-schedule-mon { font-size: 10.5px; color: #7f7565; letter-spacing: .1em; margin-top: 3px; }
.skda-cinema-schedule-title { font-size: 12.5px; font-weight: 600; color: #ece3d5; line-height: 1.3; }
.skda-cinema-schedule-meta { font-size: 11px; color: #8b8070; margin-top: 3px; }
.skda-cinema-empty { background: #131110; border: 1px dashed #3a3028; display: flex; align-items: center; justify-content: center; padding: 30px; }
.skda-cinema-empty-inner { color: #9a8f7d; font-size: 13.5px; line-height: 1.6; text-align: center; max-width: 380px; }
.skda-cinema-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.skda-cinema-item { display: block; }
.skda-cinema-item-thumb { position: relative; aspect-ratio: 16 / 7; background-size: cover; background-position: center; border: 1px solid #241d18; display: flex; align-items: flex-end; padding: 7px; }
.skda-cinema-item-dur { background: rgba(8,7,6,.82); color: #e8ddcb; font-size: 10px; padding: 2px 6px; }
.skda-cinema-item-title { font-size: 11.5px; font-weight: 600; color: #ece3d5; margin-top: 6px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skda-cinema-item-author { font-size: 10px; color: #7f7565; margin-top: 2px; }

@media (max-width: 900px) {
  .skda-cinema-main { grid-template-columns: 1fr; }
  .skda-cinema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .skda-cinema-grid { grid-template-columns: 1fr; } }

/* Khoi Banner "Tour 360" — dong bo giao dien voi khoi cung ten ben web moi. */
.skda-tour-banner { position: relative; display: block; overflow: hidden; background: #0c0a09; min-height: 220px; color: #fff; }
.skda-tour-banner:hover { filter: brightness(1.06); color: #fff; }
.skda-tour-bg { position: absolute; inset: 0; background-image: url('assets/img/truong-tu-cao.jpg'); background-size: cover; background-position: center; transform: scale(1.04); filter: saturate(.85); }
.skda-tour-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,7,6,.92) 12%, rgba(8,7,6,.5) 55%, rgba(124,16,21,.42)); }
.skda-tour-grain { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 4px); }
.skda-tour-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, .8fr);
  gap: 20px; align-items: center; min-height: 220px;
  padding: 24px max(30px, calc((100vw - 1120px) / 2 + 24px)) 26px max(30px, calc((100vw - 1120px) / 2 + 24px));
}
.skda-tour-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--skda-gold); }
.skda-tour-eyebrow span { width: 30px; height: 2px; background: var(--skda-gold); display: inline-block; }
.skda-tour-title { font-family: var(--skda-font-heading); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.16; font-weight: 600; color: #fff; margin: 0 0 12px; max-width: 20ch; }
.skda-tour-desc { font-size: 13.5px; line-height: 1.7; color: #cabfad; margin: 0 0 18px; max-width: 54ch; }
.skda-tour-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.skda-tour-tags span { font-size: 11.5px; color: #e2d8c8; border: 1px solid rgba(240,232,219,.3); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.skda-tour-badge-wrap { display: flex; align-items: center; justify-content: center; }
.skda-tour-badge { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(201,162,39,.45); display: flex; align-items: center; justify-content: center; }
.skda-tour-badge-ring { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(201,162,39,.5); animation: skda-spin 18s linear infinite; }
@keyframes skda-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.skda-tour-badge-core { position: absolute; inset: 34px; border-radius: 50%; background: rgba(164,22,26,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(164,22,26,.16); font-family: var(--skda-font-heading); font-size: 22px; font-weight: 600; color: #fff; }

@media (max-width: 700px) {
  .skda-tour-inner { grid-template-columns: 1fr; }
  .skda-tour-badge-wrap { display: none; }
}

/* Khoi "Loi chao Hieu truong" — dong bo giao dien voi khoi cung ten ben web moi. */
.skda-principal { background: var(--skda-cream-2); padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.skda-principal-img { position: relative; min-height: 260px; background: var(--skda-dark); }
.skda-principal-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.skda-principal-img-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(12,10,9,.1), rgba(12,10,9,.55)); }
.skda-principal-body { padding: 26px 30px 28px; display: flex; flex-direction: column; justify-content: center; }
.skda-principal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--skda-accent); margin-bottom: 12px; }
.skda-principal-quote { font-family: var(--skda-font-heading); font-size: 19px; line-height: 1.45; font-style: italic; color: var(--skda-dark); margin: 0 0 14px; max-width: 38ch; }
.skda-principal-desc { font-size: 13px; line-height: 1.6; color: #5c5246; margin: 0 0 16px; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skda-principal-sig { display: flex; align-items: center; gap: 14px; }
.skda-principal-sig-bar { width: 46px; height: 2px; background: var(--skda-gold); flex: none; }
.skda-principal-sig-name { font-size: 13.5px; font-weight: 600; color: var(--skda-dark); }
.skda-principal-sig-role { font-size: 12.5px; color: var(--skda-muted-3); margin-top: 2px; }
.skda-principal-link { margin-top: 16px; align-self: flex-start; display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--skda-accent); border-bottom: 2px solid var(--skda-gold); padding-bottom: 3px; }
.skda-principal-link:hover { color: var(--skda-dark); }