@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,500&display=swap');

:root{
  --gold:#a99a77;
  --cream:#f4eee2;
  --white:#fff;
  --black:#050505;
  --menu:#1c1b1a;
}


@font-face {
    font-family: "UTM-Bebas";
    src: url("fonts/UTM_Bebas.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body {
    font-family: 'Montserrat', sans-serif !important;
}

button,
input,
textarea,
select,
.form-control,
.btn {
    font-family: 'Montserrat', sans-serif !important;
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  
  color:#fff;
  
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* TOP BAR */
.topbar{
  height:54px;
  background:#1f562c;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:100;
}
.topbar-left{
  position:absolute;
  left:17.5%;
  display:flex;
  gap:30px;
}
.topbar-left a{
  font-size:14px;
  font-weight:600;
  color: #fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.socials{
  display:flex;
  align-items:center;
  gap:8px;
}
.socials a{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  color:#948564;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
}

.img_logo_mb{
  height: 80px;
}



/* ===================================
   BSE TOP HEADER - GREEN & GOLD
=================================== */

.bse-top-header {
    width: 100%;
    position: relative;
    z-index: 100;
    color: #fff;
    background: linear-gradient(
        110deg,
        #173f29 0%,
        #1c4b31 50%,
        #173f29 100%
    );
    border-bottom: 2px solid #c5aa72;
    font-family: inherit;
}

.bse-top-header,
.bse-top-header * {
    box-sizing: border-box;
}

.bse-top-header-inner {
    width: 100%;
    max-width: 1440px;
    min-height: 62px;
    margin: 0 auto;
    padding: 10px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

/* HOTLINE */
.bse-header-hotline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    color: #fff;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: .15px;
    transition: color .25s ease;
}

.bse-header-hotline strong {
    font-weight: 600;
}

.bse-header-phone {
    color: #d7bd80;
    font-size: 17px;
}

.bse-header-hotline:hover {
    color: #e7d5a7;
}

/* SLOGAN */
.bse-header-slogan {
    color: #e5dfcf;
    font-size: 13px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.bse-header-slogan span {
    margin: 0 5px;
    color: #d7bd80;
}

/* SEARCH BOX */
.bse-header-search {
    width: 310px;
    height: 39px;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 13px;
    border: 1px solid rgba(220, 199, 150, .6);
    border-radius: 30px;
    background: rgba(255, 255, 255, .035);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.bse-header-search:focus-within {
    border-color: #dfc78f;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 3px rgba(223, 199, 143, .08);
}

.bse-header-search button {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    background: transparent;
    color: #dfc78f;
    cursor: pointer;
}

.bse-header-search button svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.bse-header-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;

    color: #fff;
    font-family: inherit;
    font-size: 13px;
}

.bse-header-search input::placeholder {
    color: rgba(255, 255, 255, .72);
}

/* SOCIAL ICONS */
.bse-header-socials {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-left: 22px;
    border-left: 1px solid rgba(222, 203, 158, .35);
}

.bse-header-socials a {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #c5aa72;
    border-radius: 50%;
    color: #e4d0a0;
    background: transparent;

    text-decoration: none;
    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.bse-header-socials a svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bse-header-socials a:first-child svg {
    fill: currentColor;
    stroke: none;
}

.bse-header-socials a:hover {
    color: #19462d;
    background: #dfc78f;
    transform: translateY(-2px);
}


/* ===================================
   TABLET
=================================== */

@media (max-width: 1100px) {
    .bse-top-header-inner {
        padding: 9px 20px;
        gap: 16px;
    }

    .bse-header-slogan {
        display: none;
    }

    .bse-header-search {
        width: 300px;
    }

    .bse-header-socials {
        padding-left: 15px;
    }
}


/* ===================================
   MOBILE
=================================== */

@media (max-width: 767px) {
    .bse-top-header-inner {
        min-height: 48px;
        padding: 7px 12px;
        gap: 10px;
    }

    .bse-header-hotline {
        gap: 6px;
        font-size: 12px;
    }

    .bse-header-phone {
        font-size: 14px;
    }

    .bse-header-search {
        display: none;
    }

    .bse-header-socials {
        gap: 5px;
        padding-left: 10px;
    }

    .bse-header-socials a {
        width: 26px;
        height: 26px;
    }

    .bse-header-socials a svg {
        width: 13px;
        height: 13px;
    }
}


/* Màn hình điện thoại rất nhỏ */
@media (max-width: 360px) {
    .bse-top-header-inner {
        padding-left: 8px;
        padding-right: 8px;
        gap: 6px;
    }

    .bse-header-hotline {
        font-size: 11px;
    }

    .bse-header-socials {
        gap: 4px;
        padding-left: 7px;
    }

    .bse-header-socials a {
        width: 23px;
        height: 23px;
    }
}




.bse-header-motto {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 10px;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    line-height: 1.2;
}

.bse-header-motto .bse-motto-icon {
    display: block !important;
    width: 42px;
    height: 30px;
    min-width: 42px;
    flex: 0 0 42px;
    color: #D8BC79;
}

.bse-header-motto .bse-motto-text {
    display: inline-block !important;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    color: #E5D5AB;
    font-size: 14px;
    line-height: 1.4;
}

/* Tablet: ẩn slogan nếu không đủ chỗ */
@media (max-width: 1100px) {
    .bse-header-motto {
        display: none !important;
    }
}


/* HEADER */
.header{
  height:80px;
  position:absolute;
  
  left:0;
  width:100%;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3.5%;
  background:rgba(0,0,0,.95);
}
.logo{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
}
.logo-ring{
  width:68px;
  height:68px;
  border:1px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  
  font-size:17px;
  letter-spacing:2px;
  transform:rotate(-12deg);
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:25px;
}
.nav-link{
  font-size:16px;
  color:#d9d9d9;
  transition:.3s ease;
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active{color:#333}
.nav-link span{margin-left:5px;font-size:16px}
.divider{
  width:1px;
  height:14px;
  background:#686868;
}
.menu-toggle{display:none}

/* MEGA MENU */
.mega-wrap{
  position:absolute;
  z-index:90;
  top:96px;
  right:18%;
  width:min(730px,calc(100% - 40px));
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px) scale(.98);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.mega-wrap.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.mega-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  padding:23px 36px;
  background:rgba(27,26,25,.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.mega-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mega-col a{
  color:#f0f0f0;
  font-size:14px;
  line-height:1.35;
  transition:color .25s ease,transform .25s ease;
}
.mega-col a:hover{
  color:#d8c79c;
  transform:translateX(4px);
}

/* HERO */
.hero{
  min-height:100svh;
  height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background-image:url("hero.jpg");
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  position:absolute;
  inset:0;
 /* background:
    linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.48) 100%),
    linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.58));*/
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(640px,50vw);
  margin-left:19.5%;
  padding-top:80px;
}
.eyebrow{
  color:#c8b789;
  letter-spacing:6px;
  font-size:15px;
  margin-bottom:34px;
  white-space:nowrap;
}
.hero h1{
 
  font-size:78px;
  line-height:1.03;
  font-weight:400;
  letter-spacing:-2px;
}
.hero h1 span,.hero h1 em{
  display:block;
}
.hero h1 em{
  color:#d1b878;
  font-style:italic;
}
.hero p{
  margin-top:36px;
  max-width:570px;
  color:#e2e2e2;
  font-size:15px;
  line-height:1.7;
}
.hero-btn{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:32px;
  padding:13px 21px;
  border:1px solid rgba(255,255,255,.55);
  font-size:13px;
  transition:.3s;
}
.hero-btn:hover{
  background:#fff;
  color:#111;
}
.hero-btn span{font-size:20px}
.hero-bottom{
  position:absolute;
  z-index:3;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:15px;
  font-size:9px;
  letter-spacing:3px;
  color:#ddd;
}
.hero-bottom i{
  width:45px;
  height:1px;
  background:#fff;
  display:block;
}

/* MOBILE DRAWER */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  background:#0b0b0b;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.77,0,.18,1);
  padding:25px 25px 30px;
  overflow:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #303030;
  padding-bottom:20px;
}
.mobile-title{
  
  font-size:28px;
}
.mobile-head button{
  border:0;
  background:none;
  color:#fff;
  font-size:38px;
  line-height:1;
}
.mobile-links{padding:20px 0}
.mobile-links>a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 0;
  border-bottom:1px solid #242424;
  font-size:18px;
}
.mobile-sub{
  display:none;
  padding:5px 0 10px 18px;
}
.mobile-sub.open{display:block}
.mobile-sub a{
  display:block;
  padding:10px 0;
  color:#bdbdbd;
  font-size:15px;
}
.mobile-actions{
  display:grid;
  gap:12px;
  margin-top:15px;
}
.mobile-actions a{
  text-align:center;
  padding:14px;
  border:1px solid #6d634e;
  color:#d6c79f;
}

/* TABLET */
@media (max-width:1100px){
  .topbar-left{left:5%}
  .desktop-nav{gap:16px}
  .mega-wrap{right:4%}
  .hero-content{margin-left:9%;width:65vw}
  .hero h1{font-size:68px}
}

/* MOBILE */
@media (max-width:768px){
  .topbar{
    height:46px;
    justify-content:flex-end;
    padding-right:18px;
  }
  .topbar-left{display:none}
  .socials{gap:5px}
  .socials a{
    width:23px;
    height:23px;
    font-size:10px;
  }

.img_logo_mb{
  height: 60px !important;
}

  .header{
  
    height:72px;
    padding:0 20px;
    background:rgba(0,0,0,.9);
  }
  .logo,.logo-ring{width:54px;height:54px}
  .logo-ring{font-size:14px}
  .desktop-nav{display:none}
  .menu-toggle{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.45);
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
  }
  .menu-toggle span{
    width:20px;
    height:1px;
    background:#fff;
  }

  .mega-wrap{display:none}

  .hero{
    display: none;
    height:300px !important;
    min-height: auto !important;
    padding:145px 25px 80px;
    align-items:flex-end;
    background-position:58% center;
  }
  .hero-overlay{
    /*background:
      linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.40) 30%,rgba(0,0,0,.82) 100%);*/
  }
  .hero-content{
    width:100%;
    margin:0;
    padding:0;
  }
  .eyebrow{
    font-size:10px;
    letter-spacing:3px;
    white-space:normal;
    margin-bottom:20px;
  }
  .hero h1{
    font-size:47px;
    line-height:1.02;
    letter-spacing:-1px;
  }
  .hero p{
    font-size:13px;
    line-height:1.6;
    margin-top:22px;
  }
  .hero-btn{
    margin-top:22px;
    font-size:12px;
  }
  .hero-bottom{
    bottom:18px;
    font-size:8px;
  }
}

/* SMALL PHONES */
@media (max-width:390px){
  .hero h1{font-size:40px}
  .hero-content{padding-bottom:10px}
}


/* ===== SMOOTH FULL-SCREEN HERO SLIDESHOW ===== */
.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#000;
}
.hero-slideshow .slide{
  position:absolute;
  inset:-2%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1.35s ease-in-out, transform 7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.hero-slideshow .slide.active{
  opacity:1;
  transform:scale(1);
}
.hero-slideshow .slide.leaving{
  opacity:0;
  transform:scale(1.035);
}
.hero .hero-overlay,
.hero .hero-content,
.hero .hero-bottom,
.hero .slide-dots{
  z-index:2;
}
.slide-dots{
  position:absolute;
  right:5%;
  bottom:30px;
  display:flex;
  gap:8px;
  z-index:4;
}
.slide-dots .dot{
  width:26px;
  height:2px;
  border:0;
  padding:0;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:width .4s ease, background .4s ease;
}
.slide-dots .dot.active{
  width:50px;
  background:#d1b878;
}

@media (max-width:768px){
  .hero-slideshow .slide{
    inset:-3%;
    background-position:center;
    transition:opacity 1s ease-in-out, transform 6s cubic-bezier(.2,.7,.2,1);
  }
  .slide-dots{
    right:25px;
    bottom:20px;
  }
  .slide-dots .dot{
    width:18px;
  }
  .slide-dots .dot.active{
    width:35px;
  }
}


       /* ==============================
   HEADER
============================== */

.header {
    width: 100%;
    position: relative;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff;
}


/* ==============================
   DESKTOP NAV
============================== */

.desktop-nav {
    display: flex;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight:bolder;
    padding: 25px 20px;

    color: #1f562c;
    text-decoration: none;

    white-space: nowrap;
}

.arrow {
    font-size: 13px;
    transition: transform .3s ease;
}


/* ==============================
   DIVIDER
============================== */

.divider {
    width: 1px;
    height: 20px;
    background: #ddd;
}


/* ==============================
   DESKTOP SUBMENU
============================== */

.submenu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 380px;

    background: #fff;

    border-top: 2px solid #b08d57;

    box-shadow:
        0 12px 35px rgba(0,0,0,.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 99999;
}


/* MENU CON */
.submenu a {
    display: block;

    padding: 13px 18px;

    color: #222;

    text-decoration: none;

    font-size: 14px;
    line-height: 1.45;

    border-bottom: 1px solid #eee;

    transition: all .2s ease;
}


/* HOVER */
.submenu a:hover {
    background: #f6f2eb;
    color: #a17b45;
    padding-left: 25px;
}


/* SHOW */
.nav-item.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ARROW */
.nav-item.has-submenu:hover .arrow {
    transform: rotate(180deg);
}


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

.menu-toggle {
    display: none;

    width: 45px;
    height: 45px;

    border: 0;
    background: transparent;

    cursor: pointer;

    padding: 8px;
}

.menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    background: #222;

    margin: 6px 0;

    transition: .3s;
}


/* ==============================
   MOBILE MENU
============================== */

.mobile-menu {
    display: none;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 900px) {

    /* ẨN DESKTOP */
    .desktop-nav {
        display: none;
    }


    /* HEADER */
    .header {
        min-height: 70px;
        padding: 0 20px;
    }


    /* LOGO */
    .logo-ring {
        font-size: 22px;
    }


    /* BUTTON */
    .menu-toggle {
        display: block;
    }


    /* MOBILE MENU */
    .mobile-menu {

        display: block;

        position: absolute;

        top: 70px;
        left: 0;

        width: 100%;

        background: #fff;

        box-shadow:
            0 10px 30px rgba(0,0,0,.12);

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transition:
            max-height .4s ease,
            opacity .3s ease;

        z-index: 9998;
    }


    /* MENU ACTIVE */
    .mobile-menu.active {

        max-height: calc(100vh - 70px);

        overflow-y: auto;

        opacity: 1;
    }


    /* ITEM */
    .mobile-item {

        border-bottom: 1px solid #eee;
    }


    /* LINK */
    .mobile-link {

        min-height: 55px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .mobile-link > a {

        flex: 1;

        display: block;

        padding: 17px 20px;

        color: #222;

        text-decoration: none;

        font-size: 15px;
    }


    /* ARROW BUTTON */
    .mobile-arrow {

        width: 55px;
        height: 55px;

        border: 0;

        background: transparent;

        cursor: pointer;

        font-size: 18px;

        color: #333;
    }


    .mobile-arrow span {

        display: inline-block;

        transition: transform .3s ease;
    }


    /* SUBMENU */
    .mobile-submenu {

        max-height: 0;

        overflow: hidden;

        background: #f8f7f4;

        transition: max-height .4s ease;
    }


    .mobile-submenu a {

        display: block;

        padding: 13px 20px 13px 35px;

        color: #333;

        text-decoration: none;

        font-size: 14px;

        line-height: 1.45;

        border-top: 1px solid #e9e9e9;
    }


    /* SUBMENU OPEN */
    .mobile-item.open .mobile-submenu {

        max-height: 1000px;
    }


    /* ARROW ROTATE */
    .mobile-item.open .mobile-arrow span {

        transform: rotate(180deg);
    }


    /* HAMBURGER -> X */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

}



/* =========================
   MOBILE MENU XỔ SANG TRÁI
========================= */

@media (max-width: 900px) {

    .mobile-menu {
        position: fixed;

        top: 70px;
        right: 0;
        left: auto;

        width: 360px;
        max-width: 90vw;

        margin: 0;
        padding: 0;

        background: #fff;

        box-sizing: border-box;

        box-shadow: -8px 10px 30px rgba(0,0,0,.15);

        /* Ban đầu nằm ngoài màn hình bên phải */
        transform: translateX(100%);

        opacity: 0;
        visibility: hidden;

        max-height: calc(100vh - 70px);

        overflow-y: auto;
        overflow-x: hidden;

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .35s ease;

        z-index: 9999;
    }


    /* CLICK MENU */
    .mobile-menu.active {

        transform: translateX(0);

        opacity: 1;
        visibility: visible;

        max-height: calc(100vh - 70px);

        overflow-y: auto;
    }


    /* MENU ITEM */
    .mobile-item {
        width: 100%;
        box-sizing: border-box;

        border-bottom: 1px solid #eee;
    }


    .mobile-link {
        width: 100%;

        min-height: 55px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        box-sizing: border-box;
    }


    .mobile-link > a {
        flex: 1;

        padding: 17px 20px;

        color: #222;
        text-decoration: none;

        box-sizing: border-box;
    }


    /* NÚT MŨI TÊN */
    .mobile-arrow {
        width: 55px;
        height: 55px;

        flex: 0 0 55px;

        border: 0;
        background: transparent;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
    }


    /* MENU CON */
    .mobile-submenu {

        width: 100%;

        max-height: 0;

        overflow: hidden;

        background: #f7f6f3;

        transition: max-height .35s ease;
    }


    .mobile-submenu a {

        display: block;

        width: 100%;

        padding: 13px 20px 13px 35px;

        color: #333;

        text-decoration: none;

        font-size: 14px;

        line-height: 1.45;

        border-top: 1px solid #e5e5e5;

        box-sizing: border-box;
    }


    /* XỔ MENU CON */
    .mobile-item.open .mobile-submenu {
        max-height: 1500px;
    }


    /* XOAY MŨI TÊN */
    .mobile-item.open .mobile-arrow span {
        transform: rotate(180deg);
    }
}

@media (max-width: 480px) {

    .mobile-menu {

        top: 65px;

        right: 0;
        left: auto;

        width: 330px;
        max-width: 88vw;

        max-height: calc(100vh - 65px);
    }

    .mobile-menu.active {
        max-height: calc(100vh - 65px);
    }

}


@media (max-width: 900px) {

    /* HEADER MENU */
    .mobile-menu-header {

        width: 100%;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 15px 0 20px;

        box-sizing: border-box;

        border-bottom: 1px solid #ddd;

        background: #fff;
    }


    .mobile-menu-header span {

        font-size: 13px;

        letter-spacing: 2px;

        font-weight: 500;

        color: #222;
    }


    /* NÚT ĐÓNG */
    .mobile-close {

        width: 42px;
        height: 42px;

        padding: 0;
        margin: 0;

        border: 0;

        background: transparent;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 34px;

        font-weight: 200;

        line-height: 1;

        color: #222;

        cursor: pointer;

        transition: .25s ease;
    }


    .mobile-close:hover {

        color: #a17b45;

        transform: rotate(90deg);
    }

}

 /* =====================================
   BSE TRAINING SECTION
===================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');


.bse-training {
    width: 100%;
    overflow: hidden;
    background: #faf7f1;
    color: #201e1b;
}


/* =====================================
   LOGO SLIDER
===================================== */

.bse-logo-slider {
    width: 100%;
    overflow: hidden;
    padding: 0 0 20px;
    position: relative;
}


/* làm mờ 2 mép */
.bse-logo-slider::before,
.bse-logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.bse-logo-slider::before {
    left: 0;
    background: linear-gradient(
        to right,
        #faf7f1,
        transparent
    );
}

.bse-logo-slider::after {
    right: 0;
    background: linear-gradient(
        to left,
        #faf7f1,
        transparent
    );
}


/* track */

.bse-logo-track {
    display: flex;
    width: max-content;
    gap: 16px;

    animation: bseLogoMove 35s linear infinite;

    will-change: transform;
}


/* card */

.bse-logo-item {
    width: 265px;
    height: 170px;

    flex-shrink: 0;

    background: #f7f3eb;

    border-radius: 0 0 22px 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    transition:
        transform .4s ease,
        background .4s ease;
}


.bse-logo-item:hover {
    transform: translateY(-5px);
    background: #fffdf9;
}


/* logo */

.bse-logo-item img {
    display: block;

    width: 100%;
    max-width: 210px;
    max-height: 120px;

    object-fit: contain;
}


/* animation */

@keyframes bseLogoMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(
            calc(-50% - 8px)
        );
    }

}


/* =====================================
   CONTENT
===================================== */

.bse-training-content {
    max-width: 1200px;

    margin: 0 auto;

    padding:
        20px
        30px
        10px;

    text-align: center;
}


/* small title */

.bse-small-title {

    font-weight: 400;
    font-size: 26px;
    font-family: UTM-Bebas;

    letter-spacing: 6px;

    color: #776542;

    margin-bottom:10px;
}


/* decoration */

.bse-decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

   
}


.bse-decoration span {

    display: block;

    width: 95px;

    height: 1px;

    background: #b99b5b;
}


.bse-decoration b {

    color: #b99b5b;

    font-size: 10px;

    font-weight: 400;
}


/* heading */

.bse-training-content h2 {

   font-weight: 400;
    font-size: 56px;
    font-family: UTM-Bebas;
    color: #1f562c;
}


.bse-training-content h2 em {

    color: #a98b4f;

    font-style: italic;

    font-weight: 400;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 1100px) {

    .bse-logo-item {
        width: 230px;
        height: 150px;
    }

    .bse-training-content {
        padding:
            180px
            30px
            120px;
    }

    .bse-training-content h2 {
        font-size: 52px;
    }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 768px) {

    .bse-logo-slider {
        padding-bottom: 10px;
    }


    .bse-logo-track {

        gap: 10px;

        animation-duration: 27s;
    }


    .bse-logo-item {

        width: 180px;

        height: 125px;

        padding: 18px;

        border-radius: 0 0 16px 16px;
    }


    .bse-logo-item img {

        max-width: 150px;

        max-height: 90px;
    }


    .bse-training-content {

        padding:
            20px
            20px
            30px;
    }


    .bse-small-title {

        font-size: 10px;

        letter-spacing: 3px;

        line-height: 1.7;

        margin-bottom: 25px;
    }


    .bse-decoration {

        gap: 12px;

        margin-bottom: 28px;
    }


    .bse-decoration span {

        width: 55px;
    }


    .bse-training-content h2 {

        font-size: 37px;

        line-height: 1.18;

        letter-spacing: -.7px;
    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width: 390px) {

    .bse-logo-item {

        width: 160px;

        height: 110px;
    }


    .bse-training-content h2 {

        font-size: 32px;
    }

}

/* ===============================
   BSE PROGRAM CARDS
================================ */

.bse-programs {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 20px 14px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;

  background: #faf8f2;
  box-sizing: border-box;
}


/* CARD */

.bse-card {
  background: #fcfbf7;
  border: 1px solid #dedbd3;

  padding: 15px 15px 25px;

  box-sizing: border-box;
}


/* IMAGE */

.bse-image {
  position: relative;
  width: 100%;
  height: 418px;

  overflow: hidden;
}

.bse-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.6s ease;
}

.bse-card:hover .bse-image img {
  transform: scale(1.025);
}


/* IMAGE INNER BORDER */

.bse-image::after {
  content: "";

  position: absolute;
  inset: 12px;

  border: 1px solid rgba(255,255,255,0.65);

  pointer-events: none;
}


/* BLACK LABEL */

.bse-image-label {
  position: absolute;

  top: 26px;
  left: 26px;

  z-index: 2;

  background: #171611;
  color: #f4eee2;

  padding: 9px 15px;

  
  font-size: 11px;
  font-weight: 500;

  letter-spacing: 3px;
  line-height: 1.2;

  white-space: nowrap;
}


/* CONTENT */

.bse-content {
  padding: 46px 32px 0;
}


/* SMALL GOLD TITLE */

.bse-eyebrow {
  margin-bottom: 20px;

  color: #76633c;

  
  font-size: 12px;
  font-weight: 600;

  letter-spacing: 4px;
  text-transform: uppercase;
}


/* MAIN TITLE */

.bse-content h2 {
  margin: 0 0 28px;

  color: #211f1a;

  

  font-size: clamp(38px, 3vw, 48px);
  font-weight: 500;

  line-height: 0.98;
  height: 66px;
  letter-spacing: -0.5px;
}


/* INFORMATION */

.bse-info {
  border-top: 1px solid #ddd8ce;

  margin-bottom: 28px;
}

.bse-info-row {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-bottom: 1px solid #ddd8ce;
}


/* LEFT LABEL */

.bse-info-row span {
  color: #756c5c;

  
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3px;
}


/* RIGHT VALUE */

.bse-info-row strong {
  color: #24231e;

  
  font-size: 16px;
  font-weight: 500;

  text-align: right;
}


/* DESCRIPTION */

.bse-description {
  margin: 0 0 30px;

  color: #59564f;

  

  font-size: 16px;
  font-weight: 400;

  line-height: 1.85;
}


/* BUTTONS */

.bse-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 28px;
}

