.iframe-container iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    border  : none
}

.video-introduce.video .overlay {
    position  : absolute;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, .6)
}

.video-introduce.video .content-video {
    position       : absolute;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 30px;
    max-width      : 573px;
    top            : 50%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    text-align     : center;
    z-index        : 3
}

.video-introduce.video #play-video:hover {
    cursor: pointer
}

.video-introduce.video .content-video img {
    width     : 80px;
    height    : 80px;
    object-fit: cover
}

.video-introduce.video video {
    width     : 100%;
    height    : calc(100vh - 74px);
    object-fit: cover
}

.supply-detail .top li+li {
    margin-left: 32px
}

.supply-detail .header-supply ul li,
.supply-detail .header-supply ul li a {
    max-width: 100%
}

.supply-logo {
    height    : 388px;
    object-fit: cover
}

.overlay {
    position  : absolute;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, .6)
}

.video-introduce #play-video:hover {
    cursor: pointer
}

.video-introduce .content-video img {
    width     : 80px;
    height    : 80px;
    object-fit: cover
}

.section-01 {
    margin: 48px 0
}

.supply-detail .top li em {
    margin-left: 8px
}

.supply-detail .mid .supply-info {
    max-width: 630px
}

.supply-detail .bottom-div {
    margin-top: 25px
}

.supply-detail .bottom-div button,
.supply-detail .mid button {
    position       : relative;
    min-width      : 145px;
    display        : flex;
    padding        : 12px 24px 12px 16px;
    justify-content: center;
    align-items    : center;
    gap            : 10px;
    border-radius  : 25px;
    background     : #333
}

.supply-detail .bottom-div .copy {
    top            : -30px;
    position       : absolute;
    z-index        : 1;
    display        : none;
    background     : rgba(55, 55, 55, .7);
    backdrop-filter: blur(5px);
    padding        : 4px 12px;
    border-radius  : 4px
}

.supply-detail .bottom-div .copy::after {
    content     : "";
    position    : absolute;
    bottom      : -9px;
    left        : 50%;
    transform   : translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(55, 55, 55, .7) transparent transparent transparent
}

.supply-detail .bottom-div button:hover .copy {
    display: block !important
}

.supply-detail .bottom .icon {
    width        : 24px;
    height       : 24px;
    padding      : 4px;
    background   : var(--color-primary);
    border-radius: 50%;
    object-fit   : cover
}

.supply-detail .bottom .box-li {
    max-width    : 100%;
    display      : inline-flex;
    padding      : 12px 24px 12px 16px;
    gap          : 12px;
    border-radius: 16px;
    background   : #f2f2f2
}

.supply-detail .bottom li>div a {
    word-wrap: break-word;
    display  : block
}

.supply-detail .bottom li+li {
    margin-top: 12px
}

#main .left button {
    display        : flex;
    padding        : 14px 32px;
    justify-content: center;
    align-items    : center;
    gap            : 12px;
    border-radius  : 43px;
    background     : var(--Branding-Brand-red, #e31e25)
}

#main .left .icon-right {
    margin-left: -5px
}

#main .left .icon-down {
    top      : 50%;
    right    : 0;
    transform: translateY(-50%)
}

#main .left .nav-link {
    padding-left: 8px
}

.dropdown-child .nav-link {
    padding-left: 30px !important
}

.delete-item-search:hover {
    cursor: pointer
}

.dropdown-child {
    position: relative
}

#main .left .icon-right {
    margin-left: -5px
}

#main .left .icon-down {
    top      : 50%;
    right    : 0;
    transform: translateY(-50%)
}

#main .left .nav-link {
    padding-left: 8px
}

#main .left .dropdown-child .nav-link {
    color      : #1a1a1a;
    font-family: "Be Vietnam Pro";
    font-size  : 14px;
    font-style : normal;
    font-weight: 400;
    line-height: 150%
}

#main .left .dropdown-child .nav-link>em {
    font-weight: 400;
    color      : grey
}

.wh-56 {
    width     : 56px;
    height    : 56px;
    object-fit: cover
}

.wh-24 {
    width     : 24px;
    height    : 24px;
    object-fit: contain
}

.wh-16 {
    width     : 16px;
    height    : 16px;
    object-fit: cover
}

.filter-item .dropdown,
.filter-item .dropdown-parent {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 1s ease
}

