@charset "UTF-8";
/* Masterskills Homepage — Soft Borders + Warm Hero Sync | 2026-10-22 */
#main-content.site-frame-system{
  --ms-frame-ink: #d4d8d7;
  --ms-frame-border: 1px;
  --ms-frame-shadow: rgba(50, 65, 69, .065);
  --ms-frame-offset: 0px;
  --ms-soft-border: #d5d9d8;
  --ms-soft-border-hover: #bcc9c9;
  --ms-soft-divider: #d9dddc;
  --ms-soft-shadow: 0 7px 22px rgba(39, 54, 60, .065);
  --ms-soft-shadow-hover: 0 10px 26px rgba(39, 54, 60, .10);
}


/* Main section panels and hero outline */
#main-content .site-section-frame{
  border: 1px solid var(--ms-soft-border) !important;
  box-shadow: var(--ms-soft-shadow) !important;
}


#main-content .site-card-frame{
  border: 1px solid var(--ms-soft-border) !important;
  box-shadow: var(--ms-soft-shadow) !important;
}

#main-content .site-card-frame:hover{
  border-color: var(--ms-soft-border-hover) !important;
  box-shadow: var(--ms-soft-shadow-hover) !important;
  transform: translateY(-2px);
}


#main-content #giai-phap .enterprise-about,
#main-content #giai-phap .enterprise-tabs{
  border: 1px solid var(--ms-soft-border) !important;
  box-shadow: var(--ms-soft-shadow) !important;
}

#main-content #giai-phap .enterprise-about:hover,
#main-content #giai-phap .enterprise-tabs:hover{
  border-color: var(--ms-soft-border-hover) !important;
  box-shadow: var(--ms-soft-shadow-hover) !important;
}

#main-content #giai-phap .enterprise-tabs__nav{
  border-right-color: var(--ms-soft-divider) !important;
  border-bottom-color: var(--ms-soft-divider) !important;
}

#main-content #giai-phap .enterprise-tabs__tab,
#main-content #giai-phap .enterprise-tabs__tab:last-child{
  border: 1px solid #c7cdcc !important;
  box-shadow: none !important;
}

#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible{
  border-color: #738f9c !important;
}

#main-content #giai-phap .enterprise-tabs--navy-arrow
.enterprise-tabs__nav:has(.enterprise-tabs__tab:hover)
.enterprise-tabs__tab.is-active:not(:hover){
  border-color: #c7cdcc !important;
}

#main-content #chuong-trinh .program-card,
#main-content #chuong-trinh .program-card:hover{
  border: 1px solid var(--ms-soft-border) !important;
  box-shadow: var(--ms-soft-shadow) !important;
}

#main-content #chuong-trinh .program-card:hover{
  border-color: var(--ms-soft-border-hover) !important;
  box-shadow: var(--ms-soft-shadow-hover) !important;
}

#main-content .section-cases .case-card img{
  border-bottom: 1px solid var(--ms-soft-divider) !important;
}

#main-content .final-cta .button{
  border-width: 1.5px !important;
  border-color: #6d7372 !important;
}


/* HERO — match footer #0468B1; moderated overlay and centered content */
















@media  (max-width: 620px)  {

  #main-content .site-section-frame,
#main-content .site-card-frame,
#main-content #giai-phap .enterprise-about,
#main-content #giai-phap .enterprise-tabs,
#main-content #chuong-trinh .program-card{
    border-width: 1px !important;
    box-shadow: 0 5px 15px rgba(39, 54, 60, .055) !important;
  }


}


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

  #main-content .site-card-frame:hover{ transform: none; }


}





/* Refinement: restore the small label and remove the former solid gold strip. */


/* Center label + heading + description as a single visual unit. */









/* 2026-10-22 — Transparent hero assets integration
   Keep actual alpha pixels from PNGs, using footer blue as the only backdrop.
   Avoid a separate opaque rectangular photo layer or double gradient. */








/* 2026-10-22 — Mobile alignment and reduced-size in-house sticky ticker.
   Scoped to small screens only; desktop layouts are unchanged. */