.bse-btn {
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  text-decoration: none;

  
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3px;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border 0.25s ease;
}


/* REGISTER */

.bse-btn-outline {
  color: #211f1a;

  background: transparent;

  border: 1px solid #24231e;
}

.bse-btn-outline:hover {
  color: #fff;
  background: #211f1a;
}


/* BOOK */

.bse-btn-dark {
  color: #fff;

  background: #1d1c17;

  border: 1px solid #1d1c17;
}

.bse-btn-dark:hover {
  background: #3a382f;
}


/* READ MORE */

.bse-read-more {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #75633d;

  text-decoration: none;

  

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 4px;
}

.bse-read-more span {
  width: 30px;
  height: 1px;

  display: block;

  background: #75633d;
}


/* ===============================
   TABLET
================================ */

@media (max-width: 900px) {

  .bse-programs {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .bse-image {
    height: 430px;
  }

  .bse-content {
    padding: 40px 30px 0;
  }

  .bse-content h2 {
    font-size: 44px;
  }
}


/* ===============================
   MOBILE
================================ */

@media (max-width: 600px) {

  .bse-programs {
    padding: 10px;
    gap: 20px;
  }

  .bse-card {
    padding: 10px 10px 25px;
  }

  .bse-image {
    height: 270px;
  }

  .bse-image::after {
    inset: 9px;
  }

  .bse-image-label {
    top: 20px;
    left: 20px;

    padding: 8px 11px;

    font-size: 9px;
    letter-spacing: 2px;
  }

  .bse-content {
    padding: 32px 16px 0;
  }

  .bse-eyebrow {
    margin-bottom: 15px;

    font-size: 10px;
    letter-spacing: 2.5px;
  }

  .bse-content h2 {
    margin-bottom: 25px;

    font-size: 36px;
    line-height: 1;
  }

  .bse-info-row {
    min-height: 58px;

    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
  }

  .bse-info-row strong {
    font-size: 14px;
    text-align: left;
  }

  .bse-description {
    font-size: 14px;
    line-height: 1.75;
  }

  .bse-buttons {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .bse-btn {
    height: 52px;
  }
}

/* =========================================
   BSE COURSES - FULL WIDTH
========================================= */

.bse-courses {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 20px 30px 50px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;

  /* NỀN SÁNG */
  background: #faf8f2;

  box-sizing: border-box;
}


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

.bse-course-card {
  position: relative;

  display: flex;
  flex-direction: column;

  /* BỎ NỀN ĐEN */
  background: #fdfcf8;

  border: 1px solid #dedbd3;

  padding: 14px;

  box-sizing: border-box;
}


/* =========================================
   IMAGE
========================================= */

.bse-course-image {
  position: relative;

  width: 100%;
  height: 410px;

  overflow: hidden;
}

.bse-course-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.6s ease;
}

.bse-course-card:hover
.bse-course-image img {
  transform: scale(1.025);
}


/* Viền trắng bên trong ảnh */

.bse-course-image::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;

  border: 1px solid rgba(255,255,255,0.65);

  pointer-events: none;
}


