/*-----------------------------------*\
  #style.css
\*-----------------------------------*/


/**
 * copyright 2023 codewithsadee
 */


/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
    /**
    * COLORS
    */
    /*
    --background: hsla(220, 17%, 7%, 1);
    --banner-background: hsla(250, 6%, 20%, 1);

    --on-background: hsla(220, 100%, 95%, 1);
    */
    --white-alpha-20: hsla(0, 0%, 100%, 0.2);
    --on-surface: hsla(250, 100%, 95%, 1);
    --on-surface-variant: hsla(250, 1%, 44%, 1);
    --primary: hsla(349, 100%, 43%, 1);
    --primary-variant: hsla(349, 69%, 51%, 1);
    --rating-color: hsla(44, 100%, 49%, 1);
    --surface: hsla(250, 13%, 11%, 1);
    --text-color: hsla(250, 2%, 59%, 1);
    --white: hsla(0, 0%, 100%, 1);
    /*Google*/
    --background: transparent;
    --banner-background: #f2f2f2;
    --on-background: rgb(60, 64, 67);
    --hover-background: rgb(224 224 224);
    --on-card: #eff2ef;
    --star-icon-size: 18px;
    --info-icon-size: 14px;
    /* gradient colors */
    --banner-overlay: 90deg, hsl(220, 17%, 7%) 0%, hsla(220, 17%, 7%, 0.5) 100%;
    --bottom-overlay: 180deg, hsla(250, 13%, 11%, 0), hsla(250, 13%, 11%, 1);
    /**
    * TYPOGRAPHY
    */
    /* font family */
    --ff-dm-sans: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    /* font-size */
    --fs-heading: 4rem;
    --fs-title-lg: 16px;
    --fs-title: 14px;
    --fs-body: 1.8rem;
    --fs-button: 1.5rem;
    --fs-label: 1.4rem;
    /* font weight */
    --weight-bold: 700;
    /**
    * SHADOW
    */
    --shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.75);
    --shadow-2: 0 2px 4px hsla(350, 100%, 43%, 0.3);
    /**
    * BORDER RADIUS
    */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-36: 36px;
    /**
    * Transition
    */
    --transition-short: 250ms ease;
    --transition-long: 500ms ease;
    --nav-width: 92px;
    /*===== Colores =====*/
    --first-color: #0C5DF4;
    --bg-color: #12192C;
    --sub-color: #B6CEFC;
    --white-color: #FFF;
    /*===== Fuente y tipografia =====*/
    --body-font: "SF Pro Display", 'Arial', sans-serif;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    /*===== z index =====*/
    --z-fixed: 100;
    /*===== content :before =====*/
    --custom-content: "Your custom content here";
    --color-body-bg: #ECECEC;
}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a,
img,
span,
iframe,
button {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    height: auto;
}

input,
button {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
}

input {
    width: 100%;
}

button {
    text-align: left;
    cursor: pointer;
}

html {
    font-family: var(--body-font);
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    color: #333;
    font-family: var(--body-font);
    background: var(--color-body-bg);
    position: relative;
    min-width: 1280px;
    font-size: 14px;
    counter-reset: section;
    padding: 0;
}

:focus-visible {
    outline-color: var(--primary-variant);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--on-background);
    border-radius: var(--radius-8);
}


/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.search-wrapper::before,
.load-more::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid var(--white);
    border-radius: var(--radius-24);
    border-inline-end-color: transparent;
    animation: loading 500ms linear infinite;
    display: none;
}

.search-wrapper::before {
    position: absolute;
    top: 14px;
    right: 12px;
}

.search-wrapper.searching::before {
    display: block;
}

.load-more {
    /*background-color: var(--primary-variant);*/
    margin-inline: auto;
    margin-block: 25px 0px;
}

.hidden {
    display: none !important;
}

.visible {
    opacity: 1;
}

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

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

.bold {
    font-weight: bolder;
}

.load-more:is(:hover, :focus-visible) {
    --primary-variant: hsla(350, 67%, 39%, 1)
}

.load-more.loading::before {
    display: block;
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}

.heading,
.title-large,
.title {
    font-weight: var(--weight-bold);
    letter-spacing: 0.5px;
}

.title {
    font-size: var(--fs-title);
}

.heading {
    font-size: var(--fs-heading);
    line-height: 1.2;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 5px;
}

.title-large {
    font-size: var(--fs-title-lg);
}

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

.meta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn {
    color: var(--white);
    font-size: var(--fs-button);
    font-weight: var(--weight-bold);
    max-width: max-content;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    padding-inline: 20px 24px;
    border-radius: var(--radius-8);
    transition: var(--transition-short);
}

.card-badge {
    background-color: var(--on-background);
    color: var(--white);
    font-size: var(--fs-label);
    font-weight: var(--weight-bold);
    padding-inline: 6px;
    width: 50px;
    border-radius: var(--radius-4);
    text-align: center;
    float: right;
}

.movie-card .card-badge {
    width: 70px;
    padding-block: 7px;
    margin-left: 16px;
    margin-bottom: 16px;
}

.card-badge:hover {
    background-color: rgb(75 80 84 / 87%);
    color: hsl(0deg 8.7% 95.69%);
    cursor: pointer;
}

.poster-box {
    background-image: url('../images/poster-bg-icon.png');
    aspect-ratio: 3 / 3;
}

.poster-box,
.video-card {
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
    background-color: var(--banner-background);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.title-wrapper {
    margin-block-end: 24px;
    padding-inline: 10px;
}

.slider-list {
    margin-inline: -20px;
    overflow-x: overlay;
    padding-block-end: 16px;
    margin-block-end: 0px;
}

.slider-list::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.slider-list:is(:hover,
 :focus-within)::-webkit-scrollbar-thumb {
    background-color: var(--surface);
}

.slider-list::-webkit-scrollbar-button {
    width: 20px;
}

.slider-list .slider-inner {
    position: relative;
    display: flex;
    gap: 16px;
}

.slider-list .slider-inner::before,
.slider-list .slider-inner::after {
    content: "";
    min-width: 4px;
}

.separator {
    width: 4px;
    height: 4px;
    background-color: var(--white-alpha-20);
    border-radius: var(--radius-8);
}

.video-card {
    background-image: url('../images/video-bg-icon.png');
    aspect-ratio: 9 / 9;
    flex-shrink: 0;
    max-width: 100px;
    width: calc(100% - 40px);
}

.container::after,
.search-modal::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: linear-gradient(var(--white));
    z-index: 1;
    pointer-events: none;
}


/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
    position: relative;
    padding-block: 24px;
    padding-inline: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.header .logo {
    margin-inline-end: auto;
}

.search-btn,
.menu-btn,
.cart-btn {
    padding: 12px;
}

.search-btn {
    background-color: var(--banner-background);
    border-radius: var(--radius-8);
}

.search-btn img {
    opacity: 0.5;
}

.search-btn:is(:hover,
 :focus-visible) img {
    opacity: 1;
}

.menu-btn.active .menu,
.menu-btn .close {
    display: none;
}

.menu-btn .menu,
.menu-btn.active .close {
    display: block;
}

.search-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    padding: 24px 8px;
    align-items: center;
    gap: 8px;
    z-index: 2;
    display: none;
}

.search-box.active {
    display: flex;
}

.search-wrapper {
    position: relative;
    flex-grow: 1;
}

.search-field {
    background-color: var(--banner-background);
    height: 48px;
    line-height: 48px;
    padding-inline: 44px 16px;
    outline: none;
    border-radius: var(--radius-8);
    transition: var(--transition-short);
}

.search-field::placeholder {
    color: var(--on-surface-variant);
}

.saearch-field:hover {
    box-shadow: 0 0 0 2px var(--on-surface-variant);
}

.search-field:focus {
    box-shadow: 0 0 0 2px var(--on-surface);
    padding-inline-start: 16px;
}

.search-wrapper .loading-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    opacity: 0.5;
    transition: var(--transition-short);
}

.search-wrapper:focus-within .loading-icon {
    opacity: 0;
}

.main-header .switch {
    margin-left: auto;
}

.switch {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.current {
    text-transform: uppercase;
    height: 42px;
    position: relative;
    z-index: 1;
    font-size: 1.7rem;
    text-align: center;
    line-height: 42px;
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.2s ease-out;
    border-radius: 3px;
    padding: 0 0.2em 0 0.7em;
}

.current span {
    display: inline-block;
    line-height: 1;
    padding: 0.7em 0.2em 0 0;
}

.current .arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.current:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.options {
    position: absolute;
    right: 0;
    top: 60px;
    z-index: 0;
    opacity: 0;
    transition: all 0.36s ease-out;
    display: none;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.switch.show-options .options {
    display: block;
    z-index: 5;
}

.switch.anim-options .options {
    opacity: 1;
}

.switch.show-shadow .options {
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.4);
}

.options-list {
    color: #313436;
    margin: 0;
    padding: 0.4rem 0.8em;
    position: relative;
    z-index: 5;
}

.options-list li {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 0.75em;
    border-bottom: 1px solid #E1E4E6;
    transform: translateX(10px);
    transition: all 0.24s ease-out;
    transition-delay: 0.1s;
    opacity: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    white-space: nowrap;
}

.options-list li:last-child {
    border-bottom: none;
}

.options-list li:nth-child(1) {
    transition-delay: 0.1s;
}

.options-list li:nth-child(2) {
    transition-delay: 0.15s;
}

.options-list li:nth-child(3) {
    transition-delay: 0.2s;
}

.options-list li:nth-child(4) {
    transition-delay: 0.25s;
}

.options-list li:nth-child(5) {
    transition-delay: 0.3s;
}

.options-list li.selected {
    color: #3498DB;
}

.switch.anim-options .options-list li {
    transform: translateX(0);
    opacity: 1;
}

#trans-circle {
    width: 80px;
    height: 80px;
    position: absolute;
    top: -80px;
    right: -80px;
    padding: 0;
    margin: 0;
    border: none;
    z-index: 1;
    transition: all 0.4s ease-out;
    transform: scale(0.5);
    overflow: hidden;
}

