/* General Styles */
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

html {
  overflow-x: hidden;
}
body {
  font-family: "Quicksand", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
}
fieldset,
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none;
}

.row {
  display: flex;
}

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

.navation {
    padding: 8px 15px;
    background-color: #f0f0f0;
    margin-bottom: 20px;
    width: 100%;
}

.container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
/* General Styles */

/*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*/

/*Style general long banner*/
.section-banner {
    position: relative;
}

.section-banner .content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
}

.section-banner .content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-banner .content>div p:nth-child(1) {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 7px;
    color: #fff;
}

#breadcrumbs a {
    color: #000;
}
/*Style general long banner*/

/*Style for home page banner*/
.uniwaveunique-hero-banner {
  position: relative;
  width: 100%;
  height: 90vh;
  /* Full viewport như demo */
  overflow: hidden;
  box-sizing: border-box;
  padding: 3rem 2rem;
  display: flex;
}

.uniwaveunique-slides {
  width: 100%;
  height: 100%;
}

.uniwaveunique-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Easing mượt như Revolution */
  display: flex;
  align-items: center;
}

.uniwaveunique-slide.active {
  opacity: 1;
}

.uniwaveunique-overlay {
  position: relative;
  z-index: 2;
  max-width: 80%;
  padding: 150px;
  color: #666; /* Gray cho description như ảnh */
  border-radius: 10px;
}

/* Căn chỉnh riêng cho từng slide */
.uniwaveunique-slide1 {
  justify-content: flex-end;
}

.uniwaveunique-slide1 .uniwaveunique-overlay {
  text-align: right;
}

.uniwaveunique-slide2 {
  justify-content: flex-start;
}

.uniwaveunique-slide2 .uniwaveunique-overlay {
  text-align: left;
}

/* Text styles exact từ ảnh: Màu xanh đậm cho title, uppercase small text */
.uniwaveunique-intro-text {
  font-size: 1.2rem; /* Small top text như ảnh */
  font-weight: 700;
  text-transform: uppercase;
  color: #666; /* Gray */
  opacity: 0;
  margin-bottom: 10px;
}

.uniwaveunique-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #001746; /* Dark blue như title trong ảnh */
  opacity: 0;
}

.uniwaveunique-hero-subtitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #001746; /* Dark blue */
  opacity: 0;
}

.uniwaveunique-hero-description {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
  opacity: 0;
  color: rgb(0, 23, 70);
}

.uniwaveunique-hero-tagline {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  opacity: 0;
  margin-bottom: 20px;
}

/* Buttons CTA: Blue như ảnh */
.uniwaveunique-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 30px; /* Rounded như ảnh */
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin: 10px 0;
  opacity: 0;
  font-weight: bold;
}

.uniwaveunique-btn:hover {
  transform: scale(1.05);
  background-color: #0056b3;
}

/* Phone link cho slide 2, với icon giả định (dùng text) */
.uniwaveunique-phone-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  margin-left: 20px;
  opacity: 0;
}

.uniwaveunique-phone-link:before {
  content: "\260E"; /* Icon phone unicode */
  margin-right: 5px;
}

/* Animations nâng cao: Keyframes phức tạp với delay staggered cho layers */
@keyframes uniwaveunique-fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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