/* =========================================
   LABEL TRÊN ẢNH
========================================= */

.bse-course-tag {
  position: absolute;

  top: 25px;
  left: 25px;

  z-index: 2;

  padding: 10px 15px;

  background: #171611;
  color: #eee8dc;

  

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 3px;

  white-space: nowrap;
}


/* =========================================
   CONTENT
========================================= */

.bse-course-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 38px 20px 0;
}


/* =========================================
   CATEGORY
========================================= */

.bse-course-category {
  margin-bottom: 18px;

  color: #75633d;

  

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3.5px;

  text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.bse-course-content h3 {
  margin: 0 0 26px;

  color: #22201b;


  font-size: 34px;
  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.2px;
}


/* =========================================
   INFORMATION
========================================= */

.bse-course-info {
  border-top: 1px solid #dedbd3;
}

.bse-course-row {
  min-height: 51px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  border-bottom: 1px solid #dedbd3;
}


/* LABEL */

.bse-course-row span {
  color: #766d5c;

  

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 2.8px;

  white-space: nowrap;
}


/* VALUE */

.bse-course-row strong {
  color: #25231e;

  
  font-size: 15px;
  font-weight: 500;

  text-align: right;
}


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

.bse-course-book {
  width: 100%;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: auto;

  color: #fff;

  /* CHỈ NÚT BOOK GIỮ MÀU ĐEN */
  background: #1c1b16;

  border: 1px solid #1c1b16;

  text-decoration: none;

  font-family: "Montserrat", sans-serif;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3px;

  box-sizing: border-box;

  transition: all 0.25s ease;
}

.bse-course-book:hover {
  background: #343229;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .bse-courses {
    grid-template-columns: repeat(2, 1fr);

    padding: 20px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

  .bse-courses {
    grid-template-columns: 1fr;

    gap: 22px;

    padding: 10px 12px 30px;
  }

  .bse-course-card {
    padding: 10px;
  }

  .bse-course-image {
    height: 290px;
  }

  .bse-course-content {
    padding: 30px 15px 0;
  }

  .bse-course-content h3 {
    font-size: 34px;
  }

}

  

:root {
  --cream: #faf8f3;
  --ink: #181715;
  --gold: #9b885a;
  --gold-light: #c9b98d;
  --card-line: rgba(155, 136, 90, .65);
  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

  .testimonials {
 width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 18px;
    
}

.testimonials__inner {
  width: min(100% - 8px, 2048px);
  margin: 0 auto;
}

.testimonials__eyebrow {
  margin-bottom: 42px;
  text-align: center;
  color: #756641;
  font: 600 14px/1 var(--sans);
  letter-spacing: .34em;
}

.testimonials__title {
  color: #000;
  margin: 0;
  text-align: center;
  font: 400 clamp(56px, 5.1vw, 104px)/.98 var(--serif);
  letter-spacing: -.035em;
}

.testimonials__title em {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.testimonials__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 280px;
  margin: 46px auto 88px;
}

.testimonials__ornament span {
  height: 1px;
  flex: 1;
  background: var(--gold-light);
}

.testimonials__ornament i {
  color: var(--gold);
  font: normal 14px/1 var(--serif);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.testimonial-card {
  min-width: 0;
}

.testimonial-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d9d6ce;
}

.testimonial-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: white;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.28));
  font: 500 14px var(--sans);
  letter-spacing: .04em;
  pointer-events: none;
}

