/*------------------------------------------------------------------
[Fonts]
*/
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-BlackItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Black.woff2") format("woff2"), url("../fonts/SFProDisplay-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Heavy.woff2") format("woff2"), url("../fonts/SFProDisplay-Heavy.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-HeavyItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-HeavyItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Bold.woff2") format("woff2"), url("../fonts/SFProDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-BoldItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-LightItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Light.woff2") format("woff2"), url("../fonts/SFProDisplay-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Regular.woff2") format("woff2"), url("../fonts/SFProDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-RegularItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Medium.woff2") format("woff2"), url("../fonts/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-MediumItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-SemiboldItalic.woff2") format("woff2"), url("../fonts/SFProDisplay-SemiboldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url("../fonts/SFProDisplay-Semibold.woff2") format("woff2"), url("../fonts/SFProDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/*------------------------------------------------------------------
[Common]
*/
body {
  font-size: 16px;
  font-family: "SFProDisplay", sans-serif;
  line-height: 1.35;
  font-weight: 400;
  color: #000;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  line-height: 1.35;
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
  height: unset;
  width: auto;
}

a {
  color: #000;
  text-decoration: none;
}
a:hover, a:focus {
  color: #024CEF;
}

b, strong {
  font-weight: 700;
}

textarea {
  resize: none;
}

/*------------------------------------------------------------------
[Buttons]
*/
button {
  cursor: pointer;
}
button:focus {
  outline: none;
}

.btn-clear {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.btn-primary-color {
  background-color: #3149E6;
  border-color: #3149E6;
  color: #fff;
}
.btn-primary-color:hover {
  background-color: #024CEF;
  border-color: #024CEF;
  color: #fff;
}

.btn-green-color {
  background-color: #00ED87;
  border-color: #00ED87;
  color: #000;
}
.btn-green-color:hover {
  background-color: #08ff94;
  border-color: #08ff94;
  color: #000;
}

.btn-primary-color-1 {
  background-color: #024CEF;
  border-color: #024CEF;
  color: #fff;
}
.btn-primary-color-1:hover {
  background-color: #3149E6;
  border-color: #3149E6;
  color: #fff;
}

/*------------------------------------------------------------------
[Typographic]
*/
.title {
  font-weight: 900;
  margin-bottom: 0;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}
.title2 {
  font-weight: 900;
  margin-bottom: 0;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}
.title::after {
  content: '';
  width: 10px;
  height: 10px;
  transform: skew(-20deg);
  margin-left: 10px;
  display: inline-block;
  background-color: #00E88F;
}
@media only screen and (min-width: 768px) {
  .title::after {
    width: 14px;
    height: 14px;
  }
}
.title.text-primary-color-1::after, .title.text-white::after {
  background-color: #00E88F;
}
.title.text-black::after {
  background-color: #024CEF;
}
.title.text-green-color-1::after {
  background-color: #25ED8D;
}
.title.no-triangle::after {
  display: none;
}
.title.triangle-primary-dark::after {
  background-color: #004BF3;
}

.title-type-1 {
  font-size: 24px;
}
@media only screen and (min-width: 768px) {
  .title-type-1 {
    font-size: 36px;
  }
}

.title-type-2, .textblock-title {
  font-size: 21px;
}

.title-type-3 {
  font-size: 17px;
}

.title-type-4 {
  font-size: 14px;
}

.title-type-5 {
  font-size: 20px;
}


@media only screen and (min-width: 768px) {
  .title-type-2, .textblock-title {
    font-size: 32px;
  }
  .title-type-3, .textblock-title {
    font-size: 32px;
  }
  .title-type-4, .textblock-title {
    font-size: 30px;
  }
  .title-type-5, .textblock-title {
    font-size: 20px;
  }
}

.text-primary-color-1 {
  color: #024CEF;
}

.text-primary-color-2 {
  color: #00E88F !important;
}

.text-green-color-1 {
  color: #25ED8D;
}

.fw-900 {
  font-weight: 900;
}

.text-justify {
  text-align: justify !important;
}

/*------------------------------------------------------------------
[Icons]
*/
[class*='ico-'] {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ico-facebook {
  background-image: url(../images/icons/ico-facebook.png);
  width: 16px;
  height: 30px;
}

.ico-tiktok {
  background-image: url(../images/icons/ico-tiktok.png);
  width: 26px;
  height: 30px;
}

.ico-instagram {
  background-image: url(../images/icons/ico-instagram.png);
  width: 30px;
  height: 30px;
}

.seeding-ico-tiktok {
  background-image: url(../images/icons/seeding-ico-tiktok.png);
  width: 30px;
  height: 30px;
  background-size: 100%;
}
@media only screen and (min-width: 992px) {
  .seeding-ico-tiktok {
    width: 40px;
    height: 40px;
  }
}

.seeding-ico-youtube {
  background-image: url(../images/icons/seeding-ico-youtube.png);
  width: 30px;
  height: 30px;
  background-size: 100%;
}
@media only screen and (min-width: 992px) {
  .seeding-ico-youtube {
    width: 40px;
    height: 40px;
  }
}

.seeding-ico-instagram {
  background-image: url(../images/icons/seeding-ico-instagram.png);
  width: 30px;
  height: 30px;
  background-size: 100%;
}
@media only screen and (min-width: 992px) {
  .seeding-ico-instagram {
    width: 40px;
    height: 40px;
  }
}

.seeding-ico-facebook {
  background-image: url(../images/icons/seeding-ico-facebook-circle.png);
  width: 30px;
  height: 30px;
  background-size: 100%;
}
@media only screen and (min-width: 992px) {
  .seeding-ico-facebook {
    width: 40px;
    height: 40px;
  }
}

/*------------------------------------------------------------------
[Header]
*/
.header-site {
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
  .navbar-expand-lg {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    width: calc(50% - 63px);
  }
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav:first-child {
    justify-content: flex-end;
  }
}
.navbar-expand-lg .navbar-nav .nav-link {
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-transform: uppercase;
  padding: 15px;
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 12px 16px;
    font-size: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 20px 16px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 1400px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 10px 25px 16px;
  }
}
.navbar-expand-lg .navbar-nav .nav-link:hover, .navbar-expand-lg .navbar-nav .nav-link.active {
  color: #024CEF;
}
.navbar-expand-lg .navbar-nav > li:not(:last-child) {
  border-bottom: 1px solid #BABABA;
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav > li:not(:last-child) {
    border-bottom: 0;
  }
}
.navbar-expand-lg .dropdown-menu {
  border: none;
  padding: 0;
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .dropdown-menu {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.16);
  }
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .dropdown-menu li:first-child .dropdown-item {
    border-radius: 6px 6px 0 0;
  }
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .dropdown-menu li:last-child .dropdown-item {
    border-radius: 0 0 6px 6px;
  }
}
.navbar-expand-lg .dropdown-item {
  color: #000;
  font-weight: 500;
  font-size: 16px;
  padding: 15px 30px;
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .dropdown-item {
    padding: 10px 15px;
  }
}
.navbar-expand-lg .dropdown-item:hover, .navbar-expand-lg .dropdown-item:focus {
  background-color: transparent;
  color: #024CEF;
}
@media only screen and (min-width: 992px) {
  .navbar-expand-lg .dropdown-item:hover, .navbar-expand-lg .dropdown-item:focus {
    background-color: #024CEF;
    color: #fff;
  }
}
@media (max-width: 991px) {
  .navbar-expand-lg .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 15;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.16);
    border-top: 1px solid #000;
    padding: 10px 25px;
  }
  .navbar-expand-lg .navbar-collapse .navbar-nav:first-child {
    border-bottom: 1px solid #BABABA;
  }
  .navbar-expand-lg .navbar-collapse .dropdown-menu {
    border-top: 1px solid #BABABA;
    border-radius: 0;
  }
  .navbar-expand-lg .navbar-collapse .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #BABABA;
  }
}

.navbar-brand {
  margin: 0;
}
@media only screen and (min-width: 992px) {
  .navbar-brand {
    width: 125px;
  }
}
.navbar-brand img {
  height: 40px;
}

.navbar-toggler {
  border: none;
  width: 30px;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  cursor: pointer;
  display: inline-block;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler span {
  background-color: #000;
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.navbar-toggler span:nth-child(1) {
  top: 0px;
  width: 13px;
}
.navbar-toggler span:nth-child(2) {
  top: 9px;
}
.navbar-toggler span:nth-child(3) {
  top: 18px;
  width: 100%;
}
.navbar-toggler:hover span:nth-child(1) {
  width: 30px;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
  top: 9px;
  right: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 28px;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  right: 20px;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
  top: 9px;
  right: 0;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  width: 28px;
}

/*------------------------------------------------------------------
[Content]
*/
.section-title {
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .section-title {
    margin-bottom: 28px;
  }
}
.section-title.line-on-top::before {
  content: "";
  margin-bottom: 10px;
  width: 38px;
  height: 10px;
  background-color: #00E88F;
  display: block;
}

/** section-banner */
.banner {
  padding-top: 20px;
  padding-bottom: 22px;
}

.banner-icon {
  margin-top: 16px;
}
.banner-icon img {
  width: 58px;
}
/*==================================================================
SECTION: ABOUT US
Giữ nguyên cấu trúc và bố cục section Thế mạnh
Không khai báo font-family
==================================================================*/

.section-strength,
.section-strength *,
.section-strength *::before,
.section-strength *::after {
    box-sizing: border-box;
}

.watf-strength {
    --watf-strength-navy: #092c91;
    --watf-strength-blue: #075cef;
    --watf-strength-green: #16c934;
    --watf-strength-text: #111111;
    --watf-strength-border: rgba(196, 214, 238, 0.9);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: clamp(780px, 56.25vw, 1020px);

    padding: 58px 0 86px;

    background-color: #eef7ff;
    background-image: var(--watf-strength-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Lớp phủ nhẹ giữ nội dung rõ */

.watf-strength::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.04) 55%,
            transparent 100%
        );
}

/*==================================================================
CONTAINER
==================================================================*/

.watf-strength__container {
    position: relative;
    z-index: 2;

    width: min(100%, 1760px);

    margin-right: auto;
    margin-left: auto;

    padding-right: 68px;
    padding-left: 68px;
}

/*==================================================================
TIÊU ĐỀ
==================================================================*/

.watf-strength__header {
    width: 100%;
    margin-bottom: 52px;
}

.watf-strength__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0 22px;

    margin: 0;

    color: var(--watf-strength-navy);

    font-size: clamp(66px, 7vw, 74px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.055em;

    text-transform: uppercase;
}

.watf-strength__title-mark {
    display: inline-block;

    width: clamp(34px, 3.3vw, 40px);
    height: clamp(26px, 2.5vw, 31px);

    margin-top: 10px;

    background:
        linear-gradient(
            135deg,
            #23db48 0%,
            #14ae24 100%
        );

    transform: skew(-18deg);
}

/*==================================================================
GRID 3 CARD
==================================================================*/

.watf-strength__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;

    gap: 34px;
}

/*==================================================================
CARD
==================================================================*/

.watf-strength-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 590px;

    overflow: hidden;

    border: 1px solid var(--watf-strength-border);
    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.97) 100%
        );

    box-shadow:
        0 18px 38px rgba(20, 77, 158, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.watf-strength-card:hover {
    transform: translateY(-5px);

    border-color: rgba(7, 92, 239, 0.28);

    box-shadow:
        0 24px 46px rgba(20, 77, 158, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Thanh màu dưới card */

.watf-strength-card::after {
    content: "";
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 10px;

    background:
        linear-gradient(
            90deg,
            #0635c9 0%,
            #0635c9 60%,
            #16c934 60%,
            #16c934 100%
        );
}

/* Vết cắt giữa hai màu */

.watf-strength-card::before {
    content: "";
    position: absolute;
    z-index: 3;

    bottom: 0;
    left: 60%;

    width: 18px;
    height: 10px;

    background: #ffffff;

    transform: skew(-35deg) translateX(-50%);
}

/*==================================================================
ICON TRONG CARD
==================================================================*/

.watf-strength-card__visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 238px;

    padding: 28px 20px 4px;
}

.watf-strength-card__orbit {
    position: absolute;

    top: 28px;
    left: 50%;

    width: 190px;
    height: 190px;

    border: 2px solid rgba(24, 126, 255, 0.55);
    border-radius: 50%;

    transform: translateX(-50%);
}

.watf-strength-card__orbit::before {
    content: "";
    position: absolute;

    inset: 11px;

    border: 1px solid rgba(24, 126, 255, 0.17);
    border-radius: 50%;
}

.watf-strength-card__orbit::after {
    content: "";
    position: absolute;

    top: 50%;
    left: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--watf-strength-blue);

    transform: translateY(-50%);
}

.watf-strength-card__image {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 170px;
    height: 170px;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #ffffff 0%,
            #f5faff 65%,
            #e9f4ff 100%
        );

    box-shadow:
        0 12px 28px rgba(7, 92, 239, 0.1),
        inset 0 0 0 1px rgba(7, 92, 239, 0.06);
}

.watf-strength-card__image svg {
    display: block;

    width: 118px;
    height: 118px;

    overflow: visible;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.watf-strength-card:hover .watf-strength-card__image svg {
    transform: scale(1.055);

    filter:
        drop-shadow(
            0 8px 12px rgba(7, 92, 239, 0.12)
        );
}

.watf-strength-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.watf-strength-card__dot {
    position: absolute;
    z-index: 3;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--watf-strength-blue);
}

.watf-strength-card__dot--left {
    top: 170px;
    left: calc(50% - 98px);
}

.watf-strength-card__dot--right {
    top: 61px;
    left: calc(50% + 80px);
}

/*==================================================================
NỘI DUNG CARD
==================================================================*/

.watf-strength-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    padding: 0 36px 46px;
}

.watf-strength-card__content h3 {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 68px;

    margin: 0;

    color: var(--watf-strength-navy);

    font-size: clamp(21px, 1.55vw, 28px);
    font-weight: 800;
    line-height: 1.28;

    text-align: center;
}

.watf-strength-card__line {
    position: relative;

    display: block;

    width: 60px;
    height: 4px;

    margin: 18px auto 24px;

    border-radius: 20px;

    background: var(--watf-strength-blue);
}

.watf-strength-card__line i {
    position: absolute;

    top: 50%;
    right: -7px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--watf-strength-green);

    transform: translateY(-50%);
}

.watf-strength-card__content p {
    margin: 0;

    color: var(--watf-strength-text);

    font-size: clamp(16px, 1.12vw, 21px);
    font-weight: 500;
    line-height: 1.62;

    text-align: justify;
}

/*==================================================================
DESKTOP VỪA
==================================================================*/

@media only screen and (max-width: 1599.98px) {
    .watf-strength {
        padding-top: 52px;
    }

    .watf-strength__container {
        padding-right: 46px;
        padding-left: 46px;
    }

    .watf-strength__header {
        margin-bottom: 42px;
    }

    .watf-strength__grid {
        gap: 26px;
    }

    .watf-strength-card {
        min-height: 550px;

        border-radius: 24px;
    }

    .watf-strength-card__visual {
        min-height: 215px;
    }

    .watf-strength-card__orbit {
        width: 170px;
        height: 170px;
    }

    .watf-strength-card__image {
        width: 150px;
        height: 150px;
    }

    .watf-strength-card__image svg {
        width: 104px;
        height: 104px;
    }

    .watf-strength-card__dot--left {
        top: 155px;
        left: calc(50% - 88px);
    }

    .watf-strength-card__dot--right {
        top: 59px;
        left: calc(50% + 70px);
    }

    .watf-strength-card__content {
        padding-right: 30px;
        padding-bottom: 40px;
        padding-left: 30px;
    }

    .watf-strength-card__content h3 {
        font-size: clamp(19px, 1.4vw, 25px);
    }

    .watf-strength-card__content p {
        font-size: 16px;
    }
}

/*==================================================================
LAPTOP
==================================================================*/

@media only screen and (max-width: 1279.98px) {
    .watf-strength {
        min-height: 760px;

        padding:
            46px
            0
            62px;
    }

    .watf-strength__container {
        padding-right: 28px;
        padding-left: 28px;
    }

    .watf-strength__title {
        font-size: clamp(54px, 7vw, 84px);
    }

    .watf-strength__grid {
        gap: 20px;
    }

    .watf-strength-card {
        min-height: 520px;
    }

    .watf-strength-card__visual {
        min-height: 190px;
    }

    .watf-strength-card__orbit {
        top: 24px;

        width: 148px;
        height: 148px;
    }

    .watf-strength-card__image {
        width: 132px;
        height: 132px;
    }

    .watf-strength-card__image svg {
        width: 92px;
        height: 92px;
    }

    .watf-strength-card__dot--left {
        top: 139px;
        left: calc(50% - 77px);
    }

    .watf-strength-card__dot--right {
        top: 53px;
        left: calc(50% + 61px);
    }

    .watf-strength-card__content {
        padding-right: 22px;
        padding-bottom: 34px;
        padding-left: 22px;
    }

    .watf-strength-card__content h3 {
        min-height: 64px;

        font-size: 18px;
    }

    .watf-strength-card__content p {
        font-size: 14px;
        line-height: 1.58;
    }
}

/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {
    .watf-strength {
        min-height: auto;

        background-position: center top;
        background-size: auto 100%;
    }

    .watf-strength__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items: stretch;

        gap: 24px;
    }

    .watf-strength-card:nth-child(3) {
        grid-column: 1 / -1;

        width: min(100%, 560px);

        justify-self: center;
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-strength {
        padding:
            38px
            0
            48px;

        background-position: center top;
        background-size: auto 100%;
    }

    .watf-strength__container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .watf-strength__header {
        margin-bottom: 28px;
    }

    .watf-strength__title {
        gap: 0 12px;

        font-size: clamp(44px, 15vw, 62px);
        line-height: 1;
    }

    .watf-strength__title-mark {
        width: 25px;
        height: 20px;

        margin-top: 4px;
    }

    .watf-strength__grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 20px;
    }

    .watf-strength-card:nth-child(3) {
        grid-column: auto;

        width: 100%;
    }

    .watf-strength-card {
        min-height: 0;

        border-radius: 22px;
    }

    .watf-strength-card__visual {
        min-height: 185px;

        padding-top: 24px;
    }

    .watf-strength-card__orbit {
        top: 21px;

        width: 145px;
        height: 145px;
    }

    .watf-strength-card__image {
        width: 128px;
        height: 128px;
    }

    .watf-strength-card__image svg {
        width: 88px;
        height: 88px;
    }

    .watf-strength-card__dot--left {
        top: 135px;
        left: calc(50% - 75px);
    }

    .watf-strength-card__dot--right {
        top: 50px;
        left: calc(50% + 59px);
    }

    .watf-strength-card__content {
        padding:
            0
            20px
            32px;
    }

    .watf-strength-card__content h3 {
        min-height: 0;

        font-size: 20px;
        line-height: 1.35;
    }

    .watf-strength-card__content h3 br {
        display: none;
    }

    .watf-strength-card__line {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .watf-strength-card__content p {
        font-size: 15px;
        line-height: 1.58;
    }

    .watf-strength-card::after {
        height: 8px;
    }

    .watf-strength-card::before {
        height: 8px;
    }
}


















/*------------------------------------------------------------------
[WATF EXPERT TEAM]
------------------------------------------------------------------*/

.watf-expert-team,
.watf-expert-team *,
.watf-expert-team *::before,
.watf-expert-team *::after {
    box-sizing: border-box;
}

.watf-expert-team {
    --watf-team-blue: #0757ed;
    --watf-team-dark: #061348;
    --watf-team-green: #22d99a;
    --watf-team-text: #081442;

    position: relative;
    width: 100%;
    min-height: 930px;
    margin: 0;
    overflow: hidden;
    color: var(--watf-team-text);

    background:
        radial-gradient(
            circle at 79% 20%,
            rgba(117, 178, 247, 0.21) 0%,
            rgba(117, 178, 247, 0.07) 27%,
            transparent 54%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 43%,
            #e8f3ff 100%
        );

    isolation: isolate;
}

.watf-expert-team img {
    display: block;
    max-width: 100%;
}

/*------------------------------------------------------------------
[CONTAINER]
------------------------------------------------------------------*/

.watf-expert-team__container {
    position: relative;
    z-index: 5;
    width: min(100%, 1920px);
    min-height: 930px;
    margin: 0 auto;

    padding:
        clamp(62px, 5vw, 92px)
        clamp(52px, 5.1vw, 98px)
        clamp(45px, 4vw, 70px);
}

/*------------------------------------------------------------------
[DECORATION]
------------------------------------------------------------------*/

.watf-expert-team__chart {
    position: absolute;
    top: -36px;
    right: -36px;
    z-index: 0;

    width: min(55vw, 970px);
    height: auto;

    pointer-events: none;
}

.watf-expert-team__dots {
    position: absolute;
    z-index: 1;

    width: 140px;
    height: 110px;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.34) 2px,
            transparent 2.6px
        );

    background-size: 19px 19px;
}

.watf-expert-team__dots--left {
    top: 67px;
    left: -21px;
}

.watf-expert-team__dots--right {
    right: 5%;
    bottom: 42px;
}

.watf-expert-team__ring {
    position: absolute;
    left: -107px;
    bottom: -164px;
    z-index: 0;

    width: 350px;
    height: 350px;

    border: 66px solid rgba(34, 217, 154, 0.11);
    border-radius: 50%;

    pointer-events: none;
}

.watf-expert-team::before {
    content: "";

    position: absolute;
    right: -200px;
    bottom: -168px;
    z-index: 0;

    width: 1150px;
    height: 515px;

    border: 1px solid rgba(7, 87, 237, 0.075);
    border-radius: 50%;

    transform: rotate(-13deg);

    box-shadow:
        0 -31px 0 rgba(7, 87, 237, 0.025),
        0 -62px 0 rgba(7, 87, 237, 0.021),
        0 -93px 0 rgba(7, 87, 237, 0.016);

    pointer-events: none;
}

/*------------------------------------------------------------------
[HEADER]
------------------------------------------------------------------*/

.watf-expert-team__header {
    position: relative;
    z-index: 8;

    margin:
        0
        0
        clamp(55px, 4.3vw, 78px);
}

.watf-expert-team__header h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: clamp(17px, 1.4vw, 25px);

    margin: 0;

    color: var(--watf-team-dark);

    font-size: clamp(52px, 4.15vw, 74px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.watf-expert-team__header h2 > span {
    display: inline-block;
    flex: 0 0 auto;

    width: clamp(29px, 2.15vw, 40px);
    height: clamp(23px, 1.72vw, 31px);

    background: var(--watf-team-green);

    transform: skew(-18deg);
}

/*------------------------------------------------------------------
[MAIN LAYOUT]
------------------------------------------------------------------*/

.watf-expert-team__layout {
    position: relative;
    z-index: 6;

    display: grid;
    grid-template-columns:
        minmax(0, 57.5%)
        minmax(540px, 42.5%);

    gap: clamp(35px, 3.6vw, 68px);
    align-items: start;
}

/*------------------------------------------------------------------
[PEOPLE IMAGE]
------------------------------------------------------------------*/

.watf-expert-team__people {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 0;
    min-height: 655px;

    margin-top: 12px;
}

.watf-expert-team__people::before {
    content: "";

    position: absolute;
    right: 4%;
    bottom: 1%;
    left: 4%;
    z-index: 0;

    height: 150px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(7, 87, 237, 0.15) 0%,
            rgba(7, 87, 237, 0.05) 43%,
            transparent 72%
        );

    filter: blur(18px);
}

.watf-expert-team__people-shadow {
    position: absolute;
    right: 2%;
    bottom: -2px;
    left: 2%;
    z-index: 1;

    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(20, 91, 181, 0.11) 0%,
            rgba(20, 91, 181, 0.035) 48%,
            transparent 74%
        );

    pointer-events: none;
}

.watf-expert-team__people img {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;

    width: 112%;
    max-width: none;
    height: 100%;

    margin: 0;

    object-fit: contain;
    object-position: center bottom;

    transform: translateX(-50%);

    filter:
        drop-shadow(
            0 17px 21px rgba(31, 75, 129, 0.07)
        );
}

/*------------------------------------------------------------------
[DEPARTMENT GRID]
------------------------------------------------------------------*/

.watf-expert-team__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap:
        clamp(14px, 1.12vw, 20px)
        clamp(14px, 1vw, 18px);

    min-width: 0;

    padding-top: 1px;
}

/*------------------------------------------------------------------
[DEPARTMENT CARD]
------------------------------------------------------------------*/

.watf-expert-team__card {
    position: relative;

    display: grid;
    grid-template-columns:
        clamp(52px, 3.45vw, 63px)
        minmax(0, 1fr)
        15px;

    gap: clamp(15px, 1.1vw, 20px);
    align-items: center;

    min-width: 0;
    min-height: clamp(91px, 6.15vw, 105px);

    margin: 0;

    padding:
        clamp(15px, 1.25vw, 21px)
        clamp(18px, 1.45vw, 26px);

    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.93) 100%
        );

    box-shadow:
        0 10px 27px rgba(36, 77, 130, 0.105),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.watf-expert-team__card:hover {
    transform: translateY(-3px);

    border-color: rgba(7, 87, 237, 0.1);

    box-shadow:
        0 15px 33px rgba(36, 77, 130, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.watf-expert-team__card h3 {
    min-width: 0;
    margin: 0;

    color: var(--watf-team-dark);

    font-size: clamp(16px, 1.18vw, 20px);
    font-weight: 600;
    line-height: 1.25;

    white-space: nowrap;
}

/*------------------------------------------------------------------
[ICONS]
------------------------------------------------------------------*/

.watf-expert-team__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(52px, 3.45vw, 63px);
    height: clamp(52px, 3.45vw, 63px);

    color: var(--watf-team-blue);
}

.watf-expert-team__icon svg {
    display: block;
    width: 100%;
    height: 100%;

    overflow: visible;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-expert-team__icon svg circle {
    fill: none;
}

.watf-expert-team__icon-accent {
    stroke: var(--watf-team-green) !important;
}

.watf-expert-team__mark {
    display: block;
    justify-self: end;

    width: 12px;
    height: 9px;

    background: var(--watf-team-green);

    transform: skew(-18deg);
}

/*------------------------------------------------------------------
[DESKTOP 1600]
------------------------------------------------------------------*/

@media only screen and (max-width: 1599.98px) {
    .watf-expert-team {
        min-height: 850px;
    }

    .watf-expert-team__container {
        min-height: 850px;

        padding:
            58px
            65px
            46px;
    }

    .watf-expert-team__header {
        margin-bottom: 49px;
    }

    .watf-expert-team__header h2 {
        font-size: clamp(49px, 4vw, 62px);
    }

    .watf-expert-team__layout {
        grid-template-columns:
            minmax(0, 57%)
            minmax(500px, 43%);

        gap: 43px;
    }

    .watf-expert-team__people {
        min-height: 580px;
    }

    .watf-expert-team__people img {
        width: 114%;
    }

    .watf-expert-team__grid {
        gap: 14px;
    }

    .watf-expert-team__card {
        grid-template-columns:
            51px
            minmax(0, 1fr)
            13px;

        min-height: 87px;

        padding:
            14px
            18px;
    }

    .watf-expert-team__icon {
        width: 51px;
        height: 51px;
    }

    .watf-expert-team__card h3 {
        font-size: 16px;
    }
}

/*------------------------------------------------------------------
[DESKTOP 1366]
------------------------------------------------------------------*/

@media only screen and (max-width: 1365.98px) {
    .watf-expert-team {
        min-height: 790px;
    }

    .watf-expert-team__container {
        min-height: 790px;

        padding:
            50px
            42px
            40px;
    }

    .watf-expert-team__header {
        margin-bottom: 42px;
    }

    .watf-expert-team__header h2 {
        font-size: 52px;
    }

    .watf-expert-team__layout {
        grid-template-columns:
            minmax(0, 56%)
            minmax(490px, 44%);

        gap: 34px;
    }

    .watf-expert-team__people {
        min-height: 535px;
    }

    .watf-expert-team__people img {
        width: 118%;
    }

    .watf-expert-team__grid {
        gap: 12px;
    }

    .watf-expert-team__card {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            12px;

        gap: 13px;

        min-height: 78px;

        padding:
            12px
            15px;
    }

    .watf-expert-team__icon {
        width: 46px;
        height: 46px;
    }

    .watf-expert-team__card h3 {
        font-size: 15px;
    }
}

/*------------------------------------------------------------------
[TABLET NGANG]
------------------------------------------------------------------*/

@media only screen and (max-width: 1199.98px) {
    .watf-expert-team {
        min-height: 0;
    }

    .watf-expert-team__container {
        min-height: 0;

        padding:
            54px
            30px
            62px;
    }

    .watf-expert-team__header {
        margin-bottom: 37px;
    }

    .watf-expert-team__header h2 {
        font-size: 48px;
    }

    .watf-expert-team__layout {
        grid-template-columns: 1fr;
        gap: 37px;
    }

    .watf-expert-team__people {
        min-height: 570px;
    }

    .watf-expert-team__people img {
        width: 105%;
        max-width: 960px;
    }

    .watf-expert-team__grid {
        width: 100%;
        max-width: 960px;

        margin: 0 auto;

        gap: 15px;
    }

    .watf-expert-team__card {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            15px;

        min-height: 92px;

        padding:
            16px
            22px;
    }

    .watf-expert-team__icon {
        width: 55px;
        height: 55px;
    }

    .watf-expert-team__card h3 {
        font-size: 18px;
    }
}

/*------------------------------------------------------------------
[TABLET DỌC]
------------------------------------------------------------------*/

@media only screen and (max-width: 991.98px) {
    .watf-expert-team__container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .watf-expert-team__header h2 {
        font-size: 44px;
    }

    .watf-expert-team__people {
        min-height: 485px;
    }

    .watf-expert-team__people img {
        width: 112%;
    }

    .watf-expert-team__card {
        min-height: 86px;
    }
}

/*------------------------------------------------------------------
[MOBILE]
------------------------------------------------------------------*/

@media only screen and (max-width: 767.98px) {
    .watf-expert-team__container {
        padding:
            43px
            14px
            49px;
    }

    .watf-expert-team__header {
        margin-bottom: 29px;
    }

    .watf-expert-team__header h2 {
        gap: 11px;

        font-size: clamp(31px, 9.5vw, 41px);
        line-height: 1.1;
    }

    .watf-expert-team__header h2 > span {
        width: 24px;
        height: 19px;
    }

    .watf-expert-team__layout {
        gap: 26px;
    }

    .watf-expert-team__people {
        min-height: 355px;

        margin:
            0
            -12px;
    }

    .watf-expert-team__people img {
        width: 124%;
        max-width: none;
    }

    .watf-expert-team__grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }

    .watf-expert-team__card {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            14px;

        gap: 14px;

        min-height: 78px;

        padding:
            13px
            17px;

        border-radius: 10px;
    }

    .watf-expert-team__icon {
        width: 50px;
        height: 50px;
    }

    .watf-expert-team__card h3 {
        font-size: 17px;
    }

    .watf-expert-team__chart {
        top: -10px;
        right: -275px;

        width: 790px;

        opacity: 0.52;
    }

    .watf-expert-team__dots--left {
        top: 25px;
        left: -58px;
    }

    .watf-expert-team__dots--right {
        right: -53px;
        bottom: 24px;
    }

    .watf-expert-team__ring {
        left: -165px;
        bottom: -190px;

        width: 310px;
        height: 310px;

        border-width: 52px;
    }
}

/*------------------------------------------------------------------
[MOBILE NHỎ]
------------------------------------------------------------------*/

@media only screen and (max-width: 479.98px) {
    .watf-expert-team__header h2 {
        font-size: clamp(28px, 9vw, 36px);
    }

    .watf-expert-team__people {
        min-height: 300px;
    }

    .watf-expert-team__people img {
        width: 132%;
    }

    .watf-expert-team__card {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            12px;

        min-height: 73px;

        padding:
            11px
            14px;
    }

    .watf-expert-team__icon {
        width: 45px;
        height: 45px;
    }

    .watf-expert-team__card h3 {
        font-size: 16px;
    }
}





















/*==================================================================
SECTION: TẦM NHÌN & SỨ MỆNH
Không khai báo font-family
==================================================================*/

.watf-vision-mission,
.watf-vision-mission *,
.watf-vision-mission *::before,
.watf-vision-mission *::after {
    box-sizing: border-box;
}

.watf-vision-mission {
    --watf-vm-navy: #08266b;
    --watf-vm-blue: #075cef;
    --watf-vm-blue-deep: #0739ad;
    --watf-vm-green: #0bd79a;
    --watf-vm-text: #111111;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: clamp(760px, 50vw, 930px);
    padding: 58px 0 64px;

    color: var(--watf-vm-text);

    background-color: #eef5ff;
    background-image: var(--watf-vm-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Lớp phủ nhẹ vùng chữ bên trái */

.watf-vision-mission::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.23) 0%,
            rgba(255, 255, 255, 0.1) 42%,
            transparent 66%
        );
}

/*==================================================================
CONTAINER
==================================================================*/

.watf-vision-mission__container {
    position: relative;
    z-index: 2;

    width: min(100%, 1760px);

    margin-right: auto;
    margin-left: auto;

    padding-right: 56px;
    padding-left: 56px;
}

/*==================================================================
TIÊU ĐỀ SECTION
==================================================================*/

.watf-vision-mission__header {
    width: 100%;
    max-width: 1000px;

    margin-bottom: 42px;
}

.watf-vision-mission__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0 14px;

    margin: 0;

    color: var(--watf-vm-navy);

    
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.watf-vision-mission__title strong {
    color: var(--watf-vm-green);
    font: inherit;
}

.watf-vision-mission__title i {
    display: inline-block;

    width: 29px;
    height: 22px;

    margin-left: 2px;

    background:
        linear-gradient(
            135deg,
            var(--watf-vm-blue) 0%,
            var(--watf-vm-green) 100%
        );

    transform: skew(-17deg);
}

.watf-vision-mission__title-line {
    display: block;

    width: 122px;
    height: 4px;

    margin-top: 22px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--watf-vm-blue) 0%,
            var(--watf-vm-blue) 56%,
            var(--watf-vm-green) 100%
        );
}

/*==================================================================
KHỐI NỘI DUNG BÊN TRÁI
==================================================================*/

.watf-vision-mission__content {
    display: flex;
    flex-direction: column;

    gap: 22px;

    width: 53%;
    max-width: 900px;
}

/*==================================================================
CARD TẦM NHÌN
==================================================================*/

.watf-vision {
    position: relative;

    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;

    gap: 27px;

    min-height: 400px;

    padding: 40px 46px 40px 38px;

    overflow: hidden;

    border: 1px solid rgba(199, 215, 239, 0.95);
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.95) 100%
        );

    box-shadow:
        0 17px 38px rgba(32, 82, 157, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Vòng trang trí góc phải card */

.watf-vision::before {
    content: "";
    position: absolute;
    z-index: 3;

    top: -36px;
    right: -36px;

    width: 82px;
    height: 82px;

    border-radius: 50%;

    pointer-events: none;

    background:
        conic-gradient(
            from 155deg,
            var(--watf-vm-blue) 0deg 68deg,
            var(--watf-vm-green) 68deg 101deg,
            transparent 101deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 11px),
            #000 calc(100% - 10px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 11px),
            #000 calc(100% - 10px)
        );
}

/* Không dùng lớp che vòng cũ */

.watf-vision__corner {
    display: none;
}

/*==================================================================
CỘT ICON TẦM NHÌN
==================================================================*/

.watf-vision__icon-column {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    padding-top: 7px;
}

.watf-vision__icon {
    position: relative;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 116px;
    height: 116px;

    overflow: visible;

    border-radius: 50%;

    background: #ffffff;
    color: #1764e8;

    box-shadow:
        0 14px 27px rgba(32, 90, 181, 0.18),
        inset 0 0 0 1px rgba(224, 234, 247, 0.95);
}

/* Vòng cung đồng tâm icon Tầm nhìn */

.watf-vision__icon::before {
    content: "";
    position: absolute;

    inset: -8px;

    border-radius: 50%;

    pointer-events: none;

    background:
        conic-gradient(
            from 246deg,
            var(--watf-vm-blue) 0deg 72deg,
            transparent 72deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            #000 calc(100% - 5px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            #000 calc(100% - 5px)
        );
}

.watf-vision__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 62px;
    height: 62px;

    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: translate(-50%, -50%);
}

/*==================================================================
NỘI DUNG TẦM NHÌN
==================================================================*/

.watf-vision__body {
    min-width: 0;
    padding-top: 0;
}

.watf-vision__body h3 {
    margin: 0;

    color: #0753cc;

    font-size: clamp(26px, 1.75vw, 34px);
    font-weight: 800;
    line-height: 1.15;

    text-transform: uppercase;
}

.watf-vision__heading-line {
    display: block;

    width: 48px;
    height: 4px;

    margin: 15px 0 20px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #0876ed 0%,
            var(--watf-vm-green) 100%
        );
}

.watf-vision__description {
    color: var(--watf-vm-text);

    font-size: clamp(15px, 1.04vw, 19px);
    font-weight: 500;
    line-height: 1.55;

    text-align: left;
}

.watf-vision__description p {
    margin: 0;
}

.watf-vision__description p + p {
    margin-top: 23px;
}

/*==================================================================
CARD SỨ MỆNH
==================================================================*/

.watf-mission {
    position: relative;

    display: grid;
    grid-template-columns:
        130px
        185px
        1px
        minmax(280px, 1fr);

    align-items: center;

    gap: 25px;

    min-height: 168px;

    padding: 24px 38px 24px 32px;

    overflow: hidden;

    border: 1px solid rgba(0, 75, 197, 0.76);
    border-radius: 27px;

    background:
        radial-gradient(
            circle at 5% 14%,
            rgba(39, 122, 255, 0.4) 0%,
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #0959d6 0%,
            #0749c0 48%,
            #063695 100%
        );

    box-shadow:
        0 17px 34px rgba(14, 69, 165, 0.2);

    color: #ffffff;
}

/* Ánh sáng nhẹ trong card */

.watf-mission::before {
    content: "";
    position: absolute;

    top: -110px;
    left: 145px;

    width: 330px;
    height: 240px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(59, 144, 255, 0.28) 0%,
            transparent 70%
        );
}