@media  (max-width: 620px)  {

  /* Put the hero copy close to the top, not vertically centered. */
  
  
  /* Use compact mobile spacing while retaining the existing H1 scale. */
  
  
  /* Shrink the fixed ticker, including its yellow text background. */
  
  
  

}




/* ====================================================================
   MASTERSKILLS HOMEPAGE FINAL REFINEMENT - 2026-10-22
   1) Mobile hero: content-height instead of the obsolete 460px min-height
   2) One consistent editorial heading scale for all homepage sections
   3) Low-emphasis institutional name in the footer
   ==================================================================== */

/* SECTION HEADINGS: unified hierarchy, desktop/tablet/mobile */
#main-content.site-frame-system .site-framed-section .section-heading h2{
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: clamp(28px, 2.25vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.018em !important;
  text-wrap: balance;
  overflow-wrap: normal;
}

#main-content.site-frame-system .site-framed-section .section-heading h2::after{
  margin-top: 15px !important;
  margin-bottom: 16px !important;
}


/* FOOTER: institutional title as quiet secondary information */
.site-footer .footer-bottom .footer-academy-name{
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .005em !important;
  margin: 0 0 7px !important;
  text-shadow: none !important;
}



@media  (max-width: 620px)  {

  /* Remove the forced 460px minimum: the actual copy defines hero height.
     Reserve ~65px beneath the copy for arrows/dots and breathing room. */
  
  
  
  
  
  
  /* Same section hierarchy across all headings even when base CSS
     has a separate larger rule for #chuong-trinh. */
  #main-content.site-frame-system .site-framed-section .section-heading h2{
    font-size: clamp(21px, 5.6vw, 25px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.012em !important;
  }

  #main-content.site-frame-system .site-framed-section .section-heading h2::after{
    width: 58px !important;
    margin-top: 11px !important;
    margin-bottom: 13px !important;
  }

  #main-content .site-section-frame > .section-heading{
    margin-bottom: 22px !important;
  }

  #main-content #chuong-trinh .section-heading{
    margin-bottom: 24px !important;
  }

  .site-footer .footer-bottom .footer-academy-name{
    font-size: 11.5px !important;
    line-height: 1.42 !important;
    color: rgba(255,255,255,.70) !important;
  }

  .site-footer .footer-bottom > p:not(.footer-academy-name){
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }


}



/* 2026-10-22 | FIX: Footer bottom strip and legal text rhythm
   The inherited mobile body padding-bottom (76px) was sized for an old
   tall ticker. The ticker is now ~35–38px; that body's whitespace was
   appearing as a blank light strip after the footer. Keep the reserve
   INSIDE the footer, colored to match it, so legal text stays unobscured. */
.site-footer .footer-bottom > p{
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  color: rgba(255,255,255,.64) !important;
  margin: 0 0 5px !important;
  text-shadow: none !important;
  overflow-wrap: break-word !important;
}

.site-footer .footer-bottom > p:last-child{
  margin-bottom: 0 !important;
}

/* This CSS is linked by the homepage only, so removing the course-page
   body reserve does not affect the other course pages. */
body.page-course-detail{
  padding-bottom: 0 !important;
}

/* Ticker overlaps bottom edge; keep the clearance in the BLUE footer. */
.site-footer{
  padding-bottom: 42px !important;
  background-color: #0468B1 !important;
}


@media  (max-width: 760px)  {

  .site-footer{
    padding-bottom: 43px !important;
  }

  .site-footer .footer-bottom > p{
    font-size: 11px !important;
    line-height: 1.46 !important;
    margin-bottom: 5px !important;
    color: rgba(255,255,255,.65) !important;
  }


}


/* Consolidate the institutional, legal, and copyright text even when
   earlier .footer-academy-name rules specify a higher specificity. */
.site-footer .footer-bottom p.footer-academy-name,
.site-footer .footer-bottom p.footer-legal-details,
.site-footer .footer-bottom p.footer-copyright{
  font-size: 12px !important;
  color: rgba(255,255,255,.64) !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  margin: 0 0 5px !important;
}

.site-footer .footer-bottom p.footer-copyright{margin-bottom: 0 !important;}