.my-16 {
    margin: 16px 0
}

.dropdown.show {
    max-height: 500px
}

.left .dropdown,
.left .filter-item .dropdown-parent {
    max-height: 0;
    overflow  : hidden;
    transition: max-height 1s ease-in-out
}

.left .filter-item .dropdown-parent {
    overflow-y: auto
}

.my-16 {
    margin: 16px 0
}

.filter-item .dropdown-parent.mt-20.show {
    max-height: 500px !important
}

.filter-item .nav-link.active {
    color: #e31e25 !important
}

.dropdown.show {
    max-height: 1000px !important
}

.highlight a.nav-link.fw-700 {
    color: #e31e25 !important
}

.icon-down {
    transition: top .3s, rotate .3s ease
}

.icon-down,
.icon-right {
    transition: top .3s, rotate .3s ease
}

#main .left .icon-down.show {
    top   : 0;
    rotate: -90deg
}

#main .left .icon-right.show {
    top   : 5px;
    rotate: -90deg
}

hr {
    width     : 100%;
    height    : 1px;
    background: #f2f2f2
}

.nav-parent-link {
    padding: 20px 0
}

.card-item {
    border-radius: 30px;
    background   : #f2f2f2;
    padding      : 6px 16px
}

.card-item:hover {
    cursor: pointer
}

.card-item.active {
    background: #333;
    color     : #fff
}

.gap-6 {
    gap: 6px
}

.my-20 {
    margin: 20px 0
}

.box-shadow-0 {
    box-shadow: none
}

.search-item {
    border-radius: 8px;
    border       : 1px solid #e6e6e6;
    padding      : 10px 16px
}

.search-item.permanent {
    background: #f2f2f2
}

.right select {
    padding         : 10px 16px;
    min-width       : 166px;
    background-color: inherit;
    border-radius   : 4px;
    border          : 1px solid #e6e6e6
}

.product-item {
    position     : relative;
    border-radius: 30px;
    border       : 1px solid #ccc
}

.product-item .overlay,
.product-item .tooltip {
    visibility: hidden;
    position  : absolute;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    opacity   : 0;
    transition: opacity 1s ease, visibility 1s ease
}

.product-item .tooltip {
    display        : flex;
    z-index        : 1;
    align-items    : center;
    justify-content: center
}

.product-item:hover .overlay,
.product-item:hover .tooltip {
    visibility: visible;
    opacity   : 1
}

.product-item .overlay {
    border-radius: 30px;
    background   : var(--white-gradient, linear-gradient(180deg, rgba(255, 255, 255, .75) 0, rgba(230, 230, 230, .75) 49%, rgba(207, 202, 202, .75) 100%))
}

.product-item .tooltip a,
.product-item .tooltip button {
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 12px;
    width          : 48px;
    height         : 48px;
    border-radius  : 50%;
    background     : #fff;
    transition     : .5s
}

.product-item .tooltip a img,
.product-item .tooltip button img,
.product-item .tooltip button svg {
    height    : 24px;
    width     : 24px;
    object-fit: cover;
    filter    : contrast(0) sepia(100%) hue-rotate(116deg) brightness(.8) saturate(.28)
}

.product-item .tooltip .heart.clicked,
.product-item .tooltip .heart:hover,
.product-item .tooltip .zoom:hover {
    background-color: #fce8e9
}

.product-item .tooltip .heart:hover svg,
.product-item .tooltip .zoom:hover img {
    filter: none !important
}

.product-item .heart.clicked svg {
    filter: none !important
}

.product-item .heart.clicked path,
.product-item .heart:hover path {
    fill: var(--color-primary)
}

.product-img {
    width        : 100%;
    height       : 300px;
    padding      : 5px;
    border-radius: 26px;
    object-fit   : cover
}

.product-info {
    padding: 15px 35px
}