.uniwaveunique-slide.active .uniwaveunique-layer {
  /* Trigger khi slide active */
  animation: uniwaveunique-fadeSlideUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

/* Stagger delays cho từng layer */
.uniwaveunique-slide.active .uniwaveunique-layer:nth-child(1) {
  animation-delay: 0.2s;
}

.uniwaveunique-slide.active .uniwaveunique-layer:nth-child(2) {
  animation-delay: 0.4s;
}

.uniwaveunique-slide.active .uniwaveunique-layer:nth-child(3) {
  animation-delay: 0.6s;
}

.uniwaveunique-slide.active .uniwaveunique-layer:nth-child(4) {
  animation-delay: 0.8s;
}

.uniwaveunique-slide.active .uniwaveunique-layer:nth-child(5) {
  animation-delay: 1s;
}

/* Navigation: Arrows và pagination như demo (ẩn nếu không cần) */
.uniwaveunique-slider-nav {
  position: absolute;
  top: 50%;
  width: 97%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 3;
}

.uniwaveunique-nav-btn {
  background: rgba(0, 23, 70, 0.5);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 30%;
}

.uniwaveunique-nav-btn:hover {
  background: #001746;
}

.uniwaveunique-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.uniwaveunique-dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.uniwaveunique-dot.active {
  background: #fff;
}

/* Responsive nâng cao */
@media (max-width: 1024px) {
  .uniwaveunique-hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .uniwaveunique-hero-banner {
    height: 70vh;
  }

  .uniwaveunique-overlay {
    padding: 20px;
    max-width: 95%;
  }

  .uniwaveunique-hero-title {
    font-size: 2.5rem;
  }

  .uniwaveunique-hero-subtitle {
    font-size: 1.8rem;
  }

  .uniwaveunique-nav-btn {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .uniwaveunique-hero-title {
    font-size: 2rem;
  }
}

/*Style for home page banner*/

/*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.6s forwards 0.1s;
}

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

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

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

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

.partners.visible .card:nth-child(6) {
  animation: slideUp 0.6s 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;
  border-radius: 4px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

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

.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ỏ */
  }
}

/* Introduction page */
:root {
  --primary-color: #d32f2f;
  --secondary-color: #003087;
  --text-dark: #333;
  --text-light: #555;
  --background-light: #f5f5f5;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --font-size-main: 2.5rem;
  --font-size-section: 1.5rem;
  --font-size-sub: 1.3rem;
  --font-size-text: 1rem;
  --color-gray-50: #d4d4d4;
  --color-gray-100: #d9d9d9;
  --color-gray-200: #eeeeee;
  --color-gray-220: #f5f5f5;
  --color-gray-250: #f6f7f9;
  --color-gray-260: #e3e3e3;
  --color-gray-270: #e3e3e3;
  --color-gray-280: #e5dfe0;
  --color-gray-300: #626262;
  --color-gray-310: rgba(68, 73, 77, 0.2);
  --color-gray-320: #44494d;
  --color-gray-330: #868686;
  --color-gray-340: #666c89;
  --color-gray-400: #1a1818;
  --color-gray-500: #1c1f35;
  --color-black-400: rgba(0, 0, 0, 0.5);

  /* Màu xanh chủ đạo - thay cho đỏ */
  --color-blue-200: #e6f0ff;
  /* tương ứng red-200 */
  --color-blue-500: #007bff;
  /* tương ứng red-500 */
  --color-blue-600: #0056b3;
  /* tương ứng red-600 */
}

.container-about {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.section {
  padding: var(--spacing-lg) 0;
}

.title--main {
  font-size: var(--font-size-main);
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.title--section {
  font-size: var(--font-size-section);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm);
}

.title--card {
  font-size: var(--font-size-sub);
  font-weight: bold;
  background-color: var(--primary-color);
  color: #fff;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top-right-radius: 16px;
  display: inline-block;
  margin-bottom: var(--spacing-sm);
}

.title--main {
  font-family: "Quicksand", sans-serif;
}

.description {
  font-size: var(--font-size-text);
  line-height: 1.6;
  color: var(--text-light);
}

/* Giới thiệu chung */
.intro__wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

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

.intro__image {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.3s;
}

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

.intro__text .title--main {
  text-align: left;
  padding-bottom: 10px;
}

.intro__text .title--main::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: var(--spacing-sm);
}

.intro__company-title {
  font-size: var(--font-size-section);
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: var(--spacing-md);
}

/*Tầm nhìn*/
.vision-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.vision-image-container {
  flex: 1;
  min-width: 300px;
}

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