.video-placeholder .play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  font-size: 13px;
}

.card-number {
  position: absolute;
  top: 26px;
  left: 25px;
  color: rgba(255,255,255,.88);
  font: 500 16px/1 var(--sans);
  letter-spacing: .12em;
}

.testimonial-video::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(201,185,141,.85);
  pointer-events: none;
}

.testimonial-line {
  height: 1px;
  margin-top: 30px;
  background: var(--gold-light);
}

.testimonial-card h3 {
  color: #000;
  margin: 18px 0 18px;
  font: 400 clamp(29px, 2vw, 43px)/1.08 var(--serif);
  letter-spacing: -.025em;
  font-size: 20px;
    line-height: 28px;
}

.testimonial-card p {
  margin: 0;
  color: #756641;
  font: 500 14px/1.9 var(--sans);
  letter-spacing: .20em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .testimonials {
    padding-top: 40px;
  }

  .testimonials__inner {
    width: min(100% - 36px, 900px);
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 54px;
  }

  .testimonials__ornament {
    margin-bottom: 64px;
  }
}

@media (max-width: 640px) {
  .testimonials {
    padding: 34px 0 56px;
  }

  .testimonials__inner {
    width: calc(100% - 32px);
  }

  .testimonials__eyebrow {
    margin-bottom: 27px;
    font-size: 10px;
    letter-spacing: .30em;
  }

  .testimonials__title {
    font-size: clamp(42px, 12vw, 62px);
    line-height: .98;
  }

  .testimonials__ornament {
    width: 180px;
    gap: 17px;
    margin: 31px auto 52px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .testimonial-video {
    aspect-ratio: 16 / 9;
  }

  .testimonial-video::after {
    inset: 8px;
  }

  .card-number {
    top: 17px;
    left: 17px;
    font-size: 12px;
  }

  .testimonial-line {
    margin-top: 21px;
  }

  .testimonial-card h3 {
    margin: 20px 0 13px;
    font-size: 20px;
  }

  .testimonial-card p {
    font-size: 10px;
    line-height: 1.75;
    letter-spacing: .15em;
  }

  .desktop-only {
    display: none;
  }
}

/*video */

/* ==============================
   CHRISTMAS EXPERIENCE
============================== */

.christmas-experience {
    width: 100%;
    background: #f8f5ef;
    padding: 35px 5% 5px;
    box-sizing: border-box;
}


/* TITLE */

.christmas-title {
    text-align: center;
    max-width: 1450px;
    margin: 0 auto 48px;
}

.christmas-title h2 {
    margin: 0;
    color: #1d1b18;

    

    font-size: clamp(38px, 4vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1px;
}

.christmas-title h2 span {
    color: #a68442;

    font-style: italic;
    white-space: nowrap;
}


/* DECORATIVE LINE */

.christmas-divider {
    margin-top: 38px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.christmas-divider i {
    display: block;
    width: 80px;
    height: 1px;
    background: #b99550;
}

.christmas-divider b {
    color: #b99550;
    font-size: 11px;
    font-weight: 400;
}


/* VIDEO OUTER FRAME */

.christmas-video-box {
    max-width: 1280px;
    margin: 0 auto;

    padding: 16px;

    background: #fffdf9;

    border: 1px solid #ded6c8;

    box-sizing: border-box;
}


/* VIDEO */

.christmas-video {
    position: relative;
    width: 100%;

    overflow: hidden;

    background: #111;
}


.christmas-video video {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* DATE */

.christmas-date {
    position: absolute;

    z-index: 5;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    min-width: 610px;

    padding: 17px 45px;

    box-sizing: border-box;

    background: #07351f;

    color: #f5eee1;

    text-align: center;

    border-radius: 0 0 6px 6px;

    

    font-size: 27px;

    font-weight: 400;

    letter-spacing: 2px;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 900px) {

    .christmas-experience {
        padding: 30px 25px 45px;
    }

    .christmas-title {
        margin-bottom: 35px;
    }

    .christmas-title h2 {
        font-size: 42px;
    }

    .christmas-date {
        min-width: 420px;
        font-size: 22px;
        padding: 13px 30px;
    }

    .christmas-divider {
        margin-top: 28px;
    }
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 600px) {

    .christmas-experience {
        padding: 25px 12px 35px;
    }

    .christmas-title {
        margin-bottom: 25px;
    }

    .christmas-title h2 {
        font-size: 30px;
        line-height: 1.12;
        letter-spacing: -0.3px;
    }

    .christmas-title h2 br {
        display: none;
    }

    .christmas-title h2 span {
        display: inline;
        white-space: normal;
    }

    .christmas-divider {
        margin-top: 22px;
        gap: 12px;
    }

    .christmas-divider i {
        width: 55px;
    }


    .christmas-video-box {
        padding: 8px;
    }

    .christmas-date {
        min-width: 0;

        width: 75%;

        padding: 9px 10px;

        font-size: 17px;

        letter-spacing: 1px;
    }

    .christmas-video video {
        aspect-ratio: 16 / 9;
    }

}

/* =========================================
   BSE - LATEST ARTICLES
========================================= */

.bse-articles {
    width: 100%;
    background: #faf8f3;
    padding: 50px;
    box-sizing: border-box;
}

.bse-articles-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================
   TITLE
========================= */

.bse-articles-title {
    margin: 0 0 65px;

    text-align: center;

        font-weight: 400;
    font-size: 56px;
    font-family: UTM-Bebas;
    color: #1f562c;


}


/* =========================
   GRID
========================= */

.bse-articles-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;
}


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

.bse-article-card {
    background: #fdfcf9;

    border: 1px solid #d3d1cc;

    border-radius: 20px;

    padding: 24px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bse-article-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.07);
}


/* =========================
   IMAGE
========================= */

.bse-article-image {
    display: block;

    width: 100%;

    aspect-ratio: 1.9 / 1;

    overflow: hidden;

    border-radius: 24px;

    background: #eee;
}

.bse-article-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.bse-article-card:hover
.bse-article-image img {
    transform: scale(1.03);
}


/* =========================
   CONTENT
========================= */

.bse-article-content {
    padding-top: 25px;
}


/* TITLE CARD */

.bse-article-content h3 {
    margin: 0 0 15px;

    color: #383838;

    

    font-size: 15px;

    line-height: 25px;

    font-weight: 600;

    letter-spacing: -0.2px;
}


/* DESCRIPTION */

.bse-article-content p {
    margin: 0 0 23px;

    color: #000;

    
    font-size: 17px;

    line-height: 1.4;

    font-weight: 400;
}


/* READ MORE */

.bse-read-more {
    display: inline-block;

    color: #1f562c;

    

    font-size: 17px;

    font-weight: 400;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition: color .25s ease;
}

.bse-read-more:hover {
    color: #6e592d;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .bse-articles {
        padding: 55px 25px 65px;
    }

    .bse-articles-title {
        font-size: 42px;
        margin-bottom: 45px;
    }

    .bse-articles-grid {
        gap: 20px;
    }

    .bse-article-card {
        padding: 18px;
        border-radius: 17px;
    }

    .bse-article-image {
        border-radius: 20px;
    }

    .bse-article-content h3 {
        font-size: 23px;
    }

    .bse-article-content p {
        font-size: 18px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .bse-articles {
        padding: 45px 15px 55px;
    }


    /* TITLE */

    .bse-articles-title {
        font-size: 36px;

        line-height: 1.15;

        margin-bottom: 35px;
    }


    /* ONE COLUMN */

    .bse-articles-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    /* CARD */

    .bse-article-card {
        padding: 15px;

        border-radius: 16px;
    }


    /* IMAGE */

    .bse-article-image {
        aspect-ratio: 1.65 / 1;

        border-radius: 18px;
    }


    /* CONTENT */

    .bse-article-content {
        padding-top: 20px;
    }


    .bse-article-content h3 {
        font-size: 17px;

        line-height: 1.15;

        margin-bottom: 12px;
    }


    .bse-article-content p {
        font-size: 18px;

        line-height: 1.4;

        margin-bottom: 20px;
    }


    .bse-read-more {
        font-size: 18px;
    }

}

/* =========================================
   BRITISH SCHOOL STYLE TESTIMONIALS
========================================= */

.bs-testimonials {
    position: relative;
    width: 100%;
    overflow: hidden;

   

    padding: 32px 0 38px;

    

    color: #292929;
}


/* Google Font */

@import url(
    'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'
);


/* =========================================
   BACKGROUND CIRCLE
========================================= */

.bs-testimonials-bg {
    position: absolute;

    width: 720px;
    height: 720px;

    left: 50%;
    bottom: -550px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(237, 239, 249, 0.9) 0%,
            rgba(237, 239, 249, 0.5) 45%,
            rgba(237, 239, 249, 0) 70%
        );

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.bs-testimonials-inner {
    position: relative;

    width: calc(100% - 80px);

    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.bs-testimonials-header {
    position: relative;

    text-align: center;

    padding-bottom: 57px;
}


.bs-testimonials-header h2 {
   
    margin: 0;

    font-weight: 400;
    font-size: 56px;
    font-family: UTM-Bebas;
    color: #1f562c;

    
}


.bs-testimonials-header p {
    margin: 20px 0 0;
    
    font-size: 27px;

    line-height: 1.4;

    font-weight: 400;

    color: #333;
}


/* =========================================
   ARROWS
========================================= */

.bs-slider-arrows {
    position: absolute;

    right: 0;
    bottom: 10px;

    display: flex;

    align-items: center;

    gap: 25px;
}


.bs-arrow {
    border: 0;

    background: transparent;

    padding: 0;

    width: 48px;
    height: 40px;

    cursor: pointer;

    color: #9a8960;

    

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.bs-arrow span {
    display: block;

    font-size: 48px;

    line-height: 35px;

    font-weight: 600;
}


.bs-arrow:hover {
    transform: scale(1.12);

    opacity: .75;
}


/* =========================================
   SLIDER
========================================= */

.bs-slider-wrapper {
    width: 100%;

    overflow: hidden;

    cursor: grab;

    touch-action: pan-y;
}


.bs-slider-wrapper:active {
    cursor: grabbing;
}


.bs-slider-track {
    display: flex;

    gap: 28px;

    transform: translateX(0);

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);

    will-change: transform;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.bs-testimonial-card {

    position: relative;

    flex: 0 0 calc(
        (100% - 28px) / 2
    );

    

    box-sizing: border-box;

    padding:
        10px;

    border: 1px solid #b9ad8d;

    border-radius: 19px;

    background: #ebe9dd;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =========================================
   QUOTE
========================================= */

.bs-quote {
    width: 66px;
    height: 66px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #fff;

    color: #9c8b62;

    display: flex;

    align-items: center;
    justify-content: center;

    

    font-size: 58px;

    font-weight: bold;

    line-height: 1;

    padding-top: 17px;

    box-sizing: border-box;
}


/* =========================================
   CONTENT
========================================= */

.bs-testimonial-content {
    width: 100%;

    max-width: 750px;
}


.bs-testimonial-content p {
    margin: 0;
 
    font-size: 17px;

    line-height: 1.68;

    font-weight: 400;

    color: #202020;
}


/* =========================================
   AUTHOR
========================================= */

.bs-author {

    margin-top: auto;

    padding-top: 5px;

    display: flex;

    flex-direction: column;

    align-items: center;
}


.bs-author strong {
    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

    color: #a08e64;
}


.bs-author span {
    margin-top: 5px;

    font-size: 19px;

    line-height: 1.4;

    color: #151515;
}


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

.bs-testimonials-button-wrap {

    display: flex;
     
    justify-content: center;

    margin-top: 48px;
}


.bs-testimonials-button {

   

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-width: 365px;

    height: 58px;

    padding: 0 28px;

    box-sizing: border-box;

    border-radius: 40px;

    background: #9c8a5e;

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: .3px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.bs-testimonials-button span {
    font-size: 25px;

    line-height: 1;
}


.bs-testimonials-button:hover {
    transform: translateY(-2px);

    background: #8d7b50;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .bs-testimonials-inner {
        width: calc(100% - 40px);
    }


    .bs-testimonials-header h2 {
      
        font-size: 38px;
    }


    .bs-testimonials-header p {
        font-size: 22px;
    }


    .bs-testimonial-card {
        padding-left: 35px;
        padding-right: 35px;

        min-height: 450px;
    }


    .bs-testimonial-content p {
        font-size: 18px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .bs-testimonials {
        padding:
            30px 0
            35px;
    }


    .bs-testimonials-inner {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .bs-testimonials-header {
        padding-bottom: 70px;
    }


    .bs-testimonials-header h2 {
        font-size: 30px;
        
        line-height: 1.2;

        letter-spacing: -.7px;
    }


    .bs-testimonials-header p {
        margin-top: 12px;

        font-size: 17px;

        line-height: 1.5;
    }


    /* ARROWS */

    .bs-slider-arrows {
        right: 50%;

        bottom: 5px;

        transform: translateX(50%);

        gap: 30px;
    }


    .bs-arrow {
        width: 42px;
        height: 38px;
    }


    .bs-arrow span {
        font-size: 40px;
    }


    /* SLIDER */

    .bs-slider-track {
        gap: 15px;
    }


    /* CARD */

    .bs-testimonial-card {

        flex: 0 0 100%;

        min-height: 440px;

        padding:
            25px 22px
            30px;

        border-radius: 16px;
    }


    .bs-quote {

        width: 58px;
        height: 58px;

        font-size: 49px;

        padding-top: 14px;

        margin-bottom: 20px;
    }


    .bs-testimonial-content p {

        font-size: 16px;

        line-height: 1.65;
    }


    .bs-author {
        padding-top: 25px;
    }


    .bs-author strong {
        font-size: 17px;
    }


    .bs-author span {
        font-size: 15px;
    }


    /* BUTTON */

    .bs-testimonials-button-wrap {
        margin-top: 30px;
    }


    .bs-testimonials-button {

        width: 100%;

        min-width: 0;

        height: 54px;

        padding: 0 18px;

        font-size: 15px;

        gap: 12px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .bs-testimonials-header h2 {
        font-size: 27px;
    }


    .bs-testimonials-header p {
        font-size: 16px;
    }


    .bs-testimonial-card {
        min-height: 455px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .bs-testimonial-content p {
        font-size: 15px;
    }

}


/* ================================
   GLOBAL STATS
================================ */

.stats-section {
    width: 100%;
    background: #f8f6f1;
    padding: 10px 38px 15px;
    box-sizing: border-box;
}

/* Heading */

.stats-heading {
    text-align: center;
    margin-bottom: 55px;
}

.stats-heading h2 {
    margin: 0;
    font-weight: 400;
    font-size: 56px;
    font-family: UTM-Bebas;
    color: #1f562c;
    letter-spacing: -1.8px;
}

/* Main box */

.stats-box {
    width: 100%;
    max-width: 1980px;
    margin: 0 auto;

    min-height: 288px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #f3f1eb;
    border-radius: 25px;

    overflow: hidden;
    box-sizing: border-box;
}

/* Individual item */

.stat-item {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 45px 25px;
    box-sizing: border-box;
}

/* Vertical line */

.stat-item:not(:last-child)::after {
    content: "";
    position: absolute;

    right: 0;
    top: 20%;
    width: 1px;
    height: 60%;

    background: #9b895f;
}

/* Number */

.stat-number {
    display: flex;
    align-items: baseline;

    color: #9b895f;

    
    font-size: 70px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: -3px;

    white-space: nowrap;
}

.stat-number span:last-child {
    margin-left: 3px;
}

/* Title */

.stat-title {
    margin-top: 25px;

    color: #707282;

    
    font-size: 28px;
    line-height: 1.2;

    font-weight: 600;
    text-align: center;
}


/* =================================
   TABLET
================================= */

@media (max-width: 1200px) {

    .stats-section {
        padding: 60px 25px 75px;
    }

    .stats-heading h2 {
        font-size: 45px;
    }

    .stats-box {
        min-height: 250px;
    }

    .stat-number {
        font-size: 53px;
    }

    .stat-title {
        font-size: 23px;
    }
}


/* =================================
   MOBILE
================================= */

@media (max-width: 767px) {

    .stats-section {
        padding: 45px 15px 55px;
    }

    .stats-heading {
        margin-bottom: 30px;
    }

    .stats-heading h2 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: -0.8px;
    }

    .stats-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        min-height: auto;

        border-radius: 18px;
    }

    .stat-item {
        min-height: 175px;
        padding: 25px 10px;
    }

    /* Xóa line bên phải của cột 2 */
    .stat-item:nth-child(2)::after,
    .stat-item:nth-child(4)::after {
        display: none;
    }

    /* Đường ngang giữa 2 hàng */

    .stat-item:nth-child(1)::before,
    .stat-item:nth-child(2)::before {
        content: "";

        position: absolute;

        left: 10%;
        right: 10%;
        bottom: 0;

        height: 1px;

        background: #9b895f;
    }

    .stat-number {
        font-size: 48px;
        letter-spacing: -1.5px;
    }

    .stat-title {
        margin-top: 13px;

        font-size: 17px;
        line-height: 1.25;
    }
}


/* =================================
   SMALL MOBILE
================================= */

@media (max-width: 400px) {

    .stats-heading h2 {
        font-size: 26px;
    }

    .stat-number {
        font-size: 40px;
    }

    .stat-title {
        font-size: 15px;
    }

    .stat-item {
        min-height: 150px;
    }
}

.footer-column,.corporate-copy p{
  color: #333;
}
.demo-content {
  min-height: 260px;
  padding: 60px 6%;
}

.demo-content h1 {
  margin: 0 0 12px;
}

.site-footer {
  width: 100%;
  background: #e8e5db;
  border-top: 1px solid #77766f;
  padding: 48px 2.8% 42px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(245px, 1.12fr) minmax(330px, 1.18fr) minmax(250px, 1.05fr) minmax(300px, 1.12fr);
  column-gap: clamp(28px, 3.2vw, 66px);
  align-items: start;
  max-width: 1800px;
  margin: 0 auto;
}

.footer-column h2,
.corporate-copy h2 {
  color: var(--footer-text);
  font-size: clamp(20px, 1.42vw, 29px);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 17px;
  letter-spacing: -0.45px;
}

.footer-brand {
  min-width: 0;
}

.brand-mark {
  position: relative;
  width: 174px;
  height: 174px;
  margin: 0 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-ink);
  text-decoration: none;
}

.brand-ring {
  position: absolute;
  inset: 7px;
  border: 2px solid transparent;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.15px;
  text-align: center;
  line-height: 1.1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  transform: rotate(-38deg);
}

.brand-center {
  color: #a49a76;
  font-size: 27px;
  font-weight: 700;
}

.brand-trademark {
  position: absolute;
  right: 0;
  bottom: 27px;
  font-size: 10px;
}

.corporate-copy h2 {
  font-size: clamp(18px, 1.2vw, 24px);
  margin-bottom: 10px;
  color: #333;
}

.corporate-copy p {
  max-width: 450px;
  margin: 0;
  font-size: clamp(16px, 1.15vw, 24px);
  line-height: 1.9;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--footer-accent);
  color: var(--footer-white);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #81734f;
  transform: translateY(-1px);
}

.button-small {
  background: #1f562c;
  margin-top: 24px;
  min-height: 48px;
  padding-inline: 35px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li + li {
  margin-top: 18px;
}

.footer-column li a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--footer-ink);
  font-size: clamp(16px, 1.08vw, 22px);
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-column li a:hover,
.footer-column li a.highlight-link {
  color: #a18f62;
}

.arrow-icon {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #252622;
  color: #f5f2e9;
  font-size: 23px;
  font-weight: 700;
  line-height: 15px;
  padding-bottom: 3px;
}

.highlight-link .arrow-icon {
  background: #a2946e;
}

.newsletter-column h2 {
  margin-bottom: 32px;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.newsletter-form input {
  width: 100%;
  min-height: 43px;
  padding: 16px;
  
  border: 1px solid #fff;
  border-radius: 12px;
  outline: 2px solid transparent;
  background: #fff;
  color: var(--footer-text);
  font: inherit;
  font-size: 15px;
}

.newsletter-form input::placeholder {
  color: #858585;
  opacity: 1;
}

.newsletter-form input:focus {
  outline-color: var(--footer-accent);
}

.button-wide {
  width: 100%;
  background: #1f562c;
  min-height:48px;
  color: #fff;
  font-size: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tablet and small laptop */
@media (max-width: 1200px) {
  .site-footer {
    padding: 58px 4% 38px;
  }

  .footer-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
    column-gap: 48px;
    row-gap: 52px;
  }

  .brand-mark {
    margin-bottom: 28px;
  }

  .footer-column h2 {
    font-size: 24px;
  }

  .footer-column li a {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .demo-content {
    min-height: 180px;
    padding: 36px 22px;
  }

  .site-footer {
    padding: 38px 22px 34px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 38px;
  }

  .brand-mark {
    width: 142px;
    height: 142px;
    margin: 0 0 25px;
  }

  .brand-ring {
    font-size: 12px;
  }

  .brand-center {
    font-size: 23px;
  }

  .corporate-copy h2,
  .footer-column h2 {
    font-size: 22px;
    margin-bottom: 13px;
  }

  .corporate-copy p {
    font-size: 16px;
    line-height: 1.75;
  }

  .button {
    min-height: 54px;
    padding: 13px 27px;
    font-size: 17px;
  }

  .button-small {
    margin-top: 20px;
  }

  .footer-column li + li {
    margin-top: 15px;
  }

  .footer-column li a {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    font-size: 16px;
    line-height: 1.45;
  }

  .arrow-icon {
    width: 18px;
    height: 18px;
    font-size: 21px;
  }

  .newsletter-column h2 {
    margin-bottom: 18px;
  }

  .newsletter-form {
    gap: 14px;
  }

  .newsletter-form input {
    min-height: 54px;
    padding: 14px;
    font-size: 16px;
  }

  .button-wide {
    min-height: 54px;
  }
}

/* Extra narrow phones */
@media (max-width: 360px) {
  .site-footer {
    padding-inline: 16px;
  }

  .footer-grid {
    row-gap: 32px;
  }
}


.lux-course {
    --green: #1f562c;
    --ink: #25271f;
    --muted: #827f72;
    --line: rgba(31, 86, 44, .20);

    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 18px;

    background: transparent;
    border: 1px solid var(--line);

    box-sizing: border-box;
    transition: border-color .4s ease;
}

.lux-course *,
.lux-course *::before,
.lux-course *::after {
    box-sizing: border-box;
}

.lux-course:hover {
    border-color: rgba(31, 86, 44, .55);
}

/* IMAGE */
.lux-course__visual {
    display: block;
    position: relative;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
}

.lux-course__visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.08 / 1;
    object-fit: cover;

    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}

.lux-course__visual:hover img {
    transform: scale(1.025);
}

.lux-course__number {
    position: absolute;
    right: 18px;
    bottom: 18px;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #fff;
    background: var(--green);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;

    font-size: 13px;
    letter-spacing: 1px;
}

/* CONTENT */
.lux-course__body {
    padding: 34px 4px 6px;
}

.lux-course__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
    color: var(--green);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
}

.lux-course__eyebrow span {
    width: 30px;
    height: 1px;
    background: var(--green);
}

.lux-course__title {
    margin: 0;

    color: var(--ink);
   
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1.4px;
}

.lux-course__desc {
    max-width: 620px;
    margin: 22px 0 30px;

    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
}

/* INFORMATION */
.lux-course__meta {
    
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;

    padding: 23px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}



.lux-course__meta p {
    margin: 0;

    color: var(--ink);
    font-size: 17px;
    line-height: 1.7;
}

/* PREMIUM CTA */
.lux-course__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 72px;
    margin-top: 28px;
    padding: 12px 22px 12px 26px;

    color: #fff !important;
    background: var(--green);
    border: 1px solid var(--green);

    text-decoration: none !important;
    overflow: hidden;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;

    transition:
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}

.lux-course__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;

    background: linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform: skewX(-20deg);
    transition: left .7s ease;
}

.lux-course__btn:hover::before {
    left: 150%;
}

.lux-course__btn:hover {
    color: var(--green) !important;
    background: transparent;
    box-shadow: 0 10px 28px rgba(31,86,44,.08);
}

.lux-course__arrow {
    position: relative;
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    flex-shrink: 0;

    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;

    transition:
        transform .4s ease,
        border-color .4s ease;
}

.lux-course__arrow svg {
    width: 19px;
    height: 19px;
}

.lux-course__btn:hover .lux-course__arrow {
    transform: translateX(4px);
    border-color: var(--green);
}

@media (max-width: 600px) {
    .lux-course {
        padding: 10px;
    }

    .lux-course__visual img {
        aspect-ratio: .95 / 1;
    }

    .lux-course__body {
        padding: 26px 8px 8px;
    }

    .lux-course__eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 16px;
    }

    .lux-course__title {
        font-size: clamp(29px, 8vw, 40px);
        letter-spacing: -.7px;
    }

    .lux-course__desc {
        margin: 16px 0 24px;
        font-size: 14px;
    }

    .lux-course__meta {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 0;
    }

    .lux-course__meta p {
        font-size: 14px;
    }

   
}

@media (prefers-reduced-motion: reduce) {
    .lux-course *,
    .lux-course *::before,
    .lux-course *::after {
        transition: none !important;
    }
}
    
/* Lưới khóa học */
.lux-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    padding: 20px 20px 20px;
    margin: 0 auto;
}

/* Thẻ khóa học */
.lux-course {
    --green: #1f562c;
    --ink: #25271f;
    --muted: #827f72;

    min-width: 0;
    padding: 10px;

    background: transparent;
    border: 1px solid rgba(31, 86, 44, .18);

    transition:
        border-color .4s ease,
        transform .4s ease,
        box-shadow .4s ease;
}

.lux-course:hover {
    border-color: #1f562c;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(31, 86, 44, .08);
}

/* Ảnh */
.lux-course__visual {
    display: block;
    overflow: hidden;
    width: 100%;
}

.lux-course__visual img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .8s ease;
}