#trans-circle svg {
    max-width: 100%;
    max-height: 100%;
}

.switch.anim-options #trans-circle {
    transform: scale(9);
}


/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
    position: fixed;
    background-color: var(--background);
    top: 70px;
    bottom: 0;
    left: -277px;
    max-width: 277px;
    width: 100%;
    border-block-start: 1px solid var(--banner-background);
    overflow-y: overlay;
    z-index: 4;
    visibility: hidden;
    transition: var(--transition-long);
    overflow: auto;
    box-shadow: rgba(65, 69, 73, 0.25) 0 1px 10px 0;
}

.sidebar.active {
    transform: translateX(277px);
    visibility: visible;
    background-color: #eff2ef;
}

.sidebar-inner {
    display: grid;
    gap: 20px;
    padding-block: 25px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.sidebar:is(:hover,
 :focus-within)::-webkit-scrollbar-thumb {
    background-color: var(--banner-background);
}

.sidebar::-webkit-scrollbar-button {
    height: 16px;
}

.sidebar-list,
.sidebar-footer {
    padding-inline: 30px;
}

.sidebar-link {
    color: var(--on-surface-variant);
    transition: var(--transition-short);
}

.sidebar-link:is(:hover,
 :focus-visible) {
    color: var(--on-background);
}

.sidebar-list {
    display: grid;
    gap: 8px;
}

.sidebar-list .title {
    margin-block-end: 8px;
}

.sidebar-footer {
    border-block-start: 1px solidvar(--banner-background);
    padding-block-start: 28px;
    margin-block-start: 16px;
}

.copyright {
    color: var(--on-surface-variant);
    margin-block-end: 20px;
}

.copyright a {
    display: inline-block;
}

.overlay {
    position: fixed;
    top: 0px;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--background);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-short);
    z-index: 3;
}

.overlay.active {
    opacity: 0.5;
    pointer-events: all;
}


/*-----------------------------------*\
  #HOME PAGE
\*-----------------------------------*/

.container {
    position: relative;
    background-color: var(--background);
    color: var(--surface);
    padding: 10px 20px 10px;
    margin-block-start: 0px;
    height: 100%;
    overflow-y: overlay;
    z-index: 1;
}


/**
  * BANNER
  */

.banner {
    position: relative;
    height: 700px;
    border-radius: var(--radius-24);
    overflow: hidden;
}

.banner .banner-content {
    color: var(--white-color);
}

.banner-slider .slider-item {
    position: absolute;
    top: 0;
    left: 120%;
    width: 100%;
    height: 100%;
    background-color: var(--banner-background);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-long);
}

.banner-slider .slider-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--banner-overlay));
}

.banner-slider .active {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.banner-content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 206px;
    z-index: 1;
    columns: var(--text-color);
}

.banner :is(.heading,
.banner-text) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.banner .heading {
    -webkit-line-clamp: 3;
    margin-block-end: 16px;
}

.banner .genre {
    margin-block: 12px;
}

.banner-text {
    -webkit-line-clamp: 2px;
    margin-block-end: 24px;
}

.banner .btn {
    background-color: var(--primary);
}

.banner .btn:is(:hover,
 :focus-visible) {
    box-shadow: var(--shadow-2);
}

.slider-control {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 0;
    border-radius: var(--radius-16) 0 0 var(--radius-16);
    user-select: none;
    padding: 4px 0 4px 4px;
    overflow-x: auto;
}

.slider-control::-webkit-scrollbar {
    display: none;
}

.control-inner {
    display: flex;
    gap: 12px;
}

.control-inner::after {
    content: "";
    min-width: 12px;
}

.slider-control .slider-item {
    width: 100px;
    border-radius: var(--radius-8);
    flex-shrink: 0;
    filter: brightness(0.4);
}

.slider-control .active {
    filter: brightness(1);
    box-shadow: var(--shadow-1);
}


/**
  * MOVIE LIST
  */

.movie-list {
    padding-block-start: 10px;
}

.movie-list-detail {
    padding-block-start: 70px;
}

.movie-card {
    background-color: var(--on-card);
    border-radius: 20px;
    box-sizing: border-box;
    color: initial;
    display: flex;
    flex-direction: column;
    position: relative;
}

.movie-card:hover {
    background-color: #e3e3e3;
}

.movie-card:active {
    background-color: #c7c7c7;
}

.movie-card .card-banner {
    aspect-ratio: 0;
    border-radius: 12px;
    width: 100%;
}

.price-container {
    position: relative;
    margin-block: 7px;
}

.p-discount {
    background: url(../images/bg-discount.png) no-repeat;
    width: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    background-position: center;
    background-size: contain;
    font-size: 13px;
}

.movie-card .title {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-block: 8px 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* Số dòng bạn muốn hiển thị trước khi thêm dấu chấm lửng */
    letter-spacing: 0;
    line-height: 2rem;
    margin: 12px 0 0;
    min-height: 4rem;
    white-space: normal;
    /* Đảm bảo rằng văn bản có thể bao quanh */
    height: 38px;
    /* Chiều cao cố định */
}

.yZ330c {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25rem;
    align-items: center;
    color: #001d35;
    display: flex;
    height: var(--star-icon-size, 20px);
    line-height: var(--star-icon-size, 20px);
}

.ILTMZc {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 2rem;
    margin-top: 7px;
}

.Vq0ZA {
    margin-right: 2px;
    font-weight: 600;
    font-size: 12px;
    color: #6D6E72;
}

.NMm5M {
    fill: currentColor;
    flex-shrink: 0;
}

.Y30PE {
    color: #6D6E72;
    margin-left: 3px;
    font-weight: 600;
    font-size: 12px;
}

.Uufqmb {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 2rem;
    min-height: 2rem;
    color: #6D6E72;
    font-weight: 400;
}

.Vq0ZA.decore-line {
    text-decoration-line: line-through;
    font-size: 15px;
    color: #6D6E72;
}

.price {
    text-align: center;
}

.price {
    color: #e11313;
    font-size: 18px;
}

.banner-content .price {
    color: #fb0000;
    font-size: 22px;
    font-weight: 800;
}

.lY30PE small {
    padding: 3px;
    margin-left: 0;
    vertical-align: text-top;
}

.Y30PE small {
    border-radius: 4px;
    padding: 1px 2px 2px 2px;
    margin-left: 7px;
    font-size: 14px;
}

.mEsWS {
    letter-spacing: 0;
    line-height: 2.25rem;
    font-weight: 700;
    margin: initial;
}

.movie-card .meta-list {
    justify-content: space-between;
}

.movie-card .card-btn {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.TS4QDe {
    display: flex;
    flex-direction: column;
    position: relative;
}


/*-----------------------------------*\
  #DETAIL PAGE
\*-----------------------------------*/

.backdrop-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.backdrop-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(0deg, hsla(250, 13%, 11%, 1), hsla(250, 13%, 11%, 0.9));
}

.movie-detail .movie-poster {
    max-width: 350px;
    width: 100%;
}

.movie-detail .heading {
    margin-block: 24px 12px;
}

.movie-detail :is(.meta-list,
.genre) {
    color: var(--text-color);
}

.movie-detail .genre {
    margin-block: 12px 16px;
}

.detail-list {
    margin-block: 24px 32px;
}

.movie-detail .list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-block-end: 12px;
}

.movie-detail .list-name {
    color: var(--text-color);
    min-width: 112px;
}

.H8vIqf {
    border-bottom: 1px solid rgb(218, 220, 224);
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1072px;
}

.tuscDf {
    align-items: center;
    color: #041e49;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    margin-block-end: 30px;
}

.kavJkb {
    letter-spacing: 0;
    line-height: 2.25rem;
    font-weight: 700;
}

.K1RSbf {
    letter-spacing: 0;
    padding-bottom: 24px;
}

.uORbKe {
    margin-bottom: 24px;
    white-space: break-spaces;
    /* font-size: 16px; */
    /* font-weight: 300; */
    min-height: 150px;
}

.QwcFgf {
    height: 150px;
    -webkit-mask: linear-gradient(rgb(255, 255, 255) 85%, transparent);
    mask: linear-gradient(rgb(255, 255, 255) 85%, transparent);
    overflow: hidden;
}

.vZf0bf {
    color: #444746;
    text-decoration: underline;
    cursor: pointer;
}

.RBHQF-ksKsZd::before {
    transition: opacity 75ms linear;
    background-color: var(--gm3-ripple-hover-color, transparent);
}

.RBHQF-ksKsZd::before,
.RBHQF-ksKsZd::after {
    opacity: 0;
    content: "";
}

.RBHQF-ksKsZd,
.RBHQF-ksKsZd::before,
.RBHQF-ksKsZd::after {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--gm3-ripple-shape, inherit);
}


/* The Modal (background) */

#image-viewer {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#image-viewer .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

#image-viewer .close:hover,
#image-viewer .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}


/*-----------------------------------*\
  #MOVIE LIST PAGE
\*-----------------------------------*/

.grid-list {
    display: grid;
    column-gap: 21px;
    row-gap: 20px;
    margin-top: 21px;
    padding-inline: 10px;
}

:is(.genre-list,
.search-modal) :is(.movie-card,
.card-banner) {
    width: 100%;
}


/*-----------------------------------*\
  #SEARCH MODAL
\*-----------------------------------*/

.search-modal {
    position: fixed;
    top: 104px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--white);
    padding: 0;
    overflow-y: overlay;
    z-index: 4;
    display: none;
}

.search-modal.active {
    display: block;
    margin: 0;
}

body.modal-active {
    overflow: hidden;
}

.search-modal .label {
    color: var(--primary-variant);
    font-weight: var(--weight-bold);
    margin-block-end: 8px;
}


/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/


/**
  * responsive for large than 575px screen
  */

