@charset "UTF-8";

/* =========================================================
   MASTERSKILLS — ĐÀO TẠO TẠI DOANH NGHIỆP
   Phiên bản nền navy, chữ vàng và tab mũi tên.
   File này phải được tải sau:
   - css/enterprise-training-section.css
   - css/site-frame-system.css
   ========================================================= */

#giai-phap{
  --masterskills-navy:#0b3558;
  --masterskills-navy-dark:#072a47;
  --masterskills-gold:#f0c75e;
  --masterskills-gold-dark:#d5a536;
}

/* ---------------------------------------------------------
   1. Tiêu đề bên trái: nền navy, chữ vàng
   --------------------------------------------------------- */

#giai-phap .enterprise-about--navy-title .enterprise-about__heading{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  min-height:64px;
  padding:13px 20px 11px;
  border-bottom:2px solid var(--masterskills-gold-dark) !important;
  color:var(--masterskills-gold);
  background:
    linear-gradient(
      180deg,
      #164b70 0%,
      var(--masterskills-navy) 58%,
      var(--masterskills-navy-dark) 100%
    ) !important;
}

#giai-phap .enterprise-about--navy-title .enterprise-about__heading::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:7px;
  height:1px;
  background:rgba(240,199,94,.35);
  pointer-events:none;
}

#giai-phap .enterprise-about--navy-title .enterprise-about__heading small{
  position:relative;
  z-index:1;
  color:var(--masterskills-gold) !important;
  font-size:12px;
  font-weight:900;
  line-height:1.4;
  letter-spacing:1.05px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   2. Tab navy có mũi tên cao bằng toàn bộ tab
   --------------------------------------------------------- */

@media(min-width:981px){
  #giai-phap .enterprise-tabs--navy-arrow{
    overflow:hidden;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__nav{
    position:relative;
    z-index:4;
    overflow:visible !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__content{
    position:relative;
    z-index:1;
    padding-left:30px !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab{
    position:relative;
    z-index:1;
    overflow:visible;
    transition:
      color .22s ease,
      background-color .22s ease,
      border-color .22s ease;
  }

  /* Tam giác mũi tên cao bằng tab */
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab::after{
    content:"";
    position:absolute;
    z-index:5;
    top:-1px;
    bottom:-1px;
    right:-32px;
    width:33px;
    height:calc(100% + 2px);
    background:var(--masterskills-navy);
    clip-path:polygon(0 0,100% 50%,0 100%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
      opacity .16s ease,
      visibility .16s ease;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible{
    z-index:8;
    border-color:var(--masterskills-navy) !important;
    color:#fff !important;
    background:
      linear-gradient(
        90deg,
        #174f78 0%,
        var(--masterskills-navy) 72%,
        var(--masterskills-navy-dark) 100%
      ) !important;
    box-shadow:none !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active::after,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover::after,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible::after{
    opacity:1;
    visibility:visible;
  }

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

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active
  .enterprise-tabs__tab-icon,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:hover
  .enterprise-tabs__tab-icon,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab:focus-visible
  .enterprise-tabs__tab-icon{
    border-color:rgba(255,255,255,.58) !important;
    background:#fff !important;
    box-shadow:0 5px 14px rgba(0,0,0,.16);
  }

  /* Ẩn mũi tên ký tự cũ vì đã thay bằng mũi tên toàn chiều cao. */
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab-arrow{
    opacity:0 !important;
    visibility:hidden !important;
  }

  /*
   Khi rê chuột vào tab khác:
   tab được hover nhận màu navy và mũi tên;
   tab mặc định tạm trở về nền xám để chỉ có một mũi tên nổi bật.
  */
  #giai-phap .enterprise-tabs--navy-arrow
  .enterprise-tabs__nav:has(.enterprise-tabs__tab:hover)
  .enterprise-tabs__tab.is-active:not(:hover){
    z-index:1;
    border-color:#111 !important;
    color:#1f3446 !important;
    background:#e7e7e7 !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow
  .enterprise-tabs__nav:has(.enterprise-tabs__tab:hover)
  .enterprise-tabs__tab.is-active:not(:hover)::after{
    opacity:0;
    visibility:hidden;
  }

  #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;
  }
}

/* ---------------------------------------------------------
   Tablet và điện thoại:
   giữ tab navy đang chọn nhưng bỏ tam giác để tránh chồng tab.
   --------------------------------------------------------- */

@media(max-width:980px){
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab.is-active{
    border-color:var(--masterskills-navy) !important;
    color:#fff !important;
    background:var(--masterskills-navy) !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow
  .enterprise-tabs__tab.is-active .enterprise-tabs__tab-label{
    color:#fff !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab-arrow{
    color:var(--masterskills-gold) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab,
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab::after{
    transition:none;
  }
}

/* =========================================================
   KHẮC PHỤC CANH CHỈNH PANEL BÊN PHẢI
   - Không dùng padding-left trên toàn bộ content.
   - Chừa khoảng cho đầu mũi tên ngay trong panel-inner.
   - Chuyển panel sang flex để nút cuối không đè lên nội dung.
   ========================================================= */

@media(min-width:981px){

  /* Nguyên nhân chính: padding-left:30px làm cả panel bị đẩy lệch. */
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__content{
    min-width:0;
    padding-left:0 !important;
    overflow:hidden;
  }

  /* Mũi tên vẫn phủ sang vùng nội dung nhưng không làm thay đổi grid. */
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__tab::after{
    right:-34px;
    width:35px;
  }

  /*
   Panel dùng flex theo chiều dọc:
   - phần nội dung tự chiếm không gian còn lại;
   - liên kết chương trình nằm đúng đáy;
   - không còn đè lên dòng lợi ích cuối.
  */
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__panel{
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__panel-inner{
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    gap:0;
    padding:28px 34px 20px 54px !important;
    overflow:hidden;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__panel-copy{
    min-width:0;
    min-height:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    gap:10px;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__panel h3{
    margin:0 0 13px;
    font-size:30px;
    line-height:1.12;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__sections{
    display:grid;
    gap:12px;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__section{
    display:grid;
    gap:7px;
  }

  #giai-phap .enterprise-tabs--navy-arrow
  .enterprise-tabs__section + .enterprise-tabs__section{
    padding-top:13px;
    border-top:1px solid #e5ebef;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__summary{
    margin:0;
    max-width:none;
    font-size:13.5px;
    line-height:1.5;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__highlights{
    display:grid;
    gap:6px;
    margin:0;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__highlights li{
    margin:0;
    font-size:12.8px;
    line-height:1.42;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__detail-link{
    box-sizing:border-box;
    width:100%;
    min-height:34px;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    margin-top:12px;
    padding-top:10px;
    line-height:1.2;
  }
}

/* Giữ bố cục tự nhiên trên tablet và điện thoại. */
@media(max-width:980px){
  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__content{
    padding-left:0 !important;
  }

  #giai-phap .enterprise-tabs--navy-arrow .enterprise-tabs__panel-inner{
    min-height:0 !important;
  }
}