/*==================================================================
CỘT ICON SỨ MỆNH
==================================================================*/

.watf-mission__icon-column {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.watf-mission__icon {
    position: relative;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 108px;
    height: 108px;

    overflow: visible;

    border-radius: 50%;

    background: #ffffff;
    color: var(--watf-vm-blue);

    box-shadow:
        0 13px 27px rgba(0, 25, 91, 0.2);
}

/* Vòng cung đồng tâm icon Sứ mệnh */

.watf-mission__icon::before {
    content: "";
    position: absolute;

    inset: -8px;

    border-radius: 50%;

    pointer-events: none;

    background:
        conic-gradient(
            from 205deg,
            var(--watf-vm-green) 0deg 68deg,
            #0879ed 68deg 128deg,
            transparent 128deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            #000 calc(100% - 5px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            #000 calc(100% - 5px)
        );
}

.watf-mission__icon svg {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    display: block;

    width: 56px;
    height: 56px;

    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: translate(-50%, -50%);
}

/*==================================================================
TIÊU ĐỀ SỨ MỆNH
==================================================================*/

.watf-mission__heading {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.watf-mission__heading h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(26px, 1.75vw, 34px);
    font-weight: 800;
    line-height: 1.15;

    text-transform: uppercase;
}

.watf-mission__heading-line {
    display: block;

    width: 48px;
    height: 4px;

    margin-top: 15px;

    border-radius: 50px;

    background: var(--watf-vm-green);
}

/*==================================================================
ĐƯỜNG CHIA SỨ MỆNH
==================================================================*/

.watf-mission__divider {
    position: relative;
    z-index: 2;

    display: block;
    align-self: center;

    width: 1px;
    height: 102px;

    background: rgba(255, 255, 255, 0.38);
}

/*==================================================================
NỘI DUNG SỨ MỆNH
==================================================================*/

.watf-mission__description {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 0;

    color: #ffffff;

    font-size: clamp(15px, 1.12vw, 20px);
    font-weight: 500;
    line-height: 1.55;

    text-transform: uppercase;
}

.watf-mission__description span {
    display: block;
}

/*==================================================================
DESKTOP VỪA
==================================================================*/

@media only screen and (max-width: 1599.98px) {
    .watf-vision-mission {
        padding-top: 52px;
    }

    .watf-vision-mission__container {
        padding-right: 42px;
        padding-left: 42px;
    }

    .watf-vision-mission__content {
        width: 54%;
        max-width: 830px;
    }

    .watf-vision {
        grid-template-columns: 116px minmax(0, 1fr);

        gap: 22px;

        min-height: 370px;

        padding: 35px 38px 35px 32px;
    }

    .watf-vision__icon {
        width: 102px;
        height: 102px;
    }

    .watf-vision__icon svg {
        width: 54px;
        height: 54px;
    }

    .watf-mission {
        grid-template-columns:
            112px
            164px
            1px
            minmax(240px, 1fr);

        gap: 20px;

        min-height: 152px;

        padding: 22px 30px 22px 26px;
    }

    .watf-mission__icon {
        width: 94px;
        height: 94px;
    }

    .watf-mission__icon svg {
        width: 49px;
        height: 49px;
    }

    .watf-mission__divider {
        height: 90px;
    }
}

/*==================================================================
LAPTOP
==================================================================*/

@media only screen and (max-width: 1279.98px) {
    .watf-vision-mission {
        min-height: 730px;

        padding: 46px 0 54px;

        background-position: 61% center;
    }

    .watf-vision-mission__container {
        padding-right: 28px;
        padding-left: 28px;
    }

    .watf-vision-mission__header {
        margin-bottom: 34px;
    }

    .watf-vision-mission__content {
        width: 60%;
    }

    .watf-vision {
        grid-template-columns: 94px minmax(0, 1fr);

        gap: 18px;

        min-height: 345px;

        padding: 28px;

        border-radius: 24px;
    }

    .watf-vision__icon {
        width: 82px;
        height: 82px;
    }

    .watf-vision__icon::before {
        inset: -6px;

        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 5px),
                #000 calc(100% - 4px)
            );

        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 5px),
                #000 calc(100% - 4px)
            );
    }

    .watf-vision__icon svg {
        width: 44px;
        height: 44px;
    }

    .watf-vision__description {
        font-size: 14px;
    }

    .watf-mission {
        grid-template-columns:
            92px
            140px
            1px
            minmax(200px, 1fr);

        gap: 16px;

        min-height: 140px;

        padding: 20px 23px 20px 20px;

        border-radius: 22px;
    }

    .watf-mission__icon {
        width: 80px;
        height: 80px;
    }

    .watf-mission__icon::before {
        inset: -6px;

        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 5px),
                #000 calc(100% - 4px)
            );

        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 5px),
                #000 calc(100% - 4px)
            );
    }

    .watf-mission__icon svg {
        width: 42px;
        height: 42px;
    }

    .watf-mission__divider {
        height: 80px;
    }

    .watf-mission__description {
        font-size: 14px;
    }
}

/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {
    .watf-vision-mission {
        min-height: auto;

        padding: 46px 0 420px;

        background-position: 72% bottom;
        background-size: auto 100%;
    }

    .watf-vision-mission::before {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.26) 0%,
                rgba(255, 255, 255, 0.08) 67%,
                transparent 100%
            );
    }

    .watf-vision-mission__content {
        width: 100%;
        max-width: 760px;
    }

    .watf-vision {
        min-height: 0;
    }

    .watf-mission {
        grid-template-columns:
            92px
            145px
            1px
            minmax(200px, 1fr);
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-vision-mission {
        padding: 37px 0 300px;

        background-position: 70% bottom;
        background-size: auto 76%;
    }

    .watf-vision-mission__container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .watf-vision-mission__header {
        margin-bottom: 24px;
    }

    .watf-vision-mission__title {
        display: block;

        font-size: clamp(28px, 8.7vw, 42px);
        line-height: 1.08;
    }

    .watf-vision-mission__title strong {
        display: inline;
    }

    .watf-vision-mission__title i {
        width: 21px;
        height: 16px;
    }

    .watf-vision-mission__title-line {
        width: 94px;
        height: 3px;

        margin-top: 15px;
    }

    .watf-vision-mission__content {
        gap: 15px;
    }

    /* Card Tầm nhìn */

    .watf-vision {
        display: block;

        min-height: 0;

        padding: 76px 19px 23px;

        border-radius: 21px;
    }

    .watf-vision::before {
        top: -28px;
        right: -28px;

        width: 62px;
        height: 62px;

        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 8px),
                #000 calc(100% - 7px)
            );

        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 8px),
                #000 calc(100% - 7px)
            );
    }

    .watf-vision__icon-column {
        position: absolute;

        top: 18px;
        left: 20px;

        padding: 0;
    }

    .watf-vision__icon {
        width: 52px;
        height: 52px;
    }

    .watf-vision__icon::before {
        inset: -5px;

        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 4px),
                #000 calc(100% - 3px)
            );

        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 4px),
                #000 calc(100% - 3px)
            );
    }

    .watf-vision__icon svg {
        width: 29px;
        height: 29px;

        stroke-width: 2.5;
    }

    .watf-vision__body {
        padding: 0;
    }

    .watf-vision__body h3 {
        position: absolute;

        top: 28px;
        left: 82px;

        font-size: 22px;
    }

    .watf-vision__heading-line {
        position: absolute;

        top: 55px;
        left: 82px;

        width: 40px;
        height: 3px;

        margin: 0;
    }

    .watf-vision__description {
        font-size: 14px;
        line-height: 1.55;
    }

    .watf-vision__description p + p {
        margin-top: 17px;
    }

    /* Card Sứ mệnh */

    .watf-mission {
        grid-template-columns: 62px minmax(0, 1fr);

        gap: 11px 15px;

        min-height: 0;

        padding: 17px;

        border-radius: 20px;
    }

    .watf-mission__icon {
        width: 58px;
        height: 58px;
    }

    .watf-mission__icon::before {
        inset: -5px;

        -webkit-mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 4px),
                #000 calc(100% - 3px)
            );

        mask:
            radial-gradient(
                farthest-side,
                transparent calc(100% - 4px),
                #000 calc(100% - 3px)
            );
    }

    .watf-mission__icon svg {
        width: 31px;
        height: 31px;
    }

    .watf-mission__heading {
        align-self: center;
    }

    .watf-mission__heading h3 {
        font-size: 22px;
    }

    .watf-mission__heading-line {
        width: 40px;
        height: 3px;

        margin-top: 8px;
    }

    .watf-mission__divider {
        display: none;
    }

    .watf-mission__description {
        grid-column: 1 / -1;

        min-width: 0;

        padding-top: 11px;

        border-top: 1px solid rgba(255, 255, 255, 0.34);

        font-size: 14px;
        line-height: 1.5;
    }
}

/** section-core-values */
.section-core-values {
  position: relative;
  padding-top: 60px;
  padding-bottom: 40px;
  overflow: hidden;
}
.section-core-values .container {
  position: relative;
  z-index: 1;
}

.core-values-corner-bottom {
  position: absolute;
  width: 28.22917%;
  right: -13.54167%;
  bottom: 0;
  transform: rotate(180deg);
}

.core-values-item {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .core-values-item {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) {
  .core-values-item:last-child {
    margin-bottom: 0;
  }
}

.core-values-item-title {
  margin-bottom: 8px;
  position: relative;
  font-size: 18px;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .core-values-item-title {
    margin-bottom: 16px;
  }
}
.core-values-item-title::before {
  content: "";
  display: block;
  width: 16px;
  height: 5px;
  display: block;
  background-color: #00E88F;
  margin-bottom: 4px;
}

.core-values-item-text {
  font-size: 18px;
  text-align: justify;
}
@media (max-width: 767.98px) {
  .core-values-item-text.text-grey-2 {
    color: #000;
  }
}

@media only screen and (min-width: 1200px) {
  .core-values-img {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}
@media only screen and (min-width: 1200px) {
  .core-values-img img {
    width: calc(100% + calc((100vw - 1140px)/2));
    position: relative;
    max-width: unset;
    right: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .core-values-img img {
    margin-top: -150px;
    right: -215px;
  }
}

/** section-bod */
.section-bod {
  background-color: #EFEFEF;
  padding-top: 50px;
  padding-bottom: 20px;
}

/** section-activities */
/*==================================================================
WATF ACTIVITIES
==================================================================*/

.watf-activities,
.watf-activities *,
.watf-activities *::before,
.watf-activities *::after {
    box-sizing: border-box;
}

.watf-activities {
    --watf-act-blue: #075cef;
    --watf-act-green: #18cf8d;
    --watf-act-navy: #071d5a;
    --watf-act-text: #344054;
    --watf-act-muted: #667085;
    --watf-act-border: #e3e8f0;

    position: relative;
    isolation: isolate;

    width: 100%;

    padding: 56px 0 64px;

    overflow: hidden;

    background-color: #ffffff;
    background-image: var(--watf-activities-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/*==================================================================
CONTAINER
==================================================================*/

.watf-activities__container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 32px), 1296px);

    margin-right: auto;
    margin-left: auto;
}


/*==================================================================
HEADER
==================================================================*/

.watf-activities__header {
    width: 100%;

    margin: 0 0 26px;
}

.watf-activities__title {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin: 0;

    color: var(--watf-act-navy);

    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.watf-activities__title::after {
    content: "";

    display: inline-block;

    width: 10px;
    height: 8px;

    background: var(--watf-act-green);

    transform: skew(-18deg);
}


/*==================================================================
GRID
==================================================================*/

.watf-activities__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


/*==================================================================
ITEM
==================================================================*/

.watf-activities__item {
    min-width: 0;
}


/*==================================================================
CARD
==================================================================*/

.watf-activities__card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    color: inherit;

    border: 1px solid var(--watf-act-border);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 7px 20px rgba(31, 69, 126, 0.06);

    text-decoration: none;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.watf-activities__card:hover {
    color: inherit;

    transform: translateY(-4px);

    border-color: rgba(7, 92, 239, 0.22);

    box-shadow:
        0 13px 28px rgba(31, 69, 126, 0.11);
}


/*==================================================================
IMAGE 16:9
==================================================================*/

.watf-activities__image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #eef3f8;
}

.watf-activities__thumbnail {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none;

    margin: 0;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.3s ease;
}

.watf-activities__card:hover
.watf-activities__thumbnail {
    transform: scale(1.045);
}


/*==================================================================
BODY
==================================================================*/

.watf-activities__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding:
        14px
        15px
        17px;
}


/*==================================================================
META
==================================================================*/

.watf-activities__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 7px;

    color: var(--watf-act-muted);

    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.watf-activities__meta span + span::before {
    content: "";

    display: inline-block;

    width: 3px;
    height: 3px;

    margin:
        0
        6px
        2px
        1px;

    border-radius: 50%;

    background: #98a2b3;
}


/*==================================================================
TITLE
==================================================================*/

.watf-activities__name {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color: #101828;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.42;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.watf-activities__card:hover
.watf-activities__name {
    color: var(--watf-act-blue);
}


/*==================================================================
DESKTOP LARGE
==================================================================*/

@media only screen and (min-width: 1440px) {

    .watf-activities {
        padding:
            62px
            0
            70px;
    }

    .watf-activities__container {
        width:
            min(
                calc(100% - 48px),
                1296px
            );
    }

    .watf-activities__grid {
        gap: 22px;
    }

    .watf-activities__name {
        font-size: 15px;
    }
}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-activities {
        padding:
            46px
            0
            52px;
    }

    .watf-activities__container {
        width:
            min(
                calc(100% - 28px),
                820px
            );
    }

    .watf-activities__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 17px;
    }
}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-activities {
        padding:
            38px
            0
            44px;

        background-position: center top;
    }

    .watf-activities__container {
        width: calc(100% - 28px);
    }

    .watf-activities__header {
        margin-bottom: 20px;
    }

    .watf-activities__title {
        font-size: 21px;
    }

    .watf-activities__grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .watf-activities__body {
        padding:
            13px
            14px
            16px;
    }

    .watf-activities__name {
        font-size: 14px;
    }
}




/*------------------------------------------------------------------
[WATF STATS - NHỮNG CON SỐ ẤN TƯỢNG]
------------------------------------------------------------------*/

.watf-stats,
.watf-stats *,
.watf-stats *::before,
.watf-stats *::after {
    box-sizing: border-box;
}

.watf-stats {
    --watf-stats-blue: #0757ed;
    --watf-stats-dark-blue: #061348;
    --watf-stats-green: #20d99a;
    --watf-stats-text: #101737;
    --watf-stats-muted: #303953;

    position: relative;

    width: 100%;
    min-height: 900px;
    aspect-ratio: 16 / 9;

    margin: 0;
    overflow: hidden;

    color: var(--watf-stats-text);

    background-color: #eaf4ff;

    background-image:
        url("/wp-content/uploads/2026/08/newbg4.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.watf-stats img {
    display: block;
    max-width: 100%;
}

.watf-stats__container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(390px, 28%)
        minmax(0, 72%);

    width: min(100%, 1680px);
    height: 100%;

    margin: 0 auto;

    padding:
        clamp(32px, 2.2vw, 42px)
        clamp(38px, 4vw, 70px)
        clamp(40px, 3vw, 52px);
}

/*------------------------------------------------------------------
[CỘT TRÁI]
------------------------------------------------------------------*/

.watf-stats__intro {
    position: relative;

    min-width: 0;

    padding:
        clamp(7px, 0.9vw, 15px)
        clamp(25px, 2.3vw, 40px)
        30px
        clamp(5px, 0.8vw, 14px);
}

.watf-stats__brand {
    width: clamp(130px, 8.7vw, 155px);

    margin:
        0
        0
        clamp(38px, 3vw, 52px);
}

.watf-stats__brand img {
    width: 100%;
    height: auto;

    margin: 0;
}

/*------------------------------------------------------------------
[TIÊU ĐỀ]
------------------------------------------------------------------*/

.watf-stats__heading {
    width: 100%;
    max-width: 460px;

    margin: 0;

    color: var(--watf-stats-dark-blue);

    font-size: clamp(58px, 4.8vw, 82px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.watf-stats__heading span,
.watf-stats__heading strong {
    display: block;
    white-space: nowrap;
}

.watf-stats__heading strong {
    color: var(--watf-stats-blue);
    font-weight: 800;
}

.watf-stats__heading-line {
    display: block;

    width: clamp(58px, 4vw, 70px);
    height: 4px;

    margin:
        clamp(27px, 1.9vw, 34px)
        0
        clamp(25px, 1.8vw, 31px);

    border-radius: 20px;

    background: var(--watf-stats-blue);
}

.watf-stats__intro-text {
    width: 100%;
    max-width: 310px;

    color: var(--watf-stats-muted);

    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 400;
    line-height: 1.58;
}

.watf-stats__intro-text strong {
    display: block;

    margin: 0 0 4px;

    color: var(--watf-stats-blue);

    font-size: clamp(16px, 1.08vw, 18px);
    font-weight: 700;
    line-height: 1.45;
}

.watf-stats__intro-text p {
    margin: 0;
}

/*------------------------------------------------------------------
[CỘT PHẢI]
------------------------------------------------------------------*/

.watf-stats__content {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding-top: clamp(135px, 10.2vw, 175px);
}

.watf-stats__cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(16px, 1.35vw, 23px);

    min-width: 0;
}

/*------------------------------------------------------------------
[CARD]
------------------------------------------------------------------*/

.watf-stats__card {
    position: relative;

    min-width: 0;

    height: clamp(520px, 33.5vw, 565px);

    overflow: hidden;

    padding:
        clamp(30px, 2.1vw, 38px)
        clamp(27px, 2.1vw, 38px)
        47%;

    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.98) 55%,
            rgba(231, 243, 255, 0.96) 100%
        );

    box-shadow:
        0 15px 40px rgba(0, 42, 151, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/*------------------------------------------------------------------
[ICON CARD]
------------------------------------------------------------------*/

.watf-stats__card-icon {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(68px, 4.55vw, 76px);
    height: clamp(68px, 4.55vw, 76px);

    margin:
        0
        0
        clamp(24px, 1.65vw, 29px);

    color: #ffffff;

    border: 5px solid #ffffff;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0757ed 0%,
            #0042d7 100%
        );

    box-shadow:
        0 9px 19px rgba(0, 56, 201, 0.27),
        0 0 0 2px rgba(7, 87, 237, 0.09);
}

.watf-stats__card-icon svg {
    width: 50%;
    height: 50%;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*------------------------------------------------------------------
[SỐ LIỆU]
------------------------------------------------------------------*/

.watf-stats__number {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: baseline;

    color: var(--watf-stats-blue);

    font-size: clamp(69px, 5.25vw, 90px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;

    white-space: nowrap;

    text-shadow:
        0 4px 15px rgba(7, 87, 237, 0.12);
}

.watf-stats__number span:last-child {
    margin-left: 4px;

    font-size: 0.71em;
    letter-spacing: -0.03em;
}

.watf-stats__number-line {
    position: relative;
    z-index: 6;

    display: block;

    width: clamp(52px, 3.7vw, 62px);
    height: 3px;

    margin:
        clamp(22px, 1.55vw, 28px)
        0
        clamp(18px, 1.25vw, 22px);

    border-radius: 20px;

    background: var(--watf-stats-green);
}

.watf-stats__card-text {
    position: relative;
    z-index: 6;

    width: 100%;
    max-width: 270px;

    margin: 0;

    color: var(--watf-stats-text);

    font-size: clamp(16px, 1.12vw, 19px);
    font-weight: 500;
    line-height: 1.43;
}

/*------------------------------------------------------------------
[ẢNH MINH HỌA PHÍA DƯỚI CARD]
------------------------------------------------------------------*/

.watf-stats__card-image {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 2;

    width: 100%;
    height: 47%;

    overflow: hidden;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(227, 242, 255, 0.26) 100%
        );
}

/* Làm mềm ranh giới giữa chữ và ảnh */
.watf-stats__card-image::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    z-index: 5;

    height: 68px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.84) 20%,
            rgba(255, 255, 255, 0.3) 58%,
            rgba(255, 255, 255, 0) 100%
        );
}

/*
 * Ảnh gốc 1536x1024 có khoảng trống phía trên.
 * Phóng ảnh và kéo xuống để chỉ giữ phần chủ thể.
 */
.watf-stats__card-image img {
    position: absolute;

    left: 50%;
    z-index: 2;

    display: block;

    max-width: none;
    height: auto;

    margin: 0;

    transform: translateX(-50%);
    transform-origin: center bottom;

    filter:
        saturate(1.06)
        contrast(1.03);
}

/* Thành phố */
.watf-stats__card-image--city img {
    bottom: -59%;

    width: 190%;
}

/* Biểu đồ */
.watf-stats__card-image--growth img {
    bottom: -58%;

    width: 188%;
}

/* Đội ngũ */
.watf-stats__card-image--team img {
    bottom: -26%;

    width: 186%;
}

/*------------------------------------------------------------------
[THANH GIÁ TRỊ]
------------------------------------------------------------------*/

.watf-stats__values {
    position: relative;
    z-index: 8;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;
    min-height: clamp(88px, 5.8vw, 98px);

    margin-top: clamp(26px, 1.9vw, 33px);

    padding:
        clamp(11px, 0.9vw, 15px)
        clamp(16px, 1.4vw, 23px);

    overflow: hidden;

    color: #ffffff;

    border: 2px solid rgba(103, 217, 255, 0.8);
    border-radius: 16px;

    background:
        linear-gradient(
            100deg,
            #0757ed 0%,
            #0045da 47%,
            #0033ad 100%
        );

    box-shadow:
        0 13px 30px rgba(0, 33, 139, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 0 18px rgba(35, 217, 154, 0.09);
}

.watf-stats__values::before {
    content: "";

    position: absolute;

    inset: 4px;

    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
}

.watf-stats__value {
    position: relative;
    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: clamp(13px, 1.25vw, 21px);

    min-width: 0;

    padding:
        7px
        clamp(10px, 1.35vw, 23px);
}

.watf-stats__value:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 10px;
    right: 0;
    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.9),
            transparent
        );
}

.watf-stats__value-icon {
    display: flex;
    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: clamp(46px, 3.25vw, 55px);
    height: clamp(46px, 3.25vw, 55px);

    color: #ffffff;
}

.watf-stats__value-icon svg {
    width: 91%;
    height: 91%;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-stats__value-content {
    min-width: 0;
}

.watf-stats__value-content strong {
    display: block;

    margin: 0 0 4px;

    color: #ffffff;

    font-size: clamp(15px, 1.08vw, 18px);
    font-weight: 700;
    line-height: 1.25;

    text-transform: uppercase;
}

.watf-stats__value-content span {
    display: block;

    color: rgba(255, 255, 255, 0.95);

    font-size: clamp(12px, 0.84vw, 14px);
    font-weight: 400;
    line-height: 1.35;
}

/*------------------------------------------------------------------
[DESKTOP NHỎ]
------------------------------------------------------------------*/

@media only screen and (max-width: 1450px) {
    .watf-stats {
        min-height: 810px;
    }

    .watf-stats__container {
        grid-template-columns:
            minmax(340px, 28%)
            minmax(0, 72%);

        padding:
            30px
            36px
            38px;
    }

    .watf-stats__heading {
        font-size: clamp(54px, 4.5vw, 67px);
    }

    .watf-stats__content {
        padding-top: 126px;
    }

    .watf-stats__card {
        height: 520px;

        padding:
            29px
            27px
            47%;
    }

    .watf-stats__card-icon {
        width: 66px;
        height: 66px;

        margin-bottom: 22px;
    }

    .watf-stats__number {
        font-size: clamp(62px, 4.8vw, 78px);
    }

    .watf-stats__card-image--city img {
        bottom: -60%;
        width: 195%;
    }

    .watf-stats__card-image--growth img {
        bottom: -59%;
        width: 193%;
    }

    .watf-stats__card-image--team img {
        bottom: -27%;
        width: 190%;
    }

    .watf-stats__values {
        min-height: 92px;
        margin-top: 25px;
    }
}

/*------------------------------------------------------------------
[TABLET NGANG]
------------------------------------------------------------------*/

@media only screen and (max-width: 1199.98px) {
    .watf-stats {
        aspect-ratio: auto;
        min-height: 0;

        background-position: center top;
        background-size: auto 700px;
    }

    .watf-stats__container {
        display: block;

        height: auto;

        padding:
            38px
            28px
            42px;
    }

    .watf-stats__intro {
        min-height: 430px;

        padding:
            5px
            51%
            40px
            5px;
    }

    .watf-stats__heading {
        max-width: 430px;

        font-size: 62px;
    }

    .watf-stats__content {
        padding-top: 0;
    }

    .watf-stats__cards {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .watf-stats__card {
        height: 500px;

        padding:
            28px
            24px
            47%;
    }

    .watf-stats__number {
        font-size: 63px;
    }

    .watf-stats__card-image {
        height: 47%;
    }

    .watf-stats__card-image--city img {
        bottom: -58%;
        width: 190%;
    }

    .watf-stats__card-image--growth img {
        bottom: -57%;
        width: 188%;
    }

    .watf-stats__card-image--team img {
        bottom: -25%;
        width: 185%;
    }
}

/*------------------------------------------------------------------
[TABLET DỌC]
------------------------------------------------------------------*/

@media only screen and (max-width: 991.98px) {
    .watf-stats__container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .watf-stats__intro {
        min-height: 405px;
        padding-right: 42%;
    }

    .watf-stats__heading {
        font-size: 54px;
    }

    .watf-stats__cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .watf-stats__card {
        height: 520px;
    }

    .watf-stats__card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 8px);

        justify-self: center;
    }

    .watf-stats__values {
        grid-template-columns: 1fr;

        padding:
            9px
            18px;
    }

    .watf-stats__value {
        justify-content: flex-start;

        min-height: 77px;

        padding:
            10px
            24px;
    }

    .watf-stats__value:not(:last-child)::after {
        top: auto;
        right: 24px;
        bottom: 0;
        left: 24px;

        width: auto;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.75),
                transparent
            );
    }
}

/*------------------------------------------------------------------
[MOBILE]
------------------------------------------------------------------*/

@media only screen and (max-width: 767.98px) {
    .watf-stats {
        background-position: 39% top;
        background-size: auto 670px;
    }

    .watf-stats__container {
        padding:
            24px
            13px
            28px;
    }

    .watf-stats__intro {
        min-height: 465px;

        padding:
            5px
            8px
            80px;

        border-radius: 16px;

        background:
            linear-gradient(
                120deg,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.86) 72%,
                rgba(255, 255, 255, 0.2) 100%
            );
    }

    .watf-stats__brand {
        width: 115px;
        margin-bottom: 30px;
    }

    .watf-stats__heading {
        max-width: 340px;

        font-size:
            clamp(
                43px,
                13.5vw,
                58px
            );
    }

    .watf-stats__heading span,
    .watf-stats__heading strong {
        white-space: normal;
    }

    .watf-stats__heading-line {
        width: 58px;

        margin:
            23px
            0
            21px;
    }

    .watf-stats__intro-text {
        max-width: 275px;

        font-size: 15px;
    }

    .watf-stats__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .watf-stats__card,
    .watf-stats__card:last-child {
        grid-column: auto;

        width: 100%;
        max-width: 440px;
        height: 515px;

        justify-self: center;

        padding:
            28px
            27px
            47%;

        border-radius: 16px;
    }

    .watf-stats__card-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 22px;
    }

    .watf-stats__number {
        font-size:
            clamp(
                64px,
                20vw,
                85px
            );
    }

    .watf-stats__card-text {
        max-width: 280px;

        font-size: 17px;
    }

    .watf-stats__card-image {
        height: 47%;
    }

    .watf-stats__card-image::before {
        height: 62px;
    }

    .watf-stats__card-image--city img {
        bottom: -57%;
        width: 186%;
    }

    .watf-stats__card-image--growth img {
        bottom: -56%;
        width: 185%;
    }

    .watf-stats__card-image--team img {
        bottom: -24%;
        width: 182%;
    }

    .watf-stats__values {
        margin-top: 18px;

        padding:
            8px
            11px;

        border-radius: 14px;
    }

    .watf-stats__value {
        gap: 16px;

        min-height: 76px;

        padding:
            10px
            16px;
    }
}

/*------------------------------------------------------------------
[MOBILE NHỎ]
------------------------------------------------------------------*/

@media only screen and (max-width: 479.98px) {
    .watf-stats__container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .watf-stats__intro {
        min-height: 440px;

        padding-right: 4px;
        padding-left: 4px;
    }

    .watf-stats__heading {
        font-size:
            clamp(
                40px,
                13vw,
                51px
            );
    }

    .watf-stats__card,
    .watf-stats__card:last-child {
        height: 490px;

        padding:
            25px
            22px
            47%;
    }

    .watf-stats__number {
        font-size:
            clamp(
                60px,
                19vw,
                77px
            );
    }

    .watf-stats__card-image--city img {
        bottom: -55%;
        width: 182%;
    }

    .watf-stats__card-image--growth img {
        bottom: -54%;
        width: 181%;
    }

    .watf-stats__card-image--team img {
        bottom: -22%;
        width: 180%;
    }
}
















/** section-startup */
.box-header {
  margin-bottom: 24px;
  position: relative;
}
.box-header.line::before {
  content: "";
  margin-bottom: 10px;
  width: 38px;
  height: 12px;
  background-color: #00E88F;
  display: block;
}

.box-title {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 0;
}

.box-meta-text {
  font-weight: 500;
  font-size: 18px;
  color: #BABABA;
}

.startup-item {
  position: relative;
  color: #fff;
}

.startup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
}

.startup-item-title {
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.startup-list {
  border-top: 1px solid #fff;
  padding-top: 20px;
  margin-bottom: 0;
}
.startup-list li {
  font-size: 12px;
}
.startup-list li:not(:last-child) {
  margin-bottom: 8px;
}

/** section-featured */
.section-featured {
  background-color: #EFEFEF;
  padding-top: 35px;
  padding-bottom: 35px;
}
@media only screen and (min-width: 768px) {
  .section-featured {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media only screen and (min-width: 1200px) {
  .featured-list-item {
    padding-left: 5%;
  }
}

.featured-item {
  margin-bottom: 20px;
}
.featured-item:last-child {
  margin-bottom: 0;
}

.featured-item-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .featured-item-title {
    font-size: 20px;
  }
}
.featured-item-title::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: skew(-20deg);
  display: block;
  background-color: #00E88F;
  margin-bottom: 4px;
}

.featured-item-text {
  text-align: justify;
}
/*==================================================================
WATF AUDIENCE
3 CARD CÙNG CHIỀU RỘNG + CÙNG CHIỀU CAO
==================================================================*/

.watf-audience,
.watf-audience *,
.watf-audience *::before,
.watf-audience *::after {
    box-sizing: border-box;
}

.watf-audience {
    --wa-blue: #1768f2;
    --wa-blue-deep: #102b68;
    --wa-green: #18d49c;
    --wa-green-deep: #08bd86;
    --wa-text: #122452;
    --wa-muted: #26334f;
    --wa-border-blue: rgba(23, 104, 242, 0.32);
    --wa-border-green: rgba(24, 212, 156, 0.48);

    /* Chiều cao chung của khu vực hình ảnh */
    --wa-content-height: 450px;

    position: relative;
    overflow: hidden;
    padding: 64px 0 74px;
    background-color: #ffffff;
    background-image: url("/wp-content/uploads/2026/08/newbg2.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;


}

.watf-audience img {
    display: block;
    width: 100%;
    max-width: 100%;
}

/*==================================================================
CONTAINER
==================================================================*/

.watf-audience__container {
    position: relative;
    z-index: 5;
    width: min(100%, 1760px);
    margin: 0 auto;
    padding: 0 56px;
}

/*==================================================================
DECOR GÓC PHẢI
==================================================================*/

.watf-audience__chart {
    position: absolute;
    z-index: 1;
    top: 2px;
    right: 0;
    width: min(38vw, 620px);
    pointer-events: none;
    opacity: 0.82;
}

.watf-audience__chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.watf-audience .wa-grid path {
    fill: none;
    stroke: rgba(23, 104, 242, 0.07);
    stroke-width: 1;
}

.watf-audience .wa-bars rect {
    fill: rgba(23, 104, 242, 0.07);
}

.watf-audience .wa-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-audience .wa-line--green {
    stroke: rgba(24, 212, 156, 0.72);
}

.watf-audience .wa-line--blue {
    stroke: rgba(23, 104, 242, 0.68);
}

.watf-audience .wa-points--green circle {
    fill: #68dfc0;
}

.watf-audience .wa-points--blue circle {
    fill: #5b94f7;
}

.watf-audience__donut {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background:
        conic-gradient(
            from 220deg,
            #4284f3 0 68%,
            #8ee4e5 68% 87%,
            #dcecff 87% 100%
        );
}

.watf-audience__donut::after {
    content: "";
    position: absolute;
    inset: 29px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}

.watf-audience__dots-top {
    position: absolute;
    top: 128px;
    right: -4px;
    width: 84px;
    height: 84px;
    background-image:
        radial-gradient(
            circle,
            rgba(23, 104, 242, 0.22) 2px,
            transparent 2.5px
        );
    background-size: 13px 13px;
}

.watf-audience::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -190px;
    right: -170px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(144, 192, 255, 0.16) 0%,
            rgba(144, 192, 255, 0.06) 42%,
            transparent 72%
        );
}

/*==================================================================
TIÊU ĐỀ SECTION
==================================================================*/

.watf-audience__header {
    position: relative;
    z-index: 5;
    max-width: 1040px;
    margin-bottom: 40px;
}