@media (max-width: 574px) {
    /**
      * HOME PAGE
      */
    .IqBfM:has(.k4lSF),
    .IqBfM:has(.ADLl9e) {
        min-width: 100%;
    }
    .IqBfM {
        min-width: 100%;
    }
    .k4lSF {
        width: 100%;
    }
    .movie-card .card-banner {
        margin: auto;
    }
    .slider-list {
        margin-inline: 0px;
    }
    .grid-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .movie-card {
        max-width: 100%;
    }
    .logo img {
        display: none;
    }
    .LXTxRc-AznF2e-LUERP-bN97Pc .LXTxRc-AznF2e {
        padding: 0 4px !important;
    }
    .I1b9kc {
        padding-left: 0px !important;
    }
    .LXTxRc-AznF2e .LXTxRc-jY41G-V67aGc {
        font-size: 1.6rem !important;
    }
    .search-btn,
    .menu-btn,
    .cart-btn {
        padding: 8px !important;
    }
    .H8vIqf {
        width: 100%;
    }
    .DpcOrc {
        display: none;
    }
    .LXTxRc-AznF2e .LXTxRc-jY41G-V67aGc {
        font-size: 14px !important;
    }
    .product-info-container .product-detail-info-right {
        width: 100% !important;
    }
    .product-info-container .product-detail-info-center {
        width: 100% !important;
    }
    .product-info-container .product-detail-info-left {
        width: 100% !important;
    }
    .movie-detail .movie-poster {
        max-width: 100% !important;
    }
    .showroom-container .left-group {
        width: 100% !important;
    }
    .showroom-container .right-group {
        float: left;
        width: 100% !important;
    }
    .cart-container {
        width: 100% !important;
        margin: 0 !important;
        background: #fff;
        padding: 0 !important;
    }
    #js_voucher_input {
        width: 100% !important;
    }
    .warranty-page .warranty-input-group {
        display: block !important;
    }
    .warranty-page .warranty-input-group .warranty-input-holder {
        width: 100% !important;
    }
    .warranty-page .warranty-input-group input {
        width: calc(100% - 85px) !important;
    }
    .warranty-page .warranty-input-holder button {
        width: 85px !important;
    }
    .blog-ver-2020 .news-detail .emtry-detail .share {
        flex: 0 0 0 !important;
    }
    .list-blog-type-1 .blog-item {
        width: 100% !important;
    }
    .column-left {
        flex-basis: 100% !important;
    }
    .column-right {
        flex-basis: 100% !important;
    }
    .sticky-banner {
        display: none;
    }
    .list-submenu.list-submenu--desktop .item-submenu a {
        padding: 10px 32px;
    }
    .list-submenu .item-submenu:not(:last-child) a {
        position: relative;
    }
    .list-submenu .item-submenu:not(:last-child) a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: #CFCFCF;
        height: 62%;
        width: 1px;
    }
    .sub-header {
        background: #ffffff;
        border-bottom: 1px solid #E0E0E0;
    }
    .list-submenu .item-submenu {
        width: auto;
    }
    .sub-header {
        display: none !important;
    }
    .showroom-container .left-group .item {
        width: 100% !important;
    }

    .Y30PE small {
        border-radius: 4px;
        padding: 1px 2px 2px 2px;
        margin-left: 4px;
        font-size: 10px;
    }

    .p-discount {
        background: url(../images/bg-discount.png) no-repeat;
        width: 27px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        position: absolute;
        top: 0;
        right: -10px;
        background-position: center;
        background-size: contain;
    }

    .grid-list {
        display: grid;
        column-gap: 10px;
        row-gap: 10px;
        margin-top: 21px;
        padding-inline: 10px;
    }

    .container {
        padding: 10px 10px 10px;
    }

    :root {
        --carousel-height: 100% !important;
    }

    .icon-payment-container .icon-payment {
        display: block;
        height: 30px;
        margin-top: 5px;
        background-position: -7px -498px;
        width: 100% !important;
    }
}


/**
  * responsive for large than 575px screen
  */

@media (min-width: 575px) {
    /**
      * HOME PAGE
      */
    .banner-content {
        right: auto;
        max-width: 500px;
    }
    .slider-control {
        left: calc(100% - 400px);
    }
    .movie-card .card-banner {
        margin: auto;
    }
    .grid-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    /**
      * DETAIL PAGE
      */
    .detail-content {
        max-width: 750px;
    }
}


/**
  * responsive for large than 768px screen
  */

@media (min-width: 768px) {
    /**
      * CUSTOM PROPERTY
      */
     :root {
        /* gradient color */
        --banner-overlay: 90deg, hsl(220, 20%, 10%) 0%, hsla(220, 17%, 7%, 15%) 100%;
        /* font size */
        --fs-heading: 5.4rem;
    }
    /**
      * DETAIL PAGE
      */
    .container {
        padding-inline: 24px;
    }
    .slider-list {
        margin-inline: 0px;
    }
    .search-btn {
        display: none;
    }
    .search-box {
        all: unset;
        display: block;
        width: 360px;
    }
    .banner {
        height: 500px;
    }
    .banner-content {
        bottom: 50%;
        transform: translateY(50%);
        left: 50px;
    }
    /**
      * MOVIE DETAIL PAGE
      */
    .movie-detail {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }
    .movie-detail .detail-box {
        flex-grow: 1;
    }
    .movie-detail .movie-poster {
        flex-shrink: 0;
        position: sticky;
        top: 0;
    }
    .movie-detail .slider-list {
        margin-inline-start: 0;
        border-radius: var(--radius-16) 0 0 var(--radius-16);
    }
    .movie-detail .slider-inner::before {
        display: none;
    }
}

@media (max-width: 1615px) {
    .sticky-banner {
        display: none;
    }
}


/**
  * responsive for large than 1200px screen
  */

@media (min-width: 1200px) {
    /**
      * HOME PAGE
      */
    .IqBfM:has(.k4lSF),
    .IqBfM:has(.ADLl9e) {
        min-width: 1280px;
    }
    .IqBfM {
        min-width: 1249px;
    }
    .k4lSF {
        width: 1344px;
    }
    .grid-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    /*
    .header { padding: 28px 56px; }

    .logo img { width: 160px; }

    .menu-btn,
    .overlay { display: none; }
    */
    main {
        display: grid;
        grid-template-columns: 350px 1fr;
    }
    /*
    .sidebar {
      position: static;
      visibility: visible;
      border-block-start: 0;
      height: calc(100vh - 104px);
    }

    .sidebar.active { transform: none; }

    .sidebar-list,
    .sidebar-footer { padding-inline: 56px; }
    */
    .container {
        height: 100%;
        /* border-top-left-radius: var(--radius-36); */
    }
    .banner-content {
        left: 100px;
    }
    .search-modal {
        top: 104px;
        padding: 0px;
        display: none;
    }
    .movie-card {
        max-width: 252px;
    }
    /**
      * MOVIE DETAIL PAGE
      */
    .backdrop-image {
        border-top-left-radius: var(--radius-36);
    }
}

.container-language {
    display: flex;
    justify-content: center;
    align-items: center;
}

#languageToggle {
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
}

#languageImage {
    width: 40px;
    /* Điều chỉnh kích thước hình ảnh nút tùy theo nhu cầu */
    height: 40px;
    /* Điều chỉnh kích thước hình ảnh nút tùy theo nhu cầu */
}

#languageText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bg-color);
    font-weight: 600;
}

.main-header .switch {
    margin-left: auto;
}

.switch {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.current {
    text-transform: uppercase;
    height: 42px;
    position: relative;
    z-index: 1;
    font-size: 1.7rem;
    text-align: center;
    line-height: 42px;
    display: flex;
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.2s ease-out;
    border-radius: 3px;
    padding: 0 0.7em 0 0.7em;
}

.current span {
    display: inline-block;
    line-height: 1;
    padding: 0.7em 0.2em 0 0;
}

.current .arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.current:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.options {
    position: absolute;
    right: 0;
    top: 60px;
    z-index: 0;
    opacity: 0;
    transition: all 0.36s ease-out;
    display: none;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.switch.show-options .options {
    display: block;
    z-index: 5;
}

.switch.anim-options .options {
    opacity: 1;
}

.switch.show-shadow .options {
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.4);
}

.options-list {
    color: #313436;
    margin: 0;
    padding: 0.4rem 0.8em;
    position: relative;
    z-index: 5;
}

.options-list li {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 0.75em;
    border-bottom: 1px solid #E1E4E6;
    transform: translateX(10px);
    transition: all 0.24s ease-out;
    transition-delay: 0.1s;
    opacity: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    white-space: nowrap;
}

.options-list li:last-child {
    border-bottom: none;
}

.options-list li:nth-child(1) {
    transition-delay: 0.1s;
}

.options-list li:nth-child(2) {
    transition-delay: 0.15s;
}

.options-list li:nth-child(3) {
    transition-delay: 0.2s;
}

.options-list li:nth-child(4) {
    transition-delay: 0.25s;
}

.options-list li:nth-child(5) {
    transition-delay: 0.3s;
}

.options-list li.selected {
    color: #3498DB;
}

.switch.anim-options .options-list li {
    transform: translateX(0);
    opacity: 1;
}

#trans-circle {
    width: 80px;
    height: 80px;
    position: absolute;
    top: -80px;
    right: -80px;
    padding: 0;
    margin: 0;
    border: none;
    z-index: 1;
    transition: all 0.4s ease-out;
    transform: scale(0.5);
    overflow: hidden;
}

#trans-circle svg {
    max-width: 100%;
    max-height: 100%;
}

.switch.anim-options #trans-circle {
    transform: scale(9);
}


/*===== COLLAPSE =====*/

.nav__link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: .75rem;
    padding: .75rem;
    color: var(--on-background);
    border-radius: .5rem;
    /* margin-bottom: 1rem; */
    transition: .3s;
    cursor: pointer;
}

.nav__link:hover {
    background-color: var(--hover-background);
}

.nav__icon {
    font-size: 1.25rem;
}


/* .nav__name{
    font-size: var(--fs-title);
  } */

.collapsed {
    grid-template-columns: 0px max-content 1fr;
}

.collapse__link {
    justify-self: flex-end;
    transition: .5s;
}

.collapse__menu {
    display: none;
    padding: .75rem 2.25rem;
}

.collapse__sublink {
    color: var(--on-background);
    font-size: var(--fs-label);
    width: max-content;
    margin-block: 10px;
}

.collapse__sublink:hover {
    color: var(--on-background);
    font-weight: 600;
}