.vision__background {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.3s;
}

.vision-text h2 {
  text-align: left;
  padding-bottom: 5px;
}

.vision-text h2::after {
  content: "";
  display: block;
  width: 130px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: var(--spacing-sm);
  position: relative;
  left: 0;
}

/* Sứ mệnh */
.mission-content {
  max-width: 1200px;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  /* Thêm để căn giữa mission-content trong mission-container */
}

.mission-container {
  margin-top: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.mission__background {
  width: 100%;
  height: 300px;
  object-fit: cover;
  position: relative;
  left: 0;
  top: 30%;
  z-index: -1;
}

.mission__values {
  display: flex;
  justify-content: center;
  /* Căn giữa các mission__value-item */
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.mission__value-item {
  display: flex;
  align-items: center;
  /* Căn giữa theo chiều dọc */
  justify-content: center;
  /* Căn giữa theo chiều ngang */
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  flex: 0 1 auto;
  /* Chỉ chiếm không gian cần thiết, không kéo giãn */
  min-width: 150px;
  text-align: center;
  /* Căn giữa văn bản */
}

.mission__value-icon {
  width: 16px;
  height: 16px;
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 41%, rgba(0, 212, 255, 1) 100%);
  border-radius: 50%;
}

.mission__value-text {
  font-size: var(--font-size-text);
  font-weight: 600;
  color: var(--text-dark);
}

.mission__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  justify-items: center;
  /* Thêm để căn giữa các ô lưới */
}

.mission__stat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  justify-content: center;
  /* Thêm để căn giữa nội dung trong mỗi ô */
}

.mission__stat-icon {
  width: 64px;
  height: 64px;
}

.mission__stat-details {
  display: flex;
  flex-direction: column;
}

.mission__stat-number {
  font-size: var(--font-size-sub);
  font-weight: bold;
  color: var(--primary-color);
}

.mission__stat-label {
  font-size: var(--font-size-text);
  font-weight: 600;
  color: var(--text-light);
}

.mission-content .description {
  overflow: break-word;
  text-align: center;
}

.mission-content .title--main::after {
  content: "";
  display: block;
  width: 140px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: var(--spacing-sm);
  position: relative;
  left: 44%;
}

/* Giá trị cốt lõi */
.values__wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

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

.values__image {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

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

.values__list {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-sm);
}

.values__list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-text);
  color: var(--text-light);
}

.values__list-icon {
  width: 24px;
  height: 24px;
}

.core-value-title .title--main::after {
  content: "";
  display: block;
  width: 170px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: var(--spacing-sm);
  position: relative;
  left: 43%;
}

/* Tại sao chọn chúng tôi */
.reasons__container {
  background-color: var(--background-light);
  position: relative;
  width: 100%;
}

.reasons__background {
  position: relative;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: -1;
}

.reasons__grid-above {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding: 20px;
}

.reasons__grid-below {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding: 20px;
}

.reasons__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 20px;
}

.reasons__container .title--main {
  padding-top: 50px;
}

.reasons__container .title--main::after {
  content: "";
  display: block;
  width: 270px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: var(--spacing-sm);
  position: relative;
  left: 42%;
}

.title-second {
  text-align: center;
  color: #1a1818;
}

.reasons__content .description {
  text-align: left;
}

.reasons__icon {
  width: 50px;
  height: 50px;

}

.reasons__content {
  flex: 1;
}

.contact__container {
  padding: 16px;
  background-color: #f5f5f5;
}

