/*
Theme Name: Flatsome Child
Description: SUMEDKOR GROUP – Flatsome child (UX Builder + layout match sumedkorgroup.com)
Author: UX Themes / SUMEDKOR GROUP
Template: flatsome
Version: 3.3.0
*/

/* Chi tiết homepage map từ nvmtheme: assets/sumedkor-home.css (load sau file này) */
/* style.css giữ token + fallback; sumedkor-home.css override sát file gốc SUMEDKOR GROUP_files */


/* =========================================================
   Brand tokens (from nvmtheme)
   Primary #134A9B | Accent #1AB7DA | Soft #F9FCFF
   Container gốc: 1290px  |  Banner: full 100%
   ========================================================= */
:root {
  --skg-primary: #134a9b;
  --skg-accent: #1ab7da;
  --skg-text: #333333;
  --skg-muted: #666666;
  --skg-soft: #f9fcff;
  --skg-soft-2: #e1edff;
  --skg-radius: 12px;
  --skg-container: 1290px;
  --skg-shadow: 0 0 40px 0 rgba(19, 74, 155, 0.1);
}

/* ---------------------------------------------------------
   LAYOUT: fix 2 bên trắng
   - Banner / section nền: FULL viewport
   - Nội dung trong section: max 1290px (như .container gốc)
   Flatsome bọc page trong .row-main → nới full trên home
   --------------------------------------------------------- */
body.home .page-wrapper > .row.row-main,
body.page-template-default.home .page-wrapper > .row.row-main,
body.page-id-36 .page-wrapper > .row.row-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home .page-wrapper > .row.row-main > .col,
body.page-id-36 .page-wrapper > .row.row-main > .col {
  padding: 0 !important;
}

