@charset "UTF-8";

/*
 * Masterskills header/footer integration for Rowling 2.1.1
 * Extracted from masterskills.org/css/style.css.
 * Generic selectors are deliberately scoped so Rowling article/sidebar styles stay intact.
 */

/* Design tokens limited to Masterskills shell elements */
.topbar,
.site-header,
.site-footer {
  --brand:#103d61;
  --brand-2:#1f6faf;
  --brand-dark:#082d49;
  --gold:#d2a13c;
  --gold-light:#efc861;
  --text:#19344c;
  --muted:#607384;
  --line:#dbe3e9;
  --soft:#f4f7f9;
  --white:#fff;
  --container:1320px;
  --shadow:0 18px 50px rgba(8,45,73,.15);
  --serif:Georgia,Tahoma,serif;
  font-family:Roboto,Tahoma,Arial,sans-serif;
}

/* Neutralize Rowling's global reset only inside Masterskills header/footer */
.topbar *,
.site-header *,
.site-footer * {
  box-sizing:border-box;
  font-family:inherit;
}
.topbar a,
.site-header a,
.site-footer a {
  color:inherit;
  text-decoration:none;
}
.topbar img,
.site-header img,
.site-footer img {
  max-width:100%;
}
.site-header button {
  font:inherit;
}
.topbar .container,
.site-header .container,
.site-footer .container {
  width:min(calc(100% - 40px),var(--container));
  margin-inline:auto;
}
.topbar .sr-only,
.site-header .sr-only,
.site-footer .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Top bar */
.topbar {
  height:36px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  line-height:1.4;
}
.topbar__inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.topbar__left,
.topbar__right {
  display:flex;
  align-items:center;
  gap:20px;
}
.topbar a:hover {
  color:var(--gold-light);
}