.watf-audience__header h2 {
    margin: 0;
    color: var(--wa-blue-deep);
    font-size: clamp(40px, 3.7vw, 66px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.watf-audience__heading-mark {
    display: inline-block;
    width: 28px;
    height: 20px;
    margin-left: 12px;
    vertical-align: middle;
    background:
        linear-gradient(
            135deg,
            #16d49c 0%,
            #18e292 100%
        );
    transform: skew(-18deg);
}

.watf-audience__heading-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
}

.watf-audience__heading-line .line-main {
    display: block;
    width: 110px;
    height: 4px;
    border-radius: 20px;
    background: var(--wa-blue);
}

.watf-audience__heading-line .line-dot {
    display: block;
    height: 4px;
    border-radius: 20px;
}

.watf-audience__heading-line .line-dot--blue {
    width: 20px;
    background: #74a9ff;
}

.watf-audience__heading-line .line-dot--green {
    width: 10px;
    background: var(--wa-green);
}

/*==================================================================
GRID 3 CARD
==================================================================*/

.watf-audience__grid {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

/*==================================================================
PANEL CHUNG
==================================================================*/

.watf-audience__panel {
    position: relative;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 24px;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 18px 44px rgba(36, 84, 160, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.watf-audience__panel--startup {
    border: 1.5px solid var(--wa-border-blue);
}

.watf-audience__panel--sme {
    border: 1.5px solid var(--wa-border-green);
}

.watf-audience__panel--corp {
    border: 1.5px solid var(--wa-border-blue);
}

/*==================================================================
PHẦN HEADER CARD
==================================================================*/

.watf-audience__panel-head {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    gap: 18px;

    /*
     * Quan trọng:
     * Cả 3 header có cùng chiều cao nên đường phân cách
     * và phần hình ảnh luôn nằm ngang hàng.
     */
    min-height: 126px;
    margin-bottom: 18px;
}

.watf-audience__panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;
    flex: 0 0 84px;

    border-radius: 20px;
}

.watf-audience__panel-icon--blue {
    background:
        linear-gradient(
            145deg,
            #327fff 0%,
            #1768f2 100%
        );

    box-shadow:
        0 10px 24px rgba(23, 104, 242, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.watf-audience__panel-icon--green {
    background:
        linear-gradient(
            145deg,
            #31e2b2 0%,
            #14cb95 100%
        );

    box-shadow:
        0 10px 24px rgba(20, 203, 149, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.watf-audience__panel-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-audience__panel-meta {
    min-width: 0;
    padding-top: 2px;
}

.watf-audience__panel-meta h3 {
    margin: 0 0 8px;
    color: var(--wa-blue);
    font-size: clamp(25px, 1.7vw, 33px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.watf-audience__panel-meta h3.is-green {
    color: var(--wa-green-deep);
}

.watf-audience__panel-meta h3 span {
    display: inline-block;
    width: 13px;
    height: 10px;
    margin-left: 7px;
    vertical-align: middle;
    background: var(--wa-green);
    transform: skew(-18deg);
}

.watf-audience__panel-meta p {
    margin: 0;
    color: var(--wa-muted);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 500;
    line-height: 1.42;
}

/*==================================================================
ĐƯỜNG PHÂN CÁCH
==================================================================*/

.watf-audience__separator {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 1px;
    margin-bottom: 22px;
    background:
        linear-gradient(
            90deg,
            rgba(169, 194, 235, 0.42) 0%,
            rgba(169, 194, 235, 0.82) 100%
        );
}

.watf-audience__separator::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    transform: translateY(-50%);
}

.watf-audience__separator--blue::after {
    background: var(--wa-blue);
}

.watf-audience__separator--green {
    background:
        linear-gradient(
            90deg,
            rgba(94, 218, 183, 0.3) 0%,
            rgba(45, 210, 164, 0.8) 100%
        );
}

.watf-audience__separator--green::after {
    background: var(--wa-green);
}

/*==================================================================
KHU VỰC HÌNH ẢNH CHUNG
==================================================================*/

/*
 * Cả Startup, SME và Corporate đều dùng chung một chiều cao.
 * Đây là phần giúp đáy 3 card ngang bằng tuyệt đối.
 */
.watf-audience__startup-grid,
.watf-audience__feature-list {
    flex: 1 1 auto;
    min-height: 0;
    height: var(--wa-content-height);
}

/*==================================================================
STARTUP - 4 HÌNH
==================================================================*/

.watf-audience__startup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.watf-audience__startup-item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    border-radius: 15px;
    background: #e8f1ff;

    box-shadow:
        0 8px 20px rgba(30, 74, 145, 0.08);
}

.watf-audience__startup-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.watf-audience__startup-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(15, 91, 241, 0.2) 0%,
            rgba(10, 59, 159, 0.48) 100%
        );
}

.watf-audience__startup-label {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;

    color: #ffffff;
    font-size: clamp(15px, 1.1vw, 21px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);
}

@media (hover: hover) {
    .watf-audience__startup-item:hover img {
        transform: scale(1.05);
    }
}

/*==================================================================
SME + CORPORATE
==================================================================*/

.watf-audience__feature-list {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/*
 * Corporate có hình trên cao hơn nhẹ giống ảnh mẫu,
 * nhưng tổng chiều cao vẫn bằng Startup và SME.
 */
.watf-audience__feature-list--corp {
    grid-template-rows:
        minmax(0, 1.15fr)
        minmax(0, 1fr);
}

.watf-audience__feature-card,
.watf-audience__corp-illustration {
    position: relative;
    display: block;

    min-width: 0;
    min-height: 0;
    height: 100%;

    overflow: hidden;
    border-radius: 15px;
    background: #edf5ff;

    box-shadow:
        0 8px 20px rgba(30, 74, 145, 0.07);
}

.watf-audience__feature-card img,
.watf-audience__corp-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watf-audience__feature-overlay {
    position: absolute;
    inset: 0;
}

.watf-audience__feature-overlay--green {
    background:
        linear-gradient(
            90deg,
            rgba(23, 211, 156, 0.69) 0%,
            rgba(23, 211, 156, 0.3) 54%,
            rgba(23, 211, 156, 0.07) 100%
        );
}

.watf-audience__feature-overlay--dark {
    background:
        linear-gradient(
            90deg,
            rgba(12, 27, 61, 0.83) 0%,
            rgba(12, 27, 61, 0.53) 46%,
            rgba(12, 27, 61, 0.11) 100%
        );
}

.watf-audience__feature-title {
    position: absolute;
    z-index: 2;
    top: 26px;
    left: 22px;

    max-width: calc(100% - 44px);

    color: #ffffff;
    font-size: clamp(21px, 1.5vw, 31px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-transform: uppercase;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.12);
}

.watf-audience__feature-title--large {
    top: 28px;
    left: 24px;
    font-size: clamp(23px, 1.7vw, 34px);
}

.watf-audience__corp-illustration {
    border: 1px solid rgba(215, 230, 248, 0.9);
    background:
        linear-gradient(
            180deg,
            #edf6ff 0%,
            #f7fbff 100%
        );
}

/*==================================================================
DESKTOP NHỎ
==================================================================*/

@media only screen and (max-width: 1500px) {
    .watf-audience {
        --wa-content-height: 408px;
    }

    .watf-audience__container {
        padding: 0 38px;
    }

    .watf-audience__grid {
        gap: 18px;
    }

    .watf-audience__panel {
        padding: 20px;
        border-radius: 24px;
    }

    .watf-audience__panel-head {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: 116px;
        gap: 14px;
    }

    .watf-audience__panel-icon {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        border-radius: 18px;
    }

    .watf-audience__panel-icon svg {
        width: 36px;
        height: 36px;
    }

    .watf-audience__panel-meta h3 {
        font-size: clamp(21px, 1.55vw, 28px);
    }

    .watf-audience__panel-meta p {
        font-size: 15px;
    }

    .watf-audience__startup-grid {
        gap: 12px;
    }

    .watf-audience__feature-list {
        gap: 14px;
    }
}

/*==================================================================
TABLET NGANG
==================================================================*/

@media only screen and (max-width: 1199.98px) {
    .watf-audience {
        --wa-content-height: 390px;
        padding: 54px 0 62px;
    }

    .watf-audience__container {
        padding: 0 24px;
    }

    .watf-audience__chart {
        top: 14px;
        right: -50px;
        width: 54vw;
        opacity: 0.66;
    }

    .watf-audience__header {
        max-width: 820px;
        margin-bottom: 30px;
    }

    .watf-audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Card thứ 3 chiếm trọn hàng dưới trên tablet.
     */
    .watf-audience__panel--corp {
        grid-column: 1 / -1;
    }

    .watf-audience__panel-head {
        min-height: 108px;
    }

    .watf-audience__panel--corp .watf-audience__feature-list {
        grid-template-columns: 1.15fr 1fr;
        grid-template-rows: minmax(0, 1fr);
    }
}

/*==================================================================
TABLET DỌC + MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-audience {
        --wa-content-height: auto;
        padding: 42px 0 50px;
    }

    .watf-audience__container {
        padding: 0 14px;
    }

    .watf-audience__chart {
        top: 8px;
        right: -100px;
        width: 88vw;
        opacity: 0.44;
    }

    .watf-audience__donut {
        width: 84px;
        height: 84px;
    }

    .watf-audience__donut::after {
        inset: 22px;
    }

    .watf-audience__header {
        margin-bottom: 24px;
    }

    .watf-audience__header h2 {
        font-size: clamp(28px, 8.8vw, 42px);
        line-height: 1.08;
    }

    .watf-audience__heading-mark {
        width: 21px;
        height: 16px;
        margin-left: 7px;
    }

    .watf-audience__heading-line {
        margin-top: 14px;
    }

    .watf-audience__heading-line .line-main {
        width: 76px;
    }

    .watf-audience__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .watf-audience__panel--corp {
        grid-column: auto;
    }

    .watf-audience__panel {
        padding: 16px;
        border-radius: 20px;
    }

    .watf-audience__panel-head {
        grid-template-columns: 62px minmax(0, 1fr);
        min-height: 0;
        gap: 12px;
        margin-bottom: 16px;
    }

    .watf-audience__panel-icon {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        border-radius: 15px;
    }

    .watf-audience__panel-icon svg {
        width: 30px;
        height: 30px;
    }

    .watf-audience__panel-meta h3 {
        margin-bottom: 6px;
        font-size: 21px;
    }

    .watf-audience__panel-meta p {
        font-size: 14px;
        line-height: 1.4;
    }

    .watf-audience__separator {
        margin-bottom: 16px;
    }

    .watf-audience__startup-grid {
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 150px);
        gap: 10px;
    }

    .watf-audience__feature-list,
    .watf-audience__feature-list--corp,
    .watf-audience__panel--corp .watf-audience__feature-list {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, 168px);
        gap: 12px;
    }

    .watf-audience__startup-item,
    .watf-audience__feature-card,
    .watf-audience__corp-illustration {
        border-radius: 14px;
    }

    .watf-audience__startup-label {
        top: 11px;
        left: 11px;
        font-size: 14px;
    }

    .watf-audience__feature-title,
    .watf-audience__feature-title--large {
        top: 18px;
        left: 16px;
        max-width: calc(100% - 32px);
        font-size: 21px;
    }
}

/*==================================================================
MOBILE NHỎ
==================================================================*/

@media only screen and (max-width: 479.98px) {
    .watf-audience__startup-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(4, 178px);
    }

    .watf-audience__feature-list,
    .watf-audience__feature-list--corp,
    .watf-audience__panel--corp .watf-audience__feature-list {
        grid-template-rows: repeat(2, 178px);
    }
}

.section-human-portrait {
  margin-bottom: 30px;
}

.portrait-item {
  min-height: 64px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: 100%;
}

@media only screen and (min-width: 992px) {
  .wrapper-item {
    max-width: 80%;
  }
}
.wrapper-item:first-child, .wrapper-item:nth-child(4n+1) {
  margin-left: auto;
}
.wrapper-item:first-child .col-item:nth-child(2n+1) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(2n+1) .portrait-item {
  border-radius: 24px 24px 0 24px;
}
.wrapper-item:first-child .col-item:nth-child(2n+2) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(2n+2) .portrait-item {
  border-radius: 24px 24px 24px 0;
}
.wrapper-item:first-child .col-item:nth-child(1) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(1) .portrait-item {
  background-color: #024CEF;
}
.wrapper-item:first-child .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(2) .portrait-item {
  background-color: #FACC16;
}
.wrapper-item:first-child .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(3) .portrait-item {
  background-color: #F64A3E;
  color: #fff;
}
.wrapper-item:first-child .col-item:nth-child(4) .portrait-item, .wrapper-item:nth-child(4n+1) .col-item:nth-child(4) .portrait-item {
  background-color: #010101;
  color: #fff;
}
.wrapper-item:nth-child(2), .wrapper-item:nth-child(4n+2) {
  margin-left: auto;
  margin-right: auto;
}
.wrapper-item:nth-child(2) .col-item:first-child .portrait-item, .wrapper-item:nth-child(2) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:first-child .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(2) .portrait-item {
  border-radius: 24px 24px 0 24px;
}
.wrapper-item:nth-child(2) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(2) .col-item:last-child .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:last-child .portrait-item {
  border-radius: 24px 24px 24px 0;
}
.wrapper-item:nth-child(2) .col-item:nth-child(1) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(1) .portrait-item {
  background-color: #010101;
  color: #fff;
}
.wrapper-item:nth-child(2) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(2) .portrait-item {
  background-color: #F64A3E;
  color: #fff;
}
.wrapper-item:nth-child(2) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(3) .portrait-item {
  background-color: #024CEF;
}
.wrapper-item:nth-child(2) .col-item:nth-child(4) .portrait-item, .wrapper-item:nth-child(4n+2) .col-item:nth-child(4) .portrait-item {
  background-color: #25ED8D;
}
.wrapper-item:nth-child(3), .wrapper-item:nth-child(4n+3) {
  margin-left: auto;
}
.wrapper-item:nth-child(3) .col-item:first-child .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:first-child .portrait-item {
  border-radius: 0 24px 24px 24px;
}
.wrapper-item:nth-child(3) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(2) .portrait-item {
  border-radius: 24px 24px 0 24px;
}
.wrapper-item:nth-child(3) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(3) .col-item:last-child .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:last-child .portrait-item {
  border-radius: 24px 24px 24px 0;
}
.wrapper-item:nth-child(3) .col-item:nth-child(1) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(1) .portrait-item {
  background-color: #FACC16;
}
.wrapper-item:nth-child(3) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(2) .portrait-item {
  background-color: #25ED8D;
}
.wrapper-item:nth-child(3) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(3) .portrait-item {
  background-color: #010101;
  color: #fff;
}
.wrapper-item:nth-child(3) .col-item:nth-child(4) .portrait-item, .wrapper-item:nth-child(4n+3) .col-item:nth-child(4) .portrait-item {
  background-color: #F64A3E;
  color: #fff;
}
.wrapper-item:nth-child(4), .wrapper-item:nth-child(4n+4) {
  margin-left: auto;
  margin-right: auto;
}
.wrapper-item:nth-child(4) .col-item:first-child .portrait-item, .wrapper-item:nth-child(4) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:first-child .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(2) .portrait-item {
  border-radius: 24px 0 24px 24px;
}
.wrapper-item:nth-child(4) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(3) .portrait-item {
  border-radius: 0 24px 24px 24px;
}
.wrapper-item:nth-child(4) .col-item:last-child .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:last-child .portrait-item {
  border-radius: 24px 0 24px 24px;
}
.wrapper-item:nth-child(4) .col-item:nth-child(1) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(1) .portrait-item {
  background-color: #25ED8D;
}
.wrapper-item:nth-child(4) .col-item:nth-child(2) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(2) .portrait-item {
  background-color: #010101;
  color: #fff;
}
.wrapper-item:nth-child(4) .col-item:nth-child(3) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(3) .portrait-item {
  background-color: #F64A3E;
  color: #fff;
}
.wrapper-item:nth-child(4) .col-item:nth-child(4) .portrait-item, .wrapper-item:nth-child(4n+4) .col-item:nth-child(4) .portrait-item {
  background-color: #FACC16;
}
.wrapper-item .col-item {
  margin-bottom: 24px;
}

.section-mission-human {
  background: url(../images/bg/bg-mission-human.png) no-repeat bottom center;
  background-size: cover;
  overflow: hidden;
  margin-bottom: 60px;
  padding-top: 50px;
}

.section-title-mission-human {
  text-align: center;
}
.section-title-mission-human .inner {
  max-width: 65%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1400px) {
  .section-title-mission-human .inner {
    max-width: 75%;
  }
}
.section-title-mission-human .inner::before, .section-title-mission-human .inner::after {
  content: "";
  height: 1px;
  width: 9999px;
  background-color: #000;
  display: block;
  position: absolute;
  top: 50%;
}
.section-title-mission-human .inner::before {
  right: 100%;
  margin-right: 25px;
}
.section-title-mission-human .inner::after {
  left: 100%;
  margin-left: 25px;
}

.content-mission {
  position: relative;
}
.content-mission .img {
  max-width: 60%;
  margin: -5% auto 0;
}

.box-mission-human {
  max-width: 225px;
}
@media only screen and (min-width: 1200px) {
  .box-mission-human {
    position: absolute;
  }
}
@media only screen and (min-width: 1200px) {
  .box-mission-human::after {
    content: "";
    display: block;
    width: 100%;
    height: 91px;
    background: url(../images/bg/bg-box-mission-1.png) no-repeat left bottom;
    margin-top: -10px;
  }
}
.box-mission-human .inner {
  padding: 12px 15px 0;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 10px 10px 0 0;
  font-size: 20px;
  text-align: justify;
}
@media only screen and (min-width: 1200px) {
  .box-mission-human.is-style-1 {
    top: 10%;
    left: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .box-mission-human.is-style-1 {
    top: 15%;
  }
}
.box-mission-human.is-style-2 {
  max-width: 260px;
}
@media only screen and (min-width: 1200px) {
  .box-mission-human.is-style-2 {
    top: 10%;
    right: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .box-mission-human.is-style-2 {
    top: 15%;
  }
}
.box-mission-human.is-style-2 .inner {
  font-size: 18px;
  padding-bottom: 3px;
}
.box-mission-human.is-style-2::after {
  background: url(../images/bg/bg-box-mission-2.png) no-repeat left bottom;
  height: 76px;
  margin-top: 0;
}
.box-mission-human.is-style-3 {
  max-width: 289px;
}
@media only screen and (min-width: 1200px) {
  .box-mission-human.is-style-3 {
    left: 0;
    bottom: 5%;
  }
}
.box-mission-human.is-style-3 .inner {
  font-size: 16px;
  max-width: 155px;
  padding-bottom: 3px;
}
.box-mission-human.is-style-3::after {
  background: url(../images/bg/bg-box-mission-3.png) no-repeat left bottom;
  height: 87px;
  width: 289px;
  margin-top: 0;
}

@media (max-width: 1199px) {
  .list-mission-human .col-6 {
    margin-bottom: 24px;
  }
  .list-mission-human .box-mission-human {
    max-width: unset;
    height: 100%;
  }
  .list-mission-human .box-mission-human .inner {
    border: 1px solid #000;
    border-radius: 10px;
    max-width: unset;
    height: 100%;
    padding: 12px;
    font-size: 18px;
    min-height: 125px;
  }
}

.section-anouncement {
  margin-bottom: 55px;
}
/* css dich vu */
/*==================================================================
SECTION SERVICES - FULL WIDTH GRID
==================================================================*/

.section-services,
.section-services *,
.section-services *::before,
.section-services *::after {
    box-sizing: border-box;
}

.section-services {
    position: relative;

    padding: 56px 0 64px;

    overflow: hidden;

    background-color: #ffffff;
    background-image:
        url("/wp-content/uploads/2026/08/newbg2.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/*==================================================================
CONTAINER
==================================================================*/

.section-services > .container {
    position: relative;
    z-index: 2;
}


/*==================================================================
BỎ BỐ CỤC 2 CỘT CŨ
col-xl-2 + col-xl-10
==================================================================*/

.section-services > .container > .row {
    display: block;

    margin-right: 0;
    margin-left: 0;
}

.section-services > .container > .row > .col-xl-2,
.section-services > .container > .row > .col-xl-10 {
    width: 100%;
    max-width: 100%;

    padding-right: 0;
    padding-left: 0;
}


/*==================================================================
HEADING FULL WIDTH
==================================================================*/

.section-services .job-header {
    display: flex !important;
    align-items: center;

    width: 100%;

    margin: 0 0 28px !important;

    color: #071d5a !important;
}

.section-services .job-header-icon {
    width: 20px;
    height: auto;

    margin-right: 7px;
}

.section-services .job-label {
    margin: 0;

    color: #071d5a;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;

    text-transform: uppercase;
}


/*==================================================================
GRID DỊCH VỤ
5 CỘT DESKTOP
==================================================================*/

.section-services
> .container
> .row
> .col-xl-10
> .row {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 18px;

    margin: 0;
}


/*
 * Bootstrap đang gắn:
 * col-sm-6 col-md-4 mb-4
 *
 * Reset để Grid CSS kiểm soát hoàn toàn.
 */
.section-services
> .container
> .row
> .col-xl-10
> .row
> [class*="col-"] {
    width: auto;
    max-width: none;

    margin: 0 !important;

    padding: 0 !important;
}


/*==================================================================
CARD
==================================================================*/

.section-services .service-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 100%;

    overflow: hidden;

    border: 1px solid #e2e8f1;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 6px 18px rgba(31, 69, 126, 0.055);

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.section-services .service-item:hover {
    border-color: rgba(2, 76, 239, 0.22);

    box-shadow:
        0 10px 24px rgba(31, 69, 126, 0.09);
}


/*==================================================================
IMAGE
==================================================================*/

.section-services .service-item-img {
    width: 100%;
}

.section-services .service-item-img > a {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 0;
}

.section-services .service-item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.28s ease;
}

.section-services .service-item-img a:hover img {
    transform: scale(1.045);
}


/*==================================================================
CONTENT
==================================================================*/

.section-services .service-item-pad {
    padding: 13px 14px;
}

.section-services .service-item-content-top {
    flex: 1 1 auto;
}

.section-services .service-item-title {
    margin:
        0
        0
        7px;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;

    text-transform: uppercase;
}

.section-services .service-item-title a {
    color: #0757ed;
    text-decoration: none;
}

.section-services .service-item-title a:hover {
    color: #024cef;
}


/*==================================================================
DESCRIPTION
==================================================================*/

.section-services .service-expert {
    margin: 0;

    color: #344054;

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.48;

    text-align: left;
}


/*==================================================================
BOTTOM / XEM NGAY
==================================================================*/

.section-services .service-item-content-bottom {
    padding-top: 0;
}

.section-services .activities-more {
    margin: 0;
}

.section-services .activities-more-link {
    display: inline-flex;
    align-items: center;

    color: #0757ed;

    text-decoration: none;
}

.section-services .activities-more-text {
    display: inline-block;

    margin: 0;

    color: #0757ed;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.section-services .activities-more-link br {
    display: none;
}

/*
 * Ảnh mũi tên cũ khá dài.
 * Thu nhỏ để phù hợp card 5 cột.
 */
.section-services .activities-more-icon {
    width: 42px;

    margin-left: 7px;
}


/*==================================================================
DESKTOP NHỎ / LAPTOP
4 CỘT
==================================================================*/

@media only screen and (max-width: 1199.98px) {

    .section-services
    > .container
    > .row
    > .col-xl-10
    > .row {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 16px;
    }
}


/*==================================================================
TABLET
3 CỘT
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .section-services {
        padding:
            46px
            0
            52px;
    }

    .section-services .job-header {
        margin-bottom: 23px !important;
    }

    .section-services
    > .container
    > .row
    > .col-xl-10
    > .row {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .section-services .service-item-title {
        font-size: 13.5px;
    }
}


/*==================================================================
MOBILE
2 CỘT
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .section-services {
        padding:
            38px
            0
            44px;

        background-position: center top;
    }

    .section-services .job-label {
        font-size: 21px;
    }

    .section-services
    > .container
    > .row
    > .col-xl-10
    > .row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .section-services .service-item {
        border-radius: 10px;
    }

    .section-services .service-item-pad {
        padding:
            11px
            11px;
    }

    .section-services .service-item-title {
        font-size: 12.5px;
        line-height: 1.3;
    }

    .section-services .service-expert {
        max-height: none;

        overflow: visible;

        font-size: 11.5px;
        line-height: 1.45;
    }

    .section-services .service-item .activities-more .activities-more-text {
        min-width: 0;

        padding: 0;

        border-radius: 0;

        background: transparent;

        color: #0757ed;

        font-size: 11.5px;
        font-weight: 700;
    }

    .section-services .service-item .activities-more .activities-more-icon {
        display: inline-block;

        width: 32px;
    }
}


/*==================================================================
MOBILE NHỎ
1 CỘT
==================================================================*/

@media only screen and (max-width: 479.98px) {

    .section-services
    > .container
    > .row
    > .col-xl-10
    > .row {
        grid-template-columns: 1fr;
    }

    .section-services .service-item {
        max-width: 100%;
    }

    .section-services .service-item-title {
        font-size: 14px;
    }

    .section-services .service-expert {
        font-size: 13px;
    }
}









/*==================================================================
SECTION: GÓI HOẠCH ĐỊNH CHIẾN LƯỢC
Không can thiệp font-family
==================================================================*/

.section-pricing,
.section-pricing *,
.section-pricing *::before,
.section-pricing *::after {
    box-sizing: border-box;
}

.section-pricing {
    --pricing-navy: #070d3e;
    --pricing-blue: #0754f2;
    --pricing-blue-dark: #063bc1;
    --pricing-green: #079c70;
    --pricing-green-hover: #07875f;
    --pricing-text: #101638;
    --pricing-muted: #252c50;
    --pricing-border: #d8dde8;
    --pricing-divider: #d0d6e0;
    --pricing-gold-left: #efb52d;
    --pricing-gold-center: #ffe493;
    --pricing-gold-right: #efb52d;

    position: relative;
    overflow: hidden;
    padding: 28px 0 72px;

    background-color: #ffffff;
    background-image: url("/wp-content/uploads/2026/08/newbg3.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*==================================================================
HOẠ TIẾT GÓC PHẢI
==================================================================*/

.section-pricing::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -52px;
    right: -46px;

    width: 300px;
    height: 300px;

    pointer-events: none;
    opacity: 0.33;

    background-image:
        radial-gradient(
            circle,
            rgba(48, 100, 239, 0.7) 2px,
            transparent 2.8px
        );

    background-size: 14px 14px;

    -webkit-mask-image:
        radial-gradient(
            circle at 72% 28%,
            #000 0,
            rgba(0, 0, 0, 0.88) 34%,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            circle at 72% 28%,
            #000 0,
            rgba(0, 0, 0, 0.88) 34%,
            transparent 73%
        );
}

/*==================================================================
HOẠ TIẾT GÓC TRÁI DƯỚI
==================================================================*/

.section-pricing::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -90px;
    left: -66px;

    width: 310px;
    height: 310px;

    pointer-events: none;
    opacity: 0.23;

    background-image:
        radial-gradient(
            circle,
            rgba(9, 180, 127, 0.75) 2px,
            transparent 2.8px
        );

    background-size: 14px 14px;

    -webkit-mask-image:
        radial-gradient(
            circle at 27% 72%,
            #000 0,
            rgba(0, 0, 0, 0.87) 34%,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            circle at 27% 72%,
            #000 0,
            rgba(0, 0, 0, 0.87) 34%,
            transparent 73%
        );
}

/*==================================================================
CONTAINER
==================================================================*/

.section-pricing > .container {
    position: relative;
    z-index: 2;

    width: min(100%, 1460px);
    max-width: 1460px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 28px;
    padding-left: 28px;
}

/*==================================================================
TIÊU ĐỀ SECTION
==================================================================*/

.pricing-title {
    position: relative;

    margin: 0;
    padding-bottom: 43px;

    color: var(--pricing-navy);

    font-size: clamp(40px, 3.7vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;

    text-align: center;
    text-transform: uppercase;
}

.pricing-title::after {
    content: "";
    position: absolute;
    bottom: 11px;
    left: 50%;

    width: 274px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0,
            #c4cbd9 12%,
            #c4cbd9 43%,
            transparent 43%,
            transparent 57%,
            #c4cbd9 57%,
            #c4cbd9 88%,
            transparent 100%
        );

    transform: translateX(-50%);
}

.pricing-title::before {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 7px;
    left: 50%;

    width: 9px;
    height: 9px;

    border: 2px solid #9da9cc;
    background: #ffffff;

    transform:
        translateX(-50%)
        rotate(45deg);
}

/*==================================================================
GRID 3 GÓI
==================================================================*/

.pricing-packages-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;

    gap: 35px;

    margin: 39px 0 0;
}

.pricing-col {
    display: flex;

    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;
    padding: 0;
}

/*==================================================================
CARD BASIC + PREMIUM
==================================================================*/

.pricing-package {
    position: relative;

    display: flex;

    width: 100%;
    min-width: 0;
    height: 706px;

    overflow: visible;

    padding: 0;

    border: 1px solid var(--pricing-border);
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 2px 5px rgba(18, 33, 70, 0.025);
}

/*==================================================================
CARD STANDARD
==================================================================*/

.pricing-package.standard {
    position: relative;

    height: 738px;

    /*
     * Phải là visible để nhãn Đề xuất
     * có thể nhô khỏi card mà không bị cắt.
     */
    overflow: visible;

    border: 1px solid #2c76ff;
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #085df8 0%,
            #0750e9 49%,
            #063bc1 100%
        );

    box-shadow:
        0 13px 26px rgba(1, 63, 204, 0.24),
        0 3px 9px rgba(1, 63, 204, 0.16);
}

/* Chấm góc trái trên Standard */

.pricing-package.standard::before {
    content: "";
    position: absolute;
    z-index: 0;

    top: 1px;
    left: 1px;

    width: 165px;
    height: 135px;

    pointer-events: none;
    opacity: 0.2;

    border-radius: 12px 0 0 0;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.72) 1.4px,
            transparent 1.8px
        );

    background-size: 10px 10px;

    -webkit-mask-image:
        linear-gradient(
            135deg,
            #000 0%,
            rgba(0, 0, 0, 0.65) 50%,
            transparent 90%
        );

    mask-image:
        linear-gradient(
            135deg,
            #000 0%,
            rgba(0, 0, 0, 0.65) 50%,
            transparent 90%
        );
}

/*==================================================================
NỘI DUNG CARD
==================================================================*/

.pricing-package-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    /*
     * Ghi đè height inline 770px trong PHP Basic cũ.
     */
    height: 100% !important;
    min-height: 0;

    overflow: visible;

    padding: 82px 35px 27px;

    border-radius: inherit;
    background: transparent;

    color: var(--pricing-text);
}

.pricing-package.standard .pricing-package-content {
    height: 100% !important;
    overflow: visible;

    padding: 122px 37px 39px;

    color: #ffffff;
}

/*==================================================================
HEADER GÓI
QUAN TRỌNG: KHÔNG ĐỂ POSITION RELATIVE
==================================================================*/

.section-pricing .pricing-package-header {
    /*
     * Icon phải lấy vị trí theo pricing-package-content,
     * không lấy vị trí theo header.
     */
    position: static !important;

    display: block;
    flex: 0 0 auto;

    min-height: 84px;

    margin: 0;
    padding: 0;

    text-align: center;
}

/*==================================================================
ICON GÓI
==================================================================*/

.section-pricing .pricing-package-icon {
    position: absolute;
    z-index: 5;

    top: -9px;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    margin: 0;
    padding: 0;

    border: 2px solid rgba(7, 156, 112, 0.22);
    border-radius: 50%;

    background: #ffffff;
    color: var(--pricing-green);

    transform: translateX(-50%);
}

.section-pricing .pricing-package-icon svg {
    display: block;

    width: 41px;
    height: 41px;

    margin: 0;
    padding: 0;

    overflow: visible;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon Standard */

.section-pricing .pricing-package.standard .pricing-package-icon {
    top: 29px;

    width: 79px;
    height: 79px;

    border: 2px solid rgba(255, 255, 255, 0.97);

    background: transparent;
    color: #ffffff;
}

/*==================================================================
NHÃN ĐỀ XUẤT
==================================================================*/

.section-pricing .pricing-package-recommended {
    position: absolute;
    z-index: 20;

    top: -5px;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 145px;
    height: 29px;

    margin: 0;
    padding: 0 18px 1px;

    border: 0;
    border-radius: 0;

    background:
        linear-gradient(
            90deg,
            var(--pricing-gold-left) 0%,
            var(--pricing-gold-center) 50%,
            var(--pricing-gold-right) 100%
        );

    color: #101638;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    text-align: center;
    white-space: nowrap;

    clip-path:
        polygon(
            0 0,
            100% 0,
            88% 100%,
            12% 100%
        );

    transform: translateX(-50%);
}

/*
 * Ẩn label cũ trong trường hợp PHP Standard
 * vẫn còn dùng thẻ label.
 */
.section-pricing .pricing-package-header > label {
    display: none !important;
}

/*==================================================================
TÊN GÓI
==================================================================*/

.section-pricing .pricing-package-header h4 {
    display: block;

    margin: 0 0 9px;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: var(--pricing-green);

    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
    text-transform: uppercase;
}

.section-pricing .pricing-package.standard .pricing-package-header h4 {
    color: #ffffff;
    font-size: 24px;
}

/*==================================================================
MÔ TẢ GÓI
==================================================================*/

.section-pricing .pricing-package-header-meta-text {
    display: block;

    width: 100%;
    max-width: 360px;

    margin: 0 auto;
    padding: 0;

    color: var(--pricing-muted);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;

    text-align: center;
}

.section-pricing
.pricing-package.standard
.pricing-package-header-meta-text {
    color: rgba(255, 255, 255, 0.97);
}

/*==================================================================
ĐƯỜNG PHÂN CÁCH
==================================================================*/

.section-pricing .pricing-package-divider {
    display: block;
    flex: 0 0 auto;

    width: 100%;
    height: 1px;

    margin: 20px 0;

    background: var(--pricing-divider);
    opacity: 1;
}

.section-pricing
.pricing-package.standard
.pricing-package-divider {
    background: rgba(255, 255, 255, 0.34);
}

/*==================================================================
GIÁ
==================================================================*/

.section-pricing .pricing-package-price {
    display: block;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    color: var(--pricing-navy);

    font-size: clamp(39px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.025em;

    text-align: center;
    white-space: nowrap;
}

.section-pricing
.pricing-package.standard
.pricing-package-price {
    color: #ffffff;
}

/*==================================================================
DANH SÁCH QUYỀN LỢI
==================================================================*/

.section-pricing .pricing-package-details {
    display: flex;
    flex: 1 1 auto;

    min-height: 0;
    padding-top: 7px;
}

.section-pricing .pricing-package-details ul {
    position: static;

    display: flex;
    flex-direction: column;

    gap: 13px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.section-pricing .pricing-package-details li {
    position: relative;

    display: block;

    min-height: 20px;

    margin: 0;
    padding: 0 0 0 30px;

    color: var(--pricing-text);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.42;
}

/* Check xanh */

.section-pricing .pricing-package-details li::after {
    content: "✓";

    position: absolute;
    top: 1px;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border: 2px solid var(--pricing-green);
    border-radius: 50%;

    background: transparent;
    color: var(--pricing-green);

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* Dấu X đỏ */

.section-pricing .pricing-package-details li.not::after {
    content: "×";

    border-color: #ff3d45;

    color: #ff3d45;
    font-size: 14px;
}

/* Danh sách Standard */

.section-pricing
.pricing-package.standard
.pricing-package-details li {
    color: #ffffff;
}

.section-pricing
.pricing-package.standard
.pricing-package-details li::after {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--pricing-blue);
}

/*==================================================================
FORM
==================================================================*/

.section-pricing .pricing-package-select {
    display: block;
    flex: 0 0 auto;

    width: 100%;

    margin-top: auto;
    padding: 0;
}

.section-pricing .pricing-package-form,
.section-pricing .pricing-package-select form {
    display: block;

    width: 100%;

    /*
     * Ghi đè margin inline 20px trong PHP cũ.
     */
    margin: 0 !important;
    padding: 0;
}

/*==================================================================
NÚT ĐĂNG KÝ
==================================================================*/

.section-pricing .pricing-package-button,
.section-pricing .pricing-package-select .button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;
    height: 50px;

    margin: 0;
    padding: 10px 18px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #10ab7b 0%,
            #07966b 100%
        );

    box-shadow: none;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.section-pricing .pricing-package-button:hover,
.section-pricing .pricing-package-button:focus,
.section-pricing .pricing-package-select .button:hover,
.section-pricing .pricing-package-select .button:focus {
    background:
        linear-gradient(
            180deg,
            #0c996e 0%,
            #087e5e 100%
        );

    color: #ffffff;

    transform: translateY(-1px);
}

/* Nút Standard */

.section-pricing
.pricing-package.standard
.pricing-package-button,
.section-pricing
.pricing-package.standard
.pricing-package-select
.button {
    background:
        linear-gradient(
            90deg,
            var(--pricing-gold-left) 0%,
            var(--pricing-gold-center) 50%,
            var(--pricing-gold-right) 100%
        );

    color: var(--pricing-navy);
}

.section-pricing
.pricing-package.standard
.pricing-package-button:hover,
.section-pricing
.pricing-package.standard
.pricing-package-button:focus,
.section-pricing
.pricing-package.standard
.pricing-package-select
.button:hover,
.section-pricing
.pricing-package.standard
.pricing-package-select
.button:focus {
    background:
        linear-gradient(
            90deg,
            #e5a91c 0%,
            #ffdb75 50%,
            #e5a91c 100%
        );

    color: var(--pricing-navy);
}

/*==================================================================
DESKTOP VỪA
==================================================================*/

@media only screen and (max-width: 1399.98px) {
    .section-pricing > .container {
        max-width: 1240px;
    }

    .pricing-packages-container {
        gap: 26px;
    }

    .pricing-package {
        height: 700px;
    }

    .pricing-package.standard {
        height: 732px;
    }

    .pricing-package-content {
        padding-right: 28px;
        padding-left: 28px;
    }

    .pricing-package.standard .pricing-package-content {
        padding-right: 30px;
        padding-left: 30px;
    }

    .section-pricing .pricing-package-price {
        font-size: 39px;
    }

    .section-pricing .pricing-package-details li {
        font-size: 14px;
    }
}

/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 1099.98px) {
    .section-pricing {
        padding-top: 48px;
    }

    .section-pricing > .container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .pricing-packages-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;

        gap: 44px 24px;

        margin-top: 52px;
    }

    .pricing-package,
    .pricing-package.standard {
        height: 720px;
    }

    .pricing-col:nth-child(3) {
        grid-column: 1 / -1;

        width: min(100%, 560px);

        justify-self: center;
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .section-pricing {
        padding: 42px 0 52px;
    }

    .section-pricing > .container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .pricing-title {
        padding-bottom: 36px;

        font-size: clamp(28px, 8.6vw, 40px);
    }

    .pricing-title::after {
        bottom: 9px;
        width: 220px;
    }

    .pricing-title::before {
        bottom: 5px;
    }

    .pricing-packages-container {
        grid-template-columns: minmax(0, 1fr);

        gap: 44px;

        margin-top: 42px;
    }

    .pricing-col:nth-child(3) {
        grid-column: auto;
        width: 100%;
    }

    .pricing-package,
    .pricing-package.standard {
        height: auto;
        min-height: 690px;
    }

    .pricing-package-content {
        height: auto !important;

        padding-right: 20px;
        padding-left: 20px;
    }

    .pricing-package.standard .pricing-package-content {
        height: auto !important;

        padding-right: 20px;
        padding-left: 20px;
    }

    .section-pricing .pricing-package-header-meta-text br {
        display: none;
    }

    .section-pricing .pricing-package-price {
        font-size: clamp(34px, 10vw, 42px);
    }

    .section-pricing .pricing-package-details li {
        font-size: 14px;
    }

    .section-pricing .pricing-package-button,
    .section-pricing .pricing-package-select .button {
        font-size: 18px;
    }
}























/*------------------------------------------------------------------
[Introduction]
*/
/** section-introduction */
.section-introduction {
  margin-bottom: 25px;
  margin-top: 25px;
}
@media only screen and (min-width: 768px) {
  .section-introduction {
    margin-bottom: 40px;
    margin-top: 40px;
  }
}

.introduction-img {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .introduction-img {
    margin-bottom: 40px;
  }
}
.introduction-img img {
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .introduction-img img {
    border-radius: 20px;
  }
}

.introduction-text {
  text-align: justify;
}

.bg-grey {
  background-color: #EFEFEF;
}

/** section-about */
.section-about {
  padding-top: 50px;
  padding-bottom: 56px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .section-about {
    margin-bottom: 0px;
  }
}

.about-corner-background {
  position: absolute;
  bottom: 0;
  right: -2.39583%;
  width: 30%;
  height: auto;
  display: block;
}

.section-about-top {
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) {
  .section-about-top {
    margin-bottom: 50px;
  }
}

.list-group-anpha li {
  display: flex;
  flex-wrap: wrap;
}
.list-group-anpha li:not(:last-child) {
  margin-bottom: 8px;
}

.list-group-anpha-small-text {
  display: inline-block;
}
.list-group-anpha-small-text::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 100%;
  margin-right: 4px;
  vertical-align: middle;
}

.list-group-anpha-big-text {
  font-weight: 700;
  text-transform: uppercase;
  color: #024CEF;
  font-size: 18px;
  display: inline-block;
  margin-left: 4px;
}
@media only screen and (min-width: 768px) {
  .list-group-anpha-big-text {
    font-weight: 800;
  }
}

@media only screen and (min-width: 1200px) {
  .figure-about-img img {
    width: 77.60417%;
  }
}

.meaning {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  .meaning {
    width: 1024px;
  }
  .mean-logo-block {
    height: 1px;
  }
}

.meaning-item {
  position: relative;
  padding-left: 12px;
}
.meaning-item::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: #00E88F;
  position: absolute;
  top: 6px;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .meaning-item::before {
    width: 8px;
    height: 8px;
  }
}

.meaning-logo {
  text-align: center;
  width: 50%;
  height: auto;
  margin-bottom: 6px;
}
@media only screen and (min-width: 768px) {
  .meaning-logo {
    width: 38%;
  }
}
@media only screen and (min-width: 1200px) {
  .meaning-logo {
    margin-bottom: 24px;
  }
}
.meaning-logo .meaning-wrap {
  position: absolute;
  top: 10px;
  left: 20%;
}
@media only screen and (min-width: 768px) {
  .meaning-logo .meaning-wrap {
    width: 40%;
  }
}
@media only screen and (min-width: 992px) {
  .meaning-logo .meaning-wrap {
    width: 46%;
    top: 26px;
  }
}

.meaning-item-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: #024CEF;
  margin-bottom: 4px;
}

@media only screen and (min-width: 992px) {
  .meaning-item-meta-text {
    max-width: 200px;
  }
}

.meaning-text {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .meaning-text {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .meaning-text {
    max-width: 50%;
  }
}
.meaning-text::before {
  content: "";
  display: block;
  width: 82%;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  background-color: #BABABA;
  margin-bottom: 16px;
}

/** section-mission2 */
@media (max-width: 767.98px) {
  .mission2 {
    background-image: url("../images/uploads/introduction/mission2-img.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 50px;
  }
  .mission2::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.mission2-quote {
  padding-left: 30px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  max-width: 490px;
}
@media only screen and (min-width: 768px) {
  .mission2-quote {
    padding-left: 40px;
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  .mission2-quote {
    font-size: 32px;
  }
}
.mission2-quote::before {
  content: "";
  width: 18px;
  height: 14px;
  background-image: url("../images/icons/quote-icon.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 4px;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .mission2-quote::before {
    top: 6px;
    width: 22px;
    height: 18px;
  }
}

.mission2-img {
  position: relative;
}
.mission2-img::before {
  content: "";
  display: block;
  width: 88.4375%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 7.08333%;
  background: linear-gradient(90deg, #FFFFFF 41.92%, rgba(255, 255, 255, 0.91) 46.81%, rgba(255, 255, 255, 0.68) 56.59%, rgba(255, 255, 255, 0.32) 70.45%, rgba(255, 255, 255, 0) 82.27%);
}
.mission2-img img {
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: 70.9375%;
}

.mission2-content {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .mission2-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.page-service {
  margin-top: -20px;
  font-weight: 300;
}

.section-banner-service {
  background-color: #25ED8D;
  overflow: hidden;
}
.section-banner-service .container {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .section-banner-service .container {
    min-height: 387px;
    display: flex;
    align-items: center;
  }
}
.section-banner-service.bg-primary-color-1 {
  background-image: url(../images/bg/bg-banner-seo.png);
  background-repeat: no-repeat;
  color: #fff;
}
.section-banner-service.bg-primary-color-1 .title-banner-service:before {
  background-color: #fff;
}
.section-banner-service.bg-primary-color-1 .btn-primary-color {
  border-color: #fff;
  background-color: #fff;
  color: #024CEF;
}
.section-banner-service.bg-banner-grey {
  background-image: url(../images/bg/bg-fanpage.png);
  background-repeat: no-repeat;
}
.section-banner-service.bg-banner-caro {
  background-image: url(../images/bg/bg-banner-page-service6.png);
  background-repeat: repeat;
}

@media only screen and (min-width: 768px) {
  .banner-service-img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    max-width: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}
@media only screen and (min-width: 992px) {
  .banner-service-img img {
    height: 100%;
    max-width: unset;
  }
}

.banner-service-text {
  padding: 30px 0;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .banner-service-text {
    max-width: 300px;
  }
}
@media only screen and (min-width: 768px) {
  .banner-service-text.max-355 {
    max-width: 355px;
  }
}
.banner-service-text .btn {
  font-weight: 900;
}

@media only screen and (min-width: 992px) {
  .banner18 .banner-service-img {
    max-width: 75%;
    margin-bottom: -30px;
  }
}

.title-banner-service {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
}
@media only screen and (min-width: 768px) {
  .title-banner-service {
    font-size: 24px;
  }
}
.title-banner-service:before {
  content: "";
  display: block;
  width: 30px;
  height: 5px;
  background-color: #3149E6;
  margin-bottom: 8px;
}
.title-banner-service span {
  font-size: 34px;
}
@media only screen and (min-width: 768px) {
  .title-banner-service span {
    font-size: 38px;
  }
}
.title-banner-service.is-xl {
  font-size: 32px;
}
@media only screen and (min-width: 768px) {
  .title-banner-service.is-xl {
    font-size: 42px;
  }
}
.title-banner-service.is-xl span {
  font-size: 56px;
}
@media only screen and (min-width: 768px) {
  .title-banner-service.is-xl span {
    font-size: 66px;
  }
}

.expert-banner-service {
  margin-bottom: 14px;
}

@media only screen and (min-width: 992px) {
  .wrap-text {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.section-what-is-mc .section-title {
  color: #000;
  margin-top: 45px;
}
@media only screen and (min-width: 768px) {
  .section-what-is-mc .section-title {
    margin-top: 60px;
  }
}

.section-imc-need {
  padding-top: 30px;
  padding-bottom: 30px;
}

.box-imc-need {
  margin-bottom: 30px;
}
.box-imc-need h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.box-imc-need ul {
  margin-bottom: 0;
  padding-left: 17px;
}
.box-imc-need ul li:not(:last-child) {
  margin-bottom: 8px;
}
@media only screen and (min-width: 768px) {
  .box-imc-need ul li:not(:last-child) {
    margin-bottom: 16px;
  }
}

.section-why-choose-watf .short-text {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) {
  .section-why-choose-watf .short-text {
    font-size: 37px;
    max-width: 655px;
    margin-bottom: 55px;
  }
}
.section-why-choose-watf .img-watf img {
  display: block;
  margin: 0 auto;
}

.section-title-cmd .title {
  font-weight: 900;
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .section-title-cmd .title {
    font-size: 24px;
  }
}
.section-title-cmd .title::after {
  display: none;
}
.section-title-cmd .title span {
  color: #024CEF;
  font-size: 26px;
  display: block;
}
@media only screen and (min-width: 768px) {
  .section-title-cmd .title span {
    font-size: 34px;
  }
}
.section-title-cmd .title span:after {
  content: "";
  display: inline-block;
  background-color: #024CEF;
  width: 22px;
  height: 8px;
  margin-left: 8px;
}

.section-contact-to-advice h3 {
  font-size: 20px;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .section-contact-to-advice h3 {
    font-size: 27px;
  }
}

.section-mb {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .section-mb {
    margin-bottom: 60px;
  }
}

.section-pad {
  padding-top: 45px;
  padding-bottom: 45px;
}
@media only screen and (min-width: 768px) {
  .section-pad {
    /* padding-top: 60px; */
    padding-bottom: 60px;
  }
}

.section-pt {
  padding-top: 30px;
}
@media only screen and (min-width: 768px) {
  .section-pt {
    padding-top: 60px;
  }
}

.bg-grey-3 {
  background-color: #f2f2f2;
}

.bg-grey-7 {
  background-color: #FEF3E2;
}

.play-video a {
  display: block;
  position: relative;
}
.play-video a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, black 100%);
}
.play-video a::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 36px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 992px) {
  .play-video a::after {
    border-top-width: 40px;
    border-bottom-width: 40px;
    border-left-width: 80px;
  }
}

.section-important-web {
  background-color: #024CEF;
  color: #fff;
}
.section-important-web .title::after {
  background-color: #fff;
}
.section-important-web .col-lg-3:last-child .reasion-content {
  border-right: none;
}
@media only screen and (min-width: 576px) {
  .section-important-web .col-lg-3:nth-child(2) .reasion-content {
    border-right: none;
  }
}
@media only screen and (min-width: 992px) {
  .section-important-web .col-lg-3:nth-child(2) .reasion-content {
    border-right: 1px solid #fff;
  }
}
@media only screen and (min-width: 576px) {
  .section-important-web .col-lg-3:nth-child(3) .reasion-content, .section-important-web .col-lg-3:nth-child(4) .reasion-content {
    padding-top: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .section-important-web .col-lg-3:nth-child(3) .reasion-content, .section-important-web .col-lg-3:nth-child(4) .reasion-content {
    padding-top: 0;
  }
}
@media only screen and (min-width: 576px) {
  .section-important-web .col-lg-3:first-child .reasion-content {
    padding-left: 0;
  }
}

.reasion-item {
  margin-bottom: 24px;
}
@media only screen and (min-width: 576px) {
  .reasion-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    margin-bottom: 0;
  }
}

.reasion-content {
  font-size: 18px;
  padding-bottom: 20px;
  font-weight: 300;
}
@media only screen and (min-width: 576px) {
  .reasion-content {
    padding-left: 25px;
    padding-right: 25px;
    border-right: 1px solid #fff;
    flex: 1 1 auto;
  }
}
@media only screen and (min-width: 768px) {
  .reasion-content {
    font-size: 20px;
    padding-bottom: 30px;
  }
}

.reasion-title {
  font-size: 18px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .reasion-title {
    font-size: 20px;
    margin-bottom: 18px;
  }
}

.reasion-expert {
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  .section-seo-ads .section-title {
    margin-bottom: 40px;
  }
}

.block-text {
  font-size: 17px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .block-text {
    max-width: 340px;
  }
}
.block-text h3 {
  color: #000;
}
.block-text .desc {
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  .img-seo-ads {
    padding-top: 30px;
  }
}
.img-seo-ads img {
  display: block;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .section-text {
    background-image: url(../images/bg/bg-section-text.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 420px;
  }
}
.section-text.bg-grey-3 {
  background-image: none;
}
.section-text.bg-grey-3 .title::after {
  display: none;
}

.list-text {
  font-size: 17px;
  font-weight: 300;
}
.list-text h3 {
  font-weight: 700;
  font-size: 17px;
  color: #000;
  margin-bottom: 15px;
}
.list-text p:last-child {
  margin-bottom: 0;
}
.list-text li:not(:last-child) {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #000;
}

.section-about-team {
  background-color: #25ED8D;
  background-image: url(../images/bg/bg-about-team.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}
.section-about-team.is-bg-img {
  background-color: #EEEEEE;
  background-image: url(../images/bg/bg-about-team-2.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 80%;
  min-height: 385px;
}
@media (max-width: 767.98px) {
  .section-about-team.is-bg-img {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 576px) {
  .section-about-team.is-bg-img .text-about-team {
    max-width: 350px;
  }
}
.section-about-team.bg-primary-color-1 {
  background-image: url(../images/bg/bg-section-about-team.png);
  background-position: bottom center;
  background-size: 100% auto;
}
@media only screen and (min-width: 576px) {
  .section-about-team.bg-primary-color-1 {
    background-size: 497px auto;
  }
}
.section-about-team .row {
  align-items: center;
}

.text-about-team {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  position: relative;
  padding-left: 40px;
  padding-bottom: 25px;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .text-about-team {
    font-size: 25px;
    padding-left: 54px;
  }
}
.text-about-team::before {
  content: "";
  width: 24px;
  height: 20px;
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  background: url(../images/icons/ico-quote.png) no-repeat;
  background-size: 100% 100%;
}
@media only screen and (min-width: 768px) {
  .text-about-team::before {
    width: 34px;
    height: 28px;
    top: 10px;
  }
}
.text-about-team::after {
  content: "";
  width: 32px;
  height: 6px;
  bottom: 0;
  left: 54px;
  position: absolute;
  background-color: #000;
}

.content-reasion-choose-watf {
  background-color: #f2f2f2;
  border-radius: 10px;
  padding: 20px 20px 0;
}
@media only screen and (min-width: 768px) {
  .content-reasion-choose-watf {
    padding: 40px 20px 16px;
  }
}

.block-reasion {
  font-size: 17px;
  padding-bottom: 20px;
  position: relative;
}
@media only screen and (min-width: 576px) {
  .block-reasion {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .block-reasion {
    padding-bottom: 50px;
  }
}
.block-reasion::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 6px;
  background-color: #25ED8D;
  left: 0;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .block-reasion::after {
    width: 50px;
    height: 8px;
  }
}

.block-reasion-title {
  font-weight: 700;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .block-reasion-title {
    margin-bottom: 20px;
  }
}

.block-reasion-desc {
  position: relative;
  text-align: justify;
}
@media only screen and (min-width: 576px) {
  .block-reasion-desc {
    flex: 1 1 auto;
  }
}
@media only screen and (min-width: 992px) {
  .block-reasion-desc {
    padding-bottom: 50px;
  }
}

.block-reasion-img {
  height: 80px;
  text-align: center;
  margin-bottom: 18px;
}
@media only screen and (min-width: 768px) {
  .block-reasion-img {
    margin-bottom: 36px;
    height: 120px;
  }
}
@media only screen and (min-width: 992px) {
  .block-reasion-img {
    height: 160px;
  }
}
.block-reasion-img img {
  height: inherit;
  vertical-align: middle;
}

.img-reasion {
  background-color: #f2f2f2;
  border-radius: 10px;
  min-height: 100%;
  padding: 100% 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.img-reasion img {
  max-width: 90%;
  display: block;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.creamy-cloud .img-reasion {
  background-color: #FEF3E2;
}
.snowflake .img-reasion {
  background-color: #262626;
}
.primary-color-1 .img-reasion {
  background-color: #024CEF;
}

.section-why-choose-service {
  background-image: url(../images/bg/bg-why-choose-service.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 454px auto;
}
.section-why-choose-service .section-title {
  position: relative;
}
.section-why-choose-service .section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 21px;
  background: url(../images/bg/group-line.png) no-repeat top right;
  background-size: 56px auto;
  position: absolute;
  top: -20px;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .section-why-choose-service .section-title::after {
    top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .section-why-choose-service .section-title {
    margin-bottom: 50px;
  }
}
.section-why-choose-service .title::after {
  background-color: #fff;
}
.section-why-choose-service .row {
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .section-why-choose-service .row {
    margin-left: -22px;
    margin-right: -22px;
  }
  .section-why-choose-service .row > * {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .section-why-choose-service .row .col-md-4 {
    border-top: 1px solid #fff;
    padding-top: 30px;
  }
  .section-why-choose-service .row .col-md-4:nth-child(1), .section-why-choose-service .row .col-md-4:nth-child(2), .section-why-choose-service .row .col-md-4:nth-child(3) {
    border-top-width: 0;
  }
}
.section-why-choose-service .block-reasion-title {
  font-size: 18px;
  line-height: 22px;
}
@media only screen and (min-width: 768px) {
  .section-why-choose-service .block-reasion-title {
    min-height: 44px;
  }
}
@media only screen and (min-width: 768px) {
  .section-why-choose-service .block-reasion-desc {
    line-height: 24px;
    min-height: 116px;
  }
}

.block-reasion-desc2 {
  text-align: center;
}

.bg-primary-color-1 {
  background-color: #024CEF !important;
}

.bg-primary-color-2 {
  background-color: #00E88F;
}

.section-seo-keyword h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .section-seo-keyword h2 {
    font-size: 40px;
    margin-bottom: 50px;
  }
}

.seo-item {
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px 25px;
}
@media only screen and (min-width: 768px) {
  .seo-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 100%;
  }
}
.seo-item ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 20px;
}
.seo-item ul li {
  position: relative;
  padding-left: 16px;
}
.seo-item ul li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 7px;
  left: 0;
  opacity: 0.8;
}

.seo-item-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .seo-item-title {
    margin-bottom: 20px;
  }
}

.seo-item-desc {
  font-size: 17px;
  margin-bottom: 10px;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .seo-item-desc {
    margin-bottom: 20px;
  }
}

.section-seo-general {
  font-size: 17px;
}

.seo-general-feature {
  color: #fff;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  margin-top: 37px;
}
@media only screen and (min-width: 768px) {
  .seo-general-feature {
    padding: 44px 378px 44px 40px;
  }
}

.list-feature-seo {
  display: flex;
  flex-wrap: wrap;
}
.list-feature-seo li {
  width: 100%;
  margin-bottom: 8px;
}
@media only screen and (min-width: 768px) {
  .list-feature-seo li {
    margin-bottom: 14px;
  }
}
@media only screen and (min-width: 992px) {
  .list-feature-seo li {
    width: calc(50% - 30px);
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 32px;
  }
  .list-feature-seo li:nth-child(4n - 1) {
    margin-left: 30px;
  }
}
.list-feature-seo li span {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 8px 15px;
}
@media only screen and (min-width: 992px) {
  .list-feature-seo li span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  .seo-general-feature-img {
    position: absolute;
    bottom: 0;
    right: 44px;
    max-width: 338px;
  }
}

@media only screen and (min-width: 768px) {
  .max-w-50 {
    max-width: 50%;
  }
}

.block-text-shadow {
  min-height: 122px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 15px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  padding: 15px 10px 25px;
  position: relative;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .block-text-shadow {
    font-size: 19px;
  }
}
.block-text-shadow::after {
  content: "";
  width: 34px;
  height: 4px;
  background-color: #00ED87;
  display: block;
  position: absolute;
  left: 10px;
  margin-top: 15px;
}
.block-text-shadow .desc {
  font-weight: 500;
  margin-top: 6px;
}
@media only screen and (min-width: 768px) {
  .block-text-shadow .desc {
    font-size: 17px;
  }
}

.block-btn {
  height: 100%;
  min-height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-btn .icon {
  margin-top: 16px;
  text-align: center;
}
.block-btn .icon svg {
  width: 8px;
  height: 38px;
}

.list-surfer .col-6:nth-child(2) .block-text-shadow, .list-surfer .col-6:nth-child(3) .block-text-shadow, .list-surfer .col-6:nth-child(6) .block-text-shadow {
  background-color: #000;
  color: #fff;
}

.section-content-marketing {
  background-image: url(../images/bg/bg-content-marketting.png);
}
@media only screen and (min-width: 768px) {
  .section-content-marketing {
    background-size: 670px auto;
  }
}

.block-outline-white {
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 46px 22px 22px;
}
@media only screen and (min-width: 768px) {
  .block-outline-white {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .block-outline-white .block-reasion {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
  }
}

.section-commitment {
  background-color: #EEEEEE;
}

.section-title-line {
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .section-title-line {
    margin-bottom: 36px;
  }
}

.commit-item {
  font-weight: 700;
  font-size: 17px;
  text-align: justify;
}

.commitment-img {
  padding-top: 10px;
}
@media only screen and (min-width: 768px) {
  .commitment-img {
    padding-top: 20px;
  }
}

.fw-black {
  font-weight: 900;
}

.heading-title-square {
  font-size: 22px;
  position: relative;
  margin-bottom: 24px;
  padding-left: 30px;
}
@media only screen and (min-width: 768px) {
  .heading-title-square {
    font-size: 26px;
  }
}
.heading-title-square::after {
  content: "";
  width: 20px;
  height: 20px;
  transform: skew(20deg);
  background-color: #00ED87;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: 10px;
  margin-left: 20px;
}
.heading-title-square span {
  display: inline-block;
  position: relative;
  padding: 4px 20px;
}
.heading-title-square span::after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  right: -4px;
  background-color: #000;
}
.heading-title-square .heading-title-bg-green {
  min-width: 80%;
  text-align: center;
}

.heading-title-outline {
  border: 1px solid #000;
  font-weight: 900;
}
.heading-title-outline::after {
  top: -4px;
}

.heading-title-bg-green {
  font-weight: 400;
  background-color: #00ED87;
  margin-top: 2px;
}
.heading-title-bg-green::after {
  bottom: -4px;
}

.img-social-framework {
  position: relative;
}
.img-social-framework::after {
  content: "";
  display: block;
  position: absolute;
  top: 41%;
  bottom: 0;
  left: 0;
  right: 18%;
  background-color: #00ED87;
  border-radius: 0 30px 0 0;
}
.img-social-framework::before {
  content: "";
  display: block;
  width: 33px;
  height: 6px;
  background-color: #00ED87;
  top: 0;
  left: 0;
  position: absolute;
}
.img-social-framework .img {
  max-width: 405px;
  margin-left: auto;
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  .section-why-watf-media {
    background-image: url(../images/bg/bg-why-watf-pg6.png);
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;
  }
}
@media only screen and (min-width: 768px) {
  .section-why-watf-media .section-title {
    margin-bottom: 35px;
  }
}
.section-why-watf-media .title::after {
  display: none;
}

.why-item {
  margin-bottom: 13px;
}
.why-item .inner {
  display: inline-flex;
  align-items: center;
}

.why-item-number {
  font-size: 30px;
  font-style: italic;
  padding-right: 16px;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .why-item-number {
    font-size: 40px;
    padding-right: 24px;
  }
}

.why-item-text {
  background-color: #fff;
  color: #000;
  font-size: 17px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 15px;
}

.list-why-item {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .list-why-item::after {
    content: "";
    position: absolute;
    display: block;
    width: 33px;
    height: 6px;
    background-color: #fff;
    bottom: 0;
    left: 50%;
    margin-left: 24px;
    margin-top: -10px;
  }
}

.section-watf-take-care {
  position: relative;
}
@media only screen and (min-width: 576px) {
  .section-watf-take-care .text-overlay {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .section-watf-take-care .text-overlay {
    bottom: 50px;
  }
}
.section-watf-take-care .content {
  padding: 15px 20px;
  position: relative;
  max-width: 450px;
  font-size: 25px;
}
@media only screen and (min-width: 576px) {
  .section-watf-take-care .content {
    padding-right: 45px;
    font-size: 31px;
  }
}
.section-watf-take-care .content::after {
  content: "";
  border-left: 16px solid transparent;
  border-bottom: 16px solid #024CEF;
  position: absolute;
  right: 50px;
  top: -16px;
}
@media only screen and (min-width: 576px) {
  .section-watf-take-care .content::after {
    border-left-width: 32px;
    border-bottom-width: 32px;
    top: -32px;
  }
}
.section-watf-take-care .content span {
  display: block;
}

.section-text-swapping .textnote {
  font-size: 17px;
  text-align: justify;
}
.section-text-swapping .title-type-2, .section-text-swapping .textblock-title {
  text-transform: uppercase;
}

.section-package-watf {
  background-color: #191919;
  color: #fff;
  position: relative;
}
.section-package-watf::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .section-package-watf::after {
    width: 50%;
  }
}
.section-package-watf.bg-black::after {
  background-image: url(../images/bg/bg-package-watf.png);
}
.section-package-watf.bg-primary-color-1::after {
  background-image: url(../images/bg/bg-package-watf.png);
  background-color: #024CEF;
}
.section-package-watf .container {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .list-packages-watf.row {
    margin-left: -20px;
    margin-right: -20px;
  }
  .list-packages-watf.row > * {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .list-packages-watf.row > *:nth-child(4) .package-item-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media only screen and (min-width: 1400px) {
  .list-packages-watf.row > *:nth-child(4) .package-item-inner {
    padding-left: 0%;
    padding-right: 5%;
  }
}

@media only screen and (min-width: 768px) {
  .package-watf-img {
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.package-item {
  margin-bottom: 25px;
}
@media only screen and (min-width: 992px) {
  .package-item {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) {
  .package-item-inner {
    padding-right: 5%;
    padding-left: 5%;
  }
}
@media only screen and (min-width: 1400px) {
  .package-item-inner {
    padding-right: 20%;
    padding-left: 5%;
  }
}

.package-item-number {
  font-weight: 700;
  font-size: 40px;
  border-top: 1px solid #fff;
  padding-top: 8px;
  max-width: 80%;
}
@media only screen and (min-width: 768px) {
  .package-item-number {
    font-size: 50px;
    max-width: 100%;
  }
}

.package-item-img {
  width: 68px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .package-item-img {
    width: 90px;
  }
}

.package-item-desc ul {
  padding-left: 20px;
}
.package-item-desc ul li:not(:last-child) {
  margin-bottom: 5px;
}

.package-item-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.img-benefit {
  max-width: 266px;
}

.content-text-about-team {
  max-width: 460px;
}
.content-text-about-team .section-title {
  margin-bottom: 16px;
}
.content-text-about-team .title::after {
  background-color: #fff;
}
.content-text-about-team .desc {
  text-align: justify;
}

@media (max-width: 991px) {
  .align-items-inherit {
    align-items: inherit !important;
  }
}

@media only screen and (min-width: 768px) {
  .wrapper-textnote {
    max-width: 75%;
  }
}

.img-textnote img {
  border-radius: 10px;
}

.why-choose-package-watf {
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .why-choose-package-watf {
    margin-top: 60px;
  }
}
.why-choose-package-watf .img {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .why-choose-package-watf .img {
    margin-bottom: 40px;
  }
}
@media (max-width: 1399.98px) {
  .why-choose-package-watf .img img {
    width: 46.2963%;
  }
}

.no-bg-img {
  background-image: none !important;
}

@media only screen and (min-width: 768px) {
  .img-about-team {
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
}

.bennefit-seeding {
  margin-top: 35px;
}
@media only screen and (min-width: 992px) {
  .bennefit-seeding {
    margin-top: -100px;
  }
}
@media only screen and (min-width: 992px) {
  .bennefit-seeding .section-title {
    max-width: 285px;
  }
}
.bennefit-seeding .package-item-number {
  border-top: none;
}

.section-reasion-seeding {
  background-image: url(../images/bg/bg-reasion-seeding.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% auto;
}
@media only screen and (min-width: 768px) {
  .section-reasion-seeding {
    background-position: 62% bottom;
    background-size: 715px auto;
  }
}
.section-reasion-seeding.is-no-bg-clr .reasion-seeding {
  margin-top: 35px;
  margin-bottom: 0;
}
.section-reasion-seeding.is-no-bg-clr .reasion-seeding-expert {
  color: #a0a0a0;
}
.section-reasion-seeding .list-item {
  margin-bottom: 18px;
}
@media only screen and (min-width: 768px) {
  .section-reasion-seeding .list-item {
    margin-bottom: 36px;
  }
}
.section-reasion-seeding .list-item-desc {
  text-align: justify;
}
.section-reasion-seeding .list-item-desc::after {
  content: "";
  display: block;
  height: 1px;
  width: 105px;
  background-color: #fff;
  margin-top: 10px;
}

.seeding-mean-comment {
  background-color: #25ED8D;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #000;
  padding: 20px;
  border-radius: 10px;
}

.seeding-textnote {
  margin-top: 40px;
}

.service-google-map {
  position: relative;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .service-google-map {
    margin-top: 60px;
  }
}

.img-google-map {
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .img-google-map {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.img-google-map img {
  max-width: 390px;
}

@media only screen and (min-width: 1200px) {
  .row-xxl {
    margin-left: -45px;
    margin-right: -45px;
  }
  .row-xxl > * {
    padding-left: 45px;
    padding-right: 45px;
  }
}

.section-about-team.section-about-team-pg10 {
  background-image: url(../images/bg/bg-about-team-pg10.png);
  background-position: 75% center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media only screen and (min-width: 768px) {
  .section-about-team.section-about-team-pg10 {
    background-size: 444px auto;
  }
}
.section-about-team.section-about-team-pg10 .section-title {
  max-width: 387px;
}
.section-about-team.section-about-team-pg10 .content-text-about-team {
  max-width: 475px;
}

.img-about-item-circle {
  width: 204px;
  height: 204px;
  background-color: #fff;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  border-radius: 50% 50% 50% 0;
}
.img-about-item-circle .inner {
  width: 168px;
  height: 168px;
}
.img-about-item-circle .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.textnone {
  text-align: justify;
}

@media only screen and (min-width: 992px) {
  .professional-care-img {
    margin-left: 10%;
    margin-right: 6%;
    margin-bottom: 0;
    > img {
      max-height: 485px;
    }
  }
  .professional-care-img-2 {
    margin-right: 6%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .professional-care-body {
    margin-left: 10%;
  }
}

.meta-text-circle {
  display: block;
  margin-top: 4px;
}
.meta-text-circle span {
  display: inline-block;
  border: 1px solid #00E88F;
  border-radius: 20px;
  padding-left: 8px;
  padding-right: 8px;
}

.iwt {
  height: 100%;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 6px 4px 0px rgba(0, 0, 0, 0.2);
}
.iwt.liam {
  background-color: #25ED8D;
  color: #fff;
}
.iwt.liam .iwt-icon {
  background-color: #fff;
}

.iwt-icon {
  background-color: #024CEF;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -28px;
  padding: 8px;
}
.iwt-icon svg {
  width: 28px;
  height: auto;
}

.iwt-text {
  padding: 0 0px 16px 0px;
  margin-bottom: 0;
  margin-top: -20px;
  text-align: justify;
}

.care-featured-item {
  background-color: #EEEEEE;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .care-featured-item {
    padding: 24px 16px;
  }
}

.care-featured-icon {
  margin-left: auto;
  margin-right: auto;
  height: 68px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .care-featured-icon {
    height: 134px;
  }
}
.care-featured-icon img {
  max-height: 100%;
  width: auto;
}

.care-featured-title {
  font-weight: bold;
  font-size: 16px;
  color: #000;
  margin-bottom: 16px;
}
.care-featured-title a:not(:hover) {
  color: inherit;
}

.care-featured-text {
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .care-featured-text {
    margin-bottom: 24px;
  }
}

.btn-link-icon {
  display: inline-block;
}
.btn-link-icon img {
  height: 24px;
  width: auto;
}

.media-box-text {
  background-color: rgba(2, 76, 239, 0.04);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .media-box-text {
    padding: 20px 24px;
  }
}
.media-box-text::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../images/bg/service-media-line-1.png");
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0.04;
}
.media-box-text > * {
  position: relative;
}

.media-description {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .media-description {
    font-size: 22px;
  }
}
.media-description::after {
  content: "";
  display: block;
  height: 10px;
  width: 48px;
  background-color: #00E88F;
  margin-top: 10px;
}

.media-box-img {
  background-color: rgba(2, 76, 239, 0.04);
  border-radius: 16px;
  position: relative;
  height: 100%;
}
.media-box-img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../images/bg/service-media-line-2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.media-box-img img {
  max-width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/** section-register-website */
.section-register-website .section-title::before {
  background-color: #024CEF;
}

.register-website-body {
  text-align: justify;
}

.img-register img {
  width: 180px;
}
@media only screen and (min-width: 768px) {
  .img-register img {
    width: 260px;
  }
}

.list-group-unstyled {
  display: flex;
  flex-wrap: wrap;
}
.list-group-unstyled li {
  margin-bottom: 8px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .list-group-unstyled li {
    width: 50%;
    margin-bottom: 12px;
  }
}

@media only screen and (min-width: 768px) {
  .who-need-img {
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 16px;
  }
}
.who-need-img img {
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .who-need-img img {
    border-radius: 16px;
  }
}

.register-intro-text {
  font-size: 18px;
  font-weight: bold;
  color: #024CEF;
}
@media only screen and (min-width: 768px) {
  .register-intro-text {
    font-size: 24px;
  }
}

@media only screen and (min-width: 1200px) {
  .register-intro-img {
    width: 71.11111%;
  }
}
@media only screen and (min-width: 1400px) {
  .register-intro-img {
    width: auto;
  }
}

/** section-register-include */
.figure-register-include-img {
  padding-left: 10%;
  padding-right: 10%;
}

/** section-why-choose-watf-media */
.choose-watf-media-box {
  border-radius: 10px;
  padding: 20px 20px 0;
}
@media only screen and (min-width: 768px) {
  .choose-watf-media-box {
    padding: 40px 20px 16px;
  }
}
.choose-watf-media-box.bg-dark-grey, .choose-watf-media-box.bg-primary-color-1 {
  color: #fff;
}

/** hero */
.bg-dark-grey {
  background-color: #262626;
}

.hero.bg-dark-grey, .hero.bg-primary-color-1 {
  color: #fff;
}
.hero-title {
  font-size: 50px;
  font-weight: bold;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-title {
    font-size: 100px;
  }
}

/** section-video */
@media only screen and (min-width: 768px) {
  .video-box {
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .video-box {
    padding-bottom: 150px;
  }
}

.video-container {
  display: inline-block;
  overflow: hidden;
  border-radius: 16px;
}
@media only screen and (min-width: 768px) {
  .video-container {
    border-radius: 24px;
    width: 46.54088%;
  }
}
.video-container a {
  display: block;
  height: 100%;
  width: 100%;
}
.video-container a::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.video-container a:hover::after {
  opacity: 1;
}
.video-container a:hover .video-icon-player {
  border-left-color: #024CEF;
}

@media only screen and (min-width: 768px) {
  .video-camera-img {
    width: 59%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .video-camera-img {
    width: 55%;
    right: 4%;
  }
}

.video-icon-player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 38px solid #fff;
  border-bottom: 20px solid transparent;
  transition: border-color 0.25s ease-in-out;
}

/** section-television */
.television {
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) {
  .television {
    width: 79.29737%;
  }
}
.television-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .television-text {
    padding: 50px 100px;
  }
}
.television-text-inner {
  font-size: 14px;
  max-width: 280px;
}
@media only screen and (min-width: 768px) {
  .television-text-inner {
    font-size: 21px;
    max-width: 420px;
  }
}

.television-img-shadow {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) {
  .television-img-shadow {
    width: 79.29737%;
  }
}

/** section-production-include */
.figure-production-include-img {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .figure-production-include-img {
    padding-top: 60px;
  }
}

.triangle-shape-dark {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 80px solid #000;
  border-bottom: 50px solid transparent;
}

.textdc h3 {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 17px;
}

/** section-zalo-include */
.section-zalo-include {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .section-zalo-include::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 27.70833%;
    height: 100%;
    background-image: url(../images/bg/bg-section-text.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.19;
  }
}
@media only screen and (min-width: 1400px) {
  .section-zalo-include::before {
    width: 16%;
    bottom: 18%;
    left: calc((100vw - 1320px) / 2);
  }
}
.section-zalo-include.bg-primary-color-1 {
  color: #fff;
}
.section-zalo-include .list-text li:not(:last-child) {
  border-bottom-color: #fff;
}
.section-zalo-include .list-text h3 {
  color: #fff;
}
.section-zalo-include .list-text p {
  text-align: justify;
}
.section-zalo-include .container {
  position: relative;
}

/** section-zalo-intro */
.section-zalo-intro {
  border-bottom: 10px solid #00E88F;
}

.zalo-intro-figure {
  text-align: center;
  padding-top: 80px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .zalo-intro-figure {
    text-align: right;
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .zalo-intro-figure img {
    max-width: 280px;
  }
}

/** section-zalo-marketing */
.divider {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid rgba(2, 76, 239, 0.7);
}

.block-desc {
  text-align: justify;
}

.email-marketing-text {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .email-marketing-text {
    border-radius: 20px;
    padding: 24px 40px;
    margin-bottom: 50px;
    font-size: 18px;
  }
}

/** section-email-detail */
.section-email-detail {
  overflow: hidden;
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .section-email-detail {
    margin-bottom: 48px;
  }
}

.communication-img img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 576px) {
  .communication-img img {
    width: 70%;
  }
}
@media only screen and (min-width: 992px) {
  .communication-img img {
    width: 50%;
  }
}

.communication-desc {
  margin-top: 20px;
  text-align: justify;
}
@media only screen and (min-width: 992px) {
  .communication-desc {
    margin-top: -5%;
  }
}
@media only screen and (min-width: 1200px) {
  .communication-desc {
    margin-top: -10%;
  }
}

.register-intro-figure {
  display: none;
}
@media only screen and (min-width: 992px) {
  .register-intro-figure {
    display: flex;
    justify-content: flex-end;
  }
  .register-intro-figure img {
    width: 80%;
  }
}

.affiliate-detail-body.section-pad {
  padding-top: 0;
}

/** section-email-introduction */
.section-email-introduction {
  position: relative;
}
.section-email-introduction::after {
  background-image: url("../images/bg/envelop-single.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20%;
  height: 51.66667%;
  position: absolute;
  left: 0;
  bottom: -30px;
  content: "";
  display: none;
}
@media only screen and (min-width: 768px) {
  .section-email-introduction::after {
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
  .section-email-introduction::after {
    width: 27.08333%;
    bottom: -60px;
  }
}
.section-email-introduction .container {
  position: relative;
  z-index: 1;
}

.email-introduction-text {
  text-align: justify;
}

.email-introduction-figure {
  padding-left: 10%;
  padding-right: 10%;
}
@media only screen and (min-width: 768px) {
  .email-introduction-figure {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) {
  .email-introduction-figure {
    margin-top: -90px;
    margin-bottom: -20px;
  }
}

.vpn-introduction {
  text-align: justify;
}
.vpn-introduction .title::after {
  display: none;
}

/** section-description */
.section-description {
  position: relative;
}
.section-description::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg/service12-hosting-bg.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .section-description::after {
    width: 54.89583%;
  }
}
.section-description.bg-primary-color-1 {
  color: #fff;
}
.section-description.bg-ontop::after {
  background-position: left top;
  bottom: unset;
  top: 0;
}
.section-description .container {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .section-description .description > .row {
    margin-left: -25px;
    margin-right: -25px;
  }
  .section-description .description > .row > * {
    padding-left: 25px;
    padding-right: 25px;
  }
}

.text-boxes {
  text-align: justify;
}
.text-boxes h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .text-boxes h3 {
    font-size: 20px;
  }
}
.text-boxes-idx {
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 4px;
}
@media only screen and (min-width: 768px) {
  .text-boxes-idx {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 16px;
  }
}

.vps-why-item {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .vps-why-item {
    margin-bottom: 30px;
  }
}
@media (max-width: 767.98px) {
  .vps-why-item img {
    max-width: 90px;
  }
}
.vps-why-item h3 {
  margin-bottom: 8px;
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .vps-why-item h3 {
    font-size: 20px;
  }
}
.vps-why-item .text-light-gray {
  text-align: justify;
}

.list-group-disc {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  text-align: justify;
}
.list-group-disc li {
  padding-left: 12px;
  position: relative;
}
.list-group-disc li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 100%;
  position: absolute;
  top: 8px;
  left: 0;
}
.list-group-disc.white li::before {
  background-color: #fff;
}
.list-group-disc.text-grey-2 li::before {
  background-color: #BABABA;
}

.description-figure {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .description-figure {
    margin-bottom: -150px;
  }
}
@media only screen and (min-width: 1200px) {
  .description-figure {
    margin-bottom: -190px;
  }
}

@media only screen and (min-width: 768px) {
  .description-box {
    padding-top: 50px;
  }
}

.figure-stack-1 {
  padding-top: 35px;
}
@media only screen and (min-width: 768px) {
  .figure-stack-1 {
    padding-top: 70px;
  }
}

.figure-stack-2 {
  margin-left: -20px;
}
@media only screen and (min-width: 768px) {
  .figure-stack-2 {
    margin-left: -30px;
  }
}

/** section-vps-why */
@media only screen and (min-width: 992px) {
  .row.vps-why-list {
    margin-left: -22px;
    margin-right: -22px;
  }
  .row.vps-why-list > * {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/** section-kol-why */
.kol-why-figure {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .kol-why-figure {
    margin-bottom: 0;
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media only screen and (min-width: 992px) {
  .kol-why-figure {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.list-item:not(:last-child) {
  margin-bottom: 20px;
}

.list-item-icon {
  width: 30px;
  min-width: 30px;
}
@media only screen and (min-width: 992px) {
  .list-item-icon {
    width: 40px;
    min-width: 40px;
  }
}

.list-item-title {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  padding-left: 12px;
}
@media only screen and (min-width: 768px) {
  .list-item-title {
    font-size: 20px;
    padding-left: 16px;
  }
}

@media only screen and (min-width: 992px) {
  .foundation-figure {
    margin-top: -120px;
  }
}

.foundation-desc {
  text-align: justify;
}

.list-item-desc {
  text-align: justify;
}

/** section-kol-introduction */
.kol-introduction {
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  .kol-figure2 {
    margin-bottom: -50px;
    position: relative;
    z-index: 1;
  }
}

/** section-advantage */
.section-advantage {
  position: relative;
}
.section-advantage::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg/kol-advantage-bg.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .section-advantage::after {
    width: 60%;
  }
}
@media only screen and (min-width: 992px) {
  .section-advantage::after {
    bottom: -15%;
    width: 46.25%;
  }
}
.section-advantage .container {
  position: relative;
  z-index: 1;
}

.advantage-desc {
  text-align: justify;
}

/** section-benefits-newspapers */
.section-benefits-newspapers {
  background-color: #f2f2f2;
  padding-top: 30px;
  padding-bottom: 20px;
}

@media only screen and (min-width: 768px) {
  .benefits-newspapers-list .col-md-6:nth-child(2n + 1) .benefits-newspapers-item {
    padding-right: 10%;
  }
  .benefits-newspapers-list .col-md-6:nth-child(2n + 2) .benefits-newspapers-item {
    padding-left: 10%;
  }
}

.news-title {
  font-size: 17px;
  position: relative;
  padding-left: 12px;
  margin-bottom: 4px;
}
.news-title::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 8px;
  left: 0;
}

.bg-black-wash {
  background-color: #0C0C0C;
}

/** section-booking-newspapers */
.section-booking-newspapers {
  position: relative;
}
.section-booking-newspapers::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../images/bg/bg-booking-newspapers.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .section-booking-newspapers::before {
    width: 68.33333%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.section-booking-newspapers .container {
  position: relative;
  z-index: 1;
}
.section-booking-newspapers .list-text h3 {
  color: #fff;
}
.section-booking-newspapers .list-text li:not(:last-child) {
  border-bottom-color: #fff;
}
.section-booking-newspapers .section-title .title::after {
  width: 32px;
  height: 6px;
  background-color: #F1F1F1;
  transform: skew(0);
  display: block;
  margin-left: 0;
  margin-top: 8px;
}

/** section-booking-why */
@media only screen and (min-width: 768px) {
  .booking-why-list [class*="col-"]:nth-child(2n + 1) {
    padding-right: 5%;
  }
}
@media only screen and (min-width: 992px) {
  .booking-why-list [class*="col-"]:nth-child(2n + 1) {
    padding-right: 10%;
  }
}
@media only screen and (min-width: 768px) {
  .booking-why-list [class*="col-"]:nth-child(2n + 2) {
    padding-left: 5%;
  }
}
@media only screen and (min-width: 992px) {
  .booking-why-list [class*="col-"]:nth-child(2n + 2) {
    padding-left: 10%;
  }
}

/** section-banner-absolute */
.section-banner-absolute {
  background-color: #F3F2F0;
  margin-top: -20px;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
}

.banner-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.banner-absolute-img-top {
  opacity: 0.25;
}
@media only screen and (min-width: 992px) {
  .banner-absolute-img-top {
    opacity: 1;
  }
}

.page-header {
  max-width: 550px;
  position: relative;
}

.page-title {
  margin-bottom: 0;
  font-size: 36px;
  line-height: 1.1;
  color: #024CEF;
  font-weight: 600;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .page-title {
    font-size: 72px;
  }
}
.page-title::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background-color: #024CEF;
  margin-bottom: 6px;
}
@media only screen and (min-width: 768px) {
  .page-title::before {
    width: 60px;
    height: 8px;
  }
}

.cards [class*="col-"] {
  margin-bottom: 18px;
}
@media only screen and (min-width: 768px) {
  .cards [class*="col-"] {
    margin-bottom: 36px;
  }
}

.card-info {
  display: flex;
  flex-direction: row;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  background-color: #F8F8F8;
}
@media only screen and (min-width: 768px) {
  .card-info {
    flex-direction: column;
    border-radius: 16px;
    height: 100%;
  }
}
.card-info-img {
  width: 80px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .card-info-img {
    width: 100%;
  }
}
.card-info-img img {
  width: 100%;
}
@media (max-width: 767.98px) {
  .card-info-img img {
    height: 80px;
    object-fit: cover;
  }
}
.card-info-img a {
  display: block;
  position: relative;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .card-info-img a {
    border-radius: 16px 16px 0 0;
  }
}
.card-info-img a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  transition: all 250ms ease-out;
  opacity: 0;
}
.card-info-img a:hover::after {
  opacity: 1;
}
.card-info-content {
  width: calc(100% - 80px);
  padding: 6px 12px;
  border-radius: 0 4px 4px 0;
}
@media only screen and (min-width: 768px) {
  .card-info-content {
    width: 100%;
    padding: 8px 16px 12px;
    border-radius: 0 0 16px 16px;
  }
}
.card-info-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #000;
  text-transform: capitalize;
  height: 40px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .card-info-title {
    font-size: 18px;
    line-height: 24px;
    height: 48px;
    margin-bottom: 6px;
  }
}
.card-info-title a:not(:hover) {
  color: inherit;
}
.card-info-more {
  display: inline-block;
  position: relative;
}
.card-info-more img {
  transition: all 250ms ease-out;
  height: 9px;
  width: auto;
  display: inline-block;
}
.card-info-more:hover img {
  transform: translateX(10px);
}

/** section-contact */
.section-contact .page-header {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .section-contact .page-header {
    padding-top: 80px;
    padding-bottom: 160px;
  }
}

.contact-img-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 55.46875%;
}

.labels label {
  font-size: 18px;
}
.labels img {
  max-height: 9px;
}

.contact-info .contact-title {
  margin-bottom: 40px;
  color: #024CEF;
}
@media only screen and (min-width: 768px) {
  .contact-info .contact-title {
    margin-bottom: 90px;
  }
}

.contact-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .contact-title {
    font-size: 22px;
  }
}

.contact-form .form-label {
  font-weight: 600;
  color: #000;
}
.contact-form .form-control {
  border-color: #939598;
  border-radius: 8px;
  padding: 10px;
}
.contact-form .form-control:focus {
  box-shadow: none;
  outline: 0;
  border-color: #024CEF;
}
.contact-form .form-group {
  margin-bottom: 22px;
}
@media only screen and (min-width: 768px) {
  .contact-form .form-group {
    margin-bottom: 45px;
  }
}
.contact-form button {
  width: 170px;
}

/** section-socials */
.section-socials .socials {
  background-color: transparent;
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .section-socials .socials a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/** section-reach **/
.section-reach {
  text-align: justify;
}

.block-content-bg-primary-1 {
  border-radius: 20px;
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  .block-content-bg-primary-1 {
    padding: 40px;
  }
}

@media only screen and (min-width: 768px) {
  .modal.modal-cs .modal-dialog {
    width: 86%;
    max-width: 1024px;
  }
}
.modal.modal-cs .modal-content {
  border-color: #ddd;
  color: #000;
  background-color: #fff;
  border-radius: 12px;
}
@media only screen and (min-width: 768px) {
  .modal.modal-cs .modal-content {
    border-radius: 20px;
  }
}
.modal.modal-cs .modal-body {
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  .modal.modal-cs .modal-body {
    padding: 40px 25px;
  }
}
.modal.modal-cs .btn-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background-image: url("../images/icons/close.png");
  background-position: center center;
  background-color: #B5B5B5;
  border-radius: 100%;
  width: 28px;
  height: 28px;
  opacity: 1;
  z-index: 1;
}
.modal.modal-cs .btn-close:hover {
  outline: 0;
  box-shadow: none;
  background-color: #024CEF;
}
@media only screen and (min-width: 768px) {
  .modal.modal-cs .btn-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}

.registered-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10%;
}
@media only screen and (min-width: 768px) {
  .registered-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1200px) {
  .registered-title {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .registered-box {
    margin-left: -16px;
    margin-right: -16px;
  }
  .registered-box > * {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.forms .form-label {
  margin-bottom: 4px;
  font-weight: 500;
  color: #024CEF;
}
.forms .form-control {
  background-color: #fafafa;
  border-color: #ddd;
  padding: 10px 20px;
}
.forms .form-group {
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .forms .form-group {
    margin-bottom: 20px;
  }
}
.forms textarea.form-control {
  border-radius: 20px;
}
.forms .form-check-input {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border-color: #D9D9D9;
  background-color: #D9D9D9;
  margin-top: 0;
  margin-right: 6px;
}
.forms .form-check-input:checked {
  background-color: #024CEF;
  border-color: #024CEF;
}
.forms .form-check {
  margin-bottom: 10px;
}

.required {
  color: #DB0F01;
}

.advice-form {
  color: #202020;
}
@media only screen and (min-width: 992px) {
  .advice-form {
    padding: 50px 35px;
  }
}
.advice-form textarea.form-control {
  height: 190px;
}
.advice-form .forms .form-control {
  background-color: #fff;
}
.advice-form .form-check {
  display: flex;
}
.advice-form .form-check .form-check-input {
  width: 20px;
  flex: 0 0 auto;
}
.advice-form .form-check .form-check-label {
  flex: 1 1 auto;
}
.advice-form .row .col-6:nth-child(8)::after {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}

/*==================================================================
WATF CONTACT - TWO COLUMN
==================================================================*/

.watf-contact,
.watf-contact *,
.watf-contact *::before,
.watf-contact *::after {
    box-sizing: border-box;
}

.watf-contact {
    --watf-contact-blue: #0757ed;
    --watf-contact-dark: #071b59;
    --watf-contact-green: #18d49c;
    --watf-contact-text: #17223d;
    --watf-contact-muted: #67728a;
    --watf-contact-border: #dbe5f2;

    position: relative;

    padding:
        clamp(55px, 5vw, 84px)
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 52%,
            #f3f8ff 100%
        );
}


/*==================================================================
LAYOUT
==================================================================*/

.watf-contact > .container {
    width: min(100%, 1440px);
    max-width: 1440px;

    margin: 0 auto;

    padding-right: 28px;
    padding-left: 28px;
}

.watf-contact__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 42%)
        minmax(0, 58%);

    min-height: 720px;

    overflow: hidden;

    border: 1px solid var(--watf-contact-border);
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 18px 48px rgba(31, 73, 131, 0.1);
}


/*==================================================================
LEFT
==================================================================*/

.watf-contact__info {
    position: relative;

    display: flex;
    flex-direction: column;

    padding:
        48px
        46px
        40px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #0757ed 0%,
            #0648cf 58%,
            #05359f 100%
        );

    color: #ffffff;
}

.watf-contact__info::before {
    content: "";

    position: absolute;

    right: -90px;
    bottom: -90px;

    width: 310px;
    height: 310px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    pointer-events: none;
}

.watf-contact__info::after {
    content: "";

    position: absolute;

    top: -80px;
    right: -100px;

    width: 260px;
    height: 260px;

    opacity: 0.18;

    background-image:
        radial-gradient(
            circle,
            #ffffff 2px,
            transparent 2.5px
        );

    background-size: 17px 17px;

    pointer-events: none;
}


/*==================================================================
LEFT HEADER
==================================================================*/

.watf-contact__info-head {
    position: relative;
    z-index: 2;

    margin-bottom: 38px;
}

.watf-contact__eyebrow {
    display: block;

    margin-bottom: 11px;

    color: var(--watf-contact-green);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.11em;
}

.watf-contact__title {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 10px;

    margin:
        0
        0
        20px;

    color: #ffffff;

    font-size: clamp(35px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.04em;

    text-transform: uppercase;
}

.watf-contact__title > span {
    display: inline-block;

    width: 24px;
    height: 18px;

    margin-bottom: 7px;

    background: var(--watf-contact-green);

    transform: skew(-18deg);
}

.watf-contact__intro {
    max-width: 430px;

    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}


/*==================================================================
DETAILS
==================================================================*/

.watf-contact__details {
    position: relative;
    z-index: 2;
}

.watf-contact__detail {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 15px;
    align-items: center;

    padding:
        14px
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.17);
}

.watf-contact__detail:first-child {
    padding-top: 0;
}

.watf-contact__detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.09);
}

.watf-contact__detail-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-contact__detail-content {
    min-width: 0;
}

.watf-contact__detail-label {
    display: block;

    margin-bottom: 3px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.watf-contact__detail-content strong,
.watf-contact__detail-content a {
    display: inline-block;

    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.42;

    text-decoration: none;
}

.watf-contact__detail-content a:hover,
.watf-contact__detail-content a:focus {
    color: var(--watf-contact-green);
}


/*==================================================================
SOCIAL
==================================================================*/

.watf-contact__social {
    position: relative;
    z-index: 2;

    margin-top: auto;
    padding-top: 33px;
}

.watf-contact__social-head {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.04em;
}

.watf-contact__social-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.watf-contact__social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.watf-contact__social-link svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-contact__social-link:first-child svg {
    fill: currentColor;
    stroke: none;
}

.watf-contact__social-link:hover,
.watf-contact__social-link:focus {
    color: #0645bd;

    border-color: #ffffff;

    background: #ffffff;
}

.watf-contact__social-link--text {
    font-size: 11px;
    font-weight: 700;
}


/*==================================================================
RIGHT FORM
==================================================================*/

.watf-contact__form-column {
    padding:
        50px
        clamp(35px, 4vw, 64px)
        48px;

    background: #ffffff;
}

.watf-contact__form-head {
    max-width: 570px;

    margin-bottom: 34px;
}

.watf-contact__form-head .watf-contact__eyebrow {
    color: var(--watf-contact-blue);
}

.watf-contact__form-title {
    margin:
        0
        0
        14px;

    color: var(--watf-contact-dark);

    font-size: clamp(34px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;

    text-transform: uppercase;
}

.watf-contact__form-head p {
    max-width: 520px;

    margin: 0;

    color: var(--watf-contact-muted);

    font-size: 16px;
    line-height: 1.5;
}


/*==================================================================
FORM
==================================================================*/

.watf-contact .contact-form {
    margin: 0;
}

.watf-contact__form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.watf-contact .contact-form .form-group {
    margin:
        0
        0
        22px;
}

.watf-contact .contact-form .form-label {
    display: block;

    margin:
        0
        0
        8px;

    color: var(--watf-contact-dark);

    font-size: 14px;
    font-weight: 600;
}

.watf-contact .contact-form .form-control {
    display: block;

    width: 100%;
    height: 52px;

    padding:
        11px
        15px;

    border:
        1px solid #d5deeb;

    border-radius: 9px;

    outline: 0;

    background: #fbfcfe;

    color: var(--watf-contact-text);

    font-size: 15px;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.watf-contact .contact-form textarea.form-control {
    height: auto;
    min-height: 180px;

    resize: vertical;
}

.watf-contact .contact-form .form-control::placeholder {
    color: #9aa4b5;
}

.watf-contact .contact-form .form-control:focus {
    border-color: var(--watf-contact-blue);

    background: #ffffff;

    box-shadow: none;
}


/*==================================================================
SUBMIT
==================================================================*/

.watf-contact .contact-form .watf-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    width: auto;
    min-width: 190px;
    min-height: 52px;

    margin: 2px 0 0;
    padding: 12px 22px;

    border: 1px solid var(--watf-contact-blue);
    border-radius: 8px;

    background: var(--watf-contact-blue);

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.watf-contact__submit svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-contact .contact-form .watf-contact__submit:hover,
.watf-contact .contact-form .watf-contact__submit:focus-visible {
    border-color: #0648cc;
    background: #0648cc;
}


/*==================================================================
ALERT
==================================================================*/

.watf-contact .alert {
    margin-bottom: 25px;

    padding: 13px 16px;

    border-radius: 8px;
}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-contact > .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .watf-contact__layout {
        grid-template-columns:
            minmax(0, 1fr);

        min-height: 0;
    }

    .watf-contact__info {
        padding:
            38px
            34px;
    }

    .watf-contact__details {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            0
            25px;
    }

    .watf-contact__social {
        margin-top: 28px;
    }

    .watf-contact__form-column {
        padding:
            40px
            34px;
    }
}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-contact {
        padding:
            38px
            0
            44px;
    }

    .watf-contact > .container {
        padding-right: 13px;
        padding-left: 13px;
    }

    .watf-contact__layout {
        border-radius: 18px;
    }

    .watf-contact__info {
        padding:
            30px
            20px
            28px;
    }

    .watf-contact__title,
    .watf-contact__form-title {
        font-size: clamp(29px, 9vw, 39px);
    }

    .watf-contact__details {
        display: block;
    }

    .watf-contact__detail {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap: 12px;
    }

    .watf-contact__detail-content strong,
    .watf-contact__detail-content a {
        font-size: 14px;
    }

    .watf-contact__form-column {
        padding:
            30px
            20px
            32px;
    }

    .watf-contact__form-head {
        margin-bottom: 27px;
    }

    .watf-contact__form-row {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0;
    }

    .watf-contact .contact-form .form-group {
        margin-bottom: 18px;
    }

    .watf-contact .contact-form .form-control {
        height: 50px;
    }

    .watf-contact .contact-form textarea.form-control {
        min-height: 155px;
    }

    .watf-contact .contact-form .watf-contact__submit {
        width: 100%;
    }
}


/*==================================================================
MOBILE NHỎ
==================================================================*/

@media only screen and (max-width: 479.98px) {

    .watf-contact__info,
    .watf-contact__form-column {
        padding-right: 17px;
        padding-left: 17px;
    }

    .watf-contact__social-list {
        gap: 8px;
    }

    .watf-contact__social-link {
        width: 41px;
        height: 41px;
    }
}


























/** checkout */
.checkout-col {
  border: 4px solid #DDDDDD;
  background-color: #fff;
  border-radius: 25px;
  padding: 16px;
}
@media only screen and (min-width: 768px) {
  .checkout-col {
    padding: 24px;
  }
}

.account-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .account-title {
    font-size: 22px;
  }
}
.account-meta-text {
  font-weight: 500;
  margin-bottom: 16px;
}
.account-form .forms .form-control {
  background-color: #fff;
}

.aside-title {
  font-size: 20px;
  font-weight: bold;
  color: #024CEF;
  line-height: 1.2;
  padding-bottom: 8px;
}
@media only screen and (min-width: 768px) {
  .aside-title {
    font-size: 24px;
  }
}

.orders {
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
}

.order {
  margin-bottom: 25px;
  display: flex;
}
.order:last-child {
  margin-bottom: 0;
}
.order-img {
  width: 105px;
  height: 83px;
  position: relative;
}
.order-img img {
  width: inherit;
  height: inherit;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}
.order-count {
  width: 24px;
  height: 24px;
  background-color: #404040;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: -12px;
}
.order-body {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 20px;
}
@media only screen and (min-width: 768px) {
  .order-body {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) {
  .order-info {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding-right: 15px;
  }
}
.order-price {
  font-weight: 700;
  color: #000;
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .order-price {
    font-size: 20px;
  }
}
.order-amount {
  font-weight: 700;
  color: #000;
  font-size: 20px;
}
.order-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #000;
  margin-bottom: 4px;
}
.order-title a:not(:hover) {
  color: inherit;
}
.order-delete {
  display: inline-block;
  font-size: 15px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}
@media only screen and (min-width: 768px) {
  .order-delete {
    margin-top: 0;
  }
}
.order-delete:hover {
  color: red;
}
.order-delete:hover .order-icon-close::before, .order-delete:hover .order-icon-close::after {
  background-color: red;
}
.order-icon-close {
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
  margin-right: 8px;
  margin-left: 8px;
}
.order-icon-close::before, .order-icon-close::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 15px;
  background-color: #404040;
}
.order-icon-close::before {
  transform: rotate(45deg);
}
.order-icon-close::after {
  transform: rotate(135deg);
}
.order-summary {
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #DDDDDD;
}
.order-summary-item label {
  color: #404040;
}
.order-checkbox {
  display: flex;
}
.order-checkbox input {
  width: 16px;
  height: 16px;
  border: 1px solid #DDDDDD;
  margin-right: 4px;
  margin-top: 2px;
}
.order-checkbox label {
  color: #5F5766;
  margin-bottom: 0;
}
.order-checkbox a {
  color: #024CEF;
}
.order-total-text {
  font-size: 18px;
  color: #024CEF;
  font-weight: bold;
}

.login-other {
  color: #5F5766;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .login-other {
    padding-left: 20%;
    padding-right: 20%;
  }
}
.login-other-label {
  position: relative;
  text-align: center;
  margin-bottom: 12px;
}
.login-other-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #DDDDDD;
  transform: translateY(-50%);
}
.login-other-label label {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 0 16px;
  margin-bottom: 0;
}
.login-other-button {
  color: #5F5766;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login-other-button:hover {
  color: #DB0F01;
}
.login-other-button:hover .ico-google-square {
  border-color: #DB0F01;
}

.ico-google-square {
  display: inline-block;
  border: 2px solid #DDDDDD;
  width: 74px;
  height: 74px;
  border-radius: 10px;
  text-align: center;
  line-height: 70px;
  transition: all 0.25 ease-out;
  margin-bottom: 2px;
}

.payment-method {
  color: #5F5766;
}

.payment-item {
  border: 2px solid #DDDDDD;
  border-radius: 10px;
  height: 101px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #5F5766;
  position: relative;
}
.payment-item:hover {
  color: #DB0F01;
  border-color: #DB0F01;
}
.payment-item.active {
  color: #DB0F01;
  border-color: #DB0F01;
}
.payment-item.active .payment-checked {
  display: block;
}
.payment-item-img {
  width: 50%;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}
.payment-item-img img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.payment-item-name {
  width: 50%;
  font-weight: 600;
  font-size: 18px;
  padding-right: 12px;
}
.payment-checked {
  display: none;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #DB0F01;
  border-radius: 50%;
}
.payment-checked::after {
  content: '';
  width: 8px;
  border-width: 0 3px 3px 0;
  border-style: solid;
  border-color: #fff;
  display: inline-block;
  height: 14px;
  position: absolute;
  top: -2px;
  left: 5px;
  transform: rotate(45deg);
  transform-origin: left bottom;
  border-radius: 2px;
}

/** imc-banner */
.imc-banner {
  position: relative;
  overflow: hidden;
  padding-top: 22px;
  padding-bottom: 22px;
  background-color: #25ED8D;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 992px) {
  .imc-banner {
    min-height: 575px;
  }
}
.imc-banner.bg-caro {
  background-color: #f2f2f2;
  background-image: url(../images/bg/bg-banner-page-service6.png);
  background-repeat: repeat;
}
.imc-banner.bg-dot {
  background-color: #024CEF;
  background-image: url(../images/bg/bg-banner-seo.png);
  background-repeat: no-repeat;
  color: #fff;
}
.imc-banner.bg-dot .imc-banner-text {
  color: #fff;
}
.imc-banner.type2 .imc-banner-title-main {
  color: #024CEF;
}
.imc-banner-img {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .imc-banner-img {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0.5;
  }
}
@media only screen and (min-width: 992px) {
  .imc-banner-img {
    width: 60%;
  }
}
@media only screen and (min-width: 1200px) {
  .imc-banner-img {
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) {
  .imc-banner-img-top {
    max-width: unset;
  }
}
.imc-banner-title {
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 16px;
  color: #000;
}
@media only screen and (min-width: 768px) {
  .imc-banner-title {
    font-size: 36px;
    margin-bottom: 22px;
  }
}
.imc-banner-title::before {
  content: "";
  width: 30px;
  height: 6px;
  margin-bottom: 5px;
  display: block;
  background-color: #3149E6;
}
@media only screen and (min-width: 768px) {
  .imc-banner-title::before {
    width: 45px;
    height: 9px;
    margin-bottom: 7px;
  }
}
.imc-banner-title-main {
  text-transform: uppercase;
  color: #fff;
  display: block;
}
.imc-banner-text {
  text-align: justify;
  color: #000;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .imc-banner-text {
    font-size: 18px;
    font-weight: 900;
  }
}
.imc-banner .btn {
  margin-top: 18px;
  border-radius: 8px;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .imc-banner .btn {
    margin-top: 36px;
    font-weight: 700;
  }
}

.textblock-title {
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .textblock-title {
    margin-bottom: 24px;
  }
}
.textblock-title::before {
  content: "";
  display: block;
  width: 80px;
  height: 6px;
  margin-bottom: 4px;
  background-color: #00a660;
}
@media only screen and (min-width: 768px) {
  .textblock-title::before {
    width: 114px;
    height: 9px;
  }
}
.textblock-text-lead {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .textblock-text-lead {
    font-size: 28px;
    line-height: 3rem;
  }
}
.textblock-additional {
  margin-top: 20px;
  color: #4F4F4F;
}
@media only screen and (min-width: 768px) {
  .textblock-additional {
    margin-top: 30px;
  }
}
.textblock-additional label {
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 20px;
}
@media only screen and (min-width: 768px) {
  .textblock-additional label {
    margin-bottom: 24px;
    font-size: 24px;
  }
}
.textblock-additional ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .textblock-additional ul {
    margin-bottom: 30px;
  }
}
.textblock-additional ul li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 8px;
  font-size: 18px;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .textblock-additional ul li {
    margin-bottom: 12px;
    font-size: 24px;
  }
}
.textblock-additional ul li:last-child {
  margin-bottom: 0;
}
.textblock-additional ul li::before, .textblock-additional ul li::after {
  content: "";
  display: block;
  position: absolute;
}
.textblock-additional ul li::before {
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #024CEF;
}
@media only screen and (min-width: 768px) {
  .textblock-additional ul li::before {
    top: 5px;
  }
}
.textblock-additional ul li::after {
  left: 5px;
  top: 8px;
  border: solid #024CEF;
  transform: rotate(-45deg);
  border-width: 0 0 2px 2px;
  border-radius: 2px;
  height: 6px;
  width: 8px;
}
@media only screen and (min-width: 768px) {
  .textblock-additional ul li::after {
    top: 10px;
  }
}
.textblock-highlight {
  color: #024CEF;
  font-size: 18px;
  font-weight: 900;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .textblock-highlight {
    font-size: 24px;
  }
}

.post-thumb a {
  display: block;
  position: relative;
}
.post-thumb a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: all 250ms ease-out;
  border-radius: 10px;
}
.post-thumb a:hover::before {
  opacity: 1;
}
.post-img-top {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.post-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}
@media only screen and (min-width: 768px) {
  .post-title {
    font-size: 24px;
  }
}
.post-text {
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .post-text {
    font-size: 22px;
  }
}

.process {
  display: flex;
  flex-wrap: wrap;
}
.process-tabs {
  width: 33%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media only screen and (min-width: 1200px) {
  .process-tabs {
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px 30px;
  }
}
@media (max-width: 1199px) {
  .process-tabs {
    width: 100%;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .process-tabs .nav-tabs.nav-tabs-hoz {
    margin-bottom: 12px;
  }
}
.process-tabs .mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-bottom: 12px;
}
@media only screen and (min-width: 1200px) {
  .process-tabs .mCustomScrollBox {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
.process-content {
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .process-content {
    width: 67%;
  }
}
.process-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 16px;
}
.process-description, .process-img {
  width: 100%;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .process-description, .process-img {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .process-description {
    font-size: 20px;
    padding: 0px 60px;
    text-align: justify;
  }
}
.process-img-top {
  border-radius: 10px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  background-color: #024CEF;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 6px;
}

.nav-tabs.nav-tabs-hoz {
  border-bottom-width: 0;
  flex-wrap: nowrap;
}
@media only screen and (min-width: 1200px) {
  .nav-tabs.nav-tabs-hoz {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
.nav-tabs.nav-tabs-hoz li {
  margin-bottom: 8px;
}
.nav-tabs.nav-tabs-hoz li:last-child {
  margin-bottom: 0;
}
.nav-tabs.nav-tabs-hoz .nav-link {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-width: 0 0 1px 0;
  border-bottom-color: #024CEF;
  margin-bottom: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 18px;
  color: #000;
  padding: 8px 10px;
}
@media only screen and (min-width: 768px) {
  .nav-tabs.nav-tabs-hoz .nav-link {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .nav-tabs.nav-tabs-hoz .nav-link {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
    text-align: center;
  }
}
.nav-tabs.nav-tabs-hoz .nav-link.active, .nav-tabs.nav-tabs-hoz .nav-link:hover {
  color: #fff;
  background-color: #024CEF;
}
@media only screen and (min-width: 1200px) {
  .nav-tabs.nav-tabs-hoz .nav-link.active, .nav-tabs.nav-tabs-hoz .nav-link:hover {
    color: #000;
    background-color: #F3F7F8;
  }
}
.nav-tabs.nav-tabs-hoz .nav-link h3 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0;
  color: inherit;
}
@media only screen and (min-width: 768px) {
  .nav-tabs.nav-tabs-hoz .nav-link h3 {
    font-size: 20px;
  }
}

.blockquote {
  margin-bottom: 0;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .blockquote {
    margin-top: 0;
    position: relative;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote {
    margin-left: 7%;
    margin-right: 7%;
  }
}
.blockquote .ellipse {
  background-color: #024CEF;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 60px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .blockquote .ellipse {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote .ellipse {
    width: 80px;
    height: 80px;
  }
}
.blockquote .ellipse:nth-child(1), .blockquote .ellipse:nth-child(4) {
  transform: scale(0.9);
  top: 15px;
}
@media only screen and (min-width: 992px) {
  .blockquote .ellipse:nth-child(1), .blockquote .ellipse:nth-child(4) {
    top: 0;
  }
}
.blockquote .ellipse:nth-child(2), .blockquote .ellipse:nth-child(5) {
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.blockquote .ellipse:nth-child(3), .blockquote .ellipse:nth-child(6) {
  bottom: 10px;
  transform: scale(0.78);
}
@media only screen and (min-width: 992px) {
  .blockquote .ellipse:nth-child(3), .blockquote .ellipse:nth-child(6) {
    bottom: 0;
  }
}
.blockquote .ellipse:nth-child(1) {
  left: 10px;
}
.blockquote .ellipse:nth-child(4) {
  right: 10px;
}
.blockquote .ellipse:nth-child(2) {
  left: 0;
}
@media only screen and (min-width: 992px) {
  .blockquote .ellipse:nth-child(2) {
    left: -20px;
  }
}
.blockquote .ellipse:nth-child(5) {
  right: 0;
}
@media only screen and (min-width: 992px) {
  .blockquote .ellipse:nth-child(5) {
    right: -20px;
  }
}
.blockquote .ellipse:nth-child(3) {
  left: 50px;
  z-index: 1;
}
.blockquote .ellipse:nth-child(6) {
  right: 100px;
}
.blockquote-inner {
  background-color: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
  padding: 15px 20px 20px 40px;
  position: relative;
  border-radius: 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .blockquote-inner {
    padding: 40px 60px;
    border-radius: 20px;
    min-height: 220px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote-inner {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 80px;
  }
}
.blockquote-inner::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icons/ico-quote-liam.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 5px;
  left: 0px;
}
@media only screen and (min-width: 768px) {
  .blockquote-inner::before {
    width: 30px;
    height: 30px;
    top: 30px;
    left: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote-inner::before {
    width: 40px;
    height: 40px;
    top: 50px;
  }
}
.blockquote-text-normal {
  font-weight: 600;
  font-size: 18px;
  /* text-align: justify; */
}
@media only screen and (min-width: 768px) {
  .blockquote-text-normal {
    font-weight: 700;
    font-size: 22px;
  }
}
.blockquote-text-highlight {
  font-weight: 900;
  color: #024CEF;
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .blockquote-text-highlight {
    font-weight: 900;
    font-size: 24px;
  }
}
.blockquote-text-special {
  background-color: #25ED8D;
  border-radius: 16px;
  padding: 16px 30px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .blockquote-text-special {
    font-size: 24px;
    padding-left: 60px;
    padding-right: 40px;
  }
}
.blockquote-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #d9d9d9;
  border-radius: 50%;
}
.blockquote-dot:nth-child(1) {
  right: 10px;
  top: 8px;
}
.blockquote-dot:nth-child(2) {
  left: 10px;
  bottom: 8px;
}
.blockquote-dot:nth-child(3) {
  left: 10px;
  top: 8px;
}
.blockquote-dot:nth-child(4) {
  right: 10px;
  bottom: 8px;
}
.blockquote-spacing {
  padding-left: 30px;
  padding-right: 20px;
  padding-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .blockquote-spacing {
    padding-left: 60px;
    padding-right: 40px;
    padding-bottom: 60px;
  }
}
.blockquote.ontop .blockquote-inner {
  padding-left: 20px;
  padding-top: 60px;
}
.blockquote.ontop .blockquote-inner-2 {
  padding-left: 6px;
  padding-top: 60px;
}
@media only screen and (min-width: 768px) {
  .blockquote.ontop .blockquote-inner {
    padding-left: 60px;
    padding-top: 110px;
  }
  .blockquote.ontop .blockquote-inner-2 {
    padding-left: 60px;
    padding-top: 110px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote.ontop .blockquote-inner {
    padding-top: 130px;
  }
  .blockquote.ontop .blockquote-inner-2 {
    padding-top: 130px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote.ontop .blockquote-inner {
    padding-top: 160px;
    padding-left: 80px;
    padding-right: 80px;
  }
  .blockquote.ontop .blockquote-inner-2 {
    padding-top: 160px;
    padding-left: 80px;
    padding-right: 80px;
  }
}
.blockquote.ontop .blockquote-inner::before {
  width: 45px;
  height: 45px;
  background-image: url(../images/icons/ico-quote-liam-large.png);
}
@media only screen and (min-width: 768px) {
  .blockquote.ontop .blockquote-inner::before {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote.ontop .blockquote-inner::before {
    width: 110px;
    height: 110px;
    top: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote.ontop .blockquote-inner::before {
    width: 144px;
    height: 144px;
    top: 15px;
  }
}
.blockquote.type2 .blockquote-type2-inner {
  background-color: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
  position: relative;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .blockquote.type2 .blockquote-type2-inner {
    border-radius: 20px;
  }
}
.blockquote.type2 .blockquote-quote {
  position: relative;
  min-height: 80px;
  padding-top: 30px;
  padding-right: 20px;
  padding-left: 65px;
}
@media only screen and (min-width: 768px) {
  .blockquote.type2 .blockquote-quote {
    padding-top: 40px;
    padding-right: 40px;
    padding-left: 105px;
    border-radius: 20px;
    min-height: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote.type2 .blockquote-quote {
    padding-left: 135px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote.type2 .blockquote-quote {
    padding-top: 60px;
    padding-right: 60px;
    padding-left: 190px;
    min-height: 150px;
  }
}
.blockquote.type2 .blockquote-quote::before {
  content: "";
  display: block;
  width: 45px;
  height: 45px;
  background-image: url(../images/icons/ico-quote-liam-large.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 15px;
  left: 10px;
}
@media only screen and (min-width: 768px) {
  .blockquote.type2 .blockquote-quote::before {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (min-width: 992px) {
  .blockquote.type2 .blockquote-quote::before {
    width: 110px;
    height: 110px;
  }
}
@media only screen and (min-width: 1200px) {
  .blockquote.type2 .blockquote-quote::before {
    width: 144px;
    height: 144px;
    left: 30px;
  }
}

.show-img-map {
  display: none;
}
@media only screen and (min-width: 992px) {
  .show-img-map {
    display: block;
    margin-top: -60%;
    position: relative;
  }
}

/** web-boxed-service */
@media only screen and (min-width: 768px) {
  .web-boxed-service .section-title {
    max-width: 600px;
  }
}

.list-anpha-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding: 20px 12px;
  text-align: justify;
}
@media only screen and (min-width: 768px) {
  .list-anpha-item {
    margin-bottom: 16px;
  }
}
.list-anpha-item:last-child {
  margin-bottom: 0;
}
.list-anpha-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 0;
  text-align: center;
  position: relative;
  padding-right: 36px;
}
@media only screen and (min-width: 768px) {
  .list-anpha-title {
    font-size: 20px;
  }
}
.list-anpha-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../images/icons/ico-arrow-circle.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.step {
  position: relative;
  padding-left: 30px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.step .dot {
  height: 60px;
  display: block;
  width: 8px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.step .dot::after, .step .dot::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #25ED8D;
  box-shadow: 0 0 12px rgba(37, 237, 141, 0.95);
}
.step .dot::before {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.step .dot::after {
  bottom: 0;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.step-ind {
  color: #034CEE;
  font-size: 28px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 4px;
}
.step-text {
  font-weight: bold;
  font-size: 20px;
}

/** imc-boxed-media */
.main-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 60px;
}
@media only screen and (min-width: 1400px) {
  .main-box {
    gap: 0 80px;
  }
}

.media-item {
  z-index: 1;
  width: 120px !important;
  height: 328px;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  transition: all 0.3s ease-in-out;
  margin-top: 30px;
  background-color: #024CEF;
  color: #fff;
  box-shadow: 0 0 60px rgba(2, 76, 239, 0.65);
}
@media (max-width: 991.98px) {
  .media-item {
    width: 328px !important;
    background-color: transparent;
    box-shadow: none;
    background-image: url("../images/bg/box.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.media-item::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 36px;
  background: radial-gradient(258.86% 216.49% at -18.48% -74.46%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(25px);
}
.media-item.active {
  width: 328px !important;
  border-radius: 36px;
  box-shadow: none;
  background-color: transparent;
  background-image: url("../images/bg/box.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 992px) {
  .media-item.active {
    width: 328px !important;
  }
}
.media-item.active .media-title {
  opacity: 0;
  visibility: hidden;
}
.media-item.active .media-number-hover {
  opacity: 1;
  visibility: visible;
}
.media-item.active .media-content {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}
.media-number {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 28px;
  font-weight: 800;
  display: inline-block;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.media-title {
  position: relative;
  z-index: 1;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 991.98px) {
  .media-title {
    display: none;
  }
}
.media-title h3 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-weight: 800;
  font-size: 24px;
  line-height: 133%;
  white-space: nowrap;
  margin-bottom: 0;
}
.media-number-hover {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  font-size: 28px;
  font-weight: 800;
  color: #000;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 991.98px) {
  .media-number-hover {
    opacity: 1;
    visibility: visible;
  }
}
.media-content {
  position: absolute;
  bottom: -100px;
  left: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  right: 30px;
}
@media (max-width: 991.98px) {
  .media-content {
    opacity: 1;
    visibility: visible;
    bottom: 20px;
  }
}
.media-content h3 {
  font-weight: 800;
  font-size: 24px;
  line-height: 133%;
  margin-bottom: 10px;
}
.media-text {
  line-height: 162%;
  text-align: justify;
}

.map-page .imc-banner-text,
.ecom-page .imc-banner-text,
.ads-page .imc-banner-text {
  max-width: 330px;
}

.element {
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px;
}
@media only screen and (min-width: 768px) {
  .element {
    border-radius: 16px;
    padding-left: 28px;
    padding-right: 28px;
    height: 100%;
  }
}
.element-icon {
  width: 116px;
  height: 116px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .element-icon {
    margin-bottom: 32px;
  }
}
.element-icon img {
  max-height: 100%;
  height: auto;
}
.element-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 14px;
}
@media only screen and (min-width: 768px) {
  .element-title {
    font-size: 26px;
  }
}
.element-text {
  color: #4F4F4F;
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .element-text {
    font-size: 22px;
  }
}

@media only screen and (min-width: 1200px) {
  .description-header {
    max-width: 60%;
  }
}

.importance {
  padding-top: 45px;
  padding-bottom: 45px;
  background-color: #024CEF;
  color: #fff;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .importance {
    padding-top: 60px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .importance {
    padding-bottom: 180px;
  }
}
@media only screen and (min-width: 1200px) {
  .importance {
    padding-bottom: 260px;
  }
}
.importance::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background-image: url("../images/bg/importance-bg.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .importance::after {
    background-position: left bottom;
  }
}
@media only screen and (min-width: 992px) {
  .importance::after {
    width: 50.3125%;
    height: 80%;
  }
}
.importance .container {
  position: relative;
  z-index: 1;
}
.importance .text-boxes {
  max-width: 80%;
}

/** section-feature-services */
@media only screen and (min-width: 992px) {
  .section-feature-services .posts .col-lg-4:nth-child(2n + 2) {
    margin-top: 80px;
  }
}

.cards-list-view .row {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .cards-list-view .row::before {
    content: "";
    display: block;
    width: 1px;
    height: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #C4C4C4;
  }
  .cards-list-view .row > * {
    border-top: 1px solid #C4C4C4;
  }
  .cards-list-view .row > *:nth-child(1), .cards-list-view .row > *:nth-child(2) {
    border-top-width: 0;
  }
}

.card.card-hoz {
  border: 0;
  border-radius: 0;
  align-items: center;
  flex-direction: row;
}
@media only screen and (min-width: 992px) {
  .card.card-hoz {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
.card.card-hoz .card-img {
  width: 25%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card.card-hoz .card-img-top {
  border-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card.card-hoz .card-body {
  width: 70%;
  padding: 0 0 0 12px;
}
.card.card-hoz .card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  color: #000;
}
@media only screen and (min-width: 768px) {
  .card.card-hoz .card-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .card.card-hoz .card-title {
    font-size: 22px;
  }
}

.ecom-list .row > * {
  margin-bottom: 24px;
}

.ecom-card {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background-color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .ecom-card {
    padding: 30px;
    height: 100%;
    flex-direction: column;
    border-radius: 16px;
    margin-bottom: 0;
  }
}
.ecom-card-img {
  width: 112px;
}
@media only screen and (min-width: 768px) {
  .ecom-card-img {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    margin-bottom: 16px;
    padding-bottom: 56.25%;
  }
}
.ecom-card-img-top {
  width: 112px;
  height: 74px;
}
@media only screen and (min-width: 768px) {
  .ecom-card-img-top {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
  }
}
.ecom-card-title {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 12px;
  margin-bottom: 0;
  font-size: 18px;
  color: #090f32;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .ecom-card-title {
    width: 100%;
    padding-left: 0;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
  }
}

.text-transform-none {
  text-transform: none !important;
}

.ecom-benefit-img > img {
  width: 80%;
  border-radius: 15px;
}

.ecom-benefit-img {
  border-radius: 5px;
  text-align-last: center;
  /* padding-left: 10%; */
  /* padding-right: 10%; */
  margin-bottom: 24px;
}

@media only screen and (max-width: 768px) {
  .ecom-benefit-img > img {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .ecom-benefit-img {
    padding-left: 15%;
    padding-right: 15%;
  }
}
@media only screen and (min-width: 992px) {
  .ecom-benefit-img {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }
}
.ecom-benefit-title {
  text-transform: uppercase;
  font-weight: 800;
  color: #024CEF;
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ecom-benefit-title {
    margin-bottom: 32px;
    font-size: 26px;
  }
}
@media only screen and (min-width: 768px) {
  .ecom-benefit-content {
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media only screen and (min-width: 992px) {
  .ecom-benefit-content {
    padding-right: 0;
  }
}
.ecom-benefit-content .lists li {
  text-align: center;
  font-size: 18px;
}

.lists li {
  box-shadow: 0 0 30px rgba(2, 76, 239, 0.15);
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .lists li {
    border-radius: 16px;
  }
}
.lists li:not(:last-child) {
  margin-bottom: 16px;
}

.ecom-benefit-content .lists li {
  font-size: 21px;
}

@media only screen and (min-width: 768px) {
  .lists li:not(:last-child) {
    margin-bottom: 24px;
  }
  .lists2 li:not(:last-child) {
    margin-bottom: 44px;
  }

  .ecom-benefit-content .lists li {
    line-height: 36px;
  }
}

.seeding-text-highlight {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .seeding-text-highlight {
    font-size: 24px;
  }
}

@media only screen and (min-width: 992px) {
  .seeding-socials {
    padding-left: 10%;
    padding-right: 10%;
  }
}

.seeding-social-group-name {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .seeding-social-group-name {
    margin-bottom: 0;
  }
}
.seeding-social-icon {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 40px;
}
@media only screen and (min-width: 992px) {
  .seeding-social-icon {
    width: 40px;
    height: 40px;
  }
}
.seeding-social-name {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 10px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .seeding-social-name {
    text-align: center;
  }
}
.seeding-social-img {
  padding-left: 10%;
  padding-right: 10%;
  margin-bottom: 12px;
}
.seeding-social-img img {
  border-radius: 38px;
  max-height: 56px;
}
.seeding-social ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.seeding-social ol li:not(:last-child) {
  margin-bottom: 4px;
}

.item-hoz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.item-hoz:last-child {
  margin-bottom: 0;
}
.item-hoz-img {
  width: 72px;
}
@media only screen and (min-width: 768px) {
  .item-hoz-img {
    width: 110px;
  }
}
.item-hoz-img-top {
  width: inherit;
}
.item-hoz-body {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 8px;
}
.item-hoz-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}
.item-hoz-text {
  text-align: justify;
  font-weight: 500;
}

.glow-box {
  position: relative;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 0 8px #024CEF;
  padding: 30px 24px;
  color: #fff8f8;
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
  .glow-box {
    padding: 48px 64px;
  }
}
.glow-box.small {
  padding: 24px;
}
.glow-box.small .glow-corner {
  width: 10px;
  height: 10px;
}
@media only screen and (min-width: 768px) {
  .glow-box.small .glow-corner.top-left {
    top: 10px;
    left: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .glow-box.small .glow-corner.top-right {
    top: 10px;
    right: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .glow-box.small .glow-corner.bottom-left {
    bottom: 10px;
    left: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .glow-box.small .glow-corner.bottom-right {
    bottom: 10px;
    right: 10px;
  }
}

.glow-box.blue {
  background-color: #024CEF;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .glow-box.blue {
    margin-bottom: 50px;
  }
}
.glow-box.green {
  background-color: #25ED8D;
  color: #000;
}
.glow-box p:last-child {
  margin-bottom: 0;
}
.glow-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #d9d9d9;
  border-radius: 50%;
}
.glow-corner.top-left {
  top: 10px;
  left: 10px;
}
@media only screen and (min-width: 768px) {
  .glow-corner.top-left {
    top: 24px;
    left: 24px;
  }
}
.glow-corner.top-right {
  top: 10px;
  right: 10px;
}
@media only screen and (min-width: 768px) {
  .glow-corner.top-right {
    top: 24px;
    right: 24px;
  }
}
.glow-corner.bottom-left {
  bottom: 10px;
  left: 10px;
}
@media only screen and (min-width: 768px) {
  .glow-corner.bottom-left {
    bottom: 24px;
    left: 24px;
  }
}
.glow-corner.bottom-right {
  bottom: 10px;
  right: 10px;
}
@media only screen and (min-width: 768px) {
  .glow-corner.bottom-right {
    bottom: 24px;
    right: 24px;
  }
}
.glow-bold {
  font-weight: 600;
  font-size: 18px;
  margin-top: 32px;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .glow-bold {
    font-weight: 900;
    font-size: 22px;
  }
}

@media only screen and (min-width: 768px) {
  .heading-type2 {
    padding-right: 100px;
  }
  .heading-type2 .title-type-2, .heading-type2 .textblock-title {
    max-width: 700px;
  }
}
@media only screen and (min-width: 768px) {
  .heading-type2::after {
    content: "";
    display: block;
    width: 56px;
    height: 21px;
    background: url(../images/bg/group-line.png) no-repeat top right;
    background-size: 56px auto;
    position: absolute;
    top: 0;
    right: 0;
  }
}

/** ads-cate-2 */
.ads-cate-2 {
  position: relative;
}
.ads-cate-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12%;
  bottom: -8%;
  width: 61.25%;
  background-image: url(../images/bg/bg-corner-left-ads.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.ads-cate-2 .container {
  position: relative;
  z-index: 1;
}

/** ads-cate-4 */
.social-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
  text-align: center;
  height: 100%;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .social-card {
    padding: 22px;
  }
}
.social-card::before {
  position: absolute;
  content: "";
  display: block;
  left: 12px;
  bottom: 16px;
  width: 36px;
  height: 4px;
  background: #00ED87;
}
.social-card-logos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.social-card-logos img {
  width: 40px;
}
@media only screen and (min-width: 768px) {
  .social-card-logos img {
    width: 56px;
  }
}
.social-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.social-card-desc {
  padding-bottom: 16px;
  position: relative;
}

@media (max-width: 991.98px) {
  .register-img img {
    /* max-width: 50%; */
  }
}
.register-img-verify img {
  max-height: 50px;
}
@media only screen and (min-width: 768px) {
  .register-img-verify img {
    max-height: 80px;
  }
}
.register-text-lead {
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
@media only screen and (min-width: 1200px) {
  .register-box.left {
    margin-right: 10%;
  }
}
@media only screen and (min-width: 1200px) {
  .register-box.right {
    margin-left: 10%;
  }
}

/* group */
.group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
@media only screen and (min-width: 992px) {
  .group {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.group-item {
  position: relative;
  width: 100%;
}
.group-item.child1, .group-item.child2 {
  display: flex;
  background-color: #00e88a;
  color: #fffbfb;
  padding: 16px;
  border-bottom: 1px solid #fff;
}
@media only screen and (min-width: 992px) {
  .group-item.child1, .group-item.child2 {
    width: 50%;
    height: 164px;
    padding: 20px 40px;
    border-bottom-width: 0;
  }
  .group-item.child1::before, .group-item.child2::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: #d9d9d9;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
  }
}
.group-item.child1::before {
  left: 10px;
}
@media only screen and (min-width: 992px) {
  .group-item.child1::after {
    content: "";
    position: absolute;
    left: -60px;
    top: 0;
    border-top: 82px solid transparent;
    border-bottom: 82px solid transparent;
    border-right: 60px solid #00e88a;
  }
}
.group-item.child2::before {
  right: 10px;
}
@media only screen and (min-width: 992px) {
  .group-item.child2::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 60px solid #00e88a;
    border-top: 82px solid transparent;
    border-bottom: 82px solid transparent;
  }
}
.group-item.child3 {
  background-color: #024CEF;
  color: #fff;
  padding: 12px;
}
@media only screen and (min-width: 992px) {
  .group-item.child3 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 134px;
    display: flex;
    align-items: center;
  }
  .group-item.child3::before, .group-item.child3::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
  }
  .group-item.child3::before {
    border-bottom: 134px solid #fff;
    border-right: 100px solid transparent;
    left: 0;
  }
  .group-item.child3::after {
    border-bottom: 134px solid #fff;
    border-left: 100px solid transparent;
    right: 0;
  }
  .group-item.child3 .group-item-text {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}
.group-item-text {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .group-item-text {
    font-size: 22px;
    font-weight: 900;
  }
}

.register-ellipse-left, .register-ellipse-right {
  display: inline-block;
  max-height: 120px;
  margin-top: 20px;
  margin-left: 8px;
  margin-right: 8px;
}
@media only screen and (min-width: 992px) {
  .register-ellipse-left, .register-ellipse-right {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    max-height: unset;
    position: absolute;
    top: 104px;
    width: 120px;
    height: auto;
  }
}
@media only screen and (min-width: 992px) {
  .register-ellipse-left {
    left: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .register-ellipse-right {
    right: 100px;
  }
}

.objects {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .objects {
    padding-top: 34px;
  }
  .objects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 266px;
    border-radius: 16px;
    background-color: #024CEF;
  }
}
.objects > * {
  position: relative;
  z-index: 1;
}

.object {
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .object {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}
.object-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;
}
.object-content {
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.polygon {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 240px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 8px;
  padding-left: 0px;
}
@media only screen and (min-width: 768px) {
  .polygon {
    box-shadow: none;
    margin-bottom: 0;
    width: 300px;
    height: 300px;
    position: relative;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../images/bg/polygon-shadow.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
@media only screen and (min-width: 992px) {
  .polygon {
    width: 380px;
  }
}
.polygon-img {
  padding-left: 15%;
  padding-right: 15%;
  margin-bottom: 14px;
}
@media only screen and (min-width: 992px) {
  .polygon-img {
    padding-left: 20%;
    padding-right: 20%;
  }
}
.polygon-title {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .polygon-title {
    font-size: 22px;
    font-weight: 900;
  }
}
.polygon > * {
  position: relative;
  z-index: 1;
}

.register-service-steps {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  position: relative;
}
.register-service-steps li {
  padding-bottom: 20px;
  padding-left: 38px;
  position: relative;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .register-service-steps li {
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  .register-service-steps li {
    padding-bottom: 56px;
  }
}
.register-service-steps li:last-child {
  padding-bottom: 0;
}
.register-service-steps li:last-child::after {
  display: none;
}
.register-service-steps li::before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #024CEF;
  position: absolute;
  left: 0;
  top: 4px;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgba(2, 76, 239, 0.5);
}
.register-service-steps li::after {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background-color: #024CEF;
  position: absolute;
  top: 4px;
  left: 5px;
  box-shadow: 0 0 12px 0 rgba(2, 76, 239, 0.5);
}

.register-cate-5 .container {
  position: relative;
  z-index: 1;
}

.register-checked-img {
  position: absolute;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 42.70833%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.register-checked-img img {
  width: auto;
  max-width: 480px;
}

@media (max-width: 991.98px) {
  .register-notify-img img {
    width: 50%;
  }
}

.bg-darkken {
  background-color: #1E1E1E;
  color: #fff;
}

.benefits2 .img-reasion {
  background-color: #1E1E1E;
}
.benefits2 .img-reasion img {
  max-width: 90%;
}

.graphic-introduction img {
  border-radius: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wrap-detail > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #000;
  row-gap: 16px;
}
@media only screen and (min-width: 768px) {
  .wrap-detail > ul {
    row-gap: 24px;
  }
}
.wrap-detail > ul > li {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .wrap-detail > ul > li {
    width: calc(50% - 12px);
  }
}
.wrap-detail > ul .list-anpha-item {
  margin-bottom: 0;
}
.wrap-detail > ul .list-anpha-item.active .list-anpha-title .underline {
  width: calc(100% + 34px);
}
.wrap-detail > ul .list-anpha-title {
  padding-bottom: 0;
  margin-bottom: 0;
}
.wrap-detail > ul .list-anpha-title::after {
  top: -4px;
}
.wrap-detail .list-anpha li ul {
  margin-top: 0;
  list-style: none;
  padding-left: 0;
}
.wrap-detail .list-anpha li ul li {
  padding-top: 12px;
}

.customer-pc {
  flex-wrap: wrap;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
  border-radius: 74px;
}
@media only screen and (min-width: 1200px) {
  .customer-pc {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.customer-leftcol {
  padding: 25px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .customer-leftcol {
    padding: 44px;
  }
}
.customer-label {
  color: #024CEF;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.customer-label span {
  display: block;
  text-align: center;
  font-size: 48px;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) {
  .customer-label span {
    font-size: 64px;
  }
}
.customer-logos {
  height: 100%;
}
.customer-logos > * {
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
}
.customer-logos > *:nth-child(1), .customer-logos > *:nth-child(2), .customer-logos > *:nth-child(3) {
  border-top-color: transparent;
}
.customer-logo {
  text-align: center;
  padding: 16px;
}
.customer-rightcol {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.customer-logo-mb {
  background-color: #fff;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.seo-intro-img img {
  border-radius: 8px;
}
@media only screen and (min-width: 768px) {
  .seo-intro-img img {
    border-radius: 16px;
  }
}
.seo-intro-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
  align-items: flex-start;
}
@media only screen and (min-width: 768px) {
  .seo-intro-header {
  }
}
.seo-intro-label {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 12px;
  font-weight: 800;
  color: #00E88F;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 6px;
}
@media only screen and (min-width: 768px) {
  .seo-intro-label {
    font-size: 18px;
  }
}
.seo-intro-label span {
  text-align: center;
  display: block;
  line-height: 1.2;
}
.seo-intro-title {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 16px;
  margin-top: auto;
}

@media only screen and (min-width: 768px) {
  .seo-meta-img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.seo-meta-img img {
  width: 60%;
}
@media only screen and (min-width: 1200px) {
  .seo-meta-img img {
    width: 100%;
  }
}
/*------------------------------------------------------------------
[WATF MEDIA FOOTER]
------------------------------------------------------------------*/

.watf-footer,
.watf-footer *,
.watf-footer *::before,
.watf-footer *::after {
    box-sizing: border-box;
}

.watf-footer {
    --watf-footer-blue: #0757ed;
    --watf-footer-dark-blue: #0345cc;
    --watf-footer-green: #29d36b;
    --watf-footer-text: #252a35;
    --watf-footer-muted: #525a68;
    --watf-footer-line: #dce4ee;

    width: 100%;
    margin: 0;
    padding: 50px 18px 18px;
    color: var(--watf-footer-text);
    background: #ffffff;
    font-family: inherit;
}

.watf-footer img {
    max-width: 100%;
}

.watf-footer a {
    color: inherit;
    text-decoration: none;
}

.watf-footer ul,
.watf-footer ol {
    margin: 0;
    padding: 0;
}

.watf-footer__wrapper {
    position: relative;
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(7, 87, 237, 0.06);
    border-radius: 6px;
    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #f2f7ff 48%,
            #f8fbff 100%
        );
    box-shadow:
        0 22px 65px rgba(17, 64, 128, 0.07),
        0 4px 15px rgba(17, 64, 128, 0.035);
}

.watf-footer__wrapper::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 18px;
    z-index: 0;
    width: 180px;
    height: 105px;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.25) 2px,
            transparent 2.5px
        );
    background-size: 27px 27px;
}

.watf-footer__wrapper::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 145px;
    z-index: 0;
    width: 160px;
    height: 120px;
    pointer-events: none;
    opacity: 0.32;
    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.25) 2px,
            transparent 2.5px
        );
    background-size: 27px 27px;
}

.watf-footer__top-line {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 5px;
    border-radius: 5px 5px 0 0;
    background:
        linear-gradient(
            90deg,
            #064de8 0%,
            #0757ed 43%,
            #0f83be 57%,
            #2bd34f 100%
        );
}

.watf-footer__top-line::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 64px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 0 0 26px 26px;
    background:
        linear-gradient(
            135deg,
            #0757ed 0%,
            #126fdf 65%,
            #21adac 100%
        );
    box-shadow:
        0 5px 13px rgba(7, 87, 237, 0.16);
}

.watf-footer__main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(470px, 1.03fr)
        minmax(290px, 0.62fr);
    gap: 22px;
    align-items: stretch;
    padding: 79px 44px 40px;
}

.watf-footer__card {
    position: relative;
    min-width: 0;
    min-height: 630px;
    overflow: hidden;
    padding: 43px 38px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.89) 100%
        );
    box-shadow:
        0 18px 46px rgba(29, 74, 139, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/*------------------------------------------------------------------
[THÔNG TIN CÔNG TY]
------------------------------------------------------------------*/

.watf-footer__company {
    padding-right: 42px;
    padding-bottom: 74px;
}

.watf-footer__company-dots {
    position: absolute;
    top: 19px;
    right: 18px;
    width: 108px;
    height: 82px;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.19) 2px,
            transparent 2.5px
        );
    background-size: 17px 17px;
}

.watf-footer__logo {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    min-height: 88px;
    margin: 0 0 23px;
}

.watf-footer__logo a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.watf-footer__logo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 245px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain;
}

.watf-footer__company-name {
    position: relative;
    z-index: 3;
    max-width: 460px;
    margin: 0;
    color: #343946;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: uppercase;
}

.watf-footer__small-line {
    position: relative;
    z-index: 3;
    display: block;
    width: 54px;
    height: 3px;
    margin: 18px 0 22px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--watf-footer-blue) 0%,
            var(--watf-footer-green) 100%
        );
}

.watf-footer__contact-list {
    position: relative;
    z-index: 3;
    max-width: 410px;
}

.watf-footer__contact {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 72px;
}

.watf-footer__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--watf-footer-blue);
    border: 1px solid rgba(7, 87, 237, 0.09);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 8px 22px rgba(7, 87, 237, 0.12),
        inset 0 1px 0 #ffffff;
}

.watf-footer__contact-icon svg {
    display: block;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-footer__contact-text {
    min-width: 0;
    padding: 17px 0 16px;
    color: var(--watf-footer-muted);
    border-bottom: 1px solid var(--watf-footer-line);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}

.watf-footer__contact-text strong {
    color: var(--watf-footer-dark-blue);
    font-weight: 700;
}

.watf-footer__contact-text span {
    color: var(--watf-footer-muted);
}

.watf-footer__contact-text a {
    color: var(--watf-footer-muted);
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.watf-footer__contact-text a:hover {
    color: var(--watf-footer-blue);
}

.watf-footer__contact:last-child .watf-footer__contact-text {
    border-bottom: 0;
}

.watf-footer__growth {
    position: absolute;
    right: -15px;
    bottom: -13px;
    z-index: 1;
    width: 265px;
    height: auto;
    pointer-events: none;
    opacity: 0.82;
}

/*------------------------------------------------------------------
[TITLE CARD]
------------------------------------------------------------------*/

.watf-footer__title {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin: 0 0 22px;
}

.watf-footer__title-icon {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.watf-footer__title-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.watf-footer__title-content {
    min-width: 0;
}

.watf-footer__title h2 {
    margin: 3px 0 0;
    color: var(--watf-footer-dark-blue);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.watf-footer__title-line {
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 14px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--watf-footer-blue) 0%,
            var(--watf-footer-green) 100%
        );
}

/*------------------------------------------------------------------
[DỊCH VỤ]
------------------------------------------------------------------*/

.watf-footer__services {
    padding-right: 35px;
    padding-left: 35px;
}

.watf-footer__services-dots {
    position: absolute;
    right: 22px;
    bottom: 14px;
    width: 100px;
    height: 72px;
    opacity: 0.17;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.22) 2px,
            transparent 2.5px
        );
    background-size: 18px 18px;
}

.watf-footer__service-columns {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 33px;
}

.watf-footer__links {
    list-style: none;
}

.watf-footer__links li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 19px;
    border-bottom: 1px solid var(--watf-footer-line);
}

.watf-footer__links li::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--watf-footer-green);
}

.watf-footer__links a {
    display: block;
    min-width: 0;
    padding: 15px 2px 14px;
    color: #252a34;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.45;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.watf-footer__links a:hover {
    color: var(--watf-footer-blue);
    transform: translateX(3px);
}

/*------------------------------------------------------------------
[CHÍNH SÁCH]
------------------------------------------------------------------*/

.watf-footer__policy {
    display: flex;
    flex-direction: column;
    padding-right: 31px;
    padding-left: 31px;
}

.watf-footer__policy-links {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: 100%;
}

.watf-footer__policy-links li {
    padding-left: 19px;
}

.watf-footer__social {
    position: relative;
    z-index: 3;
    margin-top: 29px;
    padding-top: 27px;
    border-top: 1px solid var(--watf-footer-line);
}

.watf-footer__social h3 {
    margin: 0 0 24px;
    color: var(--watf-footer-dark-blue);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.watf-footer__social-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
    align-items: center;
}

.watf-footer__social-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.watf-footer__social-grid a:hover {
    transform: translateY(-3px);
    filter:
        drop-shadow(
            0 8px 10px rgba(7, 87, 237, 0.17)
        );
}

.watf-footer__social-grid img {
    display: block;
    width: 43px;
    height: 43px;
    margin: 0;
    object-fit: contain;
}

/*------------------------------------------------------------------
[COPYRIGHT]
------------------------------------------------------------------*/

.watf-footer__bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 94px;
    overflow: hidden;
    padding: 15px 64px;
    color: #ffffff;
    background:
        linear-gradient(
            100deg,
            #0644d8 0%,
            #0757ed 49%,
            #007ed7 100%
        );
}

.watf-footer__copyright {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 18px;
}

.watf-footer__copyright-shield {
    display: block;
    flex: 0 0 auto;
    width: 58px;
}

.watf-footer__copyright-shield svg {
    display: block;
    width: 100%;
    height: auto;
    filter:
        drop-shadow(
            0 8px 10px rgba(0, 29, 105, 0.22)
        );
}

.watf-footer__copyright-text {
    min-width: 0;
}

.watf-footer__copyright-text p {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.watf-footer__copyright-text span {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.watf-footer__bottom-dots {
    position: absolute;
    top: 11px;
    left: 57%;
    width: 165px;
    height: 80px;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        radial-gradient(
            circle,
            #ffffff 2px,
            transparent 2.5px
        );
    background-size: 16px 16px;
}

.watf-footer__circuit {
    position: absolute;
    right: -12px;
    bottom: -3px;
    z-index: 2;
    width: 390px;
    height: 112px;
    pointer-events: none;
}

/*------------------------------------------------------------------
[DESKTOP NHỎ]
------------------------------------------------------------------*/

@media only screen and (max-width: 1399.98px) {
    .watf-footer__main {
        grid-template-columns:
            minmax(360px, 1.01fr)
            minmax(430px, 1.04fr)
            minmax(280px, 0.64fr);
        gap: 18px;
        padding-right: 28px;
        padding-left: 28px;
    }

    .watf-footer__card {
        padding-right: 29px;
        padding-left: 29px;
    }

    .watf-footer__service-columns {
        column-gap: 22px;
    }

    .watf-footer__links a {
        font-size: 14px;
    }

    .watf-footer__company-name {
        font-size: 16px;
    }

    .watf-footer__contact-text {
        font-size: 14px;
    }
}

/*------------------------------------------------------------------
[TABLET NGANG]
------------------------------------------------------------------*/

@media only screen and (max-width: 1199.98px) {
    .watf-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .watf-footer__policy {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .watf-footer__policy-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
    }

    .watf-footer__social-grid {
        grid-template-columns: repeat(8, 48px);
        justify-content: flex-start;
    }
}

/*------------------------------------------------------------------
[TABLET DỌC]
------------------------------------------------------------------*/

@media only screen and (max-width: 991.98px) {
    .watf-footer {
        padding: 35px 12px 12px;
    }

    .watf-footer__main {
        grid-template-columns: 1fr;
        padding: 65px 23px 28px;
    }

    .watf-footer__card {
        min-height: 0;
        padding: 35px 30px;
        border-radius: 21px;
    }

    .watf-footer__company {
        padding-bottom: 65px;
    }

    .watf-footer__contact-list {
        max-width: 520px;
    }

    .watf-footer__policy {
        grid-column: auto;
    }

    .watf-footer__policy-links {
        display: block;
    }

    .watf-footer__social-grid {
        grid-template-columns: repeat(8, 48px);
    }

    .watf-footer__bottom {
        padding-right: 34px;
        padding-left: 34px;
    }
}

/*------------------------------------------------------------------
[MOBILE]
------------------------------------------------------------------*/

@media only screen and (max-width: 767.98px) {
    .watf-footer {
        padding: 25px 10px 10px;
    }

    .watf-footer__wrapper::before,
    .watf-footer__wrapper::after {
        display: none;
    }

    .watf-footer__top-line::after {
        width: 52px;
        height: 15px;
    }

    .watf-footer__main {
        gap: 15px;
        padding: 53px 13px 17px;
    }

    .watf-footer__card {
        padding: 28px 21px;
        border-radius: 18px;
    }

    .watf-footer__company {
        padding-bottom: 48px;
    }

    .watf-footer__logo {
        min-height: 70px;
        margin-bottom: 19px;
    }

    .watf-footer__logo img {
        width: 210px !important;
    }

    .watf-footer__company-name {
        font-size: 14px;
        line-height: 1.55;
    }

    .watf-footer__small-line {
        margin-top: 15px;
        margin-bottom: 17px;
    }

    .watf-footer__contact {
        grid-template-columns: 43px minmax(0, 1fr);
        gap: 13px;
        min-height: 66px;
    }

    .watf-footer__contact-icon {
        width: 43px;
        height: 43px;
    }

    .watf-footer__contact-icon svg {
        width: 21px;
        height: 21px;
    }

    .watf-footer__contact-text {
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 13.5px;
    }

    .watf-footer__growth {
        width: 185px;
        opacity: 0.38;
    }

    .watf-footer__title {
        gap: 14px;
        margin-bottom: 19px;
    }

    .watf-footer__title-icon {
        width: 40px;
        height: 40px;
    }

    .watf-footer__title h2 {
        font-size: 18px;
    }

    .watf-footer__title-line {
        margin-top: 11px;
    }

    .watf-footer__service-columns {
        grid-template-columns: 1fr;
    }

    .watf-footer__links a {
        padding-top: 14px;
        padding-bottom: 13px;
        font-size: 14px;
    }

    .watf-footer__links li::before {
        top: 22px;
    }

    .watf-footer__social {
        margin-top: 25px;
        padding-top: 23px;
    }

    .watf-footer__social h3 {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .watf-footer__social-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 19px 15px;
    }

    .watf-footer__social-grid img {
        width: 41px;
        height: 41px;
    }

    .watf-footer__bottom {
        min-height: 107px;
        padding: 17px 19px;
    }

    .watf-footer__copyright {
        gap: 13px;
    }

    .watf-footer__copyright-shield {
        width: 48px;
    }

    .watf-footer__copyright-text p {
        font-size: 12px;
    }

    .watf-footer__copyright-text span {
        font-size: 11.5px;
    }

    .watf-footer__bottom-dots,
    .watf-footer__circuit {
        display: none;
    }
}

@media only screen and (max-width: 479.98px) {
    .watf-footer__card {
        padding-right: 17px;
        padding-left: 17px;
    }

    .watf-footer__company {
        padding-bottom: 28px;
    }

    .watf-footer__growth {
        display: none;
    }

    .watf-footer__company-dots,
    .watf-footer__services-dots {
        display: none;
    }

    .watf-footer__contact-text {
        font-size: 13px;
    }

    .watf-footer__bottom {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/*------------------------------------------------------------------
[CÁC CSS CŨ KHÁC]
------------------------------------------------------------------*/

.list-anpha li ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.5s ease,
        opacity 0.5s ease;
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 10px;
}

.list-anpha li.active ul {
    max-height: 500px;
    opacity: 1;
}

.list-anpha h4 {
    cursor: pointer;
    user-select: none;
}

.list-anpha li ul li {
    list-style: none;
}

.list-anpha li.active ul li {
    list-style: disc;
}

.list-anpha-title {
    position: relative;
    display: block;
    cursor: pointer;
    padding-bottom: 10px;
}

.list-anpha-title .underline {
    display: block;
    width: 0;
    height: 3px;
    border-radius: 2px;
    background:
        linear-gradient(
            90deg,
            #25ed8d 0%,
            #024cef 100%
        );
    transition: width 0.5s;
}

.list-anpha-item.active .list-anpha-title .underline {
    width: 107%;
    margin-top: 12px;
}

.blockquote-inner {
    padding: 15px 20px 15px 35px;
}

.aligncenter {
    text-align: center;
}

.blog-single {
    max-width: 1200px;
}

h3.text-primary-color-1.fw-bold {
    font-size: 1.5rem;
}

@media only screen and (min-width: 992px) {
    h3.text-primary-color-1.fw-bold {
        padding-left: 35px;
    }
}

@media only screen and (max-width: 575.98px) {
    .custom-gutter-mobile > [class^="col-"] {
        padding-right: 3px;
        padding-left: 3px;
    }
}




/*==================================================================
SECTION: 6 BÀI VIẾT MỚI NHẤT
==================================================================*/

.watf-latest-posts,
.watf-latest-posts *,
.watf-latest-posts *::before,
.watf-latest-posts *::after {
    box-sizing: border-box;
}

.watf-latest-posts {
    --watf-posts-blue: #0757ed;
    --watf-posts-blue-dark: #061348;
    --watf-posts-green: #20d99a;
    --watf-posts-text: #17213b;
    --watf-posts-muted: #667085;

    position: relative;
    width: 100%;

    padding: 76px 0 84px;

    overflow: hidden;

    background-color: #ffffff;
    background-image: url("/wp-content/uploads/2026/08/newbg3.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Vòng trang trí nền */

.watf-latest-posts::before {
    content: "";

    position: absolute;

    top: -230px;
    right: -230px;

    width: 550px;
    height: 550px;

    border: 1px solid rgba(7, 87, 237, 0.08);
    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0 0 0 38px rgba(7, 87, 237, 0.025),
        0 0 0 76px rgba(7, 87, 237, 0.018);
}

/*==================================================================
HEADER
==================================================================*/

.watf-latest-posts__header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;
}

.watf-latest-posts__heading {
    min-width: 0;
}

.watf-latest-posts__eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--watf-posts-blue);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.watf-latest-posts__heading h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;

    margin: 0;

    color: var(--watf-posts-blue-dark);

    font-size: clamp(38px, 3.6vw, 62px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.watf-latest-posts__title-mark {
    display: inline-block;

    width: clamp(25px, 2.1vw, 36px);
    height: clamp(19px, 1.6vw, 27px);

    background:
        linear-gradient(
            135deg,
            #20d99a 0%,
            #10bc83 100%
        );

    transform: skew(-18deg);
}

.watf-latest-posts__heading-line {
    display: block;

    width: 105px;
    height: 4px;

    margin-top: 19px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--watf-posts-blue) 0%,
            var(--watf-posts-blue) 70%,
            var(--watf-posts-green) 70%,
            var(--watf-posts-green) 100%
        );
}

/*==================================================================
NÚT XEM TẤT CẢ
==================================================================*/

.watf-latest-posts__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 52px;

    padding: 13px 22px;

    color: #ffffff;

    border: 1px solid var(--watf-posts-blue);
    border-radius: 50px;

    background: var(--watf-posts-blue);

    box-shadow:
        0 10px 24px rgba(7, 87, 237, 0.2);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.watf-latest-posts__view-all svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.25s ease;
}

.watf-latest-posts__view-all:hover,
.watf-latest-posts__view-all:focus {
    color: #ffffff;

    border-color: #0646ca;
    background: #0646ca;

    box-shadow:
        0 13px 28px rgba(7, 87, 237, 0.27);
}

.watf-latest-posts__view-all:hover svg,
.watf-latest-posts__view-all:focus svg {
    transform: translateX(4px);
}

/*==================================================================
GRID
==================================================================*/

.watf-latest-posts__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 28px;
}

/*==================================================================
CARD
==================================================================*/

.watf-latest-posts__item {
    min-width: 0;
    height: 100%;
}

.watf-latest-posts__card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 490px;

    overflow: hidden;

    color: var(--watf-posts-text);

    border: 1px solid rgba(202, 216, 238, 0.88);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 13px 32px rgba(31, 70, 128, 0.1);

    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.watf-latest-posts__card:hover,
.watf-latest-posts__card:focus {
    color: var(--watf-posts-text);

    border-color: rgba(7, 87, 237, 0.32);

    box-shadow:
        0 19px 42px rgba(31, 70, 128, 0.17);

    transform: translateY(-4px);
}

/*==================================================================
ẢNH
==================================================================*/

.watf-latest-posts__image {
    position: relative;

    flex: 0 0 auto;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e8f1ff 0%,
            #f6faff 100%
        );
}

.watf-latest-posts__thumbnail {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.45s ease;
}

.watf-latest-posts__card:hover
.watf-latest-posts__thumbnail {
    transform: scale(1.055);
}

/* Placeholder khi bài không có ảnh */

.watf-latest-posts__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: rgba(7, 87, 237, 0.36);

    background:
        linear-gradient(
            135deg,
            #e8f2ff 0%,
            #f8fbff 100%
        );
}

.watf-latest-posts__placeholder svg {
    width: 74px;
    height: 74px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*==================================================================
NỘI DUNG CARD
==================================================================*/

.watf-latest-posts__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    padding: 23px 24px 27px;
}

.watf-latest-posts__meta {
    display: flex;
    align-items: center;

    min-height: 20px;

    margin-bottom: 11px;
}

.watf-latest-posts__date {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--watf-posts-muted);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.watf-latest-posts__date svg {
    display: block;

    width: 16px;
    height: 16px;

    fill: none;
    stroke: var(--watf-posts-blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.watf-latest-posts__post-title {
    display: -webkit-box;

    min-height: 56px;

    margin: 0 0 13px;

    overflow: hidden;

    color: var(--watf-posts-blue-dark);

    font-size: clamp(19px, 1.4vw, 23px);
    font-weight: 700;
    line-height: 1.28;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.watf-latest-posts__excerpt {
    display: -webkit-box;

    margin: 0 0 21px;

    overflow: hidden;

    color: #46516b;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.watf-latest-posts__read-more {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-top: auto;

    color: var(--watf-posts-blue);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.watf-latest-posts__read-more svg {
    display: block;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.25s ease;
}

.watf-latest-posts__card:hover
.watf-latest-posts__read-more svg {
    transform: translateX(4px);
}

/* Thanh màu đáy card */

.watf-latest-posts__bottom-line {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--watf-posts-blue) 0%,
            var(--watf-posts-blue) 72%,
            var(--watf-posts-green) 72%,
            var(--watf-posts-green) 100%
        );
}

/* Nút mobile mặc định ẩn */

.watf-latest-posts__mobile-action {
    display: none;

    position: relative;
    z-index: 2;

    margin-top: 30px;

    text-align: center;
}

/*==================================================================
DESKTOP VỪA
==================================================================*/

@media only screen and (max-width: 1199.98px) {
    .watf-latest-posts {
        padding:
            68px
            0
            74px;
    }

    .watf-latest-posts__grid {
        gap: 22px;
    }

    .watf-latest-posts__body {
        padding:
            21px
            21px
            26px;
    }

    .watf-latest-posts__post-title {
        font-size: 20px;
    }
}

/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {
    .watf-latest-posts {
        padding:
            62px
            0
            68px;
    }

    .watf-latest-posts__header {
        margin-bottom: 34px;
    }

    .watf-latest-posts__heading h2 {
        font-size: 44px;
    }

    .watf-latest-posts__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .watf-latest-posts__card {
        min-height: 470px;
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-latest-posts {
        padding:
            46px
            0
            52px;
    }

    .watf-latest-posts__header {
        display: block;

        margin-bottom: 27px;
    }

    .watf-latest-posts__eyebrow {
        margin-bottom: 7px;

        font-size: 13px;
    }

    .watf-latest-posts__heading h2 {
        gap: 10px;

        font-size: clamp(30px, 9vw, 39px);
        line-height: 1.08;
    }

    .watf-latest-posts__title-mark {
        width: 22px;
        height: 17px;
    }

    .watf-latest-posts__heading-line {
        width: 88px;
        height: 3px;

        margin-top: 15px;
    }

    .watf-latest-posts__view-all--desktop {
        display: none;
    }

    .watf-latest-posts__grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .watf-latest-posts__card {
        width: 100%;
        max-width: 500px;
        min-height: 0;

        margin: 0 auto;

        border-radius: 16px;
    }

    .watf-latest-posts__body {
        padding:
            20px
            19px
            25px;
    }

    .watf-latest-posts__post-title {
        min-height: 0;

        font-size: 20px;
    }

    .watf-latest-posts__excerpt {
        font-size: 14px;
    }

    .watf-latest-posts__mobile-action {
        display: block;
    }

    .watf-latest-posts__view-all {
        width: 100%;
        max-width: 320px;
    }
}

/*==================================================================
MOBILE NHỎ
==================================================================*/

@media only screen and (max-width: 479.98px) {
    .watf-latest-posts__body {
        padding:
            18px
            17px
            23px;
    }

    .watf-latest-posts__post-title {
        font-size: 19px;
    }

    .watf-latest-posts__excerpt {
        line-height: 1.5;
    }
}

/*==================================================================
HOMEPAGE: ĐỒNG BỘ SECTION TITLE
Phạm vi chỉ áp dụng bên trong .watf-homepage của template trang chủ.
Không thay đổi style của header, footer hoặc các trang khác.
==================================================================*/

.watf-homepage h2.watf-home-title,
.watf-homepage .watf-strength__title.watf-home-title,
.watf-homepage .watf-expert-team__header h2.watf-home-title,
.watf-homepage .watf-vision-mission__title.watf-home-title,
.watf-homepage .watf-latest-posts__heading h2.watf-home-title,
.watf-homepage .watf-stats__heading.watf-home-title,
.watf-homepage .watf-audience__header h2.watf-home-title,
.watf-homepage .pricing-title.watf-home-title {
    position: relative;

    display: inline-block;

    width: auto;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: #000000;

    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;

    text-align: left;
    text-transform: uppercase;
    white-space: normal;
}

.watf-homepage h2.watf-home-title::after {
    content: "";

    position: static;
    inset: auto;

    display: inline-block;

    width: 10px;
    height: 10px;

    margin-left: 10px;

    vertical-align: 1px;

    border: 0;
    border-radius: 0;

    background: #00e88f;

    transform: skew(-20deg);
}

/* Tắt hình thoi trang trí riêng của title bảng giá cũ. */
.watf-homepage .pricing-title.watf-home-title::before {
    content: none;
    display: none;
}

/* Khoảng cách tiêu đề đồng nhất với .section-title gốc. */
.watf-homepage .watf-strength__header,
.watf-homepage .watf-expert-team__header,
.watf-homepage .watf-vision-mission__header,
.watf-homepage .watf-latest-posts__header,
.watf-homepage .watf-audience__header {
    margin-bottom: 16px;
}

/* Giữ phần mô tả của section số liệu cách tiêu đề hợp lý
   sau khi bỏ đường line trang trí cũ. */
.watf-homepage .watf-stats__intro-text {
    margin-top: 18px;
}

/* Các title cũ từng dùng flex hoặc chiều rộng riêng. */
.watf-homepage .watf-strength__title.watf-home-title,
.watf-homepage .watf-expert-team__header h2.watf-home-title,
.watf-homepage .watf-vision-mission__title.watf-home-title,
.watf-homepage .watf-latest-posts__heading h2.watf-home-title,
.watf-homepage .watf-stats__heading.watf-home-title,
.watf-homepage .watf-audience__header h2.watf-home-title,
.watf-homepage .pricing-title.watf-home-title {
    gap: 0;
}

@media only screen and (min-width: 768px) {
    .watf-homepage h2.watf-home-title,
    .watf-homepage .watf-strength__title.watf-home-title,
    .watf-homepage .watf-expert-team__header h2.watf-home-title,
    .watf-homepage .watf-vision-mission__title.watf-home-title,
    .watf-homepage .watf-latest-posts__heading h2.watf-home-title,
    .watf-homepage .watf-stats__heading.watf-home-title,
    .watf-homepage .watf-audience__header h2.watf-home-title,
    .watf-homepage .pricing-title.watf-home-title {
        font-size: 32px;
    }

    .watf-homepage h2.watf-home-title::after {
        width: 14px;
        height: 14px;
    }

    .watf-homepage .watf-strength__header,
    .watf-homepage .watf-expert-team__header,
    .watf-homepage .watf-vision-mission__header,
    .watf-homepage .watf-latest-posts__header,
    .watf-homepage .watf-audience__header {
        margin-bottom: 28px;
    }

    .watf-homepage .watf-stats__intro-text {
        margin-top: 24px;
    }
}

/*==================================================================
HOMEPAGE: ĐƠN VỊ HỢP TÁC
Chỉ áp dụng trong .watf-homepage nên không ảnh hưởng trang khác.
==================================================================*/

.watf-homepage .watf-partners,
.watf-homepage .watf-partners *,
.watf-homepage .watf-partners *::before,
.watf-homepage .watf-partners *::after {
    box-sizing: border-box;
}

.watf-homepage .watf-partners {
    --watf-partners-blue: #0757ed;
    --watf-partners-dark: #061348;
    --watf-partners-green: #00e88f;
    --watf-partners-text: #34405d;
    --watf-partners-border: rgba(187, 205, 231, 0.72);

    position: relative;

    width: 100%;

    padding: 72px 0 80px;

    overflow: hidden;

    border-top: 1px solid rgba(7, 87, 237, 0.08);

    background-color: #ffffff;
    background-image: url("/wp-content/uploads/2026/08/newbg1.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Dấu nhận diện xanh ở góc phải, không dùng số thứ tự. */
.watf-homepage .watf-partners::before,
.watf-homepage .watf-partners::after {
    content: "";

    position: absolute;

    pointer-events: none;

    transform: skew(-20deg);
}

.watf-homepage .watf-partners::before {
    top: 22px;
    right: 3.2%;

    width: 58px;
    height: 92px;

    background: rgba(7, 87, 237, 0.95);
}

.watf-homepage .watf-partners::after {
    top: 70px;
    right: calc(3.2% + 69px);

    width: 21px;
    height: 21px;

    background: var(--watf-partners-green);
}

/*==================================================================
HEADER
==================================================================*/

.watf-homepage .watf-partners__header {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 520px);

    gap: 42px;
    align-items: end;

    margin-bottom: 38px;
    padding-right: 125px;
}

.watf-homepage .watf-partners__heading {
    min-width: 0;
}

.watf-homepage .watf-partners__eyebrow {
    display: block;

    margin: 0 0 9px;

    color: var(--watf-partners-blue);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.watf-homepage .watf-partners__description {
    max-width: 520px;

    margin: 0;

    color: var(--watf-partners-text);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.watf-homepage .watf-partners__description strong {
    color: var(--watf-partners-blue);
    font-weight: 700;
}

/*==================================================================
DANH SÁCH LOGO
Dùng flex để hàng cuối tự động nằm giữa.
==================================================================*/

.watf-homepage .watf-partners__grid {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 18px;

    width: 100%;
}

.watf-homepage .watf-partners__item {
    flex:
        0
        0
        calc((100% - 90px) / 6);

    min-width: 0;
}

.watf-homepage .watf-partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 2.45 / 1;

    padding: 15px 17px;

    overflow: hidden;

    border: 1px solid var(--watf-partners-border);
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(38, 74, 127, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);

    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease;
}

.watf-homepage .watf-partners__logo:hover {
    transform: translateY(-4px);

    border-color: rgba(7, 87, 237, 0.3);

    box-shadow:
        0 14px 28px rgba(38, 74, 127, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.watf-homepage .watf-partners__logo img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: contain;
    object-position: center;
}

/*==================================================================
DÒNG KẾT
==================================================================*/

.watf-homepage .watf-partners__note {
    position: relative;
    z-index: 2;

    width: min(100%, 720px);

    margin:
        34px
        auto
        0;

    color: #52617d;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;

    text-align: center;
}

.watf-homepage .watf-partners__note strong {
    color: var(--watf-partners-blue);
    font-weight: 700;

    text-transform: uppercase;
}

/*==================================================================
LAPTOP VÀ TABLET NGANG
==================================================================*/

@media only screen and (max-width: 1199.98px) {
    .watf-homepage .watf-partners {
        padding:
            62px
            0
            70px;
    }

    .watf-homepage .watf-partners__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 420px);

        gap: 30px;

        padding-right: 105px;
    }

    .watf-homepage .watf-partners__item {
        flex-basis:
            calc((100% - 54px) / 4);
    }
}

/*==================================================================
TABLET DỌC
==================================================================*/

@media only screen and (max-width: 991.98px) {
    .watf-homepage .watf-partners::before {
        right: 22px;

        width: 45px;
        height: 72px;
    }

    .watf-homepage .watf-partners::after {
        top: 58px;
        right: 78px;

        width: 17px;
        height: 17px;
    }

    .watf-homepage .watf-partners__header {
        grid-template-columns: 1fr;

        gap: 15px;

        padding-right: 95px;
    }

    .watf-homepage .watf-partners__description {
        max-width: 650px;
    }

    .watf-homepage .watf-partners__logo {
        padding:
            14px
            15px;
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-homepage .watf-partners {
        padding:
            46px
            0
            52px;
    }

    .watf-homepage .watf-partners::before {
        top: 16px;
        right: 17px;

        width: 30px;
        height: 49px;
    }

    .watf-homepage .watf-partners::after {
        top: 43px;
        right: 55px;

        width: 12px;
        height: 12px;
    }

    .watf-homepage .watf-partners__header {
        margin-bottom: 27px;
        padding-right: 60px;
    }

    .watf-homepage .watf-partners__eyebrow {
        margin-bottom: 7px;

        font-size: 12px;
    }

    .watf-homepage .watf-partners__description {
        font-size: 14px;
        line-height: 1.55;
    }

    .watf-homepage .watf-partners__grid {
        gap: 12px;
    }

    .watf-homepage .watf-partners__item {
        flex-basis:
            calc((100% - 24px) / 3);
    }

    .watf-homepage .watf-partners__logo {
        padding:
            10px
            11px;

        border-radius: 10px;
    }

    .watf-homepage .watf-partners__note {
        margin-top: 26px;

        font-size: 13px;
    }
}

/*==================================================================
MOBILE NHỎ
==================================================================*/

@media only screen and (max-width: 575.98px) {
    .watf-homepage .watf-partners__header {
        padding-right: 45px;
    }

    .watf-homepage .watf-partners__item {
        flex-basis:
            calc((100% - 12px) / 2);
    }

    .watf-homepage .watf-partners__logo {
        padding:
            12px
            13px;
    }
}

/* Tôn trọng cài đặt giảm chuyển động của người dùng. */
@media (prefers-reduced-motion: reduce) {
    .watf-homepage .watf-partners__logo {
        transition: none;
    }

    .watf-homepage .watf-partners__logo:hover {
        transform: none;
    }
}



/* =========================================================
BỎ ĐƯỜNG GẠCH DƯỚI TRONG FOOTER
- Danh sách dịch vụ
- Danh sách chính sách
- Địa chỉ
- Mã số thuế
- Email
- Hotline
========================================================= */

.watf-footer .watf-footer__links li,
.watf-footer .watf-footer__contact-text {
    border-bottom: none;
}

/*==================================================================
WATF CONTENT SYSTEM 1296PX - HOMEPAGE + INTRODUCTION
Mục tiêu:
- Nội dung chính thống nhất tối đa 1296px.
- Chỉ tác động trang chủ, trang giới thiệu và footer.
- Không sửa cấu trúc/style của các trang dịch vụ khác.
==================================================================*/

.watf-homepage,
.watf-introduction-page {
    --watf-content-max: 1296px;
    --watf-content-gutter: 24px;
}

/* Container Bootstrap và các container custom trên hai trang */
.watf-homepage .container,
.watf-introduction-page .container,
.watf-homepage .watf-container-1296,
.watf-introduction-page .watf-container-1296 {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--watf-content-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--watf-content-gutter);
    padding-left: var(--watf-content-gutter);
}

/* Không cho grid/flex child ép container rộng hơn 1296px */
.watf-homepage .row > *,
.watf-introduction-page .row > *,
.watf-homepage [class*="__grid"] > *,
.watf-introduction-page [class*="__grid"] > *,
.watf-homepage [class*="__layout"] > *,
.watf-introduction-page [class*="__layout"] > * {
    min-width: 0;
}

.watf-homepage img,
.watf-introduction-page img,
.watf-homepage svg,
.watf-introduction-page svg {
    max-width: 100%;
}

/* Dòng chữ dài không được đẩy ngang layout */
.watf-homepage h1,
.watf-homepage h2,
.watf-homepage h3,
.watf-homepage p,
.watf-homepage a,
.watf-introduction-page h1,
.watf-introduction-page h2,
.watf-introduction-page h3,
.watf-introduction-page p,
.watf-introduction-page a {
    overflow-wrap: break-word;
}

/*==================================================================
TRANG CHỦ - ABOUT US
==================================================================*/

.watf-homepage .watf-strength {
    min-height: 0;
    padding-top: 58px;
    padding-bottom: 70px;
}

.watf-homepage .watf-strength__grid {
    gap: 24px;
}

.watf-homepage .watf-strength-card {
    min-height: 520px;
}

.watf-homepage .watf-strength-card__visual {
    min-height: 200px;
}

.watf-homepage .watf-strength-card__orbit {
    top: 24px;
    width: 158px;
    height: 158px;
}

.watf-homepage .watf-strength-card__image {
    width: 142px;
    height: 142px;
}

.watf-homepage .watf-strength-card__image svg {
    width: 98px;
    height: 98px;
}

.watf-homepage .watf-strength-card__dot--left {
    top: 145px;
    left: calc(50% - 82px);
}

.watf-homepage .watf-strength-card__dot--right {
    top: 55px;
    left: calc(50% + 64px);
}

.watf-homepage .watf-strength-card__content {
    padding-right: 26px;
    padding-bottom: 38px;
    padding-left: 26px;
}

.watf-homepage .watf-strength-card__content h3 {
    min-height: 58px;
    font-size: 21px;
}

.watf-homepage .watf-strength-card__content p {
    font-size: 16px;
    line-height: 1.58;
}

/*==================================================================
TRANG CHỦ - ĐỘI NGŨ CHUYÊN MÔN
==================================================================*/

.watf-homepage .watf-expert-team,
.watf-homepage .watf-expert-team__container {
    min-height: 0;
}

.watf-homepage .watf-expert-team__container {
    padding-top: 58px;
    padding-bottom: 62px;
}

.watf-homepage .watf-expert-team__people {
    min-width: 0;
    overflow: hidden;
}

.watf-homepage .watf-expert-team__people img {
    width: min(100%, 900px);
    max-width: 100%;
}

.watf-homepage .watf-expert-team__card h3 {
    white-space: normal;
}

/*==================================================================
TRANG CHỦ + GIỚI THIỆU - TẦM NHÌN & SỨ MỆNH
==================================================================*/

.watf-homepage .watf-vision-mission,
.watf-introduction-page .watf-vision-mission {
    min-height: 0;
}

.watf-homepage .watf-vision-mission__header,
.watf-introduction-page .watf-vision-mission__header {
    max-width: 100%;
}

.watf-homepage .watf-vision,
.watf-homepage .watf-mission,
.watf-introduction-page .watf-vision,
.watf-introduction-page .watf-mission {
    min-width: 0;
}

.watf-homepage .watf-mission__description,
.watf-introduction-page .watf-mission__description {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*==================================================================
GIÁ TRỊ CỐT LÕI
Ảnh cũ từng cố tình tràn khỏi container; đưa lại vào đúng 1296px.
==================================================================*/

.watf-homepage .core-values-img img,
.watf-introduction-page .core-values-img img {
    position: static;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

/*==================================================================
HOẠT ĐỘNG
Giữ grid Bootstrap nhưng không để row-xl vượt quá container.
==================================================================*/

.watf-homepage .section-activities .row-xl {
    margin-right: -12px;
    margin-left: -12px;
}

.watf-homepage .section-activities .row-xl > * {
    padding-right: 12px;
    padding-left: 12px;
}

/*==================================================================
SECTION ACTIVITIES
CHỈ CHUẨN HÓA ẢNH 16:9
KHÔNG CAN THIỆP BỐ CỤC CŨ
==================================================================*/

.section-activities .activity-item-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Giữ border-radius đang có của theme */
.section-activities .activity-item-img > a {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;
}

/* Tất cả ảnh cùng kích thước 16:9 */
.section-activities .activity-item-img img,
.section-activities .activity-item-img > a > img,
.section-activities .activity-item-img .wp-post-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center;

    margin: 0;

    transition: transform 0.2s ease;
}

/* Giữ đúng hover scale của CSS cũ */
.section-activities .activity-item-img > a:hover img {
    transform: scale(1.08);
}

/*==================================================================
NHỮNG CON SỐ ẤN TƯỢNG
Bố cục cũ thiết kế cho 1680px, tối ưu lại khi khóa ở 1296px.
==================================================================*/

.watf-homepage .watf-stats {
    aspect-ratio: auto;
    min-height: 0;
    background-size: cover;
}

.watf-homepage .watf-stats__container {
    height: auto;
}

.watf-homepage .watf-stats__intro,
.watf-homepage .watf-stats__content,
.watf-homepage .watf-stats__card {
    min-width: 0;
}

/*==================================================================
ĐỐI TƯỢNG PHÙ HỢP
==================================================================*/

.watf-homepage .watf-audience__panel-meta h3,
.watf-homepage .watf-audience__panel-meta p,
.watf-homepage .watf-audience__feature-title {
    overflow-wrap: anywhere;
}

/*==================================================================
GÓI HOẠCH ĐỊNH CHIẾN LƯỢC
Container cũ 1460px được đưa về hệ 1296px.
==================================================================*/

.watf-homepage .section-pricing > .container {
    width: 100%;
    max-width: var(--watf-content-max);
    padding-right: var(--watf-content-gutter);
    padding-left: var(--watf-content-gutter);
}

.watf-homepage .pricing-packages-container {
    gap: 24px;
}

.watf-homepage .pricing-package,
.watf-homepage .pricing-package-content,
.watf-homepage .pricing-package-details {
    min-width: 0;
}

/*==================================================================
TRANG GIỚI THIỆU
==================================================================*/

.watf-introduction-page .introduction-img img,
.watf-introduction-page .section-values img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.watf-introduction-page .meaning {
    width: min(100%, 1024px);
    max-width: 100%;
}

.watf-introduction-page .list-group-anpha-big-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*==================================================================
FOOTER DÙNG CHUNG
==================================================================*/

.watf-footer__wrapper {
    width: 100%;
    max-width: none;
}

/*==================================================================
DESKTOP TỪ 1200PX
==================================================================*/

@media only screen and (min-width: 1200px) {
    /* Đội ngũ: cân lại tỷ lệ để 2 cột không tràn ở container 1296px */
    .watf-homepage .watf-expert-team__layout {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(540px, 1.05fr);
        gap: 28px;
    }

    .watf-homepage .watf-expert-team__people {
        min-height: 560px;
        margin-top: 0;
    }

    .watf-homepage .watf-expert-team__grid {
        gap: 12px;
    }

    .watf-homepage .watf-expert-team__card {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            11px;
        gap: 12px;
        min-height: 78px;
        padding: 12px 14px;
    }

    .watf-homepage .watf-expert-team__icon {
        width: 46px;
        height: 46px;
    }

    .watf-homepage .watf-expert-team__card h3 {
        font-size: 15px;
        line-height: 1.25;
    }

    /* Tầm nhìn & Sứ mệnh */
    .watf-homepage .watf-vision-mission__content,
    .watf-introduction-page .watf-vision-mission__content {
        width: 62%;
        max-width: 780px;
    }

    .watf-homepage .watf-vision,
    .watf-introduction-page .watf-vision {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 20px;
        min-height: 0;
        padding: 30px;
    }

    .watf-homepage .watf-vision__icon,
    .watf-introduction-page .watf-vision__icon {
        width: 88px;
        height: 88px;
    }

    .watf-homepage .watf-vision__icon svg,
    .watf-introduction-page .watf-vision__icon svg {
        width: 48px;
        height: 48px;
    }

    .watf-homepage .watf-vision__description,
    .watf-introduction-page .watf-vision__description {
        font-size: 15px;
    }

    .watf-homepage .watf-mission,
    .watf-introduction-page .watf-mission {
        grid-template-columns:
            92px
            132px
            1px
            minmax(0, 1fr);
        gap: 17px;
        min-height: 142px;
        padding: 20px 24px;
    }

    .watf-homepage .watf-mission__icon,
    .watf-introduction-page .watf-mission__icon {
        width: 80px;
        height: 80px;
    }

    .watf-homepage .watf-mission__icon svg,
    .watf-introduction-page .watf-mission__icon svg {
        width: 42px;
        height: 42px;
    }

    .watf-homepage .watf-mission__heading h3,
    .watf-introduction-page .watf-mission__heading h3 {
        font-size: 25px;
    }

    .watf-homepage .watf-mission__description,
    .watf-introduction-page .watf-mission__description {
        font-size: 14px;
    }

    /* Những con số */
    .watf-homepage .watf-stats {
        padding: 54px 0 58px;
    }

    .watf-homepage .watf-stats__container {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 28px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .watf-homepage .watf-stats__intro {
        padding: 0;
    }

    .watf-homepage .watf-stats__brand {
        width: 128px;
        margin-bottom: 28px;
    }

    .watf-homepage .watf-stats__intro-text {
        max-width: 260px;
        font-size: 15px;
    }

    .watf-homepage .watf-stats__content {
        padding-top: 68px;
    }

    .watf-homepage .watf-stats__cards {
        gap: 18px;
    }

    .watf-homepage .watf-stats__card {
        height: 450px;
        padding: 25px 22px 45%;
    }

    .watf-homepage .watf-stats__card-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
        border-width: 4px;
    }

    .watf-homepage .watf-stats__number {
        font-size: clamp(54px, 4.2vw, 68px);
    }

    .watf-homepage .watf-stats__number-line {
        margin-top: 18px;
        margin-bottom: 16px;
    }

    .watf-homepage .watf-stats__card-text {
        font-size: 15px;
    }

    .watf-homepage .watf-stats__values {
        min-height: 86px;
        margin-top: 22px;
        padding: 10px 14px;
    }

    .watf-homepage .watf-stats__value {
        gap: 12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .watf-homepage .watf-stats__value-icon {
        width: 44px;
        height: 44px;
    }

    .watf-homepage .watf-stats__value-content strong {
        font-size: 15px;
    }

    .watf-homepage .watf-stats__value-content span {
        font-size: 12px;
    }

    /* Đối tượng phù hợp */
    .watf-homepage .watf-audience {
        --wa-content-height: 360px;
    }

    .watf-homepage .watf-audience__grid {
        gap: 18px;
    }

    .watf-homepage .watf-audience__panel {
        padding: 20px;
        border-radius: 22px;
    }

    .watf-homepage .watf-audience__panel-head {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 14px;
        min-height: 108px;
        margin-bottom: 16px;
    }

    .watf-homepage .watf-audience__panel-icon {
        width: 70px;
        height: 70px;
        flex-basis: 70px;
        border-radius: 17px;
    }

    .watf-homepage .watf-audience__panel-icon svg {
        width: 36px;
        height: 36px;
    }

    .watf-homepage .watf-audience__panel-meta h3 {
        font-size: 23px;
    }

    .watf-homepage .watf-audience__panel-meta p {
        font-size: 14px;
    }

    .watf-homepage .watf-audience__separator {
        margin-bottom: 18px;
    }

    .watf-homepage .watf-audience__startup-grid {
        gap: 11px;
    }

    .watf-homepage .watf-audience__feature-list {
        gap: 14px;
    }

    .watf-homepage .watf-audience__feature-title,
    .watf-homepage .watf-audience__feature-title--large {
        top: 20px;
        left: 18px;
        max-width: calc(100% - 36px);
        font-size: 22px;
    }
}

/*==================================================================
LAPTOP + TABLET NGANG
Từ 768px đến 1199px: giảm số cột ở section dễ bị chật.
==================================================================*/

@media only screen and (max-width: 1199.98px) {
    .watf-homepage,
    .watf-introduction-page {
        --watf-content-gutter: 20px;
    }

    .watf-homepage .watf-strength__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .watf-homepage .watf-strength-card:nth-child(3) {
        grid-column: 1 / -1;
        width: min(100%, 560px);
        justify-self: center;
    }

    .watf-homepage .watf-expert-team__people {
        overflow: visible;
    }

    .watf-homepage .watf-expert-team__people img {
        width: min(100%, 900px);
    }
}

/*==================================================================
TABLET DỌC
==================================================================*/

@media only screen and (max-width: 991.98px) {
    .watf-homepage .watf-stats__container {
        max-width: var(--watf-content-max);
    }

    .watf-homepage .watf-audience__container {
        max-width: var(--watf-content-max);
    }
}

/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {
    .watf-homepage,
    .watf-introduction-page {
        --watf-content-gutter: 14px;
    }

    .watf-homepage .watf-strength {
        padding-top: 38px;
        padding-bottom: 48px;
    }

    .watf-homepage .watf-strength__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .watf-homepage .watf-strength-card:nth-child(3) {
        grid-column: auto;
        width: 100%;
    }

    .watf-homepage .watf-strength-card {
        min-height: 0;
    }

    .watf-homepage .watf-expert-team__container {
        padding-top: 43px;
        padding-bottom: 49px;
    }

    .watf-homepage .watf-expert-team__people {
        margin-right: 0;
        margin-left: 0;
        overflow: hidden;
    }

    .watf-homepage .watf-expert-team__people img {
        width: 100%;
        max-width: 100%;
    }

    .watf-homepage .section-activities .row-xl {
        margin-right: -7px;
        margin-left: -7px;
    }

    .watf-homepage .section-activities .row-xl > * {
        padding-right: 7px;
        padding-left: 7px;
    }

    .watf-introduction-page .list-group-anpha li {
        display: block;
    }

    .watf-introduction-page .list-group-anpha-big-text {
        display: block;
        margin-top: 3px;
        margin-left: 0;
    }
}

/* =========================================================
NHỮNG CON SỐ ẤN TƯỢNG
Cho 3 ảnh trong card phủ kín khung
Chỉ áp dụng tại trang chủ
========================================================= */

.watf-homepage .watf-stats__card-image {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 47%;

    overflow: hidden;
}

.watf-homepage .watf-stats__card-image img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    max-width: none;
    height: 100%;

    margin: 0;

    object-fit: cover;
    object-position: center center;

    transform: none;
}

/* Tinh chỉnh vị trí từng ảnh */
.watf-homepage .watf-stats__card-image--city img {
    object-position: center center;
}

.watf-homepage .watf-stats__card-image--growth img {
    object-position: center center;
}

.watf-homepage .watf-stats__card-image--team img {
    object-position: center top;
}



















/*==================================================================
WATF HOME CONTACT
==================================================================*/

.watf-home-contact,
.watf-home-contact *,
.watf-home-contact *::before,
.watf-home-contact *::after {
    box-sizing: border-box;
}

.watf-home-contact {
    --watf-hc-blue: #0757ed;
    --watf-hc-blue-dark: #07194c;
    --watf-hc-green: #19d79b;
    --watf-hc-text: #101a36;
    --watf-hc-muted: #68728a;
    --watf-hc-border: #ccdcef;

    position: relative;
    isolation: isolate;

    width: 100%;

    padding: 64px 0 72px;

    overflow: hidden;

    background-color: #ffffff;
    background-image: url("/wp-content/uploads/2026/08/newbg3.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/*==================================================================
CONTAINER
==================================================================*/

.watf-home-contact__container {
    position: relative;
    z-index: 3;

    width: min(100%, 1680px);

    margin: 0 auto;

    padding: 0 64px;
}


/*==================================================================
DECOR
==================================================================*/

.watf-home-contact__decor {
    position: absolute;

    pointer-events: none;
}

.watf-home-contact__decor--left {
    left: -150px;
    bottom: -180px;

    width: 360px;
    height: 360px;

    border: 65px solid rgba(25, 215, 155, 0.08);
    border-radius: 50%;
}

.watf-home-contact__decor--right {
    top: -95px;
    right: -75px;

    width: 300px;
    height: 300px;

    opacity: 0.3;

    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, 0.36) 2px,
            transparent 2.6px
        );

    background-size: 17px 17px;

    -webkit-mask-image:
        radial-gradient(
            circle,
            #000 0%,
            transparent 72%
        );

    mask-image:
        radial-gradient(
            circle,
            #000 0%,
            transparent 72%
        );
}


/*==================================================================
LAYOUT
==================================================================*/

.watf-home-contact__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 42%)
        minmax(0, 58%);

    align-items: stretch;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--watf-hc-border);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 20px 48px rgba(29, 71, 134, 0.11);
}


/*==================================================================
LEFT
==================================================================*/

.watf-home-contact__intro {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 46px 48px 42px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 9% 3%,
            rgba(65, 143, 255, 0.62) 0%,
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #1269ef 0%,
            #0753db 55%,
            #073ba9 100%
        );

    color: #ffffff;
}

.watf-home-contact__intro::before {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -120px;

    width: 340px;
    height: 340px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(255, 255, 255, 0.022),
        0 0 0 68px rgba(255, 255, 255, 0.015);

    pointer-events: none;
}


/*==================================================================
KICKER
==================================================================*/

.watf-home-contact__kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin: 0 0 10px;

    color: var(--watf-hc-green);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*==================================================================
MAIN TITLE

QUAN TRỌNG:
ĐỒNG BỘ VỚI .title-type-2 CỦA WEBSITE
DESKTOP = 32PX
==================================================================*/

.watf-home-contact__title {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.watf-home-contact__title strong {
    color: var(--watf-hc-green);

    font: inherit;
}

.watf-home-contact__title i {
    display: inline-block;

    width: 14px;
    height: 14px;

    margin-left: 8px;

    background: var(--watf-hc-green);

    transform: skew(-20deg);

    vertical-align: 1px;
}


/*==================================================================
TITLE LINE
==================================================================*/

.watf-home-contact__title-line {
    position: relative;
    z-index: 2;

    display: block;

    width: 50px;
    height: 4px;

    margin: 20px 0;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--watf-hc-green),
            #82f3ce
        );
}


/*==================================================================
DESCRIPTION
==================================================================*/

.watf-home-contact__description {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 470px;

    margin: 0 0 28px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}


/*==================================================================
CONTACT INFO
==================================================================*/

.watf-home-contact__info {
    position: relative;
    z-index: 2;

    display: grid;

    gap: 5px;
}

.watf-home-contact__info-item {
    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr);

    gap: 12px;
    align-items: center;

    min-height: 58px;

    padding: 6px 0;

    color: #ffffff;

    text-decoration: none;
}

.watf-home-contact__info-item:hover,
.watf-home-contact__info-item:focus {
    color: #ffffff;
}


/*==================================================================
INFO ICON
==================================================================*/

.watf-home-contact__info-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;
}

.watf-home-contact__info-icon svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*==================================================================
INFO CONTENT
==================================================================*/

.watf-home-contact__info-content {
    min-width: 0;
}

.watf-home-contact__info-content small {
    display: block;

    margin: 0 0 2px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 11px;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.watf-home-contact__info-content strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}


/*==================================================================
SOCIAL
==================================================================*/

.watf-home-contact__social {
    position: relative;
    z-index: 2;

    margin-top: auto;

    padding-top: 28px;
}

.watf-home-contact__social-label {
    display: block;

    margin: 0 0 11px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.watf-home-contact__social-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.watf-home-contact__social-list a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 9px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.watf-home-contact__social-list a:hover {
    border-color: #ffffff;

    background: #ffffff;

    transform: translateY(-2px);
}

.watf-home-contact__social-list img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: contain;
}


/*==================================================================
RIGHT FORM
==================================================================*/

.watf-home-contact__form-card {
    min-width: 0;

    padding: 46px 58px 44px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


/*==================================================================
FORM HEADER
==================================================================*/

.watf-home-contact__form-head {
    width: 100%;
    max-width: 620px;

    margin: 0 0 26px;
}

.watf-home-contact__form-head > span {
    display: block;

    margin: 0 0 7px;

    color: var(--watf-hc-blue);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*==================================================================
FORM TITLE
CẤP THẤP HƠN TITLE SECTION
==================================================================*/

.watf-home-contact__form-head h3 {
    margin: 0 0 10px;

    color: var(--watf-hc-blue-dark);

    font-size: 28px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.watf-home-contact__form-head p {
    max-width: 510px;

    margin: 0;

    color: var(--watf-hc-muted);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}


/*==================================================================
FORM
==================================================================*/

.watf-home-contact__form {
    position: relative;

    width: 100%;

    margin: 0;
}

.watf-home-contact__form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/*==================================================================
FIELDS
==================================================================*/

.watf-home-contact__field {
    margin: 0 0 16px;
}

.watf-home-contact__field label {
    display: block;

    margin: 0 0 6px;

    color: var(--watf-hc-blue-dark);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.watf-home-contact__field input,
.watf-home-contact__field textarea {
    display: block;

    width: 100%;

    margin: 0;

    padding: 11px 14px;

    border: 1px solid #d1ddea;
    border-radius: 8px;

    outline: none;

    background: #fbfcfe;

    color: var(--watf-hc-text);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.watf-home-contact__field input {
    height: 48px;
}

.watf-home-contact__field textarea {
    min-height: 132px;

    resize: vertical;
}

.watf-home-contact__field input::placeholder,
.watf-home-contact__field textarea::placeholder {
    color: #a1aabb;
}

.watf-home-contact__field input:focus,
.watf-home-contact__field textarea:focus {
    border-color: var(--watf-hc-blue);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(7, 87, 237, 0.055);
}


/*==================================================================
BOTTOM
==================================================================*/

.watf-home-contact__form-bottom {
    display: flex;

    align-items: center;

    gap: 16px;
}


/*==================================================================
SUBMIT
==================================================================*/

.watf-home-contact__submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    width: auto;
    min-width: 175px;
    min-height: 48px;

    margin: 0;

    padding: 10px 20px;

    border: 1px solid var(--watf-hc-blue);
    border-radius: 8px;

    background: var(--watf-hc-blue);

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.watf-home-contact__submit:hover,
.watf-home-contact__submit:focus-visible {
    border-color: #0647c9;

    background: #0647c9;

    color: #ffffff;

    transform: translateY(-1px);
}

.watf-home-contact__submit svg {
    display: block;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*==================================================================
NOTE
==================================================================*/

.watf-home-contact__note {
    color: #8a94a7;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}


/*==================================================================
HONEYPOT
==================================================================*/

.watf-home-contact__honeypot {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/*==================================================================
DESKTOP <= 1599
==================================================================*/

@media only screen and (max-width: 1599.98px) {

    .watf-home-contact {
        padding: 56px 0 64px;
    }

    .watf-home-contact__container {
        padding: 0 46px;
    }

    .watf-home-contact__intro {
        padding: 42px 40px;
    }

    .watf-home-contact__form-card {
        padding: 42px 48px;
    }

}


/*==================================================================
LAPTOP <= 1279
==================================================================*/

@media only screen and (max-width: 1279.98px) {

    .watf-home-contact__container {
        padding: 0 28px;
    }

    .watf-home-contact__layout {
        grid-template-columns:
            minmax(0, 41%)
            minmax(0, 59%);
    }

    .watf-home-contact__intro {
        padding:
            38px
            32px;
    }

    .watf-home-contact__form-card {
        padding:
            38px
            36px;
    }

    .watf-home-contact__title {
        font-size: 30px;
    }

    .watf-home-contact__form-head h3 {
        font-size: 26px;
    }

}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-home-contact {
        padding: 48px 0 54px;
    }

    .watf-home-contact__container {
        padding: 0 22px;
    }

    .watf-home-contact__layout {
        grid-template-columns:
            minmax(0, 1fr);

        border-radius: 22px;
    }

    .watf-home-contact__intro {
        padding:
            38px
            34px;
    }

    .watf-home-contact__title {
        font-size: 32px;
    }

    .watf-home-contact__description {
        max-width: 620px;

        margin-bottom: 22px;
    }

    .watf-home-contact__info {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        max-width: 700px;
    }

    .watf-home-contact__social {
        margin-top: 15px;
        padding-top: 20px;
    }

    .watf-home-contact__form-card {
        padding:
            38px
            34px;
    }

}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-home-contact {
        padding: 38px 0 44px;
    }

    .watf-home-contact__container {
        padding: 0 14px;
    }

    .watf-home-contact__layout {
        border-radius: 18px;
    }


    /* LEFT */

    .watf-home-contact__intro {
        padding:
            28px
            20px;
    }

    .watf-home-contact__kicker {
        margin-bottom: 8px;

        font-size: 11px;
    }


    /*
     * Đồng bộ hệ mobile title-type-2 hiện tại
     */
    .watf-home-contact__title {
        font-size: 24px;
        line-height: 1.16;
    }

    .watf-home-contact__title i {
        width: 11px;
        height: 11px;

        margin-left: 5px;
    }

    .watf-home-contact__title-line {
        width: 42px;
        height: 3px;

        margin: 16px 0;
    }

    .watf-home-contact__description {
        margin-bottom: 20px;

        font-size: 14px;
        line-height: 1.5;
    }

    .watf-home-contact__info {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 2px;
    }

    .watf-home-contact__info-item {
        min-height: 54px;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 11px;
    }

    .watf-home-contact__info-icon {
        width: 40px;
        height: 40px;
    }

    .watf-home-contact__info-icon svg {
        width: 19px;
        height: 19px;
    }

    .watf-home-contact__info-content strong {
        font-size: 14px;
    }

    .watf-home-contact__social {
        padding-top: 19px;
    }

    .watf-home-contact__social-list a {
        width: 37px;
        height: 37px;

        padding: 8px;
    }


    /* FORM */

    .watf-home-contact__form-card {
        padding:
            28px
            20px
            30px;
    }

    .watf-home-contact__form-head {
        margin-bottom: 23px;
    }

    .watf-home-contact__form-head > span {
        font-size: 10px;
    }

    .watf-home-contact__form-head h3 {
        font-size: 22px;
        line-height: 1.15;
    }

    .watf-home-contact__form-head p {
        font-size: 13px;
    }

    .watf-home-contact__form-row {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 0;
    }

    .watf-home-contact__field {
        margin-bottom: 15px;
    }

    .watf-home-contact__field input {
        height: 47px;
    }

    .watf-home-contact__field textarea {
        min-height: 125px;
    }

    .watf-home-contact__form-bottom {
        display: block;
    }

    .watf-home-contact__submit {
        width: 100%;
        min-height: 48px;
    }

    .watf-home-contact__note {
        display: block;

        margin-top: 10px;

        text-align: center;
    }

}


/*==================================================================
MOBILE NHỎ
==================================================================*/

@media only screen and (max-width: 479.98px) {

    .watf-home-contact__container {
        padding:
            0
            10px;
    }

    .watf-home-contact__intro {
        padding:
            25px
            17px;
    }

    .watf-home-contact__title {
        font-size: 22px;
    }

    .watf-home-contact__form-card {
        padding:
            25px
            17px
            27px;
    }

    .watf-home-contact__form-head h3 {
        font-size: 21px;
    }

}




















/* new style v1 */
/* HERO - CHỈ ĐỔI BACKGROUND */

.section-banner {
    background-image: url('/wp-content/uploads/2026/08/newbg3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/* new style page gioi thieu v1 */
/*==================================================================
WATF INTRODUCTION HERO
FINAL FIX - KEEP IMAGE RATIO / NO COVER / NO FIXED HEIGHT
DÁN CUỐI FILE CSS
==================================================================*/

.watf-introduction-page .watf-intro-hero {
    position: relative;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #ffffff !important;
}


/*==========================================================
TẮT DECOR CŨ CÓ THỂ ĐÈ LÊN SECTION
==========================================================*/

.watf-introduction-page .watf-intro-hero::before,
.watf-introduction-page .watf-intro-hero::after {
    display: none !important;
}


/*==========================================================
LAYOUT
KHÔNG ÉP HEIGHT
CHIỀU CAO SECTION CHẠY THEO ẢNH
==========================================================*/

.watf-introduction-page .watf-intro-hero__layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 44%)
        minmax(0, 56%) !important;

    align-items: stretch !important;

    width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*==========================================================
LEFT
==========================================================*/

.watf-introduction-page .watf-intro-hero__left {
    position: relative;
    z-index: 3;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
}


.watf-introduction-page .watf-intro-hero__left-inner {
    width: min(calc(100% - 42px), 590px);

    margin-left:
        max(
            32px,
            calc((100vw - 1296px) / 2)
        ) !important;

    margin-right: 44px !important;

    padding:
        48px
        0 !important;
}


/*==========================================================
TITLE
==========================================================*/

.watf-introduction-page .watf-intro-hero__header {
    margin:
        0
        0
        26px !important;
}


.watf-introduction-page .watf-intro-hero__title {
    display: flex !important;
    align-items: baseline !important;

    gap: 9px;

    margin: 0 !important;

    font-size:
        clamp(
            46px,
            3.8vw,
            62px
        ) !important;

    font-weight: 900 !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;

    white-space: nowrap;

    text-transform: uppercase;
}


.watf-introduction-page .watf-intro-hero__title-blue {
    color: #082b7c !important;
}


.watf-introduction-page .watf-intro-hero__title-green {
    color: #19d59a !important;
}


.watf-introduction-page .watf-intro-hero__title-line {
    display: block !important;

    width: 58px;
    height: 4px;

    margin-top: 16px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #0757ed 0%,
            #0757ed 52%,
            #19d59a 52%,
            #19d59a 100%
        ) !important;
}


/*==========================================================
HEADLINE
==========================================================*/

.watf-introduction-page .watf-intro-hero__headline {
    width: 100%;
    max-width: 550px;

    margin:
        0
        0
        18px !important;

    color: #082b7c !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


.watf-introduction-page .watf-intro-hero__headline span {
    color: #0757ed !important;

    font: inherit;
}


/*==========================================================
DESCRIPTION
==========================================================*/

.watf-introduction-page .watf-intro-hero__description {
    width: 100%;
    max-width: 555px;

    margin: 0 !important;

    color: #26334c !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}


.watf-introduction-page .watf-intro-hero__description p {
    margin: 0 !important;
}


/*==========================================================
STATS
==========================================================*/

.watf-introduction-page .watf-intro-hero__stats {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 12px;

    width: 100%;
    max-width: 565px;

    margin:
        32px
        0
        0 !important;
}


.watf-introduction-page .watf-intro-stat {
    display: grid !important;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    align-items: center !important;

    gap: 10px;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/*==========================================================
STAT ICON
==========================================================*/

.watf-introduction-page .watf-intro-stat__icon {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;

    color: #0757ed !important;

    border: 1px solid #dce7f4 !important;
    border-radius: 13px !important;

    background: #ffffff !important;

    box-shadow:
        0 5px 15px
        rgba(23, 67, 128, .06) !important;
}


.watf-introduction-page .watf-intro-stat__icon::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 18px;
    height: 3px;

    border-radius: 20px;

    background: #dceaff;

    transform: translateX(-50%);
}


.watf-introduction-page .watf-intro-stat__icon svg {
    display: block !important;

    width: 28px !important;
    height: 28px !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*==========================================================
STAT TEXT
==========================================================*/

.watf-introduction-page .watf-intro-stat__content {
    min-width: 0;
}


.watf-introduction-page .watf-intro-stat__content strong {
    display: block !important;

    margin: 0 !important;

    color: #19cf99 !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


.watf-introduction-page .watf-intro-stat__content span {
    display: block !important;

    margin-top: 6px !important;

    color: #4e586c !important;

    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    white-space: nowrap;
}


/*==========================================================
RIGHT VISUAL
QUAN TRỌNG:
KHÔNG HEIGHT CỐ ĐỊNH
==========================================================*/

.watf-introduction-page .watf-intro-hero__visual {
    position: relative;
    z-index: 2;

    display: block !important;

    align-self: stretch !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;
}


/*==========================================================
IMAGE WRAPPER
==========================================================*/

.watf-introduction-page .watf-intro-hero__image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
}


/*==========================================================
IMAGE
TUYỆT ĐỐI KHÔNG COVER
ẢNH TỰ GIỮ TỶ LỆ GỐC
==========================================================*/

.watf-introduction-page .watf-intro-hero__image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: right top !important;

    border: 0 !important;
    border-radius: 0 !important;

    filter: none !important;

    transform: none !important;
}


/*==========================================================
CURVE TRÁI GIỐNG MẪU
NÓ PHỦ LÊN ẢNH, KHÔNG ĐẨY ẢNH
==========================================================*/

.watf-introduction-page .watf-intro-hero__visual::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: -12%;
    bottom: -12%;
    left: -112px;

    display: block !important;

    width: 155px;

    pointer-events: none;

    border-radius: 50%;

    background: #ffffff;
}


/* LỚP XANH NHẠT SAU CURVE */

.watf-introduction-page .watf-intro-hero__visual::after {
    content: "";

    position: absolute;
    z-index: 4;

    top: -10%;
    bottom: -10%;
    left: -84px;

    display: block !important;

    width: 128px;

    pointer-events: none;

    border-radius: 50%;

    opacity: .55;

    background:
        linear-gradient(
            180deg,
            rgba(228, 242, 255, .85),
            rgba(235, 255, 248, .36)
        );
}


/*==================================================================
DESKTOP 1200 - 1399
==================================================================*/

@media only screen and (max-width: 1399.98px) {

    .watf-introduction-page .watf-intro-hero__layout {
        grid-template-columns:
            minmax(0, 46%)
            minmax(0, 54%) !important;
    }


    .watf-introduction-page .watf-intro-hero__left-inner {
        width: auto;

        margin:
            0
            32px
            0
            30px !important;

        padding:
            38px
            0 !important;
    }


    .watf-introduction-page .watf-intro-hero__title {
        font-size: 45px !important;
    }


    .watf-introduction-page .watf-intro-hero__headline {
        font-size: 17px !important;
    }


    .watf-introduction-page .watf-intro-hero__description {
        font-size: 12.5px !important;
    }


    .watf-introduction-page .watf-intro-hero__stats {
        margin-top: 25px !important;
    }


    .watf-introduction-page .watf-intro-stat {
        grid-template-columns:
            45px
            minmax(0, 1fr);

        gap: 7px;
    }


    .watf-introduction-page .watf-intro-stat__icon {
        width: 45px !important;
        height: 45px !important;
    }


    .watf-introduction-page .watf-intro-stat__icon svg {
        width: 24px !important;
        height: 24px !important;
    }


    .watf-introduction-page .watf-intro-stat__content strong {
        font-size: 19px !important;
    }


    .watf-introduction-page .watf-intro-stat__content span {
        font-size: 8.5px !important;
    }

}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-introduction-page .watf-intro-hero__layout {
        display: flex !important;

        flex-direction: column;
    }


    .watf-introduction-page .watf-intro-hero__left {
        width: 100% !important;
    }


    .watf-introduction-page .watf-intro-hero__left-inner {
        width: auto;
        max-width: 720px;

        margin:
            0
            22px !important;

        padding:
            42px
            0
            34px !important;
    }


    .watf-introduction-page .watf-intro-hero__visual::before,
    .watf-introduction-page .watf-intro-hero__visual::after {
        display: none !important;
    }


    .watf-introduction-page .watf-intro-hero__image img {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center top !important;
    }

}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-introduction-page .watf-intro-hero__left-inner {
        margin:
            0
            14px !important;

        padding:
            34px
            0
            28px !important;
    }


    .watf-introduction-page .watf-intro-hero__title {
        gap: 7px;

        font-size:
            clamp(
                34px,
                10vw,
                42px
            ) !important;
    }


    .watf-introduction-page .watf-intro-hero__headline {
        font-size: 16px !important;
    }


    .watf-introduction-page .watf-intro-hero__description {
        font-size: 13px !important;
    }


    .watf-introduction-page .watf-intro-hero__stats {
        grid-template-columns:
            1fr !important;

        gap: 9px;

        margin-top: 22px !important;
    }


    .watf-introduction-page .watf-intro-stat {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap: 10px;
    }


    .watf-introduction-page .watf-intro-stat__icon {
        width: 52px !important;
        height: 52px !important;
    }


    .watf-introduction-page .watf-intro-stat__content strong {
        font-size: 21px !important;
    }


    .watf-introduction-page .watf-intro-stat__content span {
        font-size: 10.5px !important;
    }

}










/*==================================================================
WATF INTRODUCTION
VỀ CÔNG TY + Ý NGHĨA
DÁN CUỐI FILE CSS
==================================================================*/

.watf-introduction-page .watf-company-meaning,
.watf-introduction-page .watf-company-meaning *,
.watf-introduction-page .watf-company-meaning *::before,
.watf-introduction-page .watf-company-meaning *::after {
    box-sizing: border-box;
}


/*==================================================================
SECTION
==================================================================*/

.watf-introduction-page .watf-company-meaning {
    --cm-blue: #0757ed;
    --cm-navy: #082b7c;
    --cm-green: #19cf99;
    --cm-text: #30394c;
    --cm-muted: #697386;
    --cm-border: #dae6f3;

    position: relative;
    isolation: isolate;

    width: 100%;

    margin: 0;
    padding:
        54px
        0
        66px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 50%,
            #ffffff 100%
        );
}


/*==================================================================
DECOR NHẸ
==================================================================*/

.watf-introduction-page .watf-company-meaning::before {
    content: "";

    position: absolute;

    top: 70px;
    left: 4%;

    width: 75px;
    height: 110px;

    pointer-events: none;

    opacity: .4;

    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, .25) 1.5px,
            transparent 1.8px
        );

    background-size:
        10px
        10px;
}


/*==================================================================
COMMON HEADING
==================================================================*/

.watf-introduction-page .watf-cm-heading {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    margin:
        0
        0
        32px;

    text-align: center;
}


.watf-introduction-page .watf-cm-heading__title {
    margin: 0 !important;

    color: var(--cm-navy);

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em;

    text-transform: uppercase;
}


.watf-introduction-page .watf-cm-heading__line {
    display: block;

    width: 48px;
    height: 4px;

    margin-top: 11px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--cm-blue) 0%,
            var(--cm-blue) 55%,
            var(--cm-green) 55%,
            var(--cm-green) 100%
        );
}


/*==================================================================
VỀ CÔNG TY
==================================================================*/

.watf-introduction-page .watf-company-block {
    width: 100%;
}


/*==================================================================
COMPANY LAYOUT
==================================================================*/

.watf-introduction-page .watf-company-block__layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 33%)
        minmax(0, 67%);

    align-items: center;

    gap: 26px;

    width: 100%;
    max-width: 1120px;

    margin:
        0
        auto;
}


/*==================================================================
COMPANY VISUAL
==================================================================*/

.watf-introduction-page .watf-company-block__visual {
    position: relative;

    min-width: 0;
}


.watf-introduction-page .watf-company-block__dots {
    position: absolute;

    z-index: 0;

    top: -18px;
    left: -42px;

    width: 75px;
    height: 95px;

    opacity: .52;

    background-image:
        radial-gradient(
            circle,
            rgba(7, 87, 237, .24) 1.5px,
            transparent 1.9px
        );

    background-size:
        10px
        10px;
}


/*==================================================================
COMPANY IMAGE
==================================================================*/

.watf-introduction-page .watf-company-block__image {
    position: relative;
    z-index: 2;

    width: 100%;

    overflow: hidden;

    border-radius: 24px;

    background: #eef4fb;

    box-shadow:
        0 8px 22px rgba(35, 76, 130, .08);
}


.watf-introduction-page .watf-company-block__image img {
    display: block;

    width: 100% !important;
    height: auto !important;

    margin: 0;

    border: 0;
}


/*==================================================================
COMPANY INFO CARD
==================================================================*/

.watf-introduction-page .watf-company-info {
    width: 100%;

    padding:
        31px
        38px;

    border: 1px solid var(--cm-border);
    border-radius: 15px;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 7px 22px
        rgba(31, 72, 130, .065);
}


/*==================================================================
COMPANY LIST
==================================================================*/

.watf-introduction-page .watf-company-info__list {
    display: flex;
    flex-direction: column;

    gap: 20px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.watf-introduction-page .watf-company-info__item {
    display: grid;

    grid-template-columns:
        20px
        125px
        minmax(0, 1fr);

    align-items: center;

    gap: 9px;

    min-width: 0;

    margin: 0;
}


/*==================================================================
CHECK
==================================================================*/

.watf-introduction-page .watf-company-info__check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    color: #ffffff;

    border-radius: 50%;

    background: var(--cm-green);

    box-shadow:
        0 3px 8px
        rgba(25, 207, 153, .2);
}


.watf-introduction-page .watf-company-info__check svg {
    display: block;

    width: 10px;
    height: 10px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/*==================================================================
LABEL / VALUE
==================================================================*/

.watf-introduction-page .watf-company-info__label {
    color: #394255;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}


.watf-introduction-page .watf-company-info__value {
    min-width: 0;

    color: var(--cm-blue);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    text-transform: uppercase;
}


/*==================================================================
Ý NGHĨA
==================================================================*/

.watf-introduction-page .watf-meaning-block {
    width: 100%;

    margin-top: 54px;
}


/*==================================================================
MEANING LAYOUT
==================================================================*/

.watf-introduction-page .watf-meaning-block__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        270px
        minmax(0, 1fr);

    align-items: center;

    gap: 0;

    width: 100%;
    max-width: 1020px;

    margin:
        0
        auto;
}


/*==================================================================
COLUMNS
==================================================================*/

.watf-introduction-page .watf-meaning-block__column {
    display: flex;
    flex-direction: column;

    gap: 28px;

    min-width: 0;
}


/*==================================================================
MEANING CARD
==================================================================*/

.watf-introduction-page .watf-meaning-card {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 130px;

    padding:
        18px
        20px;

    border: 1px solid #dce7f4;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 6px 17px
        rgba(30, 70, 128, .05);
}


/* CARD LEFT */

.watf-introduction-page .watf-meaning-card--left {
    justify-content: flex-start;

    margin-right: -12px;
}


/* CARD RIGHT */

.watf-introduction-page .watf-meaning-card--right {
    justify-content: flex-end;

    margin-left: -12px;
}


/*==================================================================
ICON
==================================================================*/

.watf-introduction-page .watf-meaning-card__icon {
    display: flex;
    flex: 0 0 58px;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    color: #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1267f0,
            #0345c0
        );

    box-shadow:
        0 7px 16px
        rgba(7, 87, 237, .18);
}


.watf-introduction-page .watf-meaning-card__icon svg {
    display: block;

    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* LEFT CARD ICON */

.watf-introduction-page
.watf-meaning-card--left
.watf-meaning-card__icon {
    margin-right: 18px;
}


/* RIGHT CARD ICON */

.watf-introduction-page
.watf-meaning-card--right
.watf-meaning-card__icon {
    margin-left: 18px;

    order: 2;
}


/*==================================================================
CARD CONTENT
==================================================================*/

.watf-introduction-page .watf-meaning-card__content {
    min-width: 0;

    flex: 1 1 auto;
}


.watf-introduction-page .watf-meaning-card__content h3 {
    margin:
        0
        0
        4px;

    color: var(--cm-blue);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;

    text-transform: uppercase;
}


.watf-introduction-page .watf-meaning-card__subtitle {
    display: block;

    margin-bottom: 5px;

    color: #4e596e;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}


.watf-introduction-page .watf-meaning-card__content p {
    margin: 0;

    color: #566176;

    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.55;
}


/* RIGHT TEXT */

.watf-introduction-page
.watf-meaning-card--right
.watf-meaning-card__content {
    text-align: right;
}


/*==================================================================
CENTER
==================================================================*/

.watf-introduction-page .watf-meaning-center {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 270px;
    height: 270px;

    margin:
        0
        auto;
}


/*==================================================================
CENTER RINGS
==================================================================*/

.watf-introduction-page .watf-meaning-center__ring {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}


.watf-introduction-page .watf-meaning-center__ring--1 {
    inset: 4px;

    border: 1px solid
        rgba(7, 87, 237, .11);
}


.watf-introduction-page .watf-meaning-center__ring--2 {
    inset: 19px;

    border: 1px solid
        rgba(7, 87, 237, .13);
}


.watf-introduction-page .watf-meaning-center__ring--3 {
    inset: 37px;

    border: 1px solid
        rgba(7, 87, 237, .16);

    box-shadow:
        0 0 30px
        rgba(7, 87, 237, .04);
}


/*==================================================================
CENTER LOGO
==================================================================*/

.watf-introduction-page .watf-meaning-center__logo {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 174px;
    height: 174px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #f7faff 100%
        );

    box-shadow:
        0 6px 24px
        rgba(26, 66, 125, .08);
}


.watf-introduction-page .watf-meaning-center__logo img {
    display: block;

    width: 72% !important;
    height: auto !important;

    margin: 0;
}


/*==================================================================
CONNECTORS
==================================================================*/

.watf-introduction-page .watf-meaning-card__connector {
    position: absolute;

    top: 50%;

    display: block;

    width: 30px;
    height: 1px;

    background:
        rgba(7, 87, 237, .17);

    transform:
        translateY(-50%);
}


/* LEFT */

.watf-introduction-page
.watf-meaning-card--left
.watf-meaning-card__connector {
    right: -30px;
}


.watf-introduction-page
.watf-meaning-card--left
.watf-meaning-card__connector::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cm-green);

    transform:
        translateY(-50%);
}


/* RIGHT */

.watf-introduction-page
.watf-meaning-card--right
.watf-meaning-card__connector {
    left: -30px;
}


.watf-introduction-page
.watf-meaning-card--right
.watf-meaning-card__connector::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cm-blue);

    transform:
        translateY(-50%);
}


/*==================================================================
DESKTOP LARGE
==================================================================*/

@media only screen and (min-width: 1400px) {

    .watf-introduction-page .watf-company-meaning {
        padding:
            62px
            0
            74px;
    }


    .watf-introduction-page .watf-company-block__layout {
        max-width: 1180px;

        gap: 30px;
    }


    .watf-introduction-page .watf-company-info {
        padding:
            34px
            42px;
    }


    .watf-introduction-page .watf-company-info__label,
    .watf-introduction-page .watf-company-info__value {
        font-size: 13px;
    }


    .watf-introduction-page .watf-company-info__item {
        grid-template-columns:
            20px
            135px
            minmax(0, 1fr);
    }

}


/*==================================================================
LAPTOP
==================================================================*/

@media only screen and (max-width: 1199.98px) {

    .watf-introduction-page .watf-company-block__layout {
        grid-template-columns:
            minmax(240px, 34%)
            minmax(0, 66%);

        gap: 20px;
    }


    .watf-introduction-page .watf-company-info {
        padding:
            24px
            25px;
    }


    .watf-introduction-page .watf-company-info__list {
        gap: 15px;
    }


    .watf-introduction-page .watf-company-info__item {
        grid-template-columns:
            18px
            102px
            minmax(0, 1fr);

        gap: 7px;
    }


    .watf-introduction-page .watf-company-info__label,
    .watf-introduction-page .watf-company-info__value {
        font-size: 10.5px;
    }


    .watf-introduction-page .watf-meaning-block__layout {
        grid-template-columns:
            minmax(0, 1fr)
            235px
            minmax(0, 1fr);

        max-width: 920px;
    }


    .watf-introduction-page .watf-meaning-center {
        width: 235px;
        height: 235px;
    }


    .watf-introduction-page .watf-meaning-center__logo {
        width: 150px;
        height: 150px;
    }


    .watf-introduction-page .watf-meaning-card {
        min-height: 120px;

        padding:
            15px
            14px;
    }


    .watf-introduction-page .watf-meaning-card__icon {
        flex-basis: 50px;

        width: 50px;
        height: 50px;
    }


    .watf-introduction-page .watf-meaning-card__icon svg {
        width: 27px;
        height: 27px;
    }

}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-introduction-page .watf-company-meaning {
        padding:
            48px
            0
            56px;
    }


    .watf-introduction-page .watf-company-block__layout {
        grid-template-columns:
            minmax(220px, 36%)
            minmax(0, 64%);

        gap: 17px;
    }


    .watf-introduction-page .watf-company-info {
        padding:
            20px
            18px;
    }


    .watf-introduction-page .watf-company-info__item {
        grid-template-columns:
            17px
            85px
            minmax(0, 1fr);
    }


    .watf-introduction-page .watf-company-info__label,
    .watf-introduction-page .watf-company-info__value {
        font-size: 9.5px;
    }


    /* Meaning chuyển thành 2 cột card + logo trên */

    .watf-introduction-page .watf-meaning-block__layout {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;

        max-width: 760px;
    }


    .watf-introduction-page .watf-meaning-center {
        grid-column: 1 / -1;
        grid-row: 1;

        width: 190px;
        height: 190px;

        margin-bottom: 8px;
    }


    .watf-introduction-page .watf-meaning-center__logo {
        width: 125px;
        height: 125px;
    }


    .watf-introduction-page .watf-meaning-block__column {
        gap: 16px;
    }


    .watf-introduction-page .watf-meaning-card,
    .watf-introduction-page .watf-meaning-card--left,
    .watf-introduction-page .watf-meaning-card--right {
        margin: 0;

        min-height: 125px;
    }


    .watf-introduction-page .watf-meaning-card__connector {
        display: none;
    }

}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-introduction-page .watf-company-meaning {
        padding:
            40px
            0
            48px;
    }


    .watf-introduction-page .watf-cm-heading {
        margin-bottom: 24px;
    }


    .watf-introduction-page .watf-cm-heading__title {
        font-size: 25px !important;
    }


    /* COMPANY */

    .watf-introduction-page .watf-company-block__layout {
        grid-template-columns: 1fr;

        gap: 18px;

        max-width: 100%;
    }


    .watf-introduction-page .watf-company-block__visual {
        width: 100%;
        max-width: 430px;

        margin:
            0
            auto;
    }


    .watf-introduction-page .watf-company-block__image {
        border-radius: 18px;
    }


    .watf-introduction-page .watf-company-info {
        padding:
            21px
            17px;

        border-radius: 13px;
    }


    .watf-introduction-page .watf-company-info__list {
        gap: 15px;
    }


    .watf-introduction-page .watf-company-info__item {
        grid-template-columns:
            20px
            minmax(0, 1fr);

        gap:
            3px
            8px;
    }


    .watf-introduction-page .watf-company-info__check {
        grid-row:
            1 / 3;

        margin-top: 2px;
    }


    .watf-introduction-page .watf-company-info__label {
        font-size: 11px;
    }


    .watf-introduction-page .watf-company-info__value {
        grid-column: 2;

        font-size: 11.5px;
    }


    /* MEANING */

    .watf-introduction-page .watf-meaning-block {
        margin-top: 44px;
    }


    .watf-introduction-page .watf-meaning-block__layout {
        display: flex;
        flex-direction: column;

        gap: 14px;

        max-width: 100%;
    }


    .watf-introduction-page .watf-meaning-center {
        order: -1;

        width: 170px;
        height: 170px;

        margin:
            0
            auto
            8px;
    }


    .watf-introduction-page .watf-meaning-center__logo {
        width: 112px;
        height: 112px;
    }


    .watf-introduction-page .watf-meaning-block__column {
        display: contents;
    }


    .watf-introduction-page .watf-meaning-card,
    .watf-introduction-page .watf-meaning-card--left,
    .watf-introduction-page .watf-meaning-card--right {
        display: grid;

        grid-template-columns:
            52px
            minmax(0, 1fr);

        min-height: 0;

        margin: 0;

        padding:
            15px
            16px;

        text-align: left;
    }


    .watf-introduction-page
    .watf-meaning-card--right
    .watf-meaning-card__icon {
        grid-column: 1;
        grid-row: 1;

        order: 0;

        margin:
            0
            14px
            0
            0;
    }


    .watf-introduction-page
    .watf-meaning-card--right
    .watf-meaning-card__content {
        grid-column: 2;
        grid-row: 1;

        text-align: left;
    }


    .watf-introduction-page .watf-meaning-card__icon {
        width: 52px;
        height: 52px;

        margin-right: 14px;
    }


    .watf-introduction-page .watf-meaning-card__content h3 {
        font-size: 14px;
    }


    .watf-introduction-page .watf-meaning-card__content p {
        font-size: 11px;
    }

}



/*==================================================================
WATF INTRODUCTION
SECTION: GIÁ TRỊ CỐT LÕI
DÁN CUỐI FILE CSS
==================================================================*/

.watf-introduction-page .watf-core-values,
.watf-introduction-page .watf-core-values *,
.watf-introduction-page .watf-core-values *::before,
.watf-introduction-page .watf-core-values *::after {
    box-sizing: border-box;
}


/*==================================================================
SECTION
==================================================================*/

.watf-introduction-page .watf-core-values {
    --wcv-blue: #0757ed;
    --wcv-navy: #082b7c;
    --wcv-green: #19cf99;
    --wcv-green-dark: #0db684;
    --wcv-text: #4c566a;
    --wcv-border: #dce7f3;

    position: relative;
    isolation: isolate;

    width: 100%;

    margin: 0;
    padding:
        48px
        0
        56px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


/*==================================================================
HEADER
==================================================================*/

.watf-introduction-page .watf-core-values__header {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    margin:
        0
        0
        30px;

    text-align: center;
}


.watf-introduction-page .watf-core-values__title {
    margin: 0 !important;

    color: var(--wcv-navy);

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em;

    text-transform: uppercase;
}


.watf-introduction-page .watf-core-values__title-line {
    display: block;

    width: 50px;
    height: 4px;

    margin-top: 11px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--wcv-blue) 0%,
            var(--wcv-blue) 55%,
            var(--wcv-green) 55%,
            var(--wcv-green) 100%
        );
}


/*==================================================================
MAIN LAYOUT
==================================================================*/

.watf-introduction-page .watf-core-values__layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 34%)
        minmax(0, 66%);

    align-items: center;

    gap: 30px;

    width: 100%;
    max-width: 1160px;

    margin:
        0
        auto;
}


/*==================================================================
LEFT VISUAL
==================================================================*/

.watf-introduction-page .watf-core-values__visual {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 0;

    min-height: 360px;

    overflow: hidden;
}


/*==================================================================
GREEN SHAPE
==================================================================*/

.watf-introduction-page .watf-core-values__shape {
    position: absolute;

    z-index: 0;

    top: 5px;
    right: 18px;
    bottom: 14px;
    left: 22px;

    display: block;

    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(215, 255, 243, .35) 0%,
            rgba(49, 225, 162, .88) 56%,
            rgba(21, 194, 139, .96) 100%
        );

    clip-path:
        polygon(
            20% 4%,
            95% 0%,
            75% 48%,
            98% 100%,
            30% 92%,
            0% 68%
        );

    filter:
        drop-shadow(
            0 12px 20px rgba(25, 207, 153, .08)
        );
}


/* vòng trắng dưới chân giống mẫu */

.watf-introduction-page .watf-core-values__visual::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: 11%;
    bottom: 0;

    width: 66%;
    aspect-ratio: 1 / 1;

    border:
        26px solid
        rgba(255,255,255,.96);

    border-radius: 50%;

    transform:
        translate(
            -18%,
            45%
        );
}


/*==================================================================
IMAGE
KHÔNG CROP
==================================================================*/

.watf-introduction-page .watf-core-values__image {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-height: 360px;

    margin: 0;
}


.watf-introduction-page .watf-core-values__image img {
    display: block !important;

    width: auto !important;
    height: 345px !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    filter:
        drop-shadow(
            0 10px 16px rgba(27, 65, 115, .07)
        );

    transform: none !important;
}


/*==================================================================
CARDS
==================================================================*/

.watf-introduction-page .watf-core-values__cards {
    display: flex;
    flex-direction: column;

    gap: 12px;

    min-width: 0;
}


/*==================================================================
CARD
==================================================================*/

.watf-introduction-page .watf-core-value-card {
    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    width: 100%;
    min-height: 105px;

    margin: 0;

    padding:
        16px
        24px;

    border: 1px solid var(--wcv-border);
    border-radius: 13px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 7px 20px rgba(35, 76, 130, .055);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.watf-introduction-page .watf-core-value-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(25,207,153,.28);

    box-shadow:
        0 10px 26px
        rgba(35,76,130,.085);
}


/*==================================================================
ICON
==================================================================*/

.watf-introduction-page .watf-core-value-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    color: #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #2ce2ad 0%,
            #0db982 100%
        );

    box-shadow:
        0 7px 16px
        rgba(15,185,130,.17);
}


.watf-introduction-page .watf-core-value-card__icon svg {
    display: block;

    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* icon star cần fill */

.watf-introduction-page
.watf-core-value-card:nth-child(3)
.watf-core-value-card__icon svg {
    fill: currentColor;
    stroke: currentColor;
}


/*==================================================================
CARD CONTENT
==================================================================*/

.watf-introduction-page .watf-core-value-card__content {
    min-width: 0;
}


.watf-introduction-page .watf-core-value-card__content h3 {
    margin:
        0
        0
        7px;

    color: var(--wcv-green-dark);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}


.watf-introduction-page .watf-core-value-card__content p {
    margin: 0;

    color: var(--wcv-text);

    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
}


/*==================================================================
DESKTOP LARGE
==================================================================*/

@media only screen and (min-width: 1400px) {

    .watf-introduction-page .watf-core-values {
        padding:
            54px
            0
            64px;
    }


    .watf-introduction-page .watf-core-values__layout {
        max-width: 1220px;

        gap: 34px;
    }


    .watf-introduction-page .watf-core-values__title {
        font-size: 32px !important;
    }


    .watf-introduction-page .watf-core-values__visual,
    .watf-introduction-page .watf-core-values__image {
        min-height: 390px;
    }


    .watf-introduction-page .watf-core-values__image img {
        height: 375px !important;
    }


    .watf-introduction-page .watf-core-value-card {
        min-height: 112px;

        padding:
            18px
            28px;
    }


    .watf-introduction-page .watf-core-value-card__content h3 {
        font-size: 17px;
    }


    .watf-introduction-page .watf-core-value-card__content p {
        font-size: 12.5px;
    }

}


/*==================================================================
LAPTOP
==================================================================*/

@media only screen and (max-width: 1199.98px) {

    .watf-introduction-page .watf-core-values__layout {
        grid-template-columns:
            minmax(230px, 34%)
            minmax(0, 66%);

        gap: 22px;
    }


    .watf-introduction-page .watf-core-values__visual,
    .watf-introduction-page .watf-core-values__image {
        min-height: 320px;
    }


    .watf-introduction-page .watf-core-values__image img {
        height: 305px !important;
    }


    .watf-introduction-page .watf-core-value-card {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap: 14px;

        min-height: 95px;

        padding:
            14px
            18px;
    }


    .watf-introduction-page .watf-core-value-card__icon {
        width: 52px;
        height: 52px;
    }


    .watf-introduction-page .watf-core-value-card__icon svg {
        width: 28px;
        height: 28px;
    }


    .watf-introduction-page .watf-core-value-card__content h3 {
        font-size: 15px;
    }


    .watf-introduction-page .watf-core-value-card__content p {
        font-size: 10.5px;
    }

}


/*==================================================================
TABLET
==================================================================*/

@media only screen and (max-width: 991.98px) {

    .watf-introduction-page .watf-core-values {
        padding:
            46px
            0
            52px;
    }


    .watf-introduction-page .watf-core-values__layout {
        grid-template-columns:
            minmax(210px, 35%)
            minmax(0, 65%);

        gap: 18px;
    }


    .watf-introduction-page .watf-core-values__visual,
    .watf-introduction-page .watf-core-values__image {
        min-height: 290px;
    }


    .watf-introduction-page .watf-core-values__image img {
        height: 275px !important;
    }


    .watf-introduction-page .watf-core-value-card {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            12px
            14px;
    }


    .watf-introduction-page .watf-core-value-card__icon {
        width: 46px;
        height: 46px;
    }


    .watf-introduction-page .watf-core-value-card__icon svg {
        width: 25px;
        height: 25px;
    }

}


/*==================================================================
MOBILE
==================================================================*/

@media only screen and (max-width: 767.98px) {

    .watf-introduction-page .watf-core-values {
        padding:
            38px
            0
            44px;
    }


    .watf-introduction-page .watf-core-values__header {
        margin-bottom: 24px;
    }


    .watf-introduction-page .watf-core-values__title {
        font-size: 25px !important;
    }


    .watf-introduction-page .watf-core-values__layout {
        grid-template-columns: 1fr;

        gap: 24px;

        max-width: 100%;
    }


    .watf-introduction-page .watf-core-values__visual {
        width: 100%;
        max-width: 390px;

        min-height: 330px;

        margin:
            0
            auto;
    }


    .watf-introduction-page .watf-core-values__image {
        min-height: 330px;
    }


    .watf-introduction-page .watf-core-values__image img {
        height: 315px !important;
    }


    .watf-introduction-page .watf-core-values__shape {
        right: 25px;
        left: 25px;
    }


    .watf-introduction-page .watf-core-values__cards {
        gap: 10px;
    }


    .watf-introduction-page .watf-core-value-card {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap: 13px;

        min-height: 0;

        padding:
            14px
            15px;

        border-radius: 12px;
    }


    .watf-introduction-page .watf-core-value-card__icon {
        width: 50px;
        height: 50px;
    }


    .watf-introduction-page .watf-core-value-card__content h3 {
        font-size: 15px;
    }


    .watf-introduction-page .watf-core-value-card__content p {
        font-size: 11px;
        line-height: 1.5;
    }

}


/*==================================================================
MOBILE SMALL
==================================================================*/

@media only screen and (max-width: 479.98px) {

    .watf-introduction-page .watf-core-values__visual,
    .watf-introduction-page .watf-core-values__image {
        min-height: 290px;
    }


    .watf-introduction-page .watf-core-values__image img {
        height: 278px !important;
    }

}