/* General Styles */
body {
  font-family: "Quicksand", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body input {
  font-family: "Quicksand", sans-serif;
  color: var(--color-gray-400);
}

/*Header style start*/
.main-container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .main-container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .main-container {
    max-width: 768px;
  }
}

@media (max-width: 991px) {
  .main-container {
    background: var(--body-blackfont-color);
  }

  .header-container {
    background: var(--body-blackfont-color);
  }
}

@media (min-width: 1024px) {
  .main-container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .main-container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .main-container {
    max-width: 1536px;
  }
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.z-20 {
  z-index: 20;
}

.center-align {
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.w-full {
  width: 100%;
}

.clickable {
  cursor: pointer;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.gap-0 {
  gap: 0;
}

.gap-0\.5 {
  gap: 0.5rem;
}

.gap-1\.75 {
  gap: 1.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-solid {
  border-style: solid;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-1 {
  padding: 0.25rem;
}

.px-1\.75 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-0\.25 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-1\.25 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.text-center {
  text-align: center;
}

.medium-weight {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.transition {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.duration-700 {
  transition-duration: 0.7s;
}

:root {
  --color-gray-100: #d9d9d9;
  --color-gray-200: #eee;
  --color-gray-300: #626262;
  --color-gray-400: #1a1818;
  --color-red-500: #e03;
  --color-gray-320: #44494d;
  --color-white: #fff;
  --color-white-overlay: hsla(0, 0%, 100%, 0.5);
  --ttm-whitecolor: #ffffff;
  --ttm-bordercolor: rgba(0, 25, 76, 0.3);
  --ttm-skincolor: #0054df;
  --ttm-secondarycolor: #001746;
  --ttm-greycolor: #eff3fa;
  --body-blackfont-color: #001746;
  --body-darkgrey-color: #9e9e9e;
  --body-fonts-color: #566e7c;
  --body-line-height: 28px;
  --body-font-size: 16px;
  --special-element-fontweight: 500;
  --ttm-button-shape: 2em;
  --button-text-transform: ;
  --button-font-weight: 500;
  --button-font-family: Inter Tight;
  --button_fontsize: 16px;
  --button-topbottom-padding: 14px;
  --mainmenu_fontsize: 16px;
  --mainmenu-text-transform: ;
  --topbar-fontsize: 16px;
  --h3-fontsize: 28px;
  --h3-font-line-height: 38px;
  --h4-fontsize: 18px;
  --h4-font-line-height: 25px;
  --ttm-border-shape-10px: 10px;
  --ttm-border-shape-15px: 15px;
  --ttm-border-shape-20px: 20px;
  --ttm-border-shape-30px: 30px;
  --ttm-border-shape-50px: 50px;
  --ttm-first-gradientcolor: #006f73;
  --ttm-second-gradientcolor: #00c20e;
}

#breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 5px;
  font-size: 14px;
  color: var(--color-gray-400);
}

#breadcrumb-arrow {
  text-decoration: none;
  color: var(--color-gray-400);
  padding: 0 5px 0 5px;
}

.breadcrumb_last {
  color: var(--color-gray-400);
}

.header-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: var(--body-blackfont-color);
}

.navigation-bar {
  position: relative;
}

.navigation-bar,
.brand-logo {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 100%;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.brand-logo>img:nth-child(2) {
  display: none;
}

.brand-logo img.logo-desktop {
  height: 43px;
  transition: transform 0.3s ease;
}

.brand-logo img.logo-mobile {
  display: none;
  height: 48px;
  transition: transform 0.3s ease;
}

.brand-logo img:hover {
  transform: scale(1.08);
}

.menu-toggle {
  position: absolute;
  left: 0;
  top: 0.75rem;
  display: none;
  padding: 1rem;
  border: none;
}

.menu-collapse {
  display: none;
  flex-grow: 1;
  justify-content: flex-end;
}

.menu-collapse ul {
  list-style: none;
}

.nav-list {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 0.5rem;
}

.navigation-bar a {
  text-decoration: none;
}

.tertiary-nav {
  display: none;
  transition: all 0.3s ease;
}

.primary-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: center;
  font-weight: 500;
  color: var(--ttm-whitecolor);
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
  height: 74px;
}

.secondary-nav {
  position: absolute;
  display: none;
  width: 13rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-weight: 400;
  color: var(--color-gray-400);
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.secondary-nav-item {
  position: relative;
  z-index: 10;
  transition: background-color 0.7s;
}

.secondary-nav-link {
  display: block;
  width: 13rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--color-gray-400);
}

.action-panel {
  gap: 1.75rem;
  padding-right: 1.75rem;
  height: 74px;
}

.action-panel,
.search-bar {
  display: flex;
  align-items: center;
}

.search-bar {
  position: relative;
  gap: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
  border-radius: 20px;
  width: 30px;
}

.search-bar>img {
  cursor: pointer;
  width: 30px;
  height: 30px;
}

.search-bar.open {
  border-width: 1px;
  border-color: var(--color-gray-300);
  width: 300px;
  padding: 5px;
  background: #fff;
}

.search-bar input {
  margin-right: 0.25rem;
  display: none;
  flex-grow: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.search-bar input.visible {
  display: block;
  color: #000;
}

.search-bar .close-search {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: none;
}

.search-bar .close-search.visible {
  display: block;
}

.profile-menu>img {
  width: 30px;
  height: 30px;
}

#profile-icon-white {
  display: none;
}

.language-switcher {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-width: 30px;
}

.language-switcher>img {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 9999px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 30px;
  height: 30px;
}

.language-dropdown {
  position: absolute;
  display: none;
  width: 9rem;
  background-color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  left: -12px;
  top: 40px;
}

.language-dropdown li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-gray-400);
}

.language-dropdown li img {
  border-radius: 9999px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 30px;
  height: 30px;
}

.language-dropdown li.visible,
.language-dropdown li:hover {
  color: var(--color-red-500);
}

.language-dropdown li:hover {
  background-color: var(--color-gray-100);
}

@media only screen and (min-width: 991px) {
  .nav-list.hide {
    display: none;
  }

  .menu-collapse {
    display: flex !important;
  }

  .primary-nav-item:hover {
    color: var(--color-red-500);
  }

  .primary-nav-item:hover .secondary-nav {
    display: block;
  }

  .primary-nav-item.selected-desktop {
    font-weight: 600;
    color: #005bb5;
  }

  .primary-nav-link:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-width: 1px;
    background-color: var(--ttm-greycolor);
    height: 5px;
    content: "";
    transition: width 0.2s;
  }

  .primary-nav-item.selected-desktop .primary-nav-link:before,
  .primary-nav-item:hover .primary-nav-link:before {
    width: 5rem;
  }

  .primary-nav-link:hover {
    color: #004b8e;
  }

  .secondary-nav-item.expandable>.secondary-nav-link>div {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    height: 0.5rem;
    width: 0.5rem;
    border-top-width: 2px;
    border-right-width: 2px;
    border-color: var(--color-gray-300);
    font-size: 1.25rem;
    line-height: 1.75rem;
    transform: rotate(45deg);
  }

  .secondary-nav-item:hover {
    background-color: var(--color-gray-100);
  }

  .secondary-nav-item:hover .secondary-nav-link {
    font-weight: 500;
    color: var(--ttm-skincolor);
  }

  .secondary-nav-item:hover .secondary-nav-link>div {
    border-color: var(--ttm-skincolor);
  }

  .secondary-nav-item:hover .tertiary-nav {
    position: absolute;
    display: block;
    width: 208px;
    top: -0.25rem;
    left: 208px;
  }

  .tertiary-nav {
    background-color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
      0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .tertiary-nav a {
    display: flex;
    padding: 0.5rem 0.75rem;
  }

  .tertiary-nav a:hover {
    color: var(--ttm-skincolor);
  }

  .profile-menu>img:nth-child(2),
  .search-bar>img:nth-child(2) {
    display: none;
  }

  .language-switcher:hover .language-dropdown {
    display: block;
  }

  .language-switcher .language-title {
    display: none;
  }
}

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

  .header-container.visible,
  .header-container:not(.header-home) {
    background-color: var(--color-red-500);
  }

  .navigation-bar {
    flex-wrap: wrap;
    justify-content: center;
    background: var(--body-blackfont-color);
  }

  .menu-toggle {
    z-index: 10;
    display: block;
  }

  .brand-logo {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .brand-logo>img:first-child {
    display: none;
  }

  .brand-logo>img:nth-child(2) {
    z-index: 10;
    display: block;
  }

  .menu-collapse {
    margin-bottom: 1.5rem;
    width: 100%;
    align-items: flex-start;
  }

  .menu-collapse.visible {
    display: flex;
    background: var(--body-blackfont-color);
  }

  .nav-list {
    margin-top: 1rem;
    width: 100%;
    flex-direction: column;
    border-right-width: 2px;
    padding-right: 1rem;
    border-right-color: var(--color-white-overlay);
  }

  .primary-nav-link {
    height: 2.5rem;
    text-transform: uppercase;
    color: var(--color-white);
  }

  .primary-nav-link:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 0.25rem;
    width: 0;
    border-radius: 3px;
    background-color: var(--color-white);
    height: 5px;
    content: "";
    transition: width 0.2s;
  }

  .primary-nav-item.selected-mobile:not(.expandable)>.primary-nav-link:before {
    width: 5rem;
  }

  .primary-nav-item.toggle-mobile .secondary-nav {
    position: static;
    display: block;
    width: 100%;
    background-color: var(--color-white);
  }

  .primary-nav-item.expandable>.primary-nav-link>div {
    height: 0.5rem;
    width: 0.5rem;
    border-top-width: 2px;
    border-left-width: 2px;
    border-color: var(--color-white);
    transform: rotate(-135deg) translate(-2px, 7px);
  }

  .secondary-nav-link {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }

  .secondary-nav-link:before {
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 0;
    background-color: var(--color-red-500);
    height: 3px;
    content: "";
    transition: width 0.2s;
  }

  .secondary-nav-item.selected-mobile:not(.expandable)>.secondary-nav-link:before {
    width: 5rem;
  }

  .secondary-nav-item.expandable>.secondary-nav-link>div {
    height: 0.5rem;
    width: 0.5rem;
    border-top-width: 2px;
    border-left-width: 2px;
    border-color: var(--color-gray-400);
    transform: rotate(-135deg) translate(-3px, 5px);
  }

  .secondary-nav-item.toggle-mobile .tertiary-nav {
    display: block !important;
  }

  .tertiary-nav {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    background-color: var(--color-gray-200);
  }

  .tertiary-nav a {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 11px;
  }

  .tertiary-nav a:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 0.25rem;
    width: 0;
    background-color: var(--color-gray-400);
    content: "";
    transition: width 0.2s;
  }

  .tertiary-nav a.selected-mobile:before {
    width: 5rem;
  }

  .action-panel {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    height: 74px;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0;
    padding-left: 1rem;
  }

  .search-bar {
    border-style: none;
    width: 100%;
    padding: 5px;
    background: #fff;
  }

  .search-bar input {
    color: #000;
  }

  .search-bar>img {
    height: 1.25rem;
    width: 1.25rem;
    margin-left: 2px;
  }

  .search-bar>img:first-child {
    display: block;
  }

  .search-bar>img:nth-child(2) {
    display: none;
  }

  .search-bar .close-search {
    top: 0.25rem;
  }

  .profile-menu>img {
    height: 1.25rem;
    width: 1.25rem;
  }

  .profile-menu>img:first-child {
    display: none;
  }

  .profile-menu>img:nth-child(2) {
    display: block;
  }

  #profile-icon-black {
    display: none;
  }

  .language-switcher {
    width: 100%;
    flex-wrap: wrap;
    min-width: 20px;
  }

  .language-switcher>img {
    height: 1.25rem;
    width: 1.25rem;
  }

  .language-switcher>div {
    height: 0.5rem;
    width: 0.5rem;
    border-top-width: 2px;
    border-left-width: 2px;
    border-color: var(--color-white);
    transform: rotate(-135deg) translate(-3px, 5px);
  }

  .language-switcher li {
    display: flex;
    justify-content: center;
  }

  .language-switcher .language-title {
    margin-left: 0.25rem;
    color: var(--color-white);
  }

  .language-dropdown.visible {
    position: static;
    display: block;
    width: 100%;
  }

  .language-dropdown li img {
    height: 1.25rem;
    width: 1.25rem;
  }


}