/* Điều chỉnh container-about cho phần Thông tin liên hệ */
.container-about {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.container_about_contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.contact_card_wrapper {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  height: 600px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact_card_wrapper a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.container_img_contact {
  position: relative; /* Làm tham chiếu cho các phần tử con */
  width: 100%;
  height: 600px; /* Chiều cao cố định, có thể điều chỉnh */
  border-radius: 15px;
  overflow: hidden;
}

.container_img_contact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  position: absolute; /* Hình ảnh làm nền */
  top: 0;
  left: 0;
  z-index: 0; /* Đặt hình ảnh ở dưới cùng */
}

.contact_card_wrapper {
  position: relative; /* Đảm bảo các phần tử con được định vị */
  border-radius: 15px;
  overflow: hidden;
}

.title_section {
  font-size: 1.3rem;
  font-weight: 600;
  color: #e3e3e3;
  margin: 15px 0 10px;
  padding: 10px 20px;
  opacity: 1;
  z-index: 1; /* Đưa chữ lên trên hình ảnh */
  position: absolute; /* Chồng lên hình ảnh */
  bottom: 140px;
  left: 0;
  background: #1e3799; 
  border-radius: 5px;
  width: calc(100% - 450px); /* Chiều rộng trừ padding */
}

.contact_description {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 800;
  color: #e3e3e3;
  padding: 10px 20px;
  margin: 0;
  opacity: 1;
  z-index: 1; 
  position: absolute; 
  bottom: 50px; 
  background: transparent;
  border-radius: 5px;
}

.read_more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #e3e3e3;
  padding: 10px 20px;
  background-color: transparent;
  margin: 0;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  opacity: 1;
  z-index: 1; /* Đưa nút lên trên hình ảnh */
  position: absolute; /* Chồng lên hình ảnh */
  bottom: 20px; /* Đặt ở dưới cùng */
  right: 10%;
  transform: translateX(50%); /* Điều chỉnh vị trí chính xác */
  text-decoration: none; /* Loại bỏ gạch chân */
}

.read_more img {
  width: 15px; /* Điều chỉnh kích thước icon */
  height: 15px;
  transition: transform 0.3s ease;
}

.read_more:hover img {
  transform: translateX(5px); /* Di chuyển icon sang phải khi hover */
}

.contact_card_wrapper:hover .container_img_contact img {
  transform: scale(1.05);
}



/* Responsive */
@media (max-width: 1280px) {
  .reasons__background {
    display: none;
  }
}