.product-item>span {
    position     : absolute;
    padding      : 3px 8px;
    left         : 20px;
    top          : 20px;
    border-radius: 4px;
    background   : var(--Branding-Brand-red, #e31e25)
}

.product-item h4>a {
    display: block
}

.product-item h4>a:hover {
    color: var(--Branding-Brand-red, #e31e25)
}

.video-introduce iframe {
    width     : 100% !important;
    height    : calc(100vh - 74px) !important;
    object-fit: cover
}

.video-introduce {
    margin: 48px 0
}

.introduce-item {
    padding   : 20px 0;
    min-width : 255px;
    flex-basis: 255px
}

.my-48 {
    margin: 48px 0
}

.information-provider ul {
    margin-top: 10px
}

.information-provider ul li {
    position    : relative;
    padding-left: 20px;
    color       : #666;
    text-align  : justify;
    font-family : "Be Vietnam Pro";
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 30px
}

.information-provider ul li::before {
    position     : absolute;
    content      : "";
    top          : 12px;
    left         : 0;
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : #666
}

.information-provider-desc {
    text-wrap : wrap;
    word-break: break-all
}

.img-item {
    position     : relative;
    max-width    : 100%;
    width        : 100%;
    height       : 220.451px;
    border-radius: 10px;
    box-shadow   : 0 4px 4px 0 rgba(50, 50, 71, .08), 0 4px 8px 0 rgba(50, 50, 71, .06);
    object-fit   : cover
}

.information-provider .thumb {
    width: 100%
}

.information-provider .thumb:last-child {
    position: relative
}

.information-provider .thumb.show-content::after,
.information-provider .thumb.show-content::before {
    content      : attr(data-content);
    position     : absolute;
    top          : 0;
    left         : 0;
    right        : 0;
    bottom       : 0;
    width        : 100%;
    height       : 100%;
    border-radius: 10px;
    z-index      : 2
}

.information-provider .thumb.show-content::before {
    opacity   : .6;
    background: #000
}

.information-provider .thumb.show-content::after {
    content        : attr(data-content);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff
}

.information-provider .img-item {
    height       : 100%;
    width        : 100%;
    border-radius: 10px;
    box-shadow   : 0 4px 4px 0 rgba(50, 50, 71, .08), 0 4px 8px 0 rgba(50, 50, 71, .06);
    object-fit   : cover
}

.information-provider .img-item:last-child::before {
    position     : absolute;
    content      : "";
    top          : 0;
    left         : 0;
    right        : 0;
    bottom       : 0;
    width        : inherit;
    height       : inherit;
    background   : #ccc;
    border-radius: 10px
}

.information-provider .thumb {
    display      : inline-block;
    height       : 220.451px;
    border-radius: 10px
}

.information-provider .thumb.show-imgs {
    position: relative;
    cursor  : pointer
}

.information-provider .thumb.show-imgs::after,
.information-provider .thumb.show-imgs::before {
    content      : "";
    position     : absolute;
    top          : 0;
    left         : 15px;
    right        : 15px;
    bottom       : 0;
    width        : calc(100% - 30px);
    height       : 100%;
    border-radius: 10px;
    z-index      : 2
}

.information-provider .thumb.show-imgs::before {
    opacity   : .6;
    background: #000
}

.information-provider .thumb.show-imgs::after {
    content        : attr(data-content);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff
}

.section-slider .thumb {
    width : 100%;
    height: calc(100vh - 74px)
}

.section-slider .img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.owl-dots {
    position : absolute;
    bottom   : 15px;
    padding  : 0;
    left     : 50%;
    transform: translateX(-50%)
}

.distribution-unit-item {
    max-width: 264px;
    width    : 100%
}

.distribution-unit-item img {
    width     : 100%;
    height    : 148.5px;
    object-fit: cover
}

.distribution-info .icon {
    padding            : 16px;
    width              : 62px;
    height             : 62px;
    background-image   : url(../../images/icons/container.svg);
    background-position: 50%;
    background-size    : cover;
    background-repeat  : no-repeat
}

.mt-56 {
    margin-top: 56px
}

.py-10 {
    padding-top   : 10px;
    padding-bottom: 10px
}

@media (min-width:576px) {
    .supply-detail .bottom li>div:nth-last-of-type() {
        width: inherit
    }
}

.iframe-container {
    position   : relative;
    overflow   : hidden;
    padding-top: 56.25%
}

.iframe-container iframe {
    position: absolute;
    top     : 0;
    border  : 0;
    height  : min(736.369px, calc(100vh - 200px));
    width   : 100%
}

.bg-box {
    margin          : 0 3%;
    padding-top     : 64px;
    padding-bottom  : 64px;
    border-radius   : 50px;
    background-color: rgba(238, 238, 238, .35)
}