/*Responsive for header*/
@media (max-width: 1536px) {
  .primary-nav-link {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 13px;
  }
}

@media (max-width: 1281px) {
  .brand-logo img.logo-desktop {
    height: 33px;
  }

  .primary-nav-link {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 11px;
  }

  .search-bar>img {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-left: 5px;
  }

  .language-switcher>img {
    width: 20px;
    height: 20px;
  }

  #profile-icon-black {
    height: 25px;
    width: 25px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1199px) {

  .primary-nav-item.selected-desktop .primary-nav-link:before,
  .primary-nav-item:hover .primary-nav-link:before {
    width: 3.5rem;
  }

  .action-panel {
    gap: 1rem;
  }

  .search-bar {
    width: 24px;
    min-width: 24px;
  }

  .search-bar>img {
    height: 1.5rem;
    width: 1.5rem;
  }

  .profile-menu {
    min-width: 24px;
  }

  .profile-menu>img {
    height: 1.5rem;
    width: 1.5rem;
  }

  .language-switcher {
    min-width: 24px;
  }

  .language-switcher>img {
    height: 1.5rem;
    width: 1.5rem;
  }
}

@media only screen and (max-width: 1199px) {
  .language-dropdown {
    left: auto;
    right: 0;
  }
}


@media only screen and (max-width: 767px) {
  .menu-collapse {
    flex-direction: column;
    align-items: center;
  }

  .nav-list {
    border-right-width: 0;
    border-bottom-width: 2px;
    padding-right: 0;
    padding-bottom: 1rem;
    border-bottom-color: var(--color-white-overlay);
  }

  .action-panel {
    padding-left: 0;
  }
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-down {
  animation-name: slide-in-top;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-duration: 1s;
  animation-fill-mode: both;
}

/*Header style end*/
.btn {
  background: #183051;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
}

.btn:hover {
  background: #2a4b7c;
}

.banner-slogan {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 1s forwards 0.5s;
}

.banner-buttons {
  opacity: 0;
  animation: fadeIn 1s forwards 1s;
}

@keyframes zoomIn {

  0%,
  100% {
    background-size: 100%;
  }

  50% {
    background-size: 110%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*Section về chúng tôi trang home*/
.uw_section_container {
  width: 100%;
  min-height: 90vh;
  background: url(/image/home/section_about_us_home_bg.png) no-repeat center/cover;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 2rem;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  color: #ffffff;
}

.uw_content_wrapper {
  display: flex;
  align-items: center;
  z-index: 1;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.uw_image_holder {
  width: 100%;
  max-width: 400px;
  height: 400px;
  background: #ccc;
  border-radius: 20px;
  flex-shrink: 0;
}

.uw_image_holder img {
  width: 100%;
  max-width: 400px;
  height: 400px;
  background: #ccc;
  border-radius: 20px;
  flex-shrink: 0;
}

.uw_text_block {
  flex: 1;
  min-width: 300px;
}

.uw_text_block h2 {
  font-size: 2.5rem;
  margin-bottom: 35px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Quicksand', sans-serif;
}

.uw_text_block h2::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background-color: #f1f2f6;
  margin-top: 10px;
  border-radius: 2px;
}

.uw_text_block p {
  font-size: clamp(1rem, 3vw, 1.1rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.uw_text_block .uw_subtext_group {
  font-size: clamp(0.85rem, 2.5vw, 0.9rem);
  opacity: 0.8;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.uw_subtext_group div {
  flex: 1;
  min-width: 200px;
}

.uw_subtext_group h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  padding-bottom: 8px;
  font-size: 23px;
}

.uw_subtext_group p {
  font-size: 16px;
}

.uw_intro_text {
  padding-bottom: 60px;
}

.uw_button_group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.uw_action_btn {
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  transition: background 0.3s;
}

.uw_btn_direct {
  background: transparent;
  border: 2px solid #3498db;
  color: #3498db;
}

.uw_btn_direct:hover {
  background: #3498db;
  color: #fff;
}

.uw_stats_container {
  display: flex;
  justify-content: space-between;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 1rem;
}

.uw_stat_item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  width: 200px;
  max-width: 280px;
  text-align: center;
  backdrop-filter: blur(10px);
  flex: 1;
  min-width: 200px;
}

.uw_stat_item .uw_stat_icon {
  font-size: clamp(1.8rem, 5vw, 2rem);
  margin-bottom: 0.5rem;
}

.uw_stat_item h3 {
  font-size: clamp(1.8rem, 5vw, 2rem);
  margin: 0.5rem 0;
}

.uw_stat_item p {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  opacity: 0.8;
}

/* Media Queries for smaller screens */
@media (max-width: 795px) {
  .uw_image_holder {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    /* Đặt kích thước tối đa của container */
    height: 300px;
    margin: 0 auto;
    /* Căn giữa container */
  }

  .uw_image_holder img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    /* Đảm bảo hình ảnh không bị méo */
    border-radius: 20px;
    /* Giữ góc bo tròn */
  }

  .uw_button_group {
    padding-bottom: 20px;
  }
}


@media (max-width: 768px) {
  .uw_section_container {
    padding: 2rem 1rem;
  }

  .uw_content_wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .uw_image_holder {
    max-width: 300px;
    height: 300px;
  }

  .uw_image_holder img {
    max-width: 300px;
    height: 300px;
  }

  .uw_text_block {
    min-width: 100%;
  }

  .uw_text_block h2 {
    font-size: 1.8rem;
  }

  .uw_subtext_group {
    flex-direction: column;
    gap: 1rem;
  }

  .uw_stats_container {
    flex-direction: column;
    align-items: center;
  }

  .uw_stat_item {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .uw_section_container {
    padding: 1.5rem 0.5rem;
  }

  .uw_button_group {
    justify-content: center;
  }

  .uw_action_btn {
    width: 70%;
    text-align: center;
    justify-content: center;
  }

  .uw_stats_item {
    width: 180px;
  }

  .uw_stat_item h3 {
    font-size: 1.5rem;
  }

  .uw_stat_item p {
    font-size: 0.9rem;
  }
}

/*Section về chúng tôi trang home*/

/* Why UniWave Section */
.why-univave {
  padding: 80px 20px;
  background: #f1f2f6;
  text-align: center;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* Heading */
.why-univave h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a2a44;
  margin-bottom: 60px;
  position: relative;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.why-univave h2::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 5px;
  background: linear-gradient(to right, #3b82f6, #10b981);
  border-radius: 3px;
  animation: slideBackAndForth 3s infinite ease-in-out;
}

@keyframes slideBackAndForth {
  0% {
    transform: translateX(-50%) translateX(-80px);
  }

  50% {
    transform: translateX(-50%) translateX(80px);
  }

  100% {
    transform: translateX(-50%) translateX(-80px);
  }
}

/* Slider Container */
.slider-features {
  max-width: 1400px;
  margin: 0 auto;
  height: 400px;
  /* Matches taller cards */
  padding: 10px 0;
  /* Minimal horizontal padding */
}

/* Swiper Slide */
.swiper-slide {
  width: 320px;
  /* Match card width for 4 cards per view */
  margin-right: 2px;
  /* Minimal spacing */
}

.swiper-wrapper {
  padding: 0;
  /* Minimal padding */
}

/* Feature Item (Slide) */
.feature {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 380px;
  width: 320px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 auto;
}

.feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(59, 130, 246, 0.1),
      transparent);
  transition: left 0.5s ease;
}

.feature:hover::before {
  left: 100%;
}

/* Feature Layout */
.feature-text {
  padding: 15px;
  text-align: left;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 3%;
  width: 90%;
  height: 180px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2a44;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 16px;
  font-weight: 500;
  color: #2d3748;
  line-height: 1.6;
}

/* Feature Image Container */
.feature-img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.feature-text:hover {
  opacity: 0;
  transform: translateY(20px);
}

.feature:hover .feature-img {
  transform: scale(1.1);
  transform-origin: center;
}

.feature-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 99;
}

.swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.swiper-pagination-bullet {
  background: #3b82f6;
  opacity: 0.4;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
  color: #00266e;
}

.slider-navBtn {
  color: #000 !important;
  height: 40px !important;
  width: 40px !important;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.slider-navBtn::before,
.slider-navBtn::after {
  font-size: 18px !important;
  font-weight: 600 !important;
}


/* Slider Pagination */
.swiper-pagination {
  position: relative;
  margin-top: 15px;
}

.swiper-pagination-bullet {
  background: #3b82f6;
  opacity: 0.4;
  width: 8px;
  height: 8px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

/* Swiper Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #00266e;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 767px) {
  .why-univave {
    padding: 40px 10px;
    min-height: 400px;
  }

  .slider {
    max-width: 100%;
    padding: 0 2px;
  }

  .swiper-slide {
    width: 200px;
    margin-right: 2px;
  }


  .feature-text {
    padding: 8px;
  }

  .feature-img-container {
    width: 100%;
    height: 100%;
  }

  .feature-title {
    font-size: 1.1rem;
  }

  .feature-description {
    font-size: 0.9rem;
  }

  .why-univave h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .why-univave h2::after {
    width: 60px;
  }
}

@media (max-width: 360px) {
  .why-univave {
    padding: 20px 5px;
  }

  .why-univave h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .slider {
    padding: 0 2px;
  }

  .swiper-slide {
    width: 160px;
    margin-right: 2px;
  }

  .feature {
    height: 360px;
    width: 300px;
  }

  .feature-img-container {
    width: 100%;
    height: 100%;
  }

  .feature-title {
    font-size: 0.95rem;
  }

  .feature-description {
    font-size: 0.8rem;
  }

  .swiper-pagination {
    margin-top: 10px;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }
}
/* Why UniWave Section */

/* Quote Form */
.quote-form {
  padding: 50px 0;
  background: #f5f5f5;
}

.quote-form form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group select,
.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s;
}

.form-group select:focus,
.form-group input:focus {
  border-color: #183051;
  outline: none;
  box-shadow: 0 0 5px rgba(24, 48, 81, 0.3);
}

.quote-form .btn {
  display: block;
  margin: 0 auto;
  position: relative;
}

.quote-form .btn:hover {
  animation: pulse 0.5s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* Section Services trang home*/
.services {
  padding: 60px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.services h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a2b49;
  margin-bottom: 40px;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  text-transform: uppercase;
}

.services h2::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 5px;
  background: linear-gradient(to right, #3b82f6, #10b981);
  border-radius: 3px;
  animation: SlideBackandForth 3s infinite ease-in-out;
}

@keyframes SlideBackandForth {
  0% {
    transform: translateX(-50%) translateX(-80px);
  }

  50% {
    transform: translateX(-50%) translateX(80px);
  }

  100% {
    transform: translateX(-50%) translateX(-80px);
  }
}

.services.visible h2 {
  opacity: 1;
  transform: translateY(0);
  animation: titleGlow 1.5s ease-in-out forwards 0.1s;
}

@keyframes titleGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(26, 43, 73, 0.4), 0 0 25px rgba(26, 43, 73, 0.2);
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
}

.service-list {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.service {
  width: 400px;
  height: 400px;
  min-width: 280px;
  background: #fff;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.services.visible .service:nth-child(1) {
  transition-delay: 0.2s;
  opacity: 1;
  transform: scale(1);
}

.services.visible .service:nth-child(2) {
  transition-delay: 0.4s;
  opacity: 1;
  transform: scale(1);
}

.services.visible .service:nth-child(3) {
  transition-delay: 0.6s;
  opacity: 1;
  transform: scale(1);
}

.service:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.service::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.service:hover::before {
  left: 100%;
}

.service-img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.service-img-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service:hover .service-img-container::after {
  opacity: 1;
}

.service:hover .service-img-container img {
  transform: scale(1.1);
  filter: brightness(1.15) contrast(1.05);
}

.service h3,
.service p {
  position: relative;
  z-index: 1;
  opacity: 0;
  /* Ẩn chữ ban đầu */
  transform: translateY(20px);
  /* Dịch chuyển xuống để tạo hiệu ứng slide */
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 0 15px;
}

.service h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  /* Đổi màu chữ để nổi bật trên overlay */
  margin: 10px 0;
  padding-bottom: 15px;
}

.service p {
  font-size: 1rem;
  color: #ddd;
  /* Màu chữ nhạt hơn cho nội dung phụ */
  line-height: 1.5;
  margin: 0;
  padding-bottom: 15px;
}

.service:hover h3,
.service:hover p {
  opacity: 1;
  /* Hiển thị chữ khi hover */
  transform: translateY(0);
  /* Slide lên vị trí gốc */
}

.service-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  /* Ẩn mũi tên ban đầu */
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-decoration: none;
}

.service-link img {
  font-size: 2rem;
  color: #fff;
  background: #f7f1e3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.service:hover .service-link {
  opacity: 1;
  /* Hiển thị mũi tên khi hover */
  transform: translate(-50%, -50%) scale(1.1);
  /* Hiệu ứng phóng to nhẹ */
}

@media (max-width: 1024px) {
  .service {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .service {
    width: 80%;
    margin: 0 auto;
  }

  .services h2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .service {
    width: 90%;
  }

  .services h2 {
    font-size: 1.8rem;
  }
}

/* Partners trang home start*/
.partners {
  padding: 40px 20px;
  background-color: #ffffff;
  text-align: center;
}

.partners h2 {
  font-size: 46px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #1a1818;
  padding-bottom: 10px;
  position: relative;
  /* Cần để ::after định vị đúng */
  opacity: 0;
  /* Hiển thị tiêu đề, bỏ opacity: 0 để tránh ẩn */
  transition: opacity 0.3s ease;
  /* Giữ transition cho các hiệu ứng khác nếu cần */
  text-transform: uppercase;
}

.partners h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: linear-gradient(to right, #3b82f6, #10b981);
  border-radius: 3px;
  animation: UnderlineSlide 3s infinite ease-in-out;
}

@keyframes UnderlineSlide {
  0% {
    transform: translateX(-50%) translateX(-80px);
  }

  50% {
    transform: translateX(-50%) translateX(80px);
  }

  100% {
    transform: translateX(-50%) translateX(-80px);
  }
}

.partners.visible h2 {
  animation: fadeIn 1s forwards;
}

.slide-container {
  max-width: 1200px;
  margin: 0 auto;
}

.card-wrapper {
  padding: 20px 0;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: 120px;
  opacity: 0;
  /* Ẩn ban đầu */
  transition: opacity 0.3s ease;
  /* Thêm transition để ẩn mượt mà */
}

.partners.visible .card:nth-child(1) {
  animation: slideUp 0.8s forwards 0.1s;
}

.partners.visible .card:nth-child(2) {
  animation: slideUp 0.8s forwards 0.3s;
}

.partners.visible .card:nth-child(3) {
  animation: slideUp 0.8s forwards 0.5s;
}

.partners.visible .card:nth-child(4) {
  animation: slideUp 0.8s forwards 0.7s;
}

.partners.visible .card:nth-child(5) {
  animation: slideUp 0.8s forwards 0.9s;
}

.partners.visible .card:nth-child(6) {
  animation: slideUp 0.8s forwards 1.1s;
}

.image-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-box img {
  width: 120px;
  height: 60px;
  object-fit: contain;
}

.swiper-navBtn {
  color: #000 !important;
  height: 40px !important;
  width: 40px !important;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .partners h2 {
    font-size: 1.8rem;
  }
}

/* CTA trang home start */
/* Reset và style cơ bản */
.cta {
  position: relative;
  padding: 60px 0;
  min-height: 400px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a3d 0%, #2a4066 100%);
}

/* Nền với hiệu ứng hạt */
.cta-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px);
  background-size: 20px 20px;
  opacity: 0.3;
  z-index: 1;
}

/* Container chính */
.cta-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  position: relative;
  z-index: 2;
}