/* Header + navigation */
.site-header {
  height:92px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1000;
  line-height:1.4;
}
.site-header.is-sticky {
  position:sticky;
  top:0;
  box-shadow:0 8px 25px rgba(8,45,73,.12);
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand {
  min-width:244px;
}
.brand img {
  display:block;
  width:230px;
  height:68px;
  object-fit:contain;
  object-position:left center;
}
.primary-nav {
  margin-left:auto;
  height:100%;
}
.nav-list {
  font-size:12pt;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:stretch;
  gap:2px;
}
.nav-item {
  display:flex;
  align-items:stretch;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-link {
  border:0;
  background:transparent;
  color:var(--brand);
  font-weight:900;
  font-size:16px;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}
.nav-link:hover,
.nav-item.is-open > .nav-link {
  color:var(--brand-2);
}
.chevron {
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:.2s;
}
.nav-item.is-open .chevron {
  transform:rotate(225deg) translate(-1px,-1px);
}
.menu-toggle {
  display:none;
  border:0;
  background:none;
  width:46px;
  height:46px;
  padding:0;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.menu-toggle span:not(.sr-only) {
  display:block;
  width:26px;
  height:2px;
  background:var(--brand);
}
.nav-panel {
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:min(calc(100vw - 40px),1120px);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:none;
  grid-template-columns:300px 1fr;
  max-height:min(680px,calc(100vh - 150px));
  overflow:auto;
}
.nav-item.is-open > .nav-panel {
  display:grid;
}
.panel-intro {
  padding:36px;
  border-right:1px solid var(--line);
  background:linear-gradient(145deg,#fff,#f5f8fa);
}
.panel-intro span,
.mega-head span {
  display:block;
  color:var(--gold);
  font-size:13px;
  font-weight:800;
  letter-spacing:1.5px;
}
.panel-intro strong {
  display:block;
  font:700 28px/1.25 var(--serif);
  color:var(--brand);
  margin:14px 0 25px;
  font-family:Tahoma,Arial,sans-serif;
}
.panel-intro a,
.mega-head a {
  color:var(--brand-2);
  font-weight:700;
}
.panel-links {
  padding:28px 34px;
  display:grid;
  gap:4px 28px;
  align-content:start;
}
.panel-links--2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.panel-links--3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.panel-links a,
.mega-course-links a {
  display:block;
  padding:8px 8px;
  border-radius:4px;
  color:#29445b;
  line-height:1.0;
  font-size:11pt;
}
.panel-links a::before,
.mega-course-links a::before {
  content:"\2022";
  color:var(--gold);
  font-weight:900;
  margin-right:10px;
}
.panel-links a:hover,
.mega-course-links a:hover {
  background:#edf5fa;
  color:var(--brand-2);
}
.mega-panel-wrap {
  display:none;
  grid-template-columns:1fr;
}
.nav-item.is-open > .mega-panel-wrap {
  display:block;
}
.mega-head {
  padding:26px 34px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}
.mega-head strong {
  display:block;
  font:700 27px/1.25 var(--serif);
  color:var(--brand);
  margin-top:8px;
}
.mega-body {
  display:grid;
  grid-template-columns:315px 1fr;
  min-height:430px;
}
.mega-tabs {
  background:#f2f6f8;
  border-right:1px solid var(--line);
  padding:14px 0;
}
.mega-tab {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid #dbe3e9;
  background:transparent;
  text-align:left;
  padding:13px 24px;
  color:#344f65;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
}
.mega-tab:hover,
.mega-tab.is-active {
  background:var(--brand-2);
  color:#fff;
}
.mega-content {
  padding:34px 40px;
}
.mega-content-panel h3 {
  margin:0 0 20px;
  font:700 29px/1.2 Tahoma,Arial,sans-serif;
  color:var(--brand);
}
.mega-course-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 20px;
}
.nav-home {
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
}
.home-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transform:translateY(-1px);
}
.home-icon svg {
  display:block;
}
.nav-search-icon {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Three-column headings in non-course panels */
.nav-panel:not(.course-mega-panel) .panel-links--3 {
  --panel-heading-indent:42px;
}
.nav-panel:not(.course-mega-panel) .panel-links--3 > span:nth-child(-n+3) {
  position:relative;
  display:block;
  margin:0 0 18px;
  padding:0 0 9px var(--panel-heading-indent);
  color:var(--brand);
  font-size:17px;
  font-weight:900;
  line-height:1.25;
  text-align:left;
}
.nav-panel:not(.course-mega-panel) .panel-links--3 > span:nth-child(-n+3)::after {
  content:"";
  position:absolute;
  left:var(--panel-heading-indent);
  bottom:0;
  width:52px;
  height:2px;
  border-radius:999px;
  background:var(--gold);
}

/* Footer */
.site-footer {
  background:#082c47;
  color:#d8e5ed;
  padding:52px 0 20px;
  font-size:14px;
  line-height:1.5;
}
.site-footer p {
  margin:0 0 12px;
  line-height:1.55;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:32px;
}
.footer-grid h3 {
  color:#fff;
  margin:0 0 14px;
  font-size:16px;
  line-height:1.3;
  text-transform:uppercase;
}
.footer-grid a {
  display:block;
  color:#d8e5ed;
  margin:8px 0;
  font-size:14px;
  line-height:1.35;
}
.footer-grid a:hover {
  color:var(--gold-light);
}
.footer-brand img {
  max-width:230px;
  max-height:100px;
  object-fit:contain;
  object-position:left center;
  filter:brightness(0) invert(1);
}
.footer-brand p {
  font-size:14px;
  max-width:330px;
}
.footer-brand > div[style*="grid-template-columns"] {
  max-width:326px;
}
.footer-brand > div[style*="grid-template-columns"] img {
  width:100% !important;
  height:100px !important;
  object-fit:cover !important;
  filter:none !important;
}
.footer-bottom {
  margin-top:35px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
}
.footer-bottom a {
  color:#d8e5ed;
}

/* Skip link */
.masterskills-skip-link:focus {
  position:fixed;
  z-index:99999;
  top:12px;
  left:12px;
  width:auto;
  height:auto;
  clip:auto;
  background:#fff;
  color:#103d61;
  padding:10px 14px;
}

/* Responsive navigation/footer */
@media (max-width:1220px) {
  body.menu-open {
    overflow:hidden;
    touch-action:none;
  }
  .topbar__left span,
  .topbar__right a:nth-child(2) {
    display:none;
  }
  .brand {
    min-width:210px;
  }
  .brand img {
    width:205px;
  }
  .menu-toggle {
    display:flex;
    margin-left:auto;
    position:relative;
    z-index:3002;
    flex:0 0 46px;
    cursor:pointer;
  }
  .menu-toggle span:not(.sr-only) {
    transition:transform .22s ease,opacity .22s ease;
    transform-origin:center;
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(2) {
    transform:translateY(8px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(3) {
    opacity:0;
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(4) {
    transform:translateY(-8px) rotate(-45deg);
  }
  .site-header {
    z-index:3000;
  }
  .primary-nav {
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:none;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:var(--shadow);
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 92px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:3001;
  }
  .primary-nav.is-open {
    display:block;
  }
  .nav-list {
    display:block;
    padding:10px 20px 24px;
    height:auto !important;
    min-height:0 !important;
    width:100%;
  }
  .nav-item {
    display:block;
    border-bottom:1px solid var(--line);
  }
  .nav-link {
    width:100%;
    height:auto;
    justify-content:space-between;
    padding:16px 4px;
  }
  .nav-panel {
    position:static;
    transform:none;
    width:100%;
    min-width:0;
    max-height:none;
    box-shadow:none;
    border:0;
    border-top:1px solid var(--line);
    grid-template-columns:1fr;
    margin:0 0 10px;
    overflow:visible;
  }
  .mega-panel-wrap {
    width:100%;
    min-width:0;
  }
  .nav-item.is-open > .nav-panel,
  .nav-item.is-open > .mega-panel-wrap {
    display:grid;
  }
  .nav-item.is-open > .mega-panel-wrap {
    display:block;
  }
  .panel-intro {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:24px;
  }
  .panel-intro strong {
    font-size:24px;
  }
  .panel-links {
    padding:18px 20px;
  }
  .panel-links--3,
  .panel-links--2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mega-head {
    padding:22px;
  }
  .mega-head strong {
    font-size:23px;
  }
  .mega-head a {
    display:none;
  }
  .mega-body {
    grid-template-columns:1fr;
  }
  .mega-tabs {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-right:0;
    padding:0;
  }
  .mega-tab {
    border-right:1px solid var(--line);
  }
  .mega-content {
    padding:24px;
  }
  .mega-course-links {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .primary-nav .nav-list > li:first-child > a.nav-link,
  .primary-nav .nav-list > li.nav-item-home > a.nav-link,
  .primary-nav .nav-list > li.nav-item-home > a.nav-home {
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding-left:4px !important;
    padding-right:4px !important;
    text-align:left !important;
  }
  .primary-nav .nav-list > li:first-child > a.nav-link .home-icon,
  .primary-nav .nav-list > li.nav-item-home > a.nav-link .home-icon,
  .primary-nav .nav-list > li.nav-item-home > a.nav-home .home-icon {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }
  .footer-grid {
    grid-template-columns:repeat(3,1fr);
  }
  .footer-brand {
    grid-column:1/-1;
  }
}

@media (min-width:1221px) {
  .nav-item.has-mega > .course-mega-panel {
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(calc(100vw - 40px),var(--container));
    max-width:var(--container);
    max-height:540px;
    overflow:hidden;
  }
  .nav-item.has-mega > .course-mega-panel .mega-body {
    grid-template-columns:232px minmax(0,1fr);
    height:540px;
  }
  .nav-item.has-mega > .course-mega-panel .mega-tabs,
  .nav-item.has-mega > .course-mega-panel .mega-content {
    max-height:540px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .nav-item.has-mega > .course-mega-panel .mega-tabs::-webkit-scrollbar,
  .nav-item.has-mega > .course-mega-panel .mega-content::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
  }
  .nav-item.has-mega > .course-mega-panel .mega-tabs {
    padding:8px 0;
  }
  .nav-item.has-mega > .course-mega-panel .mega-tab {
    padding:11px 18px;
    font-size:15px;
    line-height:1.25;
  }
  .nav-item.has-mega > .course-mega-panel .mega-content {
    padding:28px 30px 34px;
  }
  .nav-item.has-mega > .course-mega-panel .mega-content-panel h3 {
    margin:0 0 18px;
    font-size:28px;
    line-height:1.12;
  }
  .nav-item.has-mega > .course-mega-panel .panel-links.panel-links--3 {
    padding:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px 16px;
  }
  .nav-item.has-mega > .course-mega-panel .panel-links a {
    position:relative;
    display:block;
    min-width:0;
    padding:7px 8px 7px 18px;
    border-radius:4px;
    font-size:14px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-item.has-mega > .course-mega-panel .panel-links a::before {
    position:absolute;
    left:4px;
    margin-right:0;
  }
}

@media (max-width:820px) {
  .topbar .container,
  .site-header .container,
  .site-footer .container {
    width:min(100% - 28px,var(--container));
  }
  .topbar {
    display:none;
  }
  .site-header,
  .header-inner {
    height:78px;
  }
  .brand img {
    width:190px;
  }
  .primary-nav {
    max-height:calc(100dvh - 78px);
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
  }
  .footer-brand {
    grid-column:1/-1;
  }
}

@media (max-width:560px) {
  .panel-links--3,
  .panel-links--2,
  .mega-course-links {
    grid-template-columns:1fr;
  }
  .mega-tabs {
    grid-template-columns:1fr;
  }
  .footer-grid {
    grid-template-columns:1fr;
  }
  .footer-bottom {
    flex-direction:column;
  }
  .footer-brand > div[style*="grid-template-columns"] {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100%;
    max-width:100%;
  }
}


/* ================================================================
   HOTFIX V2 — Horizontal overflow / responsive transition
   2026-08-08

   1) Rowling keeps .section-inner at 970px until 850px, which can
      create horizontal scrolling between 851px and 970px.
   2) The full Masterskills desktop navigation can exceed its shell
      by a few pixels on narrower desktop/laptop viewports.
   3) Final overflow-x rule mirrors the main Masterskills site and
      prevents decorative/min-content overflow from creating a
      document-level horizontal scrollbar.
   ================================================================ */

/* Rowling transition range: keep the two-column layout, but make
   the wrapper fit the available viewport. */
@media (min-width:851px) and (max-width:1000px) {
  .wrapper.section-inner {
    width:calc(100% - 40px);
    max-width:970px;
  }
}

/* Compact full desktop navigation before the hamburger breakpoint. */
@media (min-width:1221px) and (max-width:1360px) {
  .header-inner {
    gap:14px;
  }

  .brand {
    min-width:205px;
  }

  .brand img {
    width:200px;
  }

  .nav-link {
    padding-left:9px;
    padding-right:9px;
    gap:6px;
    font-size:15px;
  }
}

/* Page-level safety net. The original Masterskills stylesheet also
   disables horizontal document scrolling. */
html,
body {
  max-width:100%;
  overflow-x:hidden;
}


/* ================================================================
   V3 — Match Masterskills navigation letter case
   Source labels in header.php already use:
   Giới thiệu / Khóa học / Giải pháp đào tạo / Đào tạo ngành nghề /
   Tài nguyên / Liên hệ

   Do NOT use text-transform:capitalize because it would produce
   "Giải Pháp Đào Tạo". We preserve the authored casing instead.
   ================================================================ */
.site-header .primary-nav .nav-link,
.site-header .primary-nav .nav-trigger {
  text-transform:none !important;
}


/* ================================================================
   V4 — Blog typography: Tahoma
   Apply only to Rowling post/category/content area.
   Header/Footer Masterskills typography is intentionally unchanged.
   ================================================================ */

/* Tên phân loại / chuyên mục hiển thị trên bài viết và danh sách bài */
.post-categories,
.post-categories a {
  font-family: Tahoma, Arial, sans-serif !important;
}

/* Tên bài viết: trang danh sách, category và single post */
.post-title,
.post-title a,
.single-post .post-title,
.single-post .post-title a {
  font-family: Tahoma, Arial, sans-serif !important;
}

/* Nội dung bài viết */
.post-content,
.post-inner > .post-content,
.post-content p,
.post-content li,
.post-content a,
.post-content blockquote,
.post-content table,
.post-content th,
.post-content td,
.post-content label,
.post-content input,
.post-content textarea,
.post-content select,
.post-content button {
  font-family: Tahoma, Arial, sans-serif !important;
}

/* Các tiêu đề nằm bên trong nội dung bài viết */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-family: Tahoma, Arial, sans-serif !important;
}