/* ==========================================================================
   Gia Phat Computer - Dau trang (header) & chan trang (footer)
   Nap tren toan site. Chi dong vao #top-bar, #masthead, #wide-nav,
   .footer-widgets, .absolute-footer - khong cham noi dung cac trang.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BO TOKEN THIET KE DUNG CHUNG (file nay nap tren moi trang nen cac file
   giaphat-home / -about / -services / -contact deu dung lai duoc).

   Nguyen tac mau: xanh thuong hieu + navy lo cau truc; mau CAM chi danh
   rieng cho hanh dong "goi ngay" - khong dung lam vach trang tri, de nut
   goi luon la thu bat mat nhat tren trang.
   -------------------------------------------------------------------------- */
:root {
  --gp-blue:      #0088cc;
  --gp-blue-lt:   #35b3ee;
  --gp-blue-dk:   #05648f;
  --gp-navy:      #0d1f35;
  --gp-navy-2:    #16283f;
  --gp-body:      #4a5769;
  --gp-line:      #e8edf3;
  --gp-band:      #f6f8fb;
  --gp-call:      #ff7a1a;
  --gp-dark-1:    #101d2e;
  --gp-dark-2:    #16283f;
  --gp-dark-3:    #0a1420;

  --gp-radius:    18px;
  --gp-radius-sm: 12px;
  --gp-shadow:    0 1px 2px rgba(13, 31, 53, .04), 0 8px 24px rgba(13, 31, 53, .05);
  --gp-shadow-h:  0 2px 4px rgba(13, 31, 53, .05), 0 18px 40px rgba(13, 31, 53, .10);

  /* Le trai/phai giu noi dung dung nhip 1080px cua site */
  --gp-gutter:     max(0px, calc(50% - 540px));
  --gp-gutter-txt: max(15px, calc(50% - 540px));

  /* Ten cu, giu lai de khong pha cac rule ben duoi */
  --gpx-blue:     #0088cc;
  --gpx-blue-lt:  #35b3ee;
  --gpx-accent:   #ff7a1a;
  --gpx-dark-1:   #101d2e;
  --gpx-dark-2:   #16283f;
  --gpx-dark-3:   #0a1420;
}

/* ==========================================================================
   0. BO KHUNG "BOXED" - header, footer va cac dai mau chay het chieu ngang
   Flatsome gioi han 1170px bang rule:
   "body.boxed, body.boxed .header-wrapper, body.boxed .is-sticky-section, body.boxed header"
   -> phai phu kin ca the <header>, thieu no la header bi keo lech sang trai.
   Noi dung ben trong van duoc can giua o 1080px nho cac .container / .row.
   ========================================================================== */

body.boxed,
body.boxed header,
body.boxed .header,
body.boxed .header-wrapper,
body.boxed .is-sticky-section,
body.boxed .header-bg-container,
body.boxed .footer-wrapper,
body.boxed .absolute-footer {
  max-width: 100% !important;
}

body.boxed #wrapper,
body.boxed #main {
  background-color: #fff;
}

/* Theme bat "header full width" nen co rule
   .header-full-width .container { max-width:100% !important }
   -> can !important moi keo noi dung header ve dung nhip 1080px cua site. */
#top-bar > .container,
#masthead > .container,
#wide-nav > .container {
  max-width: 1080px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Rieng hang MENU can rong hon nhip 1080px: 9 muc cong lai da chiem 1037px,
   chi con du 43px - chi can font hien thi lech mot chut la muc cuoi
   ("LIEN HE") bi day xuong dong thu hai. Noi khung cho no tho. */
#wide-nav > .container {
  max-width: 1320px !important;
}

/* ==========================================================================
   1. THANH TREN CUNG (top bar)
   ========================================================================== */

#top-bar {
  background: linear-gradient(90deg, #0071ab 0%, #0093dc 55%, #00a3f0 100%) !important;
}

#top-bar .header-contact > li > a,
#top-bar .nav > li > a {
  padding-top: 6px;
  padding-bottom: 6px;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .55px;
  transition: color .2s ease, opacity .2s ease;
}

#top-bar .header-contact > li > a:hover,
#top-bar .nav > li > a:hover {
  color: #fff !important;
}

#top-bar .header-contact > li > a i {
  margin-right: 3px;
  opacity: .9;
}

/* Vach ngan giua cac muc dui hon */
#top-bar .nav-divided > li + li > a {
  border-left-color: rgba(255, 255, 255, .28) !important;
}

/* ==========================================================================
   2. HANG LOGO
   ========================================================================== */

#masthead {
  border-bottom: 1px solid #e9eef5;
}