/* Nửa bên trái (hình ảnh) */
.cta-left {
  flex: 1;
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
  /* Hình thang vuông */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  height: 400px;
  transition: transform 0.3s ease;
  width: 700px;
  opacity: 0;
  /* Ẩn ban đầu */
}

.cta-container.visible .cta-left {
  animation: slideUp 0.8s forwards 0.2s;
  /* Animation trượt lên với độ trễ 0.2s */
}

.cta-left:hover {
  transform: scale(1.02);
}

.cta-image {
  width: 100%;
  height: 100%;
  background: url(/image/home/CTA.jpg) center/cover no-repeat;
  clip-path: inherit;
  transition: transform 0.5s ease;
}

.cta-left:hover .cta-image {
  transform: scale(1.1);
}

/* Nửa bên phải (nội dung) */
.cta-right {
  flex: 1;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.3s ease;
  opacity: 0;
  /* Ẩn ban đầu */
}

.cta-container.visible .cta-right {
  animation: slideUp 0.8s forwards 0.4s;
  /* Animation trượt lên với độ trễ 0.4s */
}

.cta-right:hover {
  transform: scale(1.02);
}

/* Nội dung */
.cta-content {
  text-align: center;
  max-width: 80%;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards 0.2s;
}

/* Tiêu đề */
#cta-main-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #ffffff, #3b82f6, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  opacity: 0;
  /* Ẩn ban đầu */
}