@media (max-width: 1024px) {
  .values__wrapper {
    flex-direction: column;
    align-items: center;
  }

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

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

@media (max-width: 959px) {
  .container-about:has(.mission-container) {
    height: auto;
    /* Bỏ chiều cao cố định */
    padding-bottom: var(--spacing-lg);
    /* Thêm padding để tránh đè */
  }

  .mission__background {
    top: 40%;
    /* Điều chỉnh vị trí hình nền */
    height: 200px;
    /* Giảm chiều cao hình nền để tránh tràn */
  }

  .mission-content {
    padding: var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .container-about {
    padding: var(--spacing-sm);
  }

  .intro__wrapper {
    flex-direction: column;
  }

  .mission__background {
    display: none;
    /* Ẩn hình nền trên màn hình nhỏ */
  }

  .mission__values {
    flex-direction: column;
  }

  .title--main,
  .title--section {
    font-size: var(--font-size-sub);
  }

  .title--card {
    font-size: 1.2rem;
  }

  .description,
  .card__description {
    font-size: 0.9rem;
  }

  /* Điều chỉnh gạch dưới cho responsive */
  .core-value-title .title--main::after,
  .reasons__container .title--main::after {
    width: 50%;
    /* Tăng chiều rộng tương đối cho màn hình nhỏ */
    max-width: 100px;
    /* Giới hạn tối đa để tránh quá dài */
  }

  .mission-content .title--main::after {
    width: 40%;
    /* Tăng chiều rộng tương đối cho màn hình nhỏ */
    max-width: 90px;
  }
}

@media (max-width: 714px) {
  .mission-content .title--main::after {
    width: 30%;
    /* Tăng chiều rộng tương đối cho màn hình nhỏ */
    max-width: 80px;
  }
}

@media (max-width: 607px) {
  .mission-content .title--main::after {
    width: 15%;
    /* Tăng chiều rộng tương đối cho màn hình nhỏ */
    max-width: 70px;
  }

  .core-value-title .title--main::after {
    width: 30%;
    max-width: 80px;
  }
}

/*Animation*/
/* Add slide-up animation */
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

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

/* Apply animation to sections when visible */
.container-about,
.reasons__container {
  opacity: 0;
  /* Initially hidden */
  transform: translateY(50px);
  /* Start position for animation */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* Smooth transition */
}

.container-about.visible,
.reasons__container.visible {
  opacity: 1;
  transform: translateY(0);
  animation: slideUp 0.6s ease-out forwards;
  /* Apply slide-up animation */
}

/* Ensure mission__background has its own animation */
.mission__background {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mission__background.visible {
  opacity: 1;
  transform: translateY(0);
  animation: slideUp 0.6s ease-out forwards;
}

.container_about_contact {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.container_about_contact.visible {
  opacity: 1;
  transform: translateY(0);
  animation: slideUp 0.6s ease-out forwards;
}

@media (max-width: 959px) {
   .container_about_contact {
    max-width: 1000px;
  }
}

@media (max-width: 804px) {
  .contact_description {
    font-size: 0.8rem;
  }

  .title-section {
    font-size: medium   ;
  }
}
/* Introduction page */

/* 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 0.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 */

/* Service category menu of service page */
/* Sidebar wrapper */
.sidebar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1000;
}

/* Sidebar toggle (hamburger icon) */
.sidebar-toggle {
  position: fixed;
  top: 25%;
  width: 40px;
  height: 40px;
  background: #183051;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.sidebar-toggle:hover {
  background: #2a4b7c;
}

/* Sidebar container */
.sidebar-service {
  position: fixed;
  top: 25%;
  left: 0;
  width: 275px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  border-radius: 8px;
  overflow-y: auto;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}

/* Hiện sidebar khi click toggle trên di động hoặc hover trên desktop */
.sidebar-wrapper:hover .sidebar-service,
.sidebar-service.active {
  transform: translateX(0);
}

/* Header của sidebar */
.sidebar-header {
  background: #183051;
  padding: 8px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 22px;
  line-height: 34px;
  color: #fff;
  margin-bottom: 25px;
}

.sidebar-close:hover {
  color: #ccc;
}

/* Menu dịch vụ */
.service-menu,
.service-menu ul {
  list-style: none;
}

.service-menu a:hover,
.service-menu li.current-menu-item > a,
.service-menu li.current-menu-parent > a {
  color: #183051;
}

.service-menu ul {
  padding-left: 55px;
}

.service-menu img {
  width: 22px;
  margin-right: 10px;
  height: 22px;
  object-fit: cover;
}

.service-menu > li {
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.service-menu > li > a {
  display: flex;
  padding-left: 5px;
  border-left: 5px solid #2a4b7c;
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  color: #8b8b8b;
  margin-bottom: 20px;
  text-decoration: none;
  cursor: pointer;
  /* Đổi con trỏ để chỉ rõ có thể click */
}

/* Sub-menu */
.sub-menu {
  max-height: 0;
  overflow: hidden;
  padding-left: 20px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease-in-out, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mở sub-menu khi click */
.menu-item-has-children.active > .sub-menu {
  max-height: 300px;
  opacity: 1;
  transform: scaleY(1);
}

.service-menu ul a {
  color: #8b8b8b;
  font-size: 17px;
  line-height: 23px;
  display: block;
  padding-bottom: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-menu ul a:hover {
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar-toggle {
    display: flex;
  }
}
/* Service category menu of service page */

/* 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;
}

/* Utilities component */
@keyframes open_menu_right {
  from {
    right: -300px;
  }
  to {
    right: 0px;
  }
}
@keyframes close_menu_right {
  from {
    right: 0px;
  }
  to {
    right: -300px;
  }
}
@keyframes open_closebtn_right {
  from {
    right: -300px;
  }
  to {
    right: 0px;
  }
}
@keyframes close_closebtn_right {
  from {
    right: 0px;
  }
  to {
    right: -300px;
  }
}
.btn-show-lk {
  position: fixed;
  top: 60%;
  right: 0px;
  padding: 6px 14px;
  background-color: #37474f;
  display: flex;
  align-items: center;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 14px;
  animation-name: close_closebtn_right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  z-index: 997;
  cursor: pointer;
}
.btn-show-lk:hover {
  background-color: #134089;
}
.btn-show-lk.active {
  animation-name: open_closebtn_right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.btn-show-lk img {
  margin-right: 6px;
  height: 15px;
}
#ml-menu-fixed.active {
  animation-name: open_menu_right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
#ml-menu-fixed {
  position: fixed;
  bottom: 30%;
  z-index: 6;
  /* transform: translateY(-50%); */
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  background: #37474f;
  border-radius: 5px;
  animation-name: close_menu_right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

#ml-menu-fixed > ul {
  padding: 0;
  margin: 0;
}

#ml-menu-fixed > ul > li {
  position: relative;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px 5px;
  max-width: 90px;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  margin: 0 10px;
}

#ml-menu-fixed > ul > li:last-child {
  border-bottom: none;
}

#ml-menu-fixed > ul > li > span {
  font-size: 16px;
  line-height: 130%;
  color: #fff;
  font-family: "pfb";
}

#ml-menu-fixed > ul > li > span > span {
  color: #fff;
}

#ml-menu-fixed > ul > li > span:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  border-left: solid 5px #134089;
  border-top: solid 5px transparent;
  border-bottom: solid 5px transparent;
  display: none;
}

#ml-menu-fixed > ul > li:hover > span:before {
  display: block;
}