#masthead .header-bg-color {
  background-color: #fff !important;
}

/* Anh banner canh logo: bo goc cho bot tho */
#masthead .html_top_right_text img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Nut tai khoan / gio hang */
#masthead .header-button .button,
#masthead .nav > li.account-item > a,
#masthead .nav > li.cart-item > a {
  transition: color .2s ease, transform .2s ease;
}

#masthead .nav > li.account-item > a:hover,
#masthead .nav > li.cart-item > a:hover {
  color: var(--gpx-blue) !important;
}

/* ==========================================================================
   3. THANH MENU CHINH
   ========================================================================== */

#wide-nav.header-bottom {
  background: linear-gradient(90deg, #0f1b2b 0%, #17293f 50%, #0f1b2b 100%) !important;
  box-shadow: inset 0 3px 0 0 var(--gpx-blue), 0 4px 16px rgba(11, 20, 32, .16);
}

/* Plugin wp-megamenu tu son mot nen DEN dac cho khoi menu, va khoi do chi
   rong bang container (1080px). Nam de len dai navy chay het chieu ngang nen
   nhin ra mot mieng den ngan o giua - dung cai ma trong anh chup thay.
   Cho no trong suot de ca thanh menu lien mot mach tu mep nay sang mep kia.
   (Khong dung toi ul.wp-megamenu-sub-menu vi menu xo xuong can nen rieng.) */
#wide-nav nav.wp-megamenu-wrap,
#wide-nav .wpmm-nav-wrap,
#wide-nav ul.header-bottom-nav,
#wide-nav > .container > .flex-col > ul.header-bottom-nav > nav > div > ul.wp-megamenu {
  background: transparent !important;
  background-color: transparent !important;
}

/* Chieu cao thanh menu va cac muc khop nhau (truoc do <ul> cao 59px trong
   khi thanh chi 45px nen chu bi tran ra ngoai dai mau). */
#wide-nav.header-bottom,
#wide-nav.header-bottom > .container,
#wide-nav.header-bottom > .container > .flex-col,
#wide-nav nav.wp-megamenu-wrap,
#wide-nav .wpmm-nav-wrap {
  min-height: 52px;
}

/* Cac <li> la inline-block nen chung xuong hang khi tong be rong vuot khung.
   nowrap o the <ul> cha chan viec ngat dong giua cac muc. */
#wide-nav ul.wp-megamenu {
  white-space: nowrap;
}

#wide-nav ul.wp-megamenu > li {
  margin-bottom: 0;
  vertical-align: top;
}

/* Cac media query thu nho menu duoc dat o CUOI file - phai nam SAU rule
   padding goc, vi ca hai deu !important va cung do uu tien nen cai nao
   viet sau moi thang. */

#wide-nav ul.wp-megamenu > li > a .dashicons,
#wide-nav ul.wp-megamenu > li > a .wpmm-selected-icon {
  vertical-align: middle;
  line-height: 1;
}

#wide-nav ul.wp-megamenu > li > a {
  position: relative;
  padding: 14px 16px !important;
  background-color: transparent;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .45px;
  transition: color .2s ease, background-color .2s ease;
}

#wide-nav ul.wp-megamenu > li > a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 7px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gp-blue), var(--gp-blue-lt));
  transition: transform .28s ease;
}

#wide-nav ul.wp-megamenu > li:hover > a,
#wide-nav ul.wp-megamenu > li.current-menu-item > a,
#wide-nav ul.wp-megamenu > li.current-menu-parent > a,
#wide-nav ul.wp-megamenu > li.current-menu-ancestor > a,
#wide-nav ul.wp-megamenu > li.current_page_item > a {
  background-color: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

#wide-nav ul.wp-megamenu > li:hover > a::after,
#wide-nav ul.wp-megamenu > li.current-menu-item > a::after,
#wide-nav ul.wp-megamenu > li.current-menu-parent > a::after,
#wide-nav ul.wp-megamenu > li.current-menu-ancestor > a::after,
#wide-nav ul.wp-megamenu > li.current_page_item > a::after {
  transform: scaleX(1);
}

/* Menu xo xuong mem hon */
#wide-nav ul.wp-megamenu-sub-menu {
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 36px rgba(10, 20, 32, .22);
}

/* ==========================================================================
   4. CHAN TRANG - KHU WIDGET
   ========================================================================== */

.footer-widgets.footer {
  padding-top: 46px;
  padding-bottom: 34px;
  border-top: 3px solid var(--gpx-blue);
  background: linear-gradient(180deg, var(--gpx-dark-1) 0%, var(--gpx-dark-2) 100%) !important;
}