.cta-container.visible .cta-title {
  animation: slideUp 0.8s forwards 0.6s;
  /* Animation trượt lên với độ trễ 0.6s */
}

/* Hotline */
.cta-hotline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  opacity: 0;
  /* Ẩn ban đầu */
}

.cta-container.visible .cta-hotline {
  animation: slideUp 0.8s forwards 0.8s;
  /* Animation trượt lên với độ trễ 0.8s */
}

.hotline-icon {
  font-size: 24px;
  margin-right: 10px;
  animation: vibrate 0.5s ease infinite;
}

.hotline-badge {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  padding: 10px 25px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

-hotline-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

/* Nút CTA */
.cta-btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: gradientShift 4s linear infinite;
  opacity: 0;
  /* Ẩn ban đầu */
}

.cta-container.visible .cta-btn {
  animation: slideUp 0.8s forwards 1s;
  /* Animation trượt lên với độ trễ 1s */
}

.cta-btn:hover {
  transform: translateY(-5px) rotateX(10deg);
  box-shadow: 0 10px 20px rgba(255, 107, 107, 0.6);
}

.cta-btn::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #10b981);
  border-radius: 50px;
  z-index: -2;
  filter: blur(5px);
  animation: borderGlow 3s linear infinite;
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes UnderlineGlow {
  0% {
    transform: translateX(0);
    opacity: 0.7;
  }

  50% {
    transform: translateX(20px);
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
}

@keyframes vibrate {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-2px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes borderGlow {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
  }
}

@media (max-width: 760px) {
  .cta {
    padding: 40px 20px;
    min-height: auto;
  }

  .cta-container {
    flex-direction: column;
    align-items: center;
  }

  .cta-left,
  .cta-right {
    width: 100%;
    height: auto;
    clip-path: none;
    backdrop-filter: none;
    background: none;
  }

  .cta-left {
    margin-bottom: 20px;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    /* Hình thang vuông */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);

  }

  .cta-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background: url(/image/home/CTA.jpg) center/cover no-repeat;
    clip-path: inherit;

  }

  .cta-content {
    max-width: 100%;
    padding: 0 10px;
  }

  #cta-main-title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .hotline-badge {
    font-size: 16px;
    padding: 8px 20px;
  }

  .cta-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