@media  (max-width: 760px)  {

  .site-footer .footer-bottom p.footer-academy-name,
.site-footer .footer-bottom p.footer-legal-details,
.site-footer .footer-bottom p.footer-copyright{
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.65) !important;
  }


}

/* Both controls are fixed widgets, not footer content. Preserve their
   document-independent positioning so no blank block can follow footer. */

body.page-course-detail > a.ctrlq.fb-button{
  position: fixed !important;
  right: 16px !important;
  bottom: 72px !important;
  z-index: 1001 !important;
}


@media  (max-width: 760px)  {

  body.page-course-detail > a.ctrlq.fb-button{
    right: 12px !important;
    bottom: 68px !important;
  }


}


/* ================================================================
   2026-10-22 | HOMEPAGE FINISHING — PROGRAM CARD HOVER & TICKER
   Restrict changes to program-category cards and bottom ticker.
   ================================================================ */

/* Soft slate-blue / corporate hover, replacing legacy bright #FFD54F.
   Keyboard focus gets the same visual feedback. */
#main-content #chuong-trinh .program-card:hover,
#main-content #chuong-trinh .program-card:focus-visible{
  background: #edf4f5 !important;
  border-color: #9ebdc8 !important;
  box-shadow: 0 9px 22px rgba(28, 73, 94, .11) !important;
  transform: translateY(-3px);
}

#main-content #chuong-trinh .program-card:hover h3,
#main-content #chuong-trinh .program-card:focus-visible h3{
  color: #164b6a !important;
}

/* Keep the colorful category icons legible against the new soft hover. */
#main-content #chuong-trinh .program-card:hover .program-icon,
#main-content #chuong-trinh .program-card:focus-visible .program-icon{
  background: #fff !important;
}


/* The phrase should no longer grow to 125% of the ticker text. */


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

  #main-content #chuong-trinh .program-card:hover,
#main-content #chuong-trinh .program-card:focus-visible{
    transform: none;
  }


}


/* Masterskills Homepage | Faculty single-line name captions | 2026-10-22 */
/* Homepage faculty: concise single-line name captions on responsive grids */
#main-content #giang-vien .faculty-grid .faculty-card strong{
  display: block !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 10.3px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.45px !important;
  white-space: nowrap !important;
  text-align: center !important;
  overflow: visible !important;
  padding: 0 !important;
  margin-top: 8px !important;
}

/* Most lengthy name in the existing roster. Preserve full spelling. */
#main-content #giang-vien .faculty-grid .faculty-card:nth-child(18) strong{
  font-size: 9.5px !important;
  letter-spacing: -0.48px !important;
}

/* Desktop: always 9 portraits per row (18 faculty = two balanced rows).
   The previous 1221–1359px rules forced 8/7 columns and caused wrapping.
   A tighter gutter at these widths preserves the one-line captions. */

@media  (min-width: 1221px) and (max-width: 1359px)  {

  #main-content #giang-vien .faculty-grid{
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 26px !important;
  }

  #main-content #giang-vien .faculty-grid .faculty-card strong{
    font-size: clamp(8.6px, .75vw, 10.1px) !important;
    letter-spacing: -.48px !important;
  }

  #main-content #giang-vien .faculty-grid .faculty-card:nth-child(18) strong{
    font-size: clamp(7.9px, .68vw, 9.2px) !important;
    letter-spacing: -.5px !important;
  }


}


@media  (min-width: 901px) and (max-width: 980px)  {

  #main-content #giang-vien .faculty-grid{
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  }


}


@media  (max-width: 620px)  {

  #main-content #giang-vien .faculty-grid .faculty-card strong{
    font-size: 10px !important;
    letter-spacing: -0.3px !important;
  }

  #main-content #giang-vien .faculty-grid .faculty-card:nth-child(18) strong{
    font-size: 9.5px !important;
    letter-spacing: -0.4px !important;
  }


}


@media  (max-width: 360px)  {

  #main-content #giang-vien .faculty-grid .faculty-card strong{
    font-size: 8.6px !important;
    letter-spacing: -0.38px !important;
  }

  #main-content #giang-vien .faculty-grid .faculty-card:nth-child(18) strong{
    font-size: 8.2px !important;
    letter-spacing: -0.42px !important;
  }


}



