/**
 * Theme Name:     Hiroshi Lord
 * Author:         Hiroshi Lord
 * Template:       flatsome
 * Description:    Theme Build by Hiroshi Lord
 * Version:        2025
 */

/* DEFAULT NO BORDER AND LINE-THROUGH */
.section-title-center b {
  opacity: 0;
}

.section-title-normal {
  border-bottom: none;
}

.section-title-normal span {
  border-bottom: none;
}

.text-cap {
  span {
    text-transform: capitalize;
  }
}

.border-radius {
  border-radius: 8px;
  overflow: hidden;

  img {
    border-radius: 8px;
  }
}

.sec-footer {
  .custom-menu-white .ux-menu-link__text {
    color: #ffff !important;
    text-align: left !important;
  }
}

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Giới hạn tối đa 2 dòng */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Hiện dấu ... nếu vượt quá */
  white-space: normal;
  /* Cho phép xuống dòng */

  a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Giới hạn tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Hiện dấu ... nếu vượt quá */
    white-space: normal;
    /* Cho phép xuống dòng */
  }
}

.d-none {
  display: none !important;
}

.video-fit {
  padding-top: unset !important;
  border-radius: 8px;
  overflow: hidden;
}

.header-wrapper {
  .header-cart-link {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;

    .header-cart-title {
      line-height: unset;
      font-size: 16px;
    }
  }

  .header-nav-main {
    &.nav-left {
      justify-content: center;
    }
  }
}

.absolute-footer {
  display: none !important;
}

.sec-footer {
  .policy_menu {
    ul {

      display: flex;
      justify-content: center;
      list-style: none;
      margin-bottom: unset;
    }
  }

  p {
    margin-bottom: 5px !important;
  }
}

.product-small {

  .add-to-cart-button {
    a.button {
      font-size: 0;
      border: none;
      padding-top: 10px;

      &:hover {
        background-color: transparent;
        color: #000000bd;
      }

      &::before {
        content: "\f07a";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 16px;
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.custom-menu-link {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #ddd;

  .ux-menu-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px 10px;

    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    &.ux-menu-link--active {
      background: #555;

      a {
        color: #fff;
      }
    }

    &:nth-child(3n) {
      border-right: none;
    }

    &:nth-last-child(-n+3) {
      border-bottom: none;
    }

    .ux-menu-link__link {
      justify-content: center;
    }
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(3, 1fr);

    .ux-menu-link {
      /* border-right: none; */

      &:nth-last-child(-n+3) {
        border-bottom: 1px solid #ddd;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.sec-map {
  .custom-text-map {
    h3 {
      color: #FF3B30;
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      @media screen and (max-width: 768px) {
        font-size: 24px;
      }
    }

    p {
      color: #000;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }

  .map-viewport {
    width: 100%;
    height: 500px;
    /* Chiều cao khung hiển thị */
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    /* border: 2px solid #333; */
    cursor: ns-resize;
    background-color: #e0e0e0;

    @media screen and (max-width: 768px) {
      height: 350px;
    }

    .map-image-bg {
      width: 100%;
      height: 100%;
      background-image: url('../../uploads/2026/03/america-line.svg');
      background-repeat: no-repeat;
      transition: background-position 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95),
        background-size 1.2s ease-in-out;

      /* TRẠNG THÁI MẶC ĐỊNH: Zoom vào Bắc Mỹ (Hình 2) */
      /* Bạn có thể tinh chỉnh số % bên dưới để khớp chính xác vị trí ảnh của bạn */
      background-size: 165%;
      background-position: -25% -30%;

      @media screen and (max-width: 768px) {
        background-size: 185%;
        background-position: -18% -36%;
      }
    }

    /* TRẠNG THÁI KHI CUỘN XUỐNG: Trượt qua Đông Nam Á (Hình 3) */
    &.show-asia .map-image-bg {
      background-size: 550%;
      /* Zoom sâu hơn vào khu vực nhỏ */
      background-position: 88% 65%;

      /* Tọa độ Châu Á trên ảnh */
      @media screen and (max-width: 768px) {
        background-size: 614%;
        background-position: 86% 65%;
      }
    }
  }


  .map-label {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-family: sans-serif;
    pointer-events: none;
    transition: 0.5s;
  }

  .custom-icon-mouse {
    position: absolute;
    right: 0; ;
    @media screen and (max-width:768px) {
      top: -66px;
    }
    .icon-box-img {
      margin-bottom: 0;
    }
  }

  .btn-custom-map {
    border-radius: 10px;
    background: #FF3B30;
    padding: 4px 24px;

    &:hover {
      box-shadow: 0 1px 2px 0 rgba(255, 59, 48, 0.25), 0 0 0 1px #FF3B30 inset, 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset, 0 -1px 1px 1px rgba(26, 1, 0, 0.25) inset;
    }
  }
}


.top-bar-nav {
  .cart-item {
    .icon-shopping-cart {
      color: #ffb3b3;

      &::after {
        background-color: red;
      }
    }
  }
}

/* END */




















.nav-dropdown>li.nav-dropdown-col:not(:last-child) {
    border: none;
}

.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a {
	font-size: 16px;
}


.nav-dropdown>li.nav-dropdown-col {
    display: block
}

.nav-dropdown-default>li>a {
    border-bottom: 0 !important
}

.nav-dropdown-has-arrow li.has-dropdown:before {
    border-width: 10px;
    margin-left: -10px;
}

.nav-dropdown .nav-dropdown-col>ul {
    display: none;
	margin-top: -40px;
    position: absolute;
    left: 100%;
    z-index: 9;
    min-width: 240px;
}

.nav-dropdown>li.nav-dropdown-col {
    width: 100%;
    border-right: 0
}

.nav-dropdown .nav-dropdown-col>ul li a {
    padding: 10px;
    text-transform: none;
    color: black
}

.header-nav li.nav-dropdown-col:hover>ul {
    display: block !important
}

.active>ul.children,
.active>ul.sub-menu:not(.nav-dropdown) {
    display: none !important;
}