.lux-course:hover .lux-course__visual img {
    transform: scale(1.04);
}

/* Nội dung */
.lux-course__body {
    padding: 22px 8px 8px;
}

.lux-course__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;

    color: #1f562c;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    line-height: 1.6;
}

.lux-course__eyebrow span {
    width: 18px;
    height: 1px;
    flex-shrink: 0;
    background: #1f562c;
}

/* Tiêu đề */
.lux-course__title {
    height: 80px;
    margin: 0 0 18px;

    color: #25271f;
    
    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.4px;

   
    
}

/* Thông tin */
.lux-course__meta {
    padding: 16px 0;
    border-top: 1px solid rgba(31, 86, 44, .18);
}

.lux-course__meta > div + div {
    margin-top: 14px;
}

.lux-course__label {
    display: block;
    margin-bottom: 5px;
    height: 40px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
}

.lux-course__meta p {
    margin: 0;
    color: #25271f;
    font-size: 13px;
    line-height: 1.6;
}

/* Nút */
.lux-course__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    min-height: 48px;
    margin-top: 8px;
    padding: 10px 12px;

    color: #fff !important;
    background: #1f562c;
    border: 1px solid #1f562c;

    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4px;

    transition:
        background .3s ease,
        color .3s ease;
}

.lux-course__btn:hover {
    color: #1f562c !important;
    background: transparent;
}