/* =========================================================
   MASTERSKILLS | DỊCH VỤ ĐÀO TẠO CHO DOANH NGHIỆP
   2026-10-22: Uniform one-line tab labels (desktop/tablet/mobile).
   Scoped to homepage #giai-phap; all four tabs remain functional.
   ========================================================= */
#main-content #giai-phap .enterprise-tabs__tab-label{
  display: block;
  min-width: 0;
  white-space: nowrap !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  letter-spacing: -0.15px;
  line-height: 1.25 !important;
}

/* Desktop: use the space previously reserved for the hidden text-arrow.
   Keep the prominent navy triangular indicator of the selected tab. */

@media  (min-width: 981px)  {

  #main-content #giai-phap .enterprise-tabs__tab{
    grid-template-columns: 52px minmax(0, 1fr) 0px !important;
    column-gap: 9px !important;
    padding: 9px 11px !important;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon{
    width: 50px;
    height: 50px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon img{
    width: 45px;
    height: 45px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-arrow{
    display: none !important;
  }


}

/* Tablet in the side-navigation configuration */

@media  (min-width: 761px) and (max-width: 980px)  {

  #main-content #giai-phap .enterprise-tabs__tab{
    grid-template-columns: 46px minmax(0, 1fr) 12px !important;
    column-gap: 7px !important;
    padding: 8px 9px !important;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon{
    width: 46px;
    height: 46px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-label{
    font-size: 12.8px !important;
  }


}

/* Small tablet: two tabs per row */

@media  (min-width: 521px) and (max-width: 760px)  {

  #main-content #giai-phap .enterprise-tabs__tab{
    grid-template-columns: 40px minmax(0, 1fr) 14px !important;
    column-gap: 6px !important;
    padding: 8px !important;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon{
    width: 40px;
    height: 40px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon img{
    width: 37px;
    height: 37px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-label{
    font-size: 12.8px !important;
  }


}

/* Mobile: retain comfortable full-width stacked tab buttons. */

@media  (max-width: 520px)  {

  #main-content #giai-phap .enterprise-tabs__tab{
    grid-template-columns: 40px minmax(0, 1fr) 12px !important;
    column-gap: 6px !important;
    padding: 8px !important;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon{
    width: 40px;
    height: 40px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-icon img{
    width: 37px;
    height: 37px;
  }

  #main-content #giai-phap .enterprise-tabs__tab-label{
    font-size: 12.5px !important;
    letter-spacing: -0.22px;
  }


}

/* Extra-narrow two-column tablet band (521–540px): prevent any text overflow. */

@media  (min-width: 521px) and (max-width: 540px)  {

  #main-content #giai-phap .enterprise-tabs__tab-label{
    font-size: 12.2px !important;
  }


}


/* ======================================================================
   MASTERSKILLS | ENTERPRISE TRAINING TABS | 2026-10-23
   Selected, hovered and keyboard-focused tabs: corporate blue #004f8a.
   Only affects the four service tabs inside #giai-phap.
   This stylesheet loads after site-frame-system.css and navy-arrow.css.
   ====================================================================== */
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible {
  background: #004f8a !important;
  color: #ffffff !important;
  border-color: #004f8a !important;
}

#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active .enterprise-tabs__tab-label,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover .enterprise-tabs__tab-label,
#main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible .enterprise-tabs__tab-label {
  color: #ffffff !important;
}

/* Match the desktop triangle to the tab background. */
@media (min-width: 981px) {
  #main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active::after,
  #main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover::after,
  #main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible::after {
    background: #004f8a !important;
  }

  /* Preserve the site's single-highlight hover behavior. */
  #main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__nav:has(.enterprise-tabs__tab:hover) .enterprise-tabs__tab.is-active:not(:hover) {
    background: #e7e7e7 !important;
    border-color: #c7cdcc !important;
    color: #1f3446 !important;
  }
  #main-content #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__nav:has(.enterprise-tabs__tab:hover) .enterprise-tabs__tab.is-active:not(:hover) .enterprise-tabs__tab-label {
    color: #1f3446 !important;
  }
}