/*CTA end*/
/* Định kiểu cho icon-need-help */
.icon-need-help {
  position: fixed;
  bottom: 30px;
  /* Khoảng cách từ dưới lên */
  left: 30px;
  /* Khoảng cách từ trái sang */
  z-index: 1000;
  /* Đảm bảo hiển thị trên các phần tử khác */
  cursor: pointer;
}

.icon-need-help a {
  display: block;
  background: #183051;
  border-radius: 50%;
  padding: 2px;
  animation: pulse 2s ease-in-out infinite;
  /* Hiệu ứng phóng to thu nhỏ với phát sáng */
}

.icon-need-help a img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
}

/* Định kiểu cho social-chat */
.social-chat li {
  margin: 5px 0;
}

.social-chat li a {
  display: block;
  padding: 5px;
  transition: display ease 0.5s;
  cursor: pointer;
  animation: pulse 2s ease-in-out infinite;
  /* Hiệu ứng phóng to thu nhỏ với phát sáng */
}

/* Keyframes cho hiệu ứng phóng to thu nhỏ và phát sáng */
@keyframes pulse {
  0% {
    transform: scale(1);
    /* Kích thước ban đầu */
    box-shadow: 0 0 0 rgba(255, 214, 0, 0);
    /* Không có bóng */
  }

  50% {
    transform: scale(1.2);
    /* Phóng to 120% */
    box-shadow: 0 0 15px 5px rgba(255, 214, 0, 0.6);
    /* Viền phát sáng vàng nhẹ */
  }

  100% {
    transform: scale(1);
    /* Thu nhỏ về kích thước ban đầu */
    box-shadow: 0 0 0 rgba(255, 214, 0, 0);
    /* Không có bóng */
  }
}

/* Chat box styles */
.chat-box {
  position: fixed;
  bottom: 100px;
  /* Above the icon */
  left: 30px;
  width: 250px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 15px;
  z-index: 999;
  animation: fadeInUp 0.5s ease-out;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.chat-box::before {
  content: "";
  position: absolute;
  top: 100%;
  /* Position below the chat box */
  left: 20px;
  /* Adjust as needed to align with chat box */
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  /* Triangle pointing up */
}

.chat-box p {
  margin: 0;
}

/* Pop-up form styles */
.popup-form {
  position: fixed;
  bottom: 100px;
  /* Above the icon */
  left: 30px;
  width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1001;
  /* Above chat box */
  display: none;
  /* Hidden by default */
  animation: fadeIn 0.3s ease-out;
}

.popup-form h3 {
  margin: 0 0 15px;
  font-size: 18px;
  color: #183051;
}

.popup-form input,
.popup-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #000;
}

.popup-form textarea {
  resize: vertical;
  min-height: 80px;
}

.popup-form button {
  background: #183051;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.popup-form button:hover {
  background: #2a4b7c;
}

.popup-form .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

/* Animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Responsive cho mobile */
@media (max-width: 770px) {
  .icon-need-help {
    bottom: 10px;
    left: 10px;
  }

  .icon-need-help a img {
    width: 43px;
    height: 43px;
  }

  .chat-box {
    position: fixed;
    bottom: 70px;
    /* Above the icon */
    left: 10px;
    width: 200px;
    padding: 15px;
    font-size: 11px;
    line-height: 1.2;
  }

  /* Pop-up form styles */
  .popup-form {
    bottom: 70px;
    /* Above the icon */
    left: 10px;
    width: 230px;
    z-index: 1001;
    /* Above chat box */
  }

  .popup-form h3 {
    font-size: 15px;
  }

  .popup-form input,
  .popup-form textarea {
    padding: 8px;
    font-size: 11px;
  }

  .popup-form textarea {
    min-height: 60px;
  }

  .popup-form button {
    font-size: 11px;
  }

  .popup-form .close-btn {
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 13px;
  }

  .social-box-list {
    right: 5px !important;
    bottom: 10px !important;
  }

  .social-box-list .social-chat img {
    width: 43px !important;
    height: 43px !important;
  }
}

/* Tracking shipment */
/* Định kiểu chung cho section */
.post-office-tracking {
  margin-top: 10px;
  position: relative;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  padding-bottom: 10px;
  font-family: "Mulish", sans-serif;
}