.lux-course__arrow {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;

    border: 1px solid currentColor;
    border-radius: 50%;

    transition: transform .3s ease;
}

.lux-course__btn:hover .lux-course__arrow {
    transform: translate(3px, -3px);
}

/* Tablet: 2 ô mỗi dòng */
@media (max-width: 1024px) {
    .lux-course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .lux-course__title {
        font-size: 23px;
    }
}

/* Điện thoại: 1 ô mỗi dòng */
@media (max-width: 560px) {
    .lux-course-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lux-course {
        padding: 12px;
    }

    .lux-course__visual img {
        aspect-ratio: 4 / 3;
    }
    .lux-course__title{
        height: 70px !important;
    }
    .lux-course__label{
        height: 56px !important;
    }
    .lux-course__title {
        min-height: 0;
        font-size: 16px;
    }

    .lux-course__btn {
        min-height: 54px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lux-course,
    .lux-course * {
        transition: none !important;
    }
}
/*==== chân trang */



/* FOOTER KINGSMAN */
.kings-footer {
    width: 100%;
    background: #1f562c;
    color: #fff;
    padding: 25px 20px 0px;
    
    box-sizing: border-box;
}

.kings-footer *,
.kings-footer *::before,
.kings-footer *::after {
    box-sizing: border-box;
}

.kings-footer-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
}