/*Show collapse*/

.showCollapse {
    display: inline-block;
}


/*Rotate icon*/

.rotate {
    transform: rotate(180deg);
}


/**
    * CHROME STORE CSS
    */


/*BODY*/

.k4lSF {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.IqBfM {
    bottom: auto;
    height: 100%;
    right: auto;
    width: auto;
}


/*HEADER*/

.QrPGR,
.keVMg {
    align-items: center;
    display: flex;
}

.nc05Db.IUvXcc {
    box-shadow: rgba(65, 69, 73, .25) 0 1px 10px 0;
}

.nc05Db {
    align-items: center;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    min-width: inherit;
    padding: 8px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.YuSVae {
    width: 100%;
}

.ySDJfc {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.I1b9kc {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    margin-right: 32px;
    padding-left: 40px;
}

.XldaFf {
    height: 50px;
    margin-right: 12px;
    width: 160px;
}

.DpcOrc {
    font-family: var(--body-font);
    color: #5c5f5e;
    height: 32px;
    line-height: 32px;
    padding-left: 5px;
    text-transform: none;
}

.KH61jf {
    display: inline-block;
}

.LXTxRc-AznF2e-ZMv3u.LXTxRc-AznF2e-ZMv3u {
    border-bottom: var(--gm3-tabs-primary-divider-height, 1px) solid var(--gm3-tabs-primary-divider-color, var(--gm3-sys-color-surface-variant, #e1e3e1));
}

.V94ztf {
    --gm3-tabs-primary-container-height: 64px;
    --gm3-tabs-primary-active-hover-state-layer-color: transparent;
    --gm3-tabs-primary-active-hover-state-layer-opacity: 0;
    --gm3-tabs-primary-active-pressed-state-layer-opacity: 0;
    --gm3-tabs-primary-inactive-hover-state-layer-color: transparent;
    --gm3-tabs-primary-inactive-hover-state-layer-opacity: 0;
    --gm3-tabs-primary-inactive-pressed-state-layer-opacity: 0;
    --gm3-tabs-primary-with-label-text-active-hover-label-text-color: #0b57d0;
    --gm3-tabs-primary-with-label-text-active-label-text-color: #0b57d0;
    --gm3-tabs-primary-with-label-text-inactive-hover-label-text-color: black;
    --gm3-tabs-primary-with-label-text-inactive-label-text-color: #5c5f5e;
    --gm3-tabs-primary-divider-height: 0px;
}

.LXTxRc-AznF2e-vzJc7b {
    overflow-y: hidden;
}

.LXTxRc-AznF2e-LUERP-vJ7A6b-OWXEXe-XuHpsb {
    overflow-x: scroll;
}

.LXTxRc-AznF2e-LUERP-vJ7A6b,
.LXTxRc-AznF2e-OFz35 {
    scrollbar-width: none;
}

.LXTxRc-AznF2e-LUERP-vJ7A6b {
    -webkit-overflow-scrolling: touch;
    display: flex;
    overflow-x: hidden;
}

.LXTxRc-AznF2e-LUERP-bN97Pc {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    transform: none;
    will-change: transform;
}

.LXTxRc-AznF2e-LUERP-bN97Pc .LXTxRc-AznF2e {
    padding: 0 16px;
    min-width: auto;
}

.LXTxRc-AznF2e:not(.LXTxRc-AznF2e-OWXEXe-eu7FSc) {
    height: var(--gm3-tabs-primary-container-height, 48px);
}

.V94ztf .DECryd {
    height: 45px;
}

.LXTxRc-AznF2e-OWXEXe-auswjd {
    --gm3-ripple-hover-color: var(--gm3-tabs-primary-active-hover-state-layer-color, var(--gm3-sys-color-primary, #0b57d0));
    --gm3-ripple-pressed-color: var(--gm3-tabs-primary-active-hover-state-layer-color, var(--gm3-sys-color-primary, #0b57d0));
    --gm3-ripple-hover-opacity: var(--gm3-tabs-primary-active-hover-state-layer-opacity, 0.08);
    --gm3-ripple-pressed-opacity: var(--gm3-tabs-primary-active-pressed-state-layer-opacity, 0.12);
    --gm3-ripple-shape: var(--gm3-tabs-primary-container-shape, 0px);
}

.LXTxRc-AznF2e-OWXEXe-auswjd {
    --gm3-focus-ring-inward-extra-offset-bottom: calc((var(--gm3-tabs-primary-active-indicator-height, 3px) + 1px)* -1);
}

.LXTxRc-AznF2e {
    min-width: 90px;
    padding: 0 24px;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    border: none;
    outline: none;
    text-align: center;
    white-space: nowrap;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    width: auto;
    font-size: .875rem;
    z-index: unset;
    position: relative;
    background-color: var(--gm3-tabs-primary-container-color, var(--gm3-sys-color-surface, #fff));
    border-radius: var(--gm3-tabs-primary-container-shape, 0);
    --gm3-focus-ring-inward-target-shape: var(--gm3-tabs-primary-container-shape, 0px);
}

.LXTxRc-N5Lhkf {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    pointer-events: none;
    position: relative;
}

.RBHQF-ksKsZd,
.RBHQF-ksKsZd::before,
.RBHQF-ksKsZd::after {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--gm3-ripple-shape, inherit);
}

.RBHQF-ksKsZd {
    overflow: hidden;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.frX3lc-vlkzWd {
    display: var(--gm3-focus-ring-inward-display, none);
    pointer-events: none;
    position: absolute;
    z-index: 1;
    border-style: solid;
    border-width: var(--gm3-focus-ring-inward-track-width, 3px);
    border-color: var(--gm3-focus-ring-inward-color, var(--gm3-sys-color-secondary, #00639b));
    border-radius: calc(var(--gm3-focus-ring-inward-target-shape, 8px) + var(--gm3-focus-ring-inward-track-width, 3px) + var(--gm3-focus-ring-inward-offset, -3px));
    inset-block: calc((var(--gm3-focus-ring-inward-offset, -3px) + var(--gm3-focus-ring-inward-track-width, 3px))* -1) calc((var(--gm3-focus-ring-inward-offset, -3px) + var(--gm3-focus-ring-inward-track-width, 3px) + var(--gm3-focus-ring-inward-extra-offset-bottom, 0px))* -1);
    inset-inline: calc((var(--gm3-focus-ring-inward-offset, -3px) + var(--gm3-focus-ring-inward-track-width, 3px))* -1);
    animation-name: gm3-focus-ring-inward-grows, gm3-focus-ring-inward-shrinks;
    animation-duration: .15s, .45s;
    animation-delay: 0s, .15s;
    animation-timing-function: cubic-bezier(.2, 0, 0, 1), cubic-bezier(.2, 0, 0, 1);
}

.LXTxRc-AznF2e-OWXEXe-auswjd:not(:disabled) .LXTxRc-jY41G-V67aGc {
    color: var(--gm3-tabs-primary-with-label-text-active-label-text-color, var(--gm3-sys-color-primary, #0b57d0));
}

.LXTxRc-AznF2e .LXTxRc-jY41G-V67aGc {
    font-size: var(--gm3-tabs-primary-with-label-text-label-text-size, 1.875rem);
    letter-spacing: var(--gm3-tabs-primary-with-label-text-label-text-tracking, 0);
    line-height: var(--gm3-tabs-primary-with-label-text-label-text-line-height, 1.25rem);
    font-weight: var(--gm3-tabs-primary-with-label-text-label-text-weight, 500);
}

.LXTxRc-jY41G-V67aGc {
    transition: .15s color linear;
    display: inline-block;
    z-index: 2;
}

.LXTxRc-AznF2e-uDEFge {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.LXTxRc-AznF2e .LXTxRc-AznF2e-uDEFge .LXTxRc-AznF2e-wEcVzc-OWXEXe-NowJzb {
    border-radius: var(--gm3-tabs-primary-active-indicator-shape, 3px 3px 0 0);
    margin: 0 2px;
    min-width: 24px;
}

.LXTxRc-AznF2e-uDEFge-OWXEXe-auswjd .LXTxRc-AznF2e-wEcVzc {
    opacity: 1;
}

.LXTxRc-AznF2e-uDEFge .LXTxRc-AznF2e-wEcVzc-OWXEXe-NowJzb {
    border-color: var(--gm3-tabs-primary-active-indicator-color, var(--gm3-sys-color-primary, #0b57d0));
    border-top-width: var(--gm3-tabs-primary-active-indicator-height, 3px);
}

.LXTxRc-AznF2e-wEcVzc {
    transform-origin: left;
    opacity: 0;
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
    border-top-style: solid;
    transition: .25s transform cubic-bezier(.4, 0, .2, 1);
    border-color: primary;
    border-top-width: 2px;
}


/*CONTENT*/

.SSPGKf {
    display: block;
    overflow-y: hidden;
    z-index: 1;
}

.SSPGKf {
    overflow-y: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 64px;
}

.SSPGKf {
    position: relative;
    min-height: 100%;
}

c-wiz {
    contain: style;
}

.T4LgNb {
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

.T4LgNb {
    min-height: 100%;
    position: relative;
}

@media (min-width: 600px) {
    /*
    .kFwPee {
      margin-top: 56px;
    }
    .kFwPee {
      margin-top: 64px;
    }
    */
    .kFwPee {
        backface-visibility: hidden;
        min-height: 100%;
        height: auto;
    }
    .kFwPee {
        height: 100%;
    }
    .kFwPee {
        position: relative;
        z-index: 1;
        height: 100%;
    }
}

.ADLl9e {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/*MAIN*/

.wcXMWc {
    container: wall-feed / inline-size;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.S6fAqd {
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    max-width: 1344px;
    width: 100%;
    overflow: hidden;
}

.bSxf9e {
    margin-right: 48px;
    width: 256px;
}

.GRduAb {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 64px;
    max-width: 1072px;
    min-width: 880px;
    padding-right: 48px;
}

.l25Mzb {
    display: flex;
    justify-content: center;
    padding-top: 36px;
}

.arrow-btn {
    position: sticky;
    width: 30px;
    height: 30px;
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 3rem;
    font-weight: 600;
    display: inline-block;
    margin-block: 10px;
}

.arrow-left {
    margin-right: auto;
    /* Nút arrow-left sẽ luôn nằm bên trái */
    left: -4px;
}

.arrow-right {
    margin-left: auto;
    /* Nút arrow-right sẽ luôn nằm bên phải */
    left: 35px;
}

.pro-item-inner {
    text-align: center;
    background: #fff;
    padding: 25px;
    border: 1px solid #ddd;
}

.content {
    padding: 50px 0 25px;
}

.pro-item {
    margin-bottom: 25px;
}

.pro-name {
    font-size: 18px;
    margin: 10px 0 0;
    font-weight: 700;
}

.pro-price {
    margin: 5px 0 10px;
}

.pro-btn {
    margin: 0;
}

.pro-img img {
    height: 220px;
    width: auto;
}

.pro-quantity {
    display: inline-block;
    display: inline-block;
    font-size: 1.3rem;
    color: var(--surface);
}

.cart-box {
    position: relative;
}

.cart-text {
    font-size: 40px;
    cursor: pointer;
    display: inline-block;
}

.cart-number {
    min-width: 17px;
    min-height: 17px;
    padding: 0 3px;
    line-height: 17px;
    background: #f00;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: -9px;
    right: -9px;
}

.cart-box {
    max-width: 250px;
    position: relative;
    margin: 10px 0 0 auto;
}

.cart-items-wrap {
    position: absolute;
    top: 135%;
    right: 0;
    background: #fff;
    z-index: 999;
    min-width: 280px;
    border: 1px solid #ddd;
    display: none;
}

.cart-items {
    max-height: 400px;
    overflow: auto;
}

.no-product {
    padding: 10px;
    color: #aaa;
    text-align: center;
}

.cart-items-wrap .pro-img img {
    width: 50px;
    height: auto;
    margin: auto;
}

.cart-items-wrap .pro-img {
    float: left;
    width: 80px;
    text-align: center;
    border: 1px solid #eee;
    padding: 5px;
}

.cart-items-wrap .pro-item-inner {
    padding: 15px;
    border: 0;
    border-bottom: 1px dotted #ccc;
    color: #000;
}

.cart-items-wrap .pro-item-inner:after {
    display: block;
    clear: both;
    content: '';
}

.cart-items-wrap .pro-btn {
    position: relative;
    text-align: left;
    margin-left: 90px;
}

.p-add-btn {
    font-size: 30px;
    font-weight: 700;
    color: #007bff;
}

a.fa.p-add-btn.pro-btn.fa-shopping-cart:hover {
    color: #14c37a;
}

a.fa.p-add-btn.lh-btn.fa-phone:hover {
    color: #14c37a;
}

.p-conpare {
    color: #546ce8;
    font-size: 13px;
    display: inline-block;
    margin-top: 5px;
    position: relative;
}

.cart-items-wrap .pro-btn span {
    display: none;
}

.cart-items-wrap .pro-btn:before {
    content: var(--custom-content);
    display: block;
    color: #f50;
    font-size: 13px;
    cursor: pointer;
}

.cart-items-wrap .pro-name {
    font-size: 13px;
    margin: 0 0 0 90px;
    text-align: left;
}

.cart-items-wrap .pro-price {
    text-align: left;
    margin: 5px 0 0 90px;
    color: var(--primary-variant);
    ;
    font-size: 1.7rem;
    font-weight: 600;
}

.cart-close {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 22px;
    top: 45px;
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    z-index: 99;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    display: none;
}

.cart-close:hover {
    background: #f50;
}

.pro-btn.disabled span {
    background: #aaa;
    pointer-events: none;
    cursor: default;
    color: #ddd;
}

.cart-total {
    display: none;
    color: #000;
    padding: 10px;
}

.cart-total span {
    color: var(--primary-variant);
    ;
    font-size: 2rem;
    font-weight: 700;
}

.checkout-btn {
    margin-top: 10px;
}

.checkout-btn a {
    display: block;
    padding: 5px 10px;
    background: #16b916;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.checkout-btn a:hover {
    background: green;
}

.slide-visible {
    display: block;
}

.fade-visible {
    display: block;
}


/*===== Footer Page =====*/

.main-footer {
    background: #ffffff;
    margin-block-start: 35px;
}

.main-footer .main-footer--top {
    padding: 32px 0 0;
}

.container-fluid {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

.main-footer .footer-col {
    padding-bottom: 12px;
}

.main-footer h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    position: relative;
    line-height: 22px;
    text-transform: uppercase;
}

.main-footer h4 span {
    font-weight: normal;
}

.main-footer .main-footer--top .list-info p {
    line-height: 22px;
    margin-bottom: 8px;
}

.main-footer .main-footer--top .list-info p>span {
    padding-right: 5px;
    display: inline-block;
}

.main-footer .main-footer--top .list-info a {
    color: #1982f9;
    font-weight: 600;
}

.main-footer .main-footer--top .list-info a span {
    color: #111111;
    font-weight: normal;
}

.main-footer .main-footer--top .list-pay,
.main-footer .main-footer--top .list-ship {
    list-style: none;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -2px;
}

.main-footer .main-footer--top .list-pay li,
.main-footer .main-footer--top .list-ship li {
    width: calc(100% / 4);
    display: inline-flex;
    padding: 2px;
}

img {
    max-width: 100%;
}

.main-footer .toggle-footer .footer-title .icon-title {
    display: none;
}

.main-footer .footer-col ul {
    margin-bottom: 10px;
}

.main-footer .footer-col ul li {
    display: block;
    padding-bottom: 8px;
    position: relative;
}

@media (min-width: 992px) {
    .main-footer .main-footer--copyright {
        padding-top: 16px;
    }
}

.main-footer .main-footer--copyright {
    background: #ffffff;
}

.main-footer .main-footer--copyright .line {
    padding: 16px 0;
    border-top: 1px solid #ececec;
}

.main-footer .main-footer--copyright .footer-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 22px;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-footer .main-footer--copyright .footer-content {
    width: 100%;
    margin-left: 16px;
}

.main-footer .social-list {
    display: flex;
    align-items: center;
}

.main-footer .social-list a {
    display: inline-flex;
    margin-right: 12px;
}

.main-footer .social-list a img {
    position: relative;
    height: 32px;
}

.main-footer .main-footer--copyright .logo-footer img {
    height: 52px;
}


/*===== AN PHAT detail page =====*/

.box-pro-container {
    margin: 24px 0 20px 0;
    border-top: 3px solid #3d52bf;
    position: relative;
    min-height: 472px;
}

.box-pro-container::before {
    content: '';
    position: absolute;
    left: 155px;
    top: -9px;
    height: 8px;
    width: 145px;
    border-bottom: 6px solid #3d52bf;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.box-pro-container .box-title-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.box-pro-container .box-title {
    background: #546ce8;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 28px 10px 15px;
    font-size: 16px;
    margin: 0;
    position: relative;
}

.box-pro-container .box-title::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -24px;
    border-top: 39px solid #546ce8;
    border-right: 25px solid transparent;
}

.box-pro-container .child-title a:first-child {
    margin: 0 0 0 38px;
    padding: 0;
    border: 0;
}

.box-pro-container .child-title a {
    display: inline-block;
    font-weight: 300;
    padding-left: 15px;
    margin-left: 15px;
    border-left: 1px solid #999;
    text-transform: uppercase;
    line-height: 1;
}

.box-pro-container .view-all,
.showroom-page .view-all,
.blog-ver-2020 .view-all,
.product-list-page .view-all,
.warranty-page .view-all,
.search-modal .view-all,
.voucher .view-all {
    /* display: block; */
    /* width: 249px; */
    text-align: center;
    color: #3d52bf;
    border: 1px solid #3d52bf;
    /* padding: 6px; */
    text-transform: uppercase;
    /* margin: 22px auto 17px auto; */
}

.box-pro-container .view-all:hover,
.showroom-page .view-all:hover,
.blog-ver-2020 .view-all:hover,
.product-list-page .view-all:hover,
.warranty-page .view-all:hover,
.search-modal .view-all:hover {
    color: #fff;
    background: #3d52bf;
}

.voucher .button-check-discount.view-all:hover {
    color: #fff;
    background: #18a31c;
}

.voucher .button-remove-discount.view-all:hover {
    color: #fff;
    background: #e31616;
}

.banner-under-product-hot {
    margin: 21px 0 25px 0;
}

.banner-under-product-hot a {
    display: block;
    width: calc(50% - 2px);
}

.banner-under-product-hot img {
    max-width: 100%;
    height: auto;
}

.pro-info-summary .item {
    display: block;
    margin-bottom: 5px;
}

.icon-star.star-0 {
    background-position: 0 -109px;
}

.icon-star {
    background-image: url(../images/star_sprite.png);
    width: 96px;
    height: 17px;
    vertical-align: text-bottom;
    display: inline-block;
    background-repeat: no-repeat;
}

.pro_info-price-container {
    background: #f1f1f1;
    padding: 15px;
    margin: 20px 0;
    position: relative;
}

.pro_info-price-container .spec-count {
    position: absolute;
    right: 10px;
}

.store-address-container {
    margin-block: 24px 12px;
}

.pro-button-container .btn-buyNow {
    background: #ce0707;
    border-color: #ce0707;
}

.pro-button-container a {
    display: block;
    width: calc(50% - 5px);
    line-height: 1.4;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #fff;
    padding: 6px;
    border: 1px solid transparent;
}

.pro-button-container .btn-addCart {
    color: #526ae7;
    border-color: #526ae7;
}

.pro-button-container a {
    display: block;
    width: calc(50% - 5px);
    line-height: 1.4;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #fff;
    padding: 6px;
    border: 1px solid transparent;
}

.blue {
    color: #546ce8;
}

.pro-button-container .btn-payinstall {
    background: #546ce8;
    border-color: #546ce8;
}

.pro-button-container a {
    display: block;
    width: calc(50% - 5px);
    line-height: 1.4;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #fff;
    padding: 6px;
    border: 1px solid transparent;
}

.product-detail-page .icon-payment-container {
    margin: 14px 0 0 0;
}

.icon-payment-container .icon-payment {
    display: block;
    height: 30px;
    margin-top: 5px;
    background-position: -7px -498px;
    width: 360px;
}

.icon {
    background: url(../images/sprite-2020.png?v=1) no-repeat;
}

.product-spec-group .item-content {
    overflow: hidden;
}

.popup-spec table,
.popup-spec td,
.popup-spec tr,
.item-content table,
.item-content td,
.item-content tr {
    border: 1px solid #ccc;
    padding: 1px 5px;
}

table {
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1620px) {
    .product-info-container .product-detail-info-right {
        width: calc(100% - 900px);
    }
    .product-info-container .product-detail-info-center {
        width: 350px;
    }
    .product-info-container .product-detail-info-left {
        width: 550px;
    }
}

.product-info-container .product-detail-info-left {
    width: 350px;
}

.product-info-container .product-detail-info-center {
    width: 550px;
}

.product-info-container .product-detail-info-right {
    width: calc(100% - 900px);
    font-size: 14px;
}

.product-detail-page .pd-static-item {
    margin-bottom: 15px;
}

.product-detail-page .pd-static-item .title {
    background: #546ce8;
    color: #fff;
    line-height: 18px;
    font-weight: 500;
    padding: 10px 15px;
    position: relative;
    border-radius: 5px 5px 0 0;
    text-transform: uppercase;
    margin: 0;
}

.product-detail-page .pd-static-item .static-info {
    padding: 10px 12px;
    border: 1px solid #e1e1e1;
    border-top: none;
    border-radius: 0 0 5px 5px;
    line-height: 24px;
}

.product-info-container .store-address {
    color: #1b95e0;
}

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

.bg-white {
    background-color: #fff !important;
}

.product-detail-page .pro-button-container a:hover {
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}


/* Slider CSS Start  */

.thumbnail_slider {
    max-width: 700px;
    margin: 30px auto;
}

.splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 400px; */
    /* width: 580px; */
    overflow: hidden;
    transition: .2s;
    border-width: 2px !important;
    margin: 10px 4px;
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    box-shadow: 2px 3px 8px #000000a3;
}

.splide__slide img {
    width: auto;
    height: auto;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}


/* Slider CSS End  */


/*===== cart container =====*/

.cart-container {
    width: 790px;
    margin: auto auto 20px auto;
    background: #fff;
    padding: 20px;
}

.red {
    color: #db0006 !important;
}

#tbl_list_cart tr td {
    border-top: solid 1px #ddd;
    padding: 10px 5px;
}

td {
    vertical-align: baseline;
}

.js-item-row p {
    margin-bottom: 5px;
}

.clear {
    clear: both;
}

@media (min-width: 1200px) {
    select,
    textarea,
    input {
        font-size: 14px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

button,
input,
select {
    outline: none !important;
}

.cart-select-quantity {
    padding: 4px;
}

.cart-select-quantity .minus {
    border-radius: 3px 0 0 3px;
}

.cart-select-quantity span,
.cart-select-quantity a {
    display: inline-block;
    border: solid 1px #ccc;
    width: 29px;
    text-align: center;
    line-height: 29px;
    margin: 0 -4px;
    vertical-align: top;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

.cart-select-quantity input {
    height: 31px;
    width: 40px;
    text-align: center;
    border: solid 1px #ccc;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
    border-right: 0;
}

.cart-select-quantity .plus {
    border-radius: 0 3px 3px 0;
}

.cart-select-quantity span,
.cart-select-quantity a {
    display: inline-block;
    border: solid 1px #ccc;
    width: 29px;
    text-align: center;
    line-height: 29px;
    margin: 0 -4px;
    vertical-align: top;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

#js_voucher_input {
    width: 300px;
    height: 50px;
    border: solid 1px #ddd;
    padding-left: 5px;
    margin-right: 10px;
    border-radius: 3px;
}

.voucher {
    display: flex;
}

@media (min-width: 1200px) {
    select, textarea, input {
        font-size: 14px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

.cart-page .button {
    border: 0;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    background: #db0006;
    color: #fff;
    margin: 0;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 3px;
}


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

.header-top-container {
    background: linear-gradient(to right, rgb(0 0 0 / 70%), rgb(67, 67, 67));
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: distribute !important;
    justify-content: space-between !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

header-top-container .header-icon {
    position: relative;
}

.header-top-container .title-group {
    color: #fff;
    font-size: 13px;
    float: left;
    height: 26px;
    line-height: 26px;
    margin: 7px 0 7px 7px;
    padding: 0 11px;
    border-radius: 25px;
}

.text-24 {
    font-size: 24px;
}

.clear.space10px {
    padding: 10px;
}

.cart-container {
    width: 790px;
    margin: auto auto 20px auto;
    background: #fff;
    padding: 20px;
}

.cart-container>h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
}

.hide,
.none {
    display: none;
}

.clear {
    clear: both;
}

@media (min-width: 1200px) {
    select,
    textarea,
    input {
        font-size: 14px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

.title_box_cart {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 6px;
}

.box-cart-user-info .sex {
    overflow: hidden;
    margin-bottom: 15px;
    margin-top: 15px;
}

.box-cart-user-info input[type="text"],
.box-cart-user-info select,
.box-cart-user-info textarea {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #ccc;
}

.box-cart-user-info textarea {
    height: 50px;
    padding: 5px 10px;
}

.box-cart-user-info input[type="text"],
.box-cart-user-info select,
.box-cart-user-info textarea {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #ccc;
}

.title_box_cart {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 6px;
}

.box-cart-user-info table td {
    padding: 3px 0;
}

.checkbox input,
.radio input {
    display: none;
}

.radio input:checked~.icon {
    background: #ce0707;
}

.checkbox input:checked~.icon,
.radio input:checked~.icon {
    font-family: "FontAwesome";
}

.radio .icon {
    border-radius: 50% !important;
    background: #ddd;
    overflow: hidden;
}

.checkbox .icon,
.radio .icon {
    height: 15px;
    width: 15px;
    background: #ccc;
    display: inline-block;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    margin-top: -2px;
}

.icon {
    background: url(../images/sprite-2020.png?v=1) no-repeat;
}

.radio input:checked~.icon:before {
    color: #fff;
}

.checkbox input:checked~.icon:before,
.radio input:checked~.icon:before {
    content: "\f00c";
    display: inline-block;
    line-height: 15px;
    height: 15px;
    position: absolute;
    font-size: 13px;
    color: #ce0707;
    left: 1px;
}

.cart-page #btn-submit {
    display: inline-block;
    background: #ccc;
    padding: 0 25px;
    line-height: 30px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border-radius: 3px;
    border: solid 1px #D68731;
    text-shadow: 1px 1px 2px #666;
    border-color: #546CE8;
    background-color: #546CE8;
}


/*===== Check Guarantee =====*/

@media (min-width: 1620px) {
    .warranty-page .warranty-container {
        padding: 50px 0;
    }
}

.warranty-page .warranty-container {
    background: #fff;
    padding: 50px 20px;
}

.warranty-page .warranty-group {
    margin: auto;
}

.warranty-page .box-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    margin-bottom: 30px;
}

.warranty-page .warranty-options-group {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 30px 0;
}

.warranty-page .warranty-options-group a {
    font-size: 18px;
    line-height: 21px;
    color: #000;
    margin: 0 10px;
    position: relative;
    padding-left: 27px;
    margin-block: 10px;
}

.warranty-page .warranty-options-group .circle,
.warranty-page .warranty-list-group .circle {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #C2C2C2;
    background: #fff;
    position: absolute;
    left: 0;
    cursor: pointer;
}

.warranty-page .warranty-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.warranty-page .warranty-input-group .warranty-input-holder {
    width: 660px;
    margin-right: 20px;
    position: relative;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
}

.warranty-page .warranty-input-group input {
    width: calc(100% - 136px);
    height: 48px;
    background: #FFF;
    border: 0;
    font-size: 16px;
    margin: 0;
    padding: 0 0 0 10px;
    border-radius: 5px;
}

.warranty-page .warranty-input-holder button {
    background: #546CE8;
    border-radius: 0 5px 5px 0;
    color: #FFF;
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 136px;
    text-align: center;
    border: 0;
    padding: 0;
    height: 49px;
}

.warranty-page .active .circle::before,
.warranty-page .checked .circle::before {
    content: '';
    background: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.warranty-page .active .circle::after,
.warranty-page .checked .circle::after {
    content: '';
    background: #546CE8;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.warranty-page .active .circle,
.warranty-page .checked .circle {
    background: #546CE8;
    border-color: #546CE8;
}

.warranty-page table {
    display: block;
}

.warranty-page tr,
.warranty-page td,
.warranty-page tbody,
.warranty-page tfoot {
    display: block;
}

.warranty-page thead {
    display: none;
}

.warranty-page tr {
    padding-bottom: 10px;
}

.warranty-page td {
    padding: 10px 10px 0;
    text-align: center;
}

.warranty-page td:before {
    content: attr(data-title);
    color: #7a91aa;
    text-transform: uppercase;
    font-size: 16px;
    padding-right: 10px;
    display: block;
}

.warranty-page table {
    width: 100%;
}

.warranty-page th {
    text-align: left;
    font-weight: 700;
}

.warranty-page thead th {
    background-color: #546ce8;
    color: #fff;
    border: 1px solid #202932;
}

.warranty-page tfoot th {
    display: block;
    padding: 10px;
    text-align: center;
    color: #b8c4d2;
}

.warranty-page .button {
    line-height: 1;
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    padding: 8px;
    background-color: #c03a2b;
}

.warranty-page .select {
    padding-bottom: 20px;
    border-bottom: 1px solid #28333f;
}

.warranty-page .select:before {
    display: none;
}

.warranty-page .detail {
    width: 100%;
    height: 100%;
    padding: 40px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.warranty-page .detail.open {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.warranty-page .detail-container {
    margin: 0 auto;
    padding: 90px 40px;
    max-width: 100%;
}

.warranty-page dl {
    margin: 0;
    padding: 0;
}

.warranty-page dt {
    font-size: 2.2rem;
    font-weight: 300;
}

.warranty-page dd {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    padding-bottom: 5px;
    border-bottom: 1px solid #ac2647;
    box-shadow: 0 1px 0 #c52c51;
}

.warranty-page .close {
    text-align: center;
    margin: auto;
    width: 100%;
    background: #d92020;
    padding: 12px;
    color: #fff;
    font-weight: 300;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    line-height: 1;
    font-size: 1.8rem;
    right: 40px;
    top: 20px;
    -moz-transition: border 0.3s linear;
    -o-transition: border 0.3s linear;
    -webkit-transition: border 0.3s linear;
    transition: border 0.3s linear;
}

.warranty-page .close:hover,
.warranty-page .close:focus {
    background-color: #a82545;
    border: 1px solid #a82545;
}

@media (min-width: 460px) {
    .warranty-page td {
        text-align: left;
    }
    .warranty-page td:before {
        display: inline-block;
        text-align: right;
        width: 140px;
    }
    .warranty-page .select {
        padding-left: 160px;
    }
}

@media (min-width: 720px) {
    .warranty-page table {
        display: table;
    }
    .warranty-page tr {
        display: table-row;
    }
    .warranty-page td,
    .warranty-page th {
        display: table-cell;
    }
    .warranty-page tbody {
        display: table-row-group;
    }
    .warranty-page thead {
        display: table-header-group;
    }
    .warranty-page tfoot {
        display: table-footer-group;
    }
    .warranty-page td {
        border: 1px solid #28333f;
    }
    .warranty-page td:before {
        display: none;
    }
    .warranty-page td,
    .warranty-page th {
        padding: 10px;
    }
    .warranty-page tr:nth-child(2n+2) td {
        background-color: transparent;
    }
    .warranty-page tfoot th {
        display: table-cell;
    }
    .warranty-page .select {
        padding: 10px;
    }
}


/*===== Showroom =====*/

.showroom-container .left-group {
    width: 100%;
    margin-right: 20px;
    float: left;
    margin-block-end: 20px;
}

@media (min-width: 1620px) {
    .showroom-container .left-group {
        width: 100%;
    }
}

.showroom-container .left-group .item-title {
    border-bottom: 2px solid #222;
}

.showroom-container .item-title {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 10px;
}

.showroom-container .left-group .item:nth-child(1),
.showroom-container .left-group .item:nth-child(2) {
    margin-top: 0;
}

.showroom-container .left-group .item {
    margin: 30px 20px 0 0;
    width: calc(50% - 20px);
}

.showroom-page .map-container {
    cursor: pointer;
}

.showroom-page .map-container p {
    color: #eedd0b;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 1px solid #eedd0b;
    line-height: 1.2;
    transition: .2s all;
}

.showroom-page .map-container iframe {
    display: block;
}

iframe {
    max-width: 100%;
}

.showroom-page .map-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.showroom-container .right-group {
    float: left;
    width: 330px;
}

.clearfix::after {
    content: '';
    clear: both;
    display: block;
}

.showroom-container .right-group .text-container {
    background: 0;
    padding: 0;
    border-radius: 0;
    margin-top: 30px;
}

.text-html-right .text-container {
    background: #f3f3f3;
    border-radius: 6px;
    padding: 15px 10px 20px 20px;
}

.showroom-container .right-group .text-container .item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.text-html-right .item {
    margin-bottom: 18px;
}

.font-300 {
    font-weight: 300;
}

.text-html-right .icon-sell {
    background-position: -425px -49px;
}

.text-html-right .icon {
    width: 35px;
    height: 40px;
    margin-right: 12px;
    float: left;
}

.text-html-right .icon-screen {
    background-position: -419px -103px;
}

.text-html-right .icon-shield {
    background-position: -422px -157px;
}

.showroom-page .map-container:hover::after,
.showroom-page .map-container:hover p {
    display: none
}

.showroom-page .left-group .title {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* margin-block: 8px 4px; */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    /* line-height: 2rem; */
    /* margin: 12px 0 0; */
    /* min-height: 4rem; */
    white-space: normal;
    display: block;
    height: 38px;
}

.showroom-page .left-group .title-email {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* margin-block: 8px 4px; */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2rem;
    /* margin: 12px 0 0; */
    /* min-height: 4rem; */
    white-space: normal;
    display: block;
    /* height: 38px; */
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


/*===== News Page =====*/

.blog-ver-2020 {
    /* font-family: Helvetica, Arial, sans-serif; 
  line-height: 1.5;
  font-size: 1rem; */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.blog-ver-2020 .list-blog-type-1 .blog-item {
    margin-bottom: 34px;
}

.blog-ver-2020 .blog-item .b-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.blog-ver-2020 a {
    text-decoration: none !important;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
}

.blog-ver-2020 a {
    background-color: transparent;
    color: blue;
    display: inline-block;
    -webkit-text-decoration-skip: objects;
}

.blog-ver-2020 .list-blog-type-1 .blog-item .b-img img {
    width: 380px;
    height: 220px;
    -o-object-fit: contain;
    object-fit: contain;
}

.blog-ver-2020 .blog-item .b-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.blog-ver-2020 img {
    border-style: none;
}

.blog-ver-2020 .list-blog-type-1 .blog-item .b-link {
    font-size: 18px;
    margin-bottom: 10px;
    -webkit-line-clamp: 2;
}

.blog-ver-2020 .blog-item .b-link {
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-ver-2020 .list-blog-type-1 .blog-item .other-view .b-author {
    display: none;
}

.blog-ver-2020 .blog-item .other-view .b-author {
    color: #888888;
    font-size: 13px;
    font-weight: 300;
    margin-right: 10px;
}

.blog-ver-2020 .blog-item .other-view .b-author a {
    color: #536be8;
    text-transform: uppercase;
    font-weight: bold;
}

.blog-ver-2020 .blog-item .other-view time {
    color: #888888;
    font-size: 12px;
    font-weight: 300;
    margin-right: 10px;
}

.blog-ver-2020 .blog-item .other-view .comment {
    color: #888888;
    font-size: 12px;
    font-weight: 300;
    margin-right: 10px;
}

.blog-ver-2020 .blog-item .other-view .view {
    color: #888888;
    font-size: 12px;
    font-weight: 300;
    margin-right: 10px;
}


/*===== News Detail Page =====*/

.blog-ver-2020 .news-detail .detail-head {
    margin-bottom: 30px;
    margin-top: 20px;
}

.blog-ver-2020 h1,
.blog-ver-2020 h2,
.blog-ver-2020 h3,
.blog-ver-2020 h4,
.blog-ver-2020 h5,
.blog-ver-2020 h6 {
    line-height: 1.15;
}

.blog-ver-2020 h1 {
    font-size: 27px;
    margin: 0.67em 0;
    font-weight: 700;
}

.blog-ver-2020 .news-detail .detail-head .author {
    margin-top: 18px;
}

.blog-ver-2020 .news-detail .detail-head .author img {
    width: 29px;
    height: 29px;
    border-radius: 100px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-right: 10px;
}

.blog-ver-2020 .news-detail .detail-head .author span {
    font-size: 12px;
    color: #888888;
}

.blog-ver-2020 .news-detail .emtry-detail .share {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 70px;
    max-width: 70px;
}

.tog_fixed {
    border: 2px solid #333;
    border-radius: 5px;
    background: #f3f3f3;
    position: fixed;
    left: 7px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -100%;
    transition: .8s all;
}

.tog_fixed .icon-bar {
    display: block;
    width: 27px;
    height: 22px;
    border: 3px solid #222;
    border-left: 0;
    border-right: 0;
    position: absolute;
    left: 10px;
}

.tog_fixed .icon-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: #222;
    top: 6px;
}

.list-blog-type-1 .blog-item {
    width: 100%;
}


/*===== 404 Error Page =====*/

.page-list .section {
    padding: 4rem 2rem;
}

.page-list .section .error {
    font-size: 150px;
    color: #008b62;
    text-shadow: 1px 1px 1px #00593e, 2px 2px 1px #00593e, 3px 3px 1px #00593e, 4px 4px 1px #00593e, 5px 5px 1px #00593e, 6px 6px 1px #00593e, 7px 7px 1px #00593e, 8px 8px 1px #00593e, 25px 25px 8px rgba(0, 0, 0, 0.2);
}

.page-list .page {
    margin: 2rem 0;
    font-size: 20px;
    font-weight: 600;
    color: #444;
}

.page-list .back-home {
    display: inline-block;
    border: 2px solid #222;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.75rem 1rem 0.6rem;
    transition: all 0.2s linear;
    box-shadow: 0 15px 15px -11px rgba(0, 0, 0, 0.4);
    background: #222;
    border-radius: 6px;
}

.page-list .back-home:hover {
    background: #222;
    color: #ddd;
}

.column-left {
    flex-basis: 60%;
}

.column-right {
    flex-basis: 40%;
}

.blog-ver-2020 .box-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    margin-bottom: 30px;
}


/*===== Snicky banner =====*/

.sticky-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 120px;
    margin: auto;
    z-index: 1;
    width: 1650px;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.sticky-banner .sticky-banner-target .medium.left {
    position: absolute;
    left: 10px;
}

.sticky-banner .sticky-banner-target .medium {
    width: 100px;
    display: none;
}

.sticky-banner .sticky-banner-target .aspect-ratio {
    position: relative;
    overflow: hidden;
    display: block;
    padding-bottom: calc((var(--height-img) / var(--width-img))* 100%);
}

.sticky-banner .sticky-banner-target .aspect-ratio img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sticky-banner .sticky-banner-target img {
    border-radius: 4px;
}

.sticky-banner .sticky-banner-target .medium.right {
    position: absolute;
    right: 10px;
}

.sticky-banner .sticky-banner-target .large.left {
    position: absolute;
    left: 15px;
}

.sticky-banner .sticky-banner-target .large {
    width: 150px;
}

.sticky-banner .sticky-banner-target .large.right {
    position: absolute;
    right: 15px;
}


/*===== Sub header =====*/

.sub-header {
    background: #E30019;
    border-bottom: 1px solid #E30019;
    position: relative;
    z-index: 2;
    top: 64px;
    height: 40px;
}

@media (min-width: 992px) {
    .sub-header {
        background: #ffffff;
        border-bottom: 1px solid #E0E0E0;
    }
}

@media (min-width: 992px) {
    .list-submenu .item-submenu {
        width: auto;
    }
}

.list-submenu .item-submenu {
    display: inline-block;
    flex: auto;
    -ms-flex: auto;
    max-width: initial;
}

@media (min-width: 992px) {
    .list-submenu.list-submenu--desktop .item-submenu a {
        padding: 10px 32px;
    }
}

@media (min-width: 992px) {
    .list-submenu .item-submenu:not(:last-child) a {
        position: relative;
    }
}

@media (min-width: 992px) {
    .list-submenu .item-submenu:not(:last-child) a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: #CFCFCF;
        height: 62%;
        width: 1px;
    }
}

.list-submenu {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.25s ease 0s;
}

.list-submenu.list-submenu--desktop .item-submenu a {
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    padding: 10px;
}

.list-submenu .item-submenu a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.list-submenu .item-submenu a span.icon {
    width: 18px;
    margin-right: 7px;
}

.list-submenu .item-submenu a span {
    display: inline-block;
}

.list-submenu .item-submenu a span.text {
    white-space: nowrap;
}

.list-submenu .item-submenu a span {
    display: inline-block;
}


/*===== Fancybox =====*/

.slick-slider .slick-prev,
.slick-slider .slick-next {
    z-index: 100;
    font-size: 2.5em;
    height: 40px;
    width: 40px;
    margin-top: -20px;
    color: #B7B7B7;
    position: absolute;
    top: 50%;
    text-align: center;
    color: #000;
    opacity: .3;
    transition: opacity .25s;
    cursor: pointer;
}

.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
    opacity: .65;
}

.slick-slider .slick-prev {
    left: 0;
}

.slick-slider .slick-next {
    right: 0;
}

.slick-prev:before, .slick-next:before {
    color: black;
}

#detail .product-images {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #eee;
}

#detail .product-images li,
#detail .product-images figure,
#detail .product-images a,
#detail .product-images img {
    display: block;
    outline: none;
    border: none;
}

#detail .product-images .main-img-slider figure {
    margin: 0 auto;
    padding: 0 2em;
}

#detail .product-images .main-img-slider figure a {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

#detail .product-images .main-img-slider figure a img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#detail .product-images .thumb-nav {
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
}

#detail .product-images .thumb-nav.slick-slider .slick-prev,
#detail .product-images .thumb-nav.slick-slider .slick-next {
    font-size: 1.2em;
    height: 20px;
    width: 26px;
    margin-top: 0px;
}

#detail .product-images .thumb-nav.slick-slider .slick-prev {
    margin-left: -5px;
}

#detail .product-images .thumb-nav.slick-slider .slick-next {
    margin-right: -5px;
}

#detail .product-images .thumb-nav li {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

#detail .product-images .thumb-nav li img {
    display: block;
    width: 100%;
    max-width: 75px;
    margin: 0 auto;
    border: 2px solid transparent;
    -webkit-transition: border-color .25s;
    -ms-transition: border-color .25s;
    -moz-transition: border-color .25s;
    transition: border-color .25s;
}

#detail .product-images .thumb-nav li:hover,
#detail .product-images .thumb-nav li:focus {
    border-color: #999;
}

#detail .product-images .thumb-nav li.slick-current img {
    border-color: #d12f81;
}


/*===== Filter =====*/

.collection-layout .collection-filter {
    padding: 0 24px;
}

.collection-layout .collection-filter .collection-sortby {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}

.collection-layout .collection-filter .sortby-control {
    position: relative;
}

.collection-layout .collection-filter .sortby-control .listbox__button {
    position: relative;
    z-index: 1;
    cursor: pointer;
    outline: none;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-size: 13px;
    line-height: 14px;
    padding: 5px 29px 5px 11px;
    width: 100%;
    background: transparent;
    text-align: left;
    display: inline-flex;
    align-items: center;
}

.collection-layout .collection-filter .sortby-control .listbox__button svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.collection-layout .collection-filter .sortby-control .listbox__button .listbox__text {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 5px;
}

.collection-layout .collection-filter .sortby-control .listbox__button .listbox__value {
    font-weight: 600;
}

.collection-layout .collection-filter .sortby-control .listbox__button:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 11px;
    margin: auto;
    height: 5px;
    width: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.35858 5.35858L0.841421 0.841421C0.715428 0.715428 0.804661 0.5 0.982842 0.5H10.0172C10.1953 0.5 10.2846 0.715428 10.1586 0.841421L5.64142 5.35858C5.56332 5.43668 5.43668 5.43668 5.35858 5.35858Z' fill='%23111111'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper.show-sort {
    display: block;
    visibility: visible;
    opacity: 1;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper {
    position: absolute;
    z-index: 3;
    right: 0;
    margin: 0;
    width: 170px;
    border-radius: 4px;
    top: 110%;
    background: #FFFFFF;
    border: 1px solid #CFCFCF;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none;
    visibility: hidden;
    opacity: 0;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper ul {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    list-style-type: none;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper ul li {
    display: flex;
    position: relative;
    cursor: pointer;
    padding: 7px 16px;
    background: #fff;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper ul li input {
    opacity: 0;
    visibility: hidden;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper ul li label {
    margin-bottom: 0;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.collection-layout .collection-filter .sortby-control .listbox__list-wrapper ul li.active label {
    font-weight: 600;
}


/*===== BANNER SLIDER PRODUCTS =====*/


/**
  Setup for code demo only
*/

:root {
    --carousel-height: 362px;
}


/**
  Wrapper
*/

.carousel {
    position: relative;
}


/**
  Controls - pause/resume, previous, and next buttons
*/


/* Resets for all buttons */

.is-control {
    background: none;
    color: rgba(0, 0, 0, .7);
    border: 0;
    cursor: pointer;
    transition: all .2s linear;
}

.is-control:focus {
    outline: none;
    background-color: rgba(0, 0, 0, .8);
    color: rgba(255, 255, 255, 1);
}


/* Pause/resume button */

.rotation-button {
    position: absolute;
    bottom: 5px;
    left: 20px;
    padding: 10px 15px;
    z-index: 1;
    font-size: 20px;
    border-radius: 5px;
    color: #c3bcbc;
}

.rotation-button .pause-container,
.rotation-button .resume-container {
    display: none;
}

.rotation-button .pause-container.is-visible,
.rotation-button .resume-container.is-visible {
    display: block;
}


/* Previous slide button */

.previous-button {
    position: absolute;
    left: 0;
    top: calc(var(--carousel-height)/2 - 40px);
    padding: 5px 15px;
    z-index: 1;
    font-size: 40px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 0;
    color: #c3bcbc;
}


/* Next slide button */

.next-button {
    position: absolute;
    right: 0;
    top: calc(var(--carousel-height)/2 - 40px);
    padding: 5px 15px;
    z-index: 1;
    font-size: 40px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0;
    color: #c3bcbc;
}


/**
    Slides container
  */

.slides {
    /** By default Slick absolutely positions it's slide dots under the slides and adds a bottom margin to prevent overlap with content that follows. Since we're moving the slide dots into the carousel itself, this margin is no longer needed. */
    margin-bottom: 0 !important;
}


/**
    Single slide
  */

.slide {
    position: relative;
    height: var(--carousel-height);
    background-color: white;
}


/* Make absolutely sure non-visible slides are hidden from all users */

.slide.is-hidden {
    visibility: hidden;
}

.slide .background-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}


/**
  Slide 2 content
*/

.slide .content {
    position: absolute;
    top: 20px;
    left: 5%;
    max-width: 400px;
    width: 50%;
    max-height: 70%;
    padding: 15px;
    white-space: normal;
    color: white;
    background-color: royalblue;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .3);
    border-radius: 3px;
}

.slide .content h2 {
    margin: 0;
    font-size: 1.7rem;
}

.slide .content p {
    margin: 0;
}

.slide .content .cta-link {
    display: inline-block;
    padding: 5px 10px;
    background-color: white;
    color: rgba(0, 0, 0, .7);
    text-decoration: none;
    font-weight: 800;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .3);
}

.slide .content .cta-link:focus,
.slide .content .cta-link:hover {
    text-decoration: underline;
    color: black;
}

.slide .content .cta-link:focus {
    outline: 3px solid rgba(0, 0, 0, 1);
}


/**
  Restyle the slide dots generated by Slick Slider
*/

.slick-dots {
    bottom: 10px;
}

.slick-dots li {
    margin: 0 2px;
}


/* Create a circle to serve as the slide dot */

.slick-dots li button {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, .3);
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    opacity: .7;
    transition: transform .2s linear;
}


/* Get rid of the Unicode • character that Slick injects, which screen readers may attempt to read out as "bullet" */

.slick-dots li button:before {
    content: '';
}


/* Give the focused slide dot a nice visible focus indicator */

.slick-dots li button:focus {
    box-shadow: 0 0 0 1px white, 0 0 0 4px hsl(204, 86%, 53%);
    outline: none;
}


/* Fade in on hover */

.slick-dots li button:hover {
    opacity: 1;
}


/* Leverage aria-current for styling to ensure we're using the attribute correctly */

.slick-dots li button[aria-current="true"] {
    background-color: rgba(0, 0, 0, 1);
    transform: scale(1.4);
}


/** Credits at bottom */

.credits {
    margin-top: 20px;
    margin-right: 20px;
    padding: 5px;
    float: right;
    font-size: 14px;
    color: black;
    text-decoration: none;
    opacity: .7;
}

.credits img {
    height: 30px;
    margin-left: 5px;
    margin-top: -2px;
    vertical-align: middle;
}

.credits:hover,
.credits:focus {
    opacity: 1;
}


/*===== ICON FONT =====*/

.i-next:before {
    position: absolute;
    right: 0;
}

.i-prev:before {
    position: absolute;
    left: 0;
}


/*===== LAZY LOADING =====*/

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid #000;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #000 transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

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

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