#ml-menu-fixed > ul > li > a > img {
  /* filter: invert(1); */
  display: block;
  margin: 0 auto 5px;
  height: 28px;
}

#ml-menu-fixed > ul > li > a span {
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
}

/*===============*/
#ml-menu-fixed ul li.cart > a {
  flex-direction: column;
  position: relative;
  padding-right: 10px;
}

#ml-menu-fixed ul li.cart > a .sl {
  position: absolute;
  top: 10px;
  right: 6px;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #ffffff;
  color: #134089;
  display: block;
  font-size: 12px;
  line-height: 11px;
  text-align: center;
}

#ml-menu-fixed > ul > li.cart > a > img {
  max-height: 20px;
  max-width: 20px;
}

.ml-bg-over.active {
  opacity: 0.3;
  z-index: 5;
  pointer-events: auto;
}

/*===============*/
#ml-menu-fixed ul li.go_top a i {
  -webkit-animation: bouncezz 1.2s 500ms infinite;
  -o-animation: bouncezz 1.2s 500ms infinite;
  animation: bouncezz 1.2s 500ms infinite;
}

@keyframes bouncezz {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0%);
  }

  40% {
    transform: translateY(-35%);
  }

  60% {
    transform: translateY(-25%);
  }
}

@-webkit-keyframes bouncezz {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0%);
  }

  40% {
    -webkit-transform: translateY(-35%);
  }

  60% {
    -webkit-transform: translateY(-25%);
  }
}

@-moz-keyframes bouncezz {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0%);
  }

  40% {
    -moz-transform: translateY(-35%);
  }

  60% {
    -moz-transform: translateY(-25%);
  }
}

@-o-keyframes bouncezz {
  0%,
  20%,
  50%,
  80%,
  100% {
    -o-transform: translateY(0%);
  }

  40% {
    -o-transform: translateY(-35%);
  }

  60% {
    -o-transform: translateY(-25%);
  }
}

/*================*/
#ml-menu-fixed #close-lk {
  display: block;
  margin: auto;
  margin-bottom: 15px;
  cursor: pointer;
}
#ml-menu-fixed #close-lk:hover {
  opacity: 0.8;
}
#ml-menu-fixed ul li.social .popup {
  position: absolute;
  right: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #333333;
  overflow: hidden;
  width: 0;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