/* CỘT LOGO */
.kings-footer-info {
    text-align: center;
    padding: 0 0 0 10px;
}

.kings-footer-logo {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    text-decoration: none !important;
}

.kings-footer-logo img {
    width: 100%;
    max-width: 280px;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 10px;
}

.kings-footer-logo span {
    font-size: 37px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.1;
}

.kings-footer-logo small {
    display: block;
    font-size: 19px;
    letter-spacing: 6px;
    margin-top: 8px;
}

.kings-footer-line {
    height: 1px;
    background: rgba(255,255,255,.8);
    width: 100%;
    margin: 12px 0 24px;
}

.kings-footer-desc {
    font-weight: 600;
    font-size: 56px;
  
    

    font-size: 19px;
    line-height: 1.6;
    margin: 0 0 30px;
}

.kings-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.kings-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.65;
}

.kings-footer-contact i {
    width: 22px;
    min-width: 22px;
    font-size: 21px;
    padding-top: 3px;
}

.kings-footer a {
    color: #fff;
    text-decoration: none;
    transition: color .25s ease;
}

.kings-footer a:hover {
    color: #8ecbff;
}


.kings-footer-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Từng khung bên trong */
.kings-footer-menu > div {
    min-width: 0;
    box-sizing: border-box;
}

/* Mobile: vẫn chia 2 khung */
@media (max-width: 768px) {
    .kings-footer-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.kings-footer-menu{
    grid-template-columns: 1fr 1fr;
    gap: 40px;

}

/* CỘT MENU */
.kings-footer-menu h3,
.kings-footer-program h3 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    margin: 8px 0 22px;
    color: #fff;
}