.footer-widgets .widget-title {
  display: block;
  color: #fff !important;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.footer-widgets .is-divider {
  width: 54px !important;
  max-width: 54px !important;
  height: 4px !important;
  margin: 13px 0 20px !important;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gp-blue), var(--gp-blue-lt)) !important;
  opacity: 1 !important;
}

/* --- Cac dong thong tin lien he ---------------------------------------- */
.footer-widgets .can-chinh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px !important;
}

/* Ghi de <style> inline dat theo ID (#khung-icons, #khung-icons-1..5) */
.footer-widgets .can-chinh .fa {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--gpx-blue), var(--gpx-blue-lt)) !important;
  box-shadow: 0 5px 14px rgba(0, 136, 204, .34);
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: transform .22s ease, box-shadow .22s ease;
}

.footer-widgets .can-chinh:hover .fa {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(0, 136, 204, .46);
}

.footer-widgets .can-chinh .fa-facebook {
  background: linear-gradient(135deg, #1877f2, #4293ff) !important;
  box-shadow: 0 5px 14px rgba(24, 119, 242, .38);
}

.footer-widgets .can-chinh:hover .fa-facebook {
  box-shadow: 0 9px 20px rgba(24, 119, 242, .5);
}

.footer-widgets .khung-text {
  display: block;
  min-width: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.footer-widgets .khung-text b {
  font-weight: 600;
}

.footer-widgets a:hover .khung-text {
  color: #fff;
}

/* --- Anh trong widget (ban do, bo dem luot truy cap) ------------------- */
.footer-widgets .textwidget img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
  transition: transform .3s ease, box-shadow .3s ease;
}

.footer-widgets .textwidget a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .42);
}

.footer-widgets a {
  color: #9fd8ff;
}

.footer-widgets a:hover {
  color: #fff;
}

/* ==========================================================================
   5. CHAN TRANG - DAI BAN QUYEN
   ========================================================================== */

.absolute-footer {
  padding: 20px 0 24px !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background-color: var(--gpx-dark-3) !important;
  color: rgba(255, 255, 255, .68) !important;
  font-size: 13.5px;
  line-height: 1.75;
}

.absolute-footer .copyright-footer {
  color: inherit;
}

.absolute-footer a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color .2s ease, border-color .2s ease;
}

.absolute-footer a:hover {
  color: var(--gpx-blue-lt);
  border-color: var(--gpx-blue-lt);
}

/* Huy hieu DMCA la anh hotlink tu site khac, hien dang 404 -> an di.
   Muon bat lai: xoa khoi nay va thay bang anh tu chinh thu vien media. */
.absolute-footer a[title*="DMCA"],
.absolute-footer img[src*="dmca"] {
  display: none !important;
}

.absolute-footer .copyright-footer p:empty {
  display: none;
}

/* ==========================================================================
   6. NUT LEN DAU TRANG
   ========================================================================== */

#top-link.back-to-top {
  border-radius: 50% !important;
  background-color: var(--gpx-blue) !important;
  box-shadow: 0 8px 20px rgba(0, 136, 204, .42);
  color: #fff !important;
  transition: transform .22s ease, background-color .22s ease;
}

#top-link.back-to-top:hover {
  transform: translateY(-3px);
  background-color: #0071ab !important;
}

#top-link.back-to-top i {
  color: #fff !important;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 849px) {
  .footer-widgets.footer {
    padding-top: 34px;
    padding-bottom: 22px;
  }

  .footer-widgets .can-chinh .fa {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .absolute-footer {
    padding: 16px 14px 20px !important;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wide-nav .header-bottom-nav > li > a::after,
  .footer-widgets .can-chinh .fa,
  .footer-widgets .textwidget img,
  #top-link.back-to-top {
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   8. MENU: THU NHO DAN THEO BE RONG MAN HINH
   Dat cuoi file de thang duoc rule padding goc (cung !important).
   Muc tieu: 9 muc luon nam gon tren MOT hang, khong bao gio xuong dong.
   Duoi 850px Flatsome tu chuyen sang menu di dong nen khong can lo tiep.
   ========================================================================== */

@media (max-width: 1360px) {
  #wide-nav ul.wp-megamenu > li > a {
    padding: 14px 12px !important;
  }
}

@media (max-width: 1150px) {
  #wide-nav ul.wp-megamenu > li > a {
    padding: 14px 9px !important;
    font-size: 13px;
    letter-spacing: .2px;
  }
}

@media (max-width: 1000px) {
  #wide-nav ul.wp-megamenu > li > a {
    padding: 14px 6px !important;
    font-size: 12px;
    letter-spacing: 0;
  }
}