#ml-menu-fixed ul li.social:hover .popup {
  width: 204px;
}

#ml-menu-fixed ul li.social .popup ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

#ml-menu-fixed ul li.social .popup ul li {
  border-right: solid 1px rgba(255, 255, 255, 0.1);
}

#ml-menu-fixed ul li.social .popup ul li:last-child {
  border-right: none;
}

#ml-menu-fixed ul li.social .popup ul li a {
  display: block;
}

#ml-menu-fixed ul li.social .popup ul li a i {
  position: relative;
  width: 40px;
  height: 40px;

  line-height: 21px;
  color: #ffffff;
}

#ml-menu-fixed ul li.social .popup ul li a i:before {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#ml-menu-fixed ul li.social .popup ul li a:hover i.fa-facebook {
  background: #1877f2;
}

#ml-menu-fixed ul li.social .popup ul li a:hover i.fa-instagram {
  background: #ae4a7c;
}

#ml-menu-fixed ul li.social .popup ul li a:hover i.fa-youtube {
  background: #ff0000;
}

#ml-menu-fixed ul li.social .popup ul li a:hover i.fa-twitter {
  background: #00abf0;
}

#ml-menu-fixed ul li.social .popup ul li a:hover i.fa-pinterest {
  background: #cb2027;
}

@media (max-width: 468px) {
  .arcontactus-widget.opened.arcontactus-message,
  .arcontactus-widget.opened.left.arcontactus-message {
    width: auto;
    right: 20px;
    left: 20px;
  }
}

@media all and (max-width: 991px) {
  #ml-menu-fixed {
    top: initial;
    display: none;
    bottom: 50px;
  }

  #ml-menu-fixed > ul > li > a {
    width: 35px;
    height: 35px;
  }

  #ml-menu-fixed > ul > li > a > img {
    max-height: 20px;
    max-width: 20px;
  }

  #ml-menu-fixed > ul > li > a span {
    font-size: 14px;
    line-height: 15px;
  }

  .go_top a::before {
    bottom: 2px;
    font-size: 10px;
  }

  #ml-menu-fixed ul li.cart > a {
    padding-right: 3px;
  }

  #ml-menu-fixed ul li.cart > a .sl {
    width: 12px;
    height: 12px;
    font-size: 10px;
    line-height: 9px;
    top: 7px;
  }
}
/* Utilities component */

/*Fully custom sign-up page start*/
.auth-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 100px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 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 end*/

/*Footer styles start*/
footer {
  background: #212d33;
  position: relative;
}

.line-footer {
  height: 7px;
  width: 100%;
  background: #183051;
}

#fbot {
  background: #212d33;
  border-bottom: 1px solid #cacaca;
  padding: 70px 0 40px;
  color: #fff;
  position: relative;
}

#fbot:before {
  content: "";
  display: inline-block;
  width: 112px;
  height: 115px;
  background: url(./image/general/cham-ft.png) no-repeat left;
  position: absolute;
  left: 0;
  bottom: 32%;
  opacity: 1; /* Ensure visible by default */
}

#fbot h3 {
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  font-family: "Quicksand", sans-serif;
  opacity: 1; /* Ensure visible by default */
}

#fbot h4 {
  font-size: 18px;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 15px;
  font-weight: 500;
  opacity: 1; /* Ensure visible by default */
}

#fbot .col-md-4,
#fbot .col-md-8 {
  opacity: 1; /* Ensure columns are visible */
}

#fbot p {
  font-size: 14px;
  line-height: 20px;
}

#fbot p.hotline-footer {
  font-size: 19px;
}

#fbot ul {
  padding: 0;
}

#fbot ul li {
  list-style: none;
  font-size: 14px;
  line-height: 32px;
}

#fbot ul li a {
  color: #fff;
}