.kings-footer-menu ul,
.kings-footer-program ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kings-footer-menu ul li,
.kings-footer-program ul li {
    margin-bottom: 13px;
    font-size: 17px;
    line-height: 1.5;
}

.kings-footer-menu ul li a::before,
.kings-footer-program ul li a::before {
    content: "· ";
    font-weight: 700;
}

.kings-footer-heading{

    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom:20px;
}

.kings-footer-menu .kings-footer-heading,
.kings-footer-program .kings-footer-heading {
    margin-top: 38px;
}

/* MẠNG XÃ HỘI */
.kings-footer-social {
    display: flex;
    gap: 23px;
    align-items: center;
}

.kings-footer-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    color: #293d70;
    font-size: 25px;
    transition: .25s;
}

.kings-footer-social a:hover {
    background: #8ecbff;
    color: #18294e;
    transform: translateY(-4px);
}

.kings-footer-fanpage {
    margin-top: 18px;
    font-size: 15px;
}

/* TABLET */
@media (max-width: 1024px) {
    .kings-footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    .kings-footer-info {
        padding: 0;
    }

    .kings-footer-program {
        grid-column: 1 / -1;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .kings-footer {
        padding: 35px 20px;
    }

    .kings-footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .kings-footer-info {
        text-align: center;
    }

    .kings-footer-logo {
        min-height: 0;
        padding: 10px 0 20px;
    }

    .kings-footer-logo img {
        max-width: 220px;
        max-height: 110px;
    }

    .kings-footer-logo span {
        font-size: 30px;
    }

    .kings-footer-logo small {
        font-size: 16px;
    }

    .kings-footer-desc {
        font-size: 16px;
    }

    .kings-footer-contact li {
        font-size: 14px;
        gap: 12px;
    }

    .kings-footer-menu h3,
    .kings-footer-program h3 {
        font-size: 19px;
        margin-top: 0;
    }

    .kings-footer-menu ul li,
    .kings-footer-program ul li {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .kings-footer-menu .kings-footer-heading,
    .kings-footer-program .kings-footer-heading {
        margin-top: 28px;
    }

    .kings-footer-social a {
        width: 48px;
        height: 48px;
        font-size: 21px;
    }
}