body.home .page-wrapper > .row.row-main > .col > .col-inner,
body.page-id-36 .page-wrapper > .row.row-main > .col > .col-inner {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Section full bleed background */
body.home .section,
body.page-id-36 .section {
  width: 100%;
  max-width: 100%;
}

/* Banner: full màn hình, không gutter */
.skg-banner-section,
.skg-banner-section .section-content,
.skg-banner-section .row,
.skg-banner-section .col,
.skg-banner-section .col-inner,
.skg-banner-row,
.skg-banner-col {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.skg-banner-section .banner,
.skg-banner-section .banner-bg,
.skg-banner-section .banner-bg img,
.skg-hero-slider,
.skg-hero-slider .flickity-viewport,
.skg-hero-slider .flickity-slider,
.skg-hero-banner {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}

.skg-hero-banner .bg {
  background-size: cover !important;
  background-position: 50% 40% !important;
}

/* Nội dung section: căn giữa 1290px */
body.home .skg-containered > .section-content > .row,
body.page-id-36 .skg-containered > .section-content > .row {
  max-width: var(--skg-container) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
}

/* Video section nền full, row nội dung 1290 */
.skg-video-section {
  width: 100%;
}

/* Site-wide container width (match gốc 1290) – Flatsome site_width=1320 → ~1290 */
.container,
.row:not(.row-full-width):not(.row-main):not(.skg-banner-row) {
  /* flatsome dynamic CSS handles site_width; keep containered rows consistent */
}

/* ---------------------------------------------------------
   TYPOGRAPHY base (Montserrat 16/25 #333)
   --------------------------------------------------------- */
body {
  color: var(--skg-text);
  overflow-x: hidden;
}

.header,
.header-wrapper {
  box-shadow: 0 4px 4px 0 rgba(19, 74, 155, 0.2);
}

/* JP badge label – widget Text không vẽ background đủ → CSS */
.skg-jp-badge,
.skg-jp-badge p,
.skg-jp-label,
.skg-jp-label p {
  display: inline-block !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: var(--skg-accent) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* H1 / H2 section titles – uppercase 24px #333 weight 600 */
.skg-h1 h1,
.skg-h2 h2,
.skg-h2 h3,
.skg-section-heading h2 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 33px !important;
  color: var(--skg-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.skg-intro-section .skg-h1 h1 {
  font-size: 30px !important;
  line-height: 40px !important;
  text-transform: none;
  font-weight: 700 !important;
}

/* Body text 16/25 justify */
.skg-body p,
.skg-body li {
  font-size: 16px !important;
  line-height: 25px !important;
  color: var(--skg-text) !important;
  margin: 0 0 15px !important;
}

.skg-body p {
  text-align: justify;
}

.skg-body ul {
  margin: 0 0 10px;
  padding-left: 1.15em;
}

.skg-body li {
  margin-bottom: 8px !important;
}

/* ---------------------------------------------------------
   BUTTONS – height 48, radius 8, fill primary
   --------------------------------------------------------- */
.skg-btn.button,
.button.skg-btn,
.skg-btn {
  display: inline-block !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  background: var(--skg-primary) !important;
  border-color: var(--skg-primary) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
}

.skg-btn.button:hover,
.button.skg-btn:hover {
  background: var(--skg-accent) !important;
  border-color: var(--skg-accent) !important;
  color: #fff !important;
}

.skg-link-more.button,
.skg-link-more {
  color: var(--skg-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.skg-link-more:hover {
  color: var(--skg-accent) !important;
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */
.skg-intro-image img,
.skg-intro-image .img-inner {
  border-radius: 15px !important;
  overflow: hidden;
}

/* ---------------------------------------------------------
   FIELD CARDS (lvhd-box)
   --------------------------------------------------------- */
.skg-field-cards > .col {
  background: #fff;
  border-radius: var(--skg-radius);
  box-shadow: var(--skg-shadow);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.skg-field-cards > .col:hover {
  transform: translateY(-3px);
}

.skg-field-card .col-inner {
  padding-bottom: 10px !important;
}

.skg-field-img img {
  border-radius: 12px 12px 0 0 !important;
}

.skg-card-title h3 {
  margin: 0 16px 8px !important;
  font-size: 16px !important;
  line-height: 25px !important;
  font-weight: 600 !important;
  color: var(--skg-text) !important;
}

.skg-card-title a {
  color: var(--skg-text) !important;
  text-decoration: none;
}

.skg-card-title a:hover {
  color: var(--skg-primary) !important;
}

.skg-card-desc p {
  margin: 0 16px 8px !important;
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--skg-text) !important;
  min-height: 63px;
}

/* ---------------------------------------------------------
   NEWS TABS – pill group như home-blog-btn-inner
   --------------------------------------------------------- */
.skg-news-tabs .nav,
.skg-news-tabs ul.nav {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: var(--skg-soft-2) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 auto 24px !important;
}

.skg-news-tabs .nav > li,
.skg-news-tabs .nav > li > a {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.skg-news-tabs .nav > li > a {
  height: 40px !important;
  line-height: 40px !important;
  min-width: 160px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  color: var(--skg-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.skg-news-tabs .nav > li.active > a,
.skg-news-tabs .nav > li > a:hover,
.skg-news-tabs .nav > li > a.active {
  background: var(--skg-primary) !important;
  color: #fff !important;
}

.skg-news-tabs .tab-panels {
  padding-top: 8px;
}

.skg-news-card .skg-card-title h3 {
  min-height: 50px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.skg-meta p {
  margin: 0 0 4px !important;
  font-weight: 500;
}

.skg-news-img img,
.skg-news-card .img-inner {
  border-radius: 12px 12px 0 0;
}

/* News card shadow box */
.skg-news-grid > .col > .col-inner {
  background: #fff;
  border-radius: var(--skg-radius);
  box-shadow: 0 0 10px 0 rgba(19, 74, 155, 0.1);
  overflow: hidden;
  padding: 0 0 12px !important;
  height: 100%;
  transition: border-color 0.25s ease;
  border: 1px solid #fff;
}

.skg-news-grid > .col > .col-inner:hover {
  border-color: var(--skg-accent);
}

.skg-news-grid .skg-meta,
.skg-news-grid .skg-card-title,
.skg-news-grid .skg-link-more {
  padding-left: 14px;
  padding-right: 14px;
}

/* ---------------------------------------------------------
   PRESS
   --------------------------------------------------------- */
.skg-press-featured .skg-card-title h3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 18px !important;
  line-height: 26px !important;
}

.skg-press-item {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(19, 74, 155, 0.08);
}

.skg-press-item .skg-card-title h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  min-height: 0;
}

/* ---------------------------------------------------------
   PARTNERS (doitac-box)
   --------------------------------------------------------- */
.skg-partner-item > .col-inner {
  min-height: 120px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--skg-shadow);
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.25s ease;
  padding: 20px 10px !important;
}

.skg-partner-item:hover > .col-inner {
  border-color: var(--skg-accent);
}

.skg-partner-item img {
  max-height: 70px !important;
  width: auto !important;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.skg-partner-item:hover img {
  transform: scale(1.08);
}

/* ---------------------------------------------------------
   FAQ accordion – card style
   --------------------------------------------------------- */
.skg-faq-accordion .accordion-item,
.skg-faq-accordion .accordion-title {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: var(--skg-shadow);
  border: 1px solid transparent !important;
  margin-bottom: 16px !important;
}

.skg-faq-accordion .accordion-title {
  padding: 16px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--skg-primary) !important;
  line-height: 1.45 !important;
}

.skg-faq-accordion .accordion-inner {
  background: #fff;
  padding: 0 18px 16px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--skg-text);
  border-radius: 0 0 8px 8px;
}

/* Contact form box (dark blue) */
.skg-contact-col,
.skg-contact-col .col-inner {
  box-shadow: var(--skg-shadow) !important;
}

.skg-contact-col h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #fff !important;
}

.skg-contact-col .skg-contact-form label {
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.skg-contact-form .form-row {
  margin: 0 0 12px;
  text-align: left;
}

.skg-contact-form input,
.skg-contact-form select,
.skg-contact-form textarea {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: none;
  color: #333;
  font-size: 14px;
}

.skg-contact-form .button,
.skg-contact-form button {
  background: var(--skg-accent) !important;
  border-color: var(--skg-accent) !important;
  border-radius: 8px !important;
  width: 100%;
  color: #fff !important;
  height: 48px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.skg-contact-form .button:hover,
.skg-contact-form button:hover {
  background: #fff !important;
  color: var(--skg-primary) !important;
}

.skg-form-success {
  background: #e6f9f0;
  color: #0a7a45;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  text-align: left;
}

.skg-form-error {
  background: #ffecec;
  color: #b42318;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  text-align: left;
}

/* ---------------------------------------------------------
   FLOATING DOCK
   --------------------------------------------------------- */
.skg-float-dock {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skg-float-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(19, 74, 155, 0.25);
  transition: transform 0.2s ease;
}

.skg-float-dock a:hover {
  transform: scale(1.08);
}

.skg-float-dock img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Footer brand */
.footer-wrapper {
  background: var(--skg-primary);
}

/* ---------------------------------------------------------
   RESPONSIVE – mirror gốc breakpoints
   --------------------------------------------------------- */
@media (max-width: 1300px) {
  body.home .skg-containered > .section-content > .row,
  body.page-id-36 .skg-containered > .section-content > .row {
    max-width: 1190px !important;
  }
}

@media (max-width: 1199px) {
  body.home .section.skg-containered,
  body.page-id-36 .section.skg-containered {
    /* section padding already set via UX Builder padding__md if needed */
  }

  .skg-body p,
  .skg-body li {
    font-size: 15px !important;
  }
}

@media only screen and (max-width: 48em) {
  .skg-intro-section .skg-h1 h1 {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .skg-h1 h1,
  .skg-h2 h2,
  .skg-h2 h3 {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .skg-card-desc p {
    min-height: 0;
  }

  .skg-news-card .skg-card-title h3 {
    min-height: 0;
  }

  .skg-news-tabs .nav > li > a {
    min-width: 120px;
    font-size: 13px !important;
  }

  .skg-contact-col {
    margin-top: 24px;
  }

  .skg-float-dock {
    right: 10px;
    bottom: 12px;
  }

  .skg-float-dock a {
    width: 44px;
    height: 44px;
  }

  .skg-jp-badge p,
  .skg-jp-badge {
    font-size: 13px !important;
    padding: 5px 10px !important;
  }
}

/* ========== WPCF7 Contact Form 7 Override – Match SUMEDKOR GROUP Image 2 ========== */
.wpcf7 {
  width: 100%;
}

/* Hide top label text if CF7 wraps inputs inside <label> */
.wpcf7 label {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

.wpcf7 label br {
  display: none !important;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  margin-bottom: 18px !important;
}

.wpcf7 p {
  margin-bottom: 18px !important;
}

/* Format all inputs, selects, textareas in Contact Form 7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea,
.wpcf7 .wpcf7-select {
  width: 100% !important;
  height: 48px !important;
  line-height: 46px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #333333 !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 0 12px 0 !important;
  box-sizing: border-box !important;
}

.wpcf7 textarea,
.wpcf7 .wpcf7-textarea {
  height: 130px !important;
  line-height: 24px !important;
  padding: 12px 16px !important;
  resize: vertical !important;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.wpcf7 .wpcf7-text::placeholder,
.wpcf7 .wpcf7-textarea::placeholder {
  color: #757575 !important;
  opacity: 1 !important;
  font-size: 14.5px !important;
}

/* Submit button: full-width turquoise cyan (#1ab7da) */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  width: 100% !important;
  border-radius: 8px !important;
  background: #1ab7da !important;
  color: #ffffff !important;
  border: none !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 !important;
  box-shadow: 0 4px 14px rgba(26, 183, 218, 0.35) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  cursor: pointer !important;
  display: block !important;
  margin-top: 10px !important;
  transition: all 0.25s ease !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: #149bb8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(26, 183, 218, 0.45) !important;
}