#fbot ul li a:hover {
  color: #004085;
}

#fbot ul.social {
  display: flex;
  justify-content: space-between;
  max-width: 200px;
  opacity: 1; /* Ensure visible by default */
}

#fbot ul.social a {
  margin-right: 20px;
}

#fbot ul.social a img:hover {
  filter: brightness(2);
}

.comp-link,
.comp-info,
.comp-location {
  padding: 0 15px;
  opacity: 1; /* Ensure visible by default */
}

.comp-link h4,
.comp-info h4 {
  margin-bottom: 15px;
  font-size: 1.25rem;
}

.comp-link ul {
  list-style: none;
  padding: 0;
}

.comp-link ul li {
  margin-bottom: 5px;
}

.comp-link ul li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}

.comp-link ul li a:hover {
  color: #ddd;
}

.comp-info p {
  margin-bottom: 10px;
  font-weight: normal;
}

.comp-info a {
  color: #fff;
  text-decoration: none;
}

.comp-info a:hover {
  text-decoration: underline;
}

#comp-address,
#comp-mail {
  font-size: 14px !important;
  line-height: 20px;
}

.hotline-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.hotline-footer a img {
  vertical-align: middle;
}

.hotline-footer a:hover {
  text-decoration: underline;
}

.badge-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.fanpage,
.comp-location iframe {
  width: 100% !important;
  max-width: 400px;
}
.company-map {
  border-radius: 5px;
  padding-top: 5px;
}

.copyright-text {
  justify-content: center;
  align-items: center;
  display: flex;
  color: #fff;
  padding: 5px 5px 5px 5px;
}

#copyright {
  display: flex;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  justify-content: center;
}

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

/* Optional animation for when .visible is applied */
#fbot.visible:before,
#fbot.visible h3,
#fbot.visible h4,
#fbot.visible .comp-link,
#fbot.visible .comp-info,
#fbot.visible .comp-location,
#fbot.visible .social {
  animation: slideUp 0.8s forwards;
}

@media screen and (max-width: 1600px) {
  .menu ul li a {
    padding: 0 34px 0 15px;
    font-size: 16px;
  }

  ul.login {
    margin-right: 0;
  }

  ul.login li a {
    padding: 0 0 0 38px !important;
  }

  #s3 ul li {
    transform: translate(0, 70%);
  }
}

@media screen and (max-width: 1368px) {
  #s4 .ct-kh {
    padding: 20px;
  }

  #s4 .ct-kh h4 {
    margin-bottom: 0;
  }

  #s4 .ct-kh p {
    margin-bottom: 10px;
  }

  #s4 .info-kh h3 {
    font-size: 33px;
    line-height: 125%;
  }

  #s4 .ct-kh {
    bottom: 12px !important;
  }

  #s4 .ct-kh:after {
    top: 10px;
  }

  #ml-menu-fixed {
    zoom: 0.7;
  }

  .chat-live {
    zoom: 0.7;
  }
}

@media screen and (max-width: 1145px) {
  header .container {
    width: 100%;
  }

  #ftop img {
    max-width: 112px;
  }

  #fbot {
    padding: 30px 0;
  }

  #fbot .col-md-7 div {
    width: 100%;
  }

  #fbot .col-md-7 div:nth-child(2) {
    width: 100%;
  }

  #fbot p {
    font-size: 16px;
    line-height: 25px;
  }

  #fbot h3.second {
    margin-top: 15px;
    font-size: 20px;
    line-height: 27px;
  }

  #fbot ul li {
    list-style: none;
    font-size: 16px;
    line-height: 25px;
  }

  #fbot:before {
    display: none;
  }

  #fbot h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  #fbot .col-md-5 {
    padding-right: 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1145px) {
  #fbot .col-md-7 div:nth-child(2) {
    width: 50% !important;
  }

  #fbot .col-md-7 div {
    width: 50% !important;
  }
}
/*Footer styles end*/