/* Container form */
.container-form-tracking {
  background: #192a56;
  /* Nền xanh */
  animation: fadeIn 1s forwards;
  border-radius: 12px;
  padding: 25px 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Tiêu đề form */
.form-title {
  color: #f5f6fa;
  /* Màu xanh chủ đạo */
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.form-title img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Form theo dõi */
.form-tracking {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Khoảng cách đều giữa các phần tử */
  width: 100%;
}

/* Ô nhập mã bưu gửi */
.div-tracking-input {
  min-width: 45%;
  flex: 1;
}

/* Ô nhập mã xác nhận */
.div-tracking-cap {
  width: 40% !important;
  flex: 1;
}

/* Ô nhập liệu */
.input-tracking {
  background: #fff;
  border: none;
  border-radius: 30px;
  color: #004b8e;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  line-height: 16px;
  padding-left: 15px;
  width: 100%;
  outline: none;
  transition: transform 0.3s ease;
}

.input-tracking:focus {
  transform: scale(1.02);
  /* Phóng to nhẹ khi focus */
}

/* Khu vực captcha */
.with-tracking {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.img-cap {
  width: 32% !important;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.output-code {
  background: #dcdadb;
  /* Nền xám nhạt */
  border-radius: 4px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#tra-cuu-captcha {
  height: 28px;
  margin-right: 5px;
}

.reload-captcha {
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: transform 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
  /* Hiệu ứng phóng to thu nhỏ */
}

.reload-captcha:hover {
  transform: rotate(360deg);
}

/* Nút Theo dõi */
.button-tracking {
  background: #e67e22 !important;
  /* Màu cam */
  border: none;
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  line-height: 16px;
  padding: 2px 20px;
  cursor: pointer;
  transition: background 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
  /* Hiệu ứng phóng to thu nhỏ */
}

.button-tracking:hover {
  background: #005bb5 !important;
  /* Xanh nhạt hơn khi hover */
}

/* Animation phóng to thu nhỏ */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Responsive */
@media (max-width: 1420px) {
  .post-office-tracking {
    width: 70%;
  }

  .container-form-tracking {
    padding: 20px 30px;
  }

  .form-title {
    font-size: 18px;
    line-height: 22px;
  }

  .input-tracking {
    font-size: 14px;
    height: 40px;
    padding-left: 15px;
  }

  .button-tracking {
    font-size: 14px;
    height: 40px;
    padding: 2px 20px;
  }
}

@media (max-width: 768px) {

  /* Tablet */
  .post-office-tracking {
    width: 90%;
  }

  .container-form-tracking {
    padding: 20px 30px;
  }

  .form-tracking {
    flex-direction: column;
    gap: 10px;
  }

  .div-tracking-input {
    width: 90% !important;
    min-width: 90%;
  }

  .div-tracking-cap {
    width: 50% !important;
    min-width: 50%;
  }

  .with-tracking {
    width: 90% !important;
    min-width: 90%;
  }

  .img-cap {
    width: 50% !important;
    margin: 0 auto;
  }

  .button-tracking {
    width: 90%;
  }
}

@media (max-width: 576px) {

  /* Smartphone */
  .post-office-tracking {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .container-form-tracking {
    padding: 15px 20px;
  }

  .form-title {
    font-size: 14px;
    line-height: 16px;
  }

  .input-tracking {
    font-size: 12px;
    height: 36px;
    padding-left: 10px;
  }

  .button-tracking {
    font-size: 12px;
    height: 36px;
    padding: 2px 15px;
  }

  #tra-cuu-captcha {
    height: 24px;
  }

  .reload-captcha {
    width: 16px;
    height: 16px;
  }
}

/* Bo cong thuong */
.badge-container img:last-child {
  max-width: 120px;
  height: auto;
  vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 1570px) {
  .fanpage {
    max-width: 100%;
    height: 150px;
  }
}

@media (max-width: 1145px) {
  .row {
    flex-direction: row;
    /* Đảm bảo các cột nằm ngang */
    justify-content: space-between;
  }

  .col-3,
  .col-4,
  .col-5 {
    flex: 1;
    /* Chia đều không gian */
    max-width: 30%;
    /* Giới hạn chiều rộng mỗi cột */
    min-width: 200px;
    /* Đảm bảo không bị co quá nhỏ */
  }

  .fanpage {
    max-width: 100%;
    height: 200px;
  }

  .badge-container {
    flex-direction: row;
    /* Giữ hàng ngang */
    gap: 8px;
  }
}

@media (max-width: 1024px) {
  .col-5 {
    flex: 1;
    max-width: 90%;
    min-width: 400px;
  }
}

@media (max-width: 768px) {
  .col-5 {
    max-width: 100%;
    /* Chiếm toàn bộ chiều rộng trên màn hình vừa */
  }

  h4 {
    font-size: 1.25rem;
    /* Giảm kích thước chữ trên màn hình vừa */
  }

  .fanpage {
    max-width: 100%;
    /* Chiếm toàn bộ chiều rộng container */
    height: 180px;
    /* Giảm chiều cao một chút */
  }

  .badge-container {
    flex-direction: row;
    /* Vẫn giữ hàng ngang trên màn hình vừa */
    gap: 8px;
  }

  .badge-container img {
    max-width: 100px;
    /* Giảm kích thước ảnh */
  }
}

@media (max-width: 685px) {
  .badge-container img {
    max-width: 80%;
    /* Giảm kích thước ảnh */
  }
}

@media (max-width: 480px) {
  .col-5 {
    padding: 5px;
  }

  h4 {
    font-size: 1rem;
    /* Giảm kích thước chữ trên màn hình nhỏ */
  }

  .fanpage {
    height: 100px;
    /* Giảm chiều cao iframe trên màn hình nhỏ */
  }

  .badge-container {
    flex-direction: column;
    /* Chuyển sang hàng dọc trên màn hình nhỏ */
    gap: 5px;
  }

  .badge-container img {
    max-width: 80px;
    /* Giảm kích thước ảnh trên màn hình nhỏ */
  }
}

  /* Service page */
  /* Content wrapper for intro and cards */
  .content-wrapper {
    flex: 1;
    padding: 0 24px;
    padding-bottom: 24px;
    max-width: 1600px;
    margin: 0 auto;
  }

  /* Introduction section */
  .intro-section {
    text-align: center;
    padding: 64px 24px;
    background: linear-gradient(180deg, #e6f3ff 0%, #ffffff 100%);
    border-radius: 24px;
    margin: 40px 0 64px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s ease-out forwards;
  }

  .intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../image/services/img/service-intro-bg-partten.jpg') no-repeat center;
    background-size: cover;
    opacity: 0.7;
    z-index: 0;
  }

  .intro-section h1 {
    font-size: 2.8rem;
    color: #1a3c6b;
    font-weight: 800;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }

  .intro-section p {
    font-size: 1.2rem;
    color: var(--body-blackfont-color);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
    position: relative;
    font-weight: 700;
    z-index: 1;
  }

  .inline-block {
    display: inline-block;
    padding-top: 15px;
  }

  .btn-white-outline {
    position: relative;
    border-radius: 9999px;
    border-width: 2px;
    border-color: var(--ttm-secondarycolor) !important;
    background-color: transparent;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    color: var(--ttm-secondarycolor) !important;
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    height: 60px;
    transition: all .5s
}

.btn-white-outline img {
    display: inline!important;
    margin-left: 1rem;
    margin-bottom: 2px
}

  /* Card container styles */
  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 32px;
    padding: 0 16px;
    max-width: 1600px;
    margin: 0 auto;
  }

  .service-card {
    background: #ffffff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    position: relative;
  }

  /* Staggered animation for cards */
  .service-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .service-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  .service-card:nth-child(3) {
    animation-delay: 0.3s;
  }

  .service-card:nth-child(4) {
    animation-delay: 0.4s;
  }

  .service-card:nth-child(5) {
    animation-delay: 0.5s;
  }

  .service-card:nth-child(6) {
    animation-delay: 0.6s;
  }

  .service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  }

  .service-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .service-card:hover img {
    transform: scale(1.08);
  }

  .card-content {
    padding: 24px;
    text-align: left;
  }

  .card-content .service-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a3c6b;
    margin-bottom: 16px;
    line-height: 1.3;
  }

  .card-content .service-info p {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .card-content .service-info ul {
    list-style: none;
    padding-left: 0;
  }

  .card-content .service-info ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #4a5568;
  }

  .card-content .service-info ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #2b5a9d;
    font-size: 1.1rem;
    font-weight: bold;
  }

  .card-content .btn-send {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(90deg, #1a3c6b, #2b5a9d);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card-content .btn-send:hover {
    background: linear-gradient(90deg, #2b5a9d, #3a78c1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /* Highlight service title */
  .highlight-service-title {
    text-align: center;
    margin: 64px 0 32px;
    animation: fadeIn 0.8s ease-out forwards;
  }

  .highlight-service-title h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a3c6b;
    margin: 0;
    line-height: 1.3;
  }

  /* Common service container */
  .common-service-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    padding: 0 16px;
    max-width: 1400px;
    margin: 0 auto 64px;
  }

  .common-service {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
  }

  /* Staggered animation for common services */
  .common-service:nth-child(1) {
    animation-delay: 0.1s;
  }

  .common-service:nth-child(2) {
    animation-delay: 0.2s;
  }

  .common-service:nth-child(3) {
    animation-delay: 0.3s;
  }

  .common-service:hover {
    transform: translateY(-12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  }

  .common-service img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .common-service:hover img {
    transform: scale(1.08);
  }

  .common-card-content {
    padding: 20px;
    text-align: left;
  }

  .common-card-content .p1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a3c6b;
    margin-bottom: 12px;
    line-height: 1.3;
    text-decoration: none;
  }

  .common-card-content .p1:hover {
    color: #2b5a9d;
  }

  .common-card-content p {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .common-card-content .btn-send {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(90deg, #1a3c6b, #2b5a9d);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }

  .common-card-content .btn-send:hover {
    background: linear-gradient(90deg, #2b5a9d, #3a78c1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  /* Animation keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive adjustments */
  @media (max-width: 1024px) {
    .content-wrapper {
      padding: 0 16px;
    }

    .intro-section {
      padding: 48px 20px;
      margin: 32px 0 48px;
    }

    .intro-section h1 {
      font-size: 2.2rem;
    }

    .intro-section p {
      font-size: 1rem;
    }

    .card-container {
      padding: 0 12px;
    }

    .common-service-container {
      padding: 0 12px;
    }
  }

  @media (max-width: 768px) {
    .card-container {
      grid-template-columns: 1fr;
      padding: 0 16px;
    }

    .common-service-container {
      grid-template-columns: 1fr;
      padding: 0 16px;
    }

    .service-card img,
    .common-service img {
      height: 180px;
    }

    .intro-section h1 {
      font-size: 1.8rem;
    }

    .intro-section p {
      font-size: 0.95rem;
    }

    .highlight-service-title h2 {
      font-size: 1.8rem;
    }

    .card-content .service-title,
    .common-card-content .p1 {
      font-size: 1.3rem;
    }
  }

/* Domestic delivery page start*/
.header-block {
  text-align: center;
  padding: 40px 20px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.header-block h1 {
  font-size: 2.3rem;
  color: #1a1818;
  font-weight: 700;
  margin-bottom: 20px;
}

.header-block p {
  font-size: 1.2rem;
  color: #374151;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.header-image {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-top: 20px;
  border-radius: 12px;
  transition: opacity 0.3s ease;
}

.header-image:hover {
  opacity: 0.9;
}

.feature-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
    max-width: 1500px;
    margin: 0 auto;
}

.feature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.feature-item-left {
    border-left: 6px solid #1e3a8a;
}

.feature-item-right {
    border-right: 6px solid #1e3a8a;
}

.feature-item-right .feature-img-service {
    order: -1;
}

.feature-content-service {
    color: #44494d;
    align-self: center;
}

.feature-content-service h3 {
    font-size: 1.8rem;
    color: #1e3a8a;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-content-service p {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 20px;
}

.feature-content-service ul {
    list-style: none;
    padding: 0;
}

.feature-content-service ul li {
    font-size: 1rem;
    color: #374151;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.feature-content-service ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #1e3a8a;
    font-size: 1.2rem;
}

.feature-img-service {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.feature-image:hover {
    transform: scale(1.05);
}

.direct-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    margin-top: 15px;
    background: linear-gradient(90deg, #1a3c6b, #2b5a9d);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-block {
    max-width: 1500px;
    margin: 0 auto 40px;
    padding: 40px 20px;
    background: #f9fafb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.solution-block h2 {
    font-size: 2.2rem;
    color: #1e3a8a;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

.solution-table {
    width: 100%;
    max-width: 1200px;
    border-collapse: collapse;
    margin: 0 auto 30px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.solution-table th,
.solution-table td {
    padding: 15px;
    font-size: 1rem;
    color: #374151;
    text-align: left;
}

.solution-table th {
    background: #1e3a8a;
    color: #fff;
    font-weight: 600;
}

.solution-table tr:nth-child(even) {
    background: #f0f4f8;
}

.solution-table tr:hover {
    background: #e6eef5;
    transition: background 0.3s ease;
}

.solution-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    display: block;
}

@media (max-width: 1024px) {
  .header-block { padding: 30px 15px; }
  .header-block h1 { font-size: 2.2rem; }
  .header-block p { font-size: 1rem; }
  .feature-block h2, .solution-block h2, .contact-block h2 { font-size: 1.8rem; }
  .feature-item h3 { font-size: 1.4rem; }
}

@media (max-width: 768px) {
  .header-block h1 { font-size: 1.8rem; }
  .header-block p { font-size: 0.95rem; }
  .feature-block h2, .solution-block h2, .contact-block h2 { font-size: 1.6rem; }
  .feature-item h3 { font-size: 1.3rem; }
  .feature-item { grid-template-columns: 1fr; gap: 20px; }
  .feature-item-right .feature-img-service { order: 0; }
  .feature-content-service { text-align: left; }
  .feature-image { max-height: 250px; }
  .feature-item p, .contact-block p, .solution-table th, .solution-table td { font-size: 0.9rem; }
  .header-image, .feature-image, .solution-image, .contact-image { max-width: 100%; }
}
/* Domestic delivery page end*/

/* China import page start */

/* China import page end */

/* Contact page */
.contact-section {
  padding: 60px 20px;
  background: linear-gradient(145deg, rgba(24, 39, 81, 1) 0%, rgba(41, 55, 105, 1) 60%, rgba(74, 107, 199, 1) 100%);
  color: #333;
  position: relative;
  overflow: hidden;
}

.container-contact {
  max-width: 1200px;
  margin: 0 auto;
}

.company-info {
  flex: 1;
}

.company-info h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #fff;
}

.info-box {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.info-box p {
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  font-weight: 500;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 200px;
  color: rgba(255, 255, 255, 0.9);
}

.info-box i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
  width: 45px;
  height: 45px;
  line-height: 40px;
  background-color: #1e3a8a;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-container {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-form,
.contact-map {
  width: 50%;
}

.contact-form h2,
.contact-map h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #fff;
}

.contact-form-input {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #1e3a8a;
  box-shadow: 0 0 5px rgba(30, 58, 138, 0.3);
}

.contact-form button {
  padding: 0.8rem 2rem;
  background-color: #1e3a8a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: ContactfadeIn 1s ease-out forwards;
}

@keyframes ContactfadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .company-info-container {
    flex-direction: column;
    align-items: center;
  }

  .info-box {
    flex-direction: column;
    align-items: center;
  }

  .info-box p {
    max-width: 100%;
  }

  .symbol-image {
    max-width: 150px;
    height: 80px;
    margin: 1.5rem auto;
  }

  .contact-container {
    flex-direction: column;
  }

  .contact-form,
  .contact-map {
    width: 100%;
  }
}

.al-tcgckt {
  list-style-type: none;
  padding-left: 0;
  /* Xóa khoảng cách mặc định bên trái */
}

.al-tcgckt li {
  float: left;
  width: 33.33%;
  padding-right: 5px;
}

/*Fully custom sign-up page*/
.auth-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 25px;
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  overflow: hidden;
  position: relative;
}

.auth-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.auth-container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 70%);
  animation: auth-rotate 15s linear infinite;
}

@keyframes auth-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.auth-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
}

.auth-tab {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2em;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.auth-tab.active {
  color: #ff8e53;
}

.auth-tab-slider {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #ff8e53;
  transition: all 0.3s ease;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-title {
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.reg-form-group,
.login-form-group {
  margin-bottom: 25px;
  position: relative;
}

.reg-form-group input,
.login-form-group input {
  width: 100%;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 1em;
  outline: none;
  transition: all 0.3s ease;
}

.reg-form-group input:focus,
.login-form-group input:focus {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.reg-form-group label,
.login-form-group label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.9em;
  pointer-events: none;
  transition: all 0.3s ease;
}

.reg-form-group input:focus~label,
.reg-form-group input:not(:placeholder-shown)~label,
.login-form-group input:focus~label,
.login-form-group input:not(:placeholder-shown)~label {
  top: -10px;
  left: 15px;
  font-size: 0.8em;
  background: #2a5298;
  padding: 0 5px;
  border-radius: 5px;
}

.reg-checkbox-group,
.login-checkbox-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.9em;
}

.reg-checkbox-group input,
.login-checkbox-group input {
  margin-right: 10px;
}

.reg-btn,
.login-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.reg-btn:hover,
.login-btn:hover {
  background: linear-gradient(45deg, #ff8e53, #ff6b6b);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5);
}

.reg-google-btn,
.login-google-btn {
  width: 100%;
  padding: 15px;
  background: #fff;
  border: none;
  border-radius: 50px;
  color: #333;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.reg-google-btn img,
.login-google-btn img {
  width: 20px;
  margin-right: 10px;
}

.reg-google-btn:hover,
.login-google-btn:hover {
  background: #f1f1f1;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.reg-link,
.login-link {
  text-align: center;
  margin-top: 20px;
  color: #fff;
  font-size: 0.9em;
}

.reg-link a,
.login-link a {
  color: #ff8e53;
  text-decoration: none;
  font-weight: 600;
}

.reg-link a:hover,
.login-link a:hover {
  text-decoration: underline;
}

.stars {
  width: 3px;
  height: 3px;
  position: absolute;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
    50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
    65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
    80vw 92vh 1px white, 85vw 82vh 1px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
}

.shooting-star:nth-child(2) {
  top: 20%;
  left: -100px;
  animation-delay: 0s;
}

.shooting-star:nth-child(3) {
  top: 35%;
  left: -100px;
  animation-delay: 1s;
}

.shooting-star:nth-child(4) {
  top: 50%;
  left: -100px;
  animation-delay: 2s;
}

.shooting-star:nth-child(5) {
  top: 65%;
  left: -100px;
  animation-delay: 0.5s;
}

.shooting-star:nth-child(6) {
  top: 80%;
  left: -100px;
  animation-delay: 1.5s;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: translateX(120vw) translateY(50vh) rotate(25deg);
    opacity: 0;
  }
}

.stars::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

@media (max-width: 500px) {
  .auth-container {
    padding: 20px;
    margin: 20px;
  }

  .auth-title {
    font-size: 1.5em;
  }

  .auth-tab {
    font-size: 1em;
    padding: 8px 15px;
  }
}

/*Fully custom sign-up page*/