@keyframes animate-scroll {
    0% {
        opacity: 1;
        top: 29%;
    }

    15% {
        opacity: 1;
        top: 65%;
    }

    50% {
        opacity: 0;
        top: 65%;
    }

    100% {
        opacity: 0;
        top: 29%;
    }
}

@keyframes animateleftToRight {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes animateSlideInAndOut {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

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

    100% {
        opacity: 0;
    }
}

@keyframes animateFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animateFadeInLeft {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

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

@keyframes animatefadeInAndOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animateFadeInRight {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

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

@keyframes animateFadeInUp {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }

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

@keyframes animateZoomIn {
    0% {
        transform: scale(2);
        opacity: 1;
    }

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

@keyframes animateZoomOut {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

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

@keyframes animateZoomOut2 {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

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

@keyframes animateFadeIn3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.3;
    }
}

@keyframes animateLeftToRight {
    0% {
        transform: translateX(-15%);
    }

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

/* Text Style */
.ct-default-font-family {
    font-family:
        "Roboto", "Work Sans", "Sarabun", "Noto Naskh Arabic", "Padauk",
        "Kantumruy", sans-serif !important;
}

.ct-default-font-family h3 {
    border-left: none;
    padding-left: 0px;
}

.ct-default-font-family .slideTitle {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.ct-default-font-family .slideTitle::before,
.ct-default-font-family .slideTitle::after {
    content: "";
    flex: 1;
    width: 40px;
    border-bottom: 1px solid currentColor;
}

.ct-th-font-family {
    font-family: "Sarabun", sans-serif;
}

.ct-text-primary {
    color: #a2201c;
}

.ct-highlight {
    color: #a2201c;
}

.ct-italic {
    font-weight: 700;
    font-style: italic;
}

.ct-title-text {
    font-size: 2rem;
    line-height: 2.125rem;
    padding-bottom: 10px;
}

@media screen and (min-width: 767px) {
    .ct-title-text {
        font-size: 2.2rem;
    }
}

@media screen and (min-width: 992px) {
    .ct-title-text {
        font-size: 2.625rem;
        line-height: 2.75rem;
    }
}

.ct-subtitle-text {
    font-size: 1rem;
    margin: 15px auto 30px;
}

.ct-heading {
    font-weight: 700;
}

.ct-normal-text {
    font-weight: 400;
}

.ct-body-text {
    font-weight: 300;
}

.ct-pre-line {
    white-space: pre-line;
}

.ct-muted {
    font-size: 0.75rem;
    line-height: 0.875rem;
    font-weight: 300;
    color: #252525;
}

/* Image Style */

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Content Style */
.ct-feature-wrapper {
    width: 100%;
    height: auto;
    padding: 30px 0;
}

.ct-feature-wrapper .rtl-mode {
    text-align: right;
}

.ct-feature-wrapper .rtl-center-mode {
    text-align: right;
}

.ct-feature-wrapper .normal-center-mode {
    text-align: center;
}

.ct-feature-wrapper .normal-mode {
    text-align: left;
}

.ct-textbox {
    padding: 10px 0;
}

.ct-video-wrapper {
    margin: auto;
}

.ct-video-wrapper .ct-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Section Style */
section {
    max-width: 965px;
    width: 100%;
    margin: 20px auto;
}

@media screen and (min-width: 767px) {
    section {
        margin: 40px auto;
    }
}

/* Animation */
section.ct-animate {
    opacity: 0;
}

section.ct-animate.in-view {
    animation: animateFadeInUp 1000ms forwards;
}

.slide-up {
    opacity: 0;
    transform: translateY(10rem);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.22, 0.9, 0.27, 1);
    will-change: opacity, transform;
}

.slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.slide-up-content {
    opacity: 0;
    transform: translateY(10rem);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.22, 0.9, 0.27, 1);
    will-change: opacity, transform;
}

.slide-up-content.in-view {
    opacity: 1;
    transform: translateY(0);
}

.ct-animate-fade-in-right {
    opacity: 0;
}

.ct-animate-fade-in-right.in-view {
    animation: animateFadeInRight 1000ms forwards;
}

.ct-animate-fade-in-left {
    opacity: 0;
}

.ct-animate-fade-in-left.in-view {
    animation: animateFadeInLeft 1000ms forwards;
}

/* Video Showcase */
.ct-section-video-showcase {
    position: relative;
    margin: 50px auto 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* NOTE: Update Background Image Path */
    background:
        url("/products/refrigerators/image/skyline/h30-showcase-bg.png"),
        linear-gradient(to bottom, rgba(237, 237, 237, 0.8), rgb(237, 237, 237));
    background-size: contain;
    background-repeat: repeat-x;
}

@media screen and (min-width: 767px) {
    .ct-section-video-showcase {
        background: linear-gradient(to bottom,
                rgba(237, 237, 237, 0.8),
                rgb(237, 237, 237));
        margin: 50px auto;
    }
}

.ct-section-video-showcase .ct-video-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: black;
    aspect-ratio: 16/9;
    order: 2;
    z-index: 1;
}

@media screen and (min-width: 992px) {
    .ct-section-video-showcase .ct-video-wrapper {
        max-height: 540px;
    }
}

.ct-section-video-showcase .swiper-wrapper {
    margin: 0;
}

.ct-section-video-showcase .swiper-wrapper .swiper-slide {
    padding: 0;
}

.ct-section-video-showcase .ct-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: black;
}

.ct-section-video-showcase .ct-video-wrapper .ct-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(125deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0),
            rgb(255, 255, 255));
}

.ct-section-video-showcase .ct-hero-image {
    position: absolute;
    top: -15px;
    bottom: 0;
    left: 15px;
    right: 0;
    z-index: 3;
    max-width: 8.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.ct-section-video-showcase .ct-hero-image.in-view {
    animation: animateLeftToRight 500ms forwards;
}

@media screen and (min-width: 424px) {
    .ct-section-video-showcase .ct-hero-image {
        max-width: 10.35rem;
        top: -2.525rem;
    }
}

@media screen and (min-width: 426px) {
    .ct-section-video-showcase .ct-hero-image {
        max-width: 11rem;
    }
}

@media screen and (min-width: 640px) {
    .ct-section-video-showcase .ct-hero-image {
        max-width: 14rem;
    }
}

@media screen and (min-width: 768px) {
    .ct-section-video-showcase .ct-hero-image {
        top: -2rem;
        left: 2rem;
        max-width: 17rem;
    }
}

@media screen and (min-width: 992px) {
    .ct-section-video-showcase .ct-hero-image {
        position: absolute;
        top: -1rem;
        bottom: 0;
        left: 3rem;
        right: 0;
        height: auto;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 20rem;
    }
}

@media screen and (min-width: 1100px) {
    .ct-section-video-showcase .ct-hero-image {
        left: 1rem;
    }
}

.ct-section-video-showcase .ct-hero-wrapper {
    position: relative;
    z-index: 2;
    top: 0;
    order: 1;
    display: flex;
    justify-content: center;
    padding: 50px 25px;
}

@media screen and (min-width: 768px) {
    .ct-section-video-showcase .ct-hero-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        /* flexbox inside */
        flex-direction: column;
        /* stack vertically (or row if you want side-by-side) */
        align-items: flex-end;
        /* align content to right */
        justify-content: center;
        /* vertical center within box */
        background:
            /* NOTE: Update Background Image Path */
            url("/products/refrigerators/image/skyline/h30-elegant-design-object-honeycomb.png"),
            linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgb(255, 255, 255));
        background-size: cover;
        background-position: top right;
        background-repeat: no-repeat;
        /* optional semi-transparent bg */
        padding: 20px 10px;
        max-width: 40%;
        /* keep readable */
    }

    .ct-feature-wrapper[data-lang="vn"] .ct-section-video-showcase .ct-hero-wrapper {
        padding: 70px 15px 20px;
    }
}

@media screen and (min-width: 992px) {
    .ct-section-video-showcase .ct-hero-wrapper {
        padding: 70px 15px 20px;
    }
}

@media screen and (min-width: 1280px) {
    .ct-section-video-showcase .ct-hero-wrapper {
        padding: 70px 25px 20px;
    }
}

.ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper {
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
}

@media screen and (min-width: 321px) {
    .ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper {
        font-size: 1.675rem;
        line-height: 2rem;
        color: #4c4c4c;
        text-align: left;
    }
}

.ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper .ct-hero-text.in-view {
    animation: animateFadeInRight 500ms forwards;
}

@media screen and (min-width: 768px) {
    .ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper .ct-hero-text {
        font-size: 1.25rem;
        line-height: 1.375rem;
        color: #4c4c4c;
    }

    .ct-feature-wrapper[data-lang="vn"] .ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper .ct-hero-text {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
}

@media screen and (min-width: 992px) {
    .ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper .ct-hero-text {
        font-size: 1.875rem;
        line-height: 2rem;
        color: #4c4c4c;
    }

    .ct-feature-wrapper[data-lang="vn"] .ct-section-video-showcase .ct-hero-wrapper .ct-hero-inner-wrapper .ct-hero-text {
        font-size: 1.195rem;
        line-height: 1.5rem;
    }
}

.ct-section-video-showcase .ct-navigation-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 3;
    width: 100%;
    height: auto;
    margin: 70px 0 50px;
    z-index: 3;
}

.ct-section-video-showcase .ct-navigation-wrapper.in-view {
    animation: animateFadeInRight 500ms forwards;
}

.ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-text {
    font-size: 1.5rem;
    font-weight: 600;
    justify-content: center;
    display: flex;
}

@media screen and (min-width: 768px) {
    .ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-text {
        font-size: 1.25rem;
        line-height: 1.375rem;
        color: #4c4c4c;
    }

    .ct-feature-wrapper[data-lang="vn"] .ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-text {
        font-size: 0.875rem;
    }
}

@media screen and (min-width: 992px) {
    .ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-text {
        font-size: 1.5rem;
        line-height: 1.625rem;
    }

    .ct-feature-wrapper[data-lang="vn"] .ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-text {
        font-size: 1.195rem;
    }
}

.ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-swiper-list {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-swiper-list .ct-navigation-list {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-swiper-list .ct-navigation-list li {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    cursor: pointer;
}

.ct-section-video-showcase .ct-navigation-wrapper .ct-navigation-swiper-list .ct-navigation-list li.active {
    outline: 1px solid #a2201c;
    outline-offset: 4px;
}

.fade-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 563;
}

.fade-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 6s total loop duration, infinite loop, smooth easing */
    animation: crossFade 6s ease-in-out infinite;
}

.fade-img-container img.open {
    animation-delay: -3s !important;
}

/* Animation Timings for smooth cross-fading */
@keyframes crossFade {

    0%,
    100% {
        opacity: 1;
        /* Fully visible at the start and end */
    }

    45%,
    55% {
        opacity: 0;
        /* Fully hidden in the middle */
    }
}

/* YT Video */
@media screen and (min-width: 767px) {
    .ct-section-video-design {
        margin: 50px auto;
    }
}

.ct-section-video-design .ct-video-design-caption {
    width: 100%;
    margin: 8px auto;
    display: flex;
    justify-content: center;
}

section.ct-section-feature {
    margin: 0;
}

.ct-section-feature .ct-feature-title {
    font-size: 1.75rem;
}

.ct-section-feature .ct-hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
}

.ct-scroll {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    overscroll-behavior: none;
    line-height: 1.2;
}

.ct-scroll .ct-scroll-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 0;
}

.ct-scroll .ct-scroll-btn a {
    text-decoration: none;
    color: #474747;
}

.ct-scroll .ct-scroll-btn .mouse {
    position: relative;
    display: block;
    width: 35px;
    height: 55px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    border: 3px solid #000000;
    border-radius: 23px;
}

.ct-scroll .ct-scroll-btn .mouse>* {
    position: absolute;
    display: block;
    left: 50%;
    width: 8px;
    height: 10px;
    margin: -4px 0 0 -4px;
    background-color: #000000;
    border-radius: 8px;
    animation: animate-scroll 2500ms linear infinite;
}

.ct-section-wrapper {
    position: relative;
    z-index: 1;
}

/* Handle Illumination */
section.ct-section-handle-illumination {
    margin: 0;
}

.ct-section-handle-illumination {
    width: 100%;
    background:
        /* 1. Subtle light accent on the top right */
        radial-gradient(circle at top right,
            rgba(255, 255, 255, 0.08),
            transparent 40%),
        /* 2. FIXED: Simulates a diamond flare on the right using a conic gradient */
        conic-gradient(from 45deg at 85% 50%,
            transparent 25%,
            rgba(83, 84, 97, 0.2) 25%,
            rgba(83, 84, 97, 0.2) 50%,
            transparent 50%) no-repeat,
        /* 3. Base gradient with a deep, dark center and sharp highlights on the edge */
        linear-gradient(50deg, #05070b 0%, #17181f 40%, #17181f 65%, #535461 100%);
    color: #ffffff;
}

.ct-section-handle-illumination .container {
    padding: 0px;
}

.ct-section-handle-illumination .ct-section-handle-illumination-content {
    padding: 50px 20px;
}

/* New Era of Vacuum */
section.ct-section-new-era-of-vacuum {
    width: 100%;
    margin: 5px auto 0;
    position: relative;
    background: linear-gradient(to bottom, #000 95%, transparent 100%);
    color: #fff;
}

.ct-section-new-era-of-vacuum::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 2s ease 0.4s;
    background: url("/products/refrigerators/image/skyline/h30-elegant-design-honeycomb.png") repeat center;
}

.ct-section-new-era-of-vacuum.in-view::before {
    opacity: 0.7;
    mask-image: linear-gradient(to top, #fff 75%, transparent 100%);
}

section.ct-section-new-era-of-vacuum .ct-muted {
    width: 100%;
    margin: 5px auto 0;
    position: relative;
    background: #000;
    color: #fff;
}

.ct-section-new-era-of-vacuum img {
    position: relative;
    width: 100%;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 500ms ease-in-out;
    background:
        url("/products/refrigerators/image/skyline/h30-elegant-design-honeycomb.png") repeat center,
        linear-gradient(0deg, #000 0%, #17191c 50%, #000 100%);

    color: #fff;
    padding: 20px;

    border-bottom: 5px solid #a2201c;
    box-shadow: inset 0 -15px 30px -15px #000;
}

@media screen and (max-width: 767px) {
    .ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-header {
        padding: 8px 16px;
    }
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-header * {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-header.is-sticky {
    margin-top: 20px;
    transition: transform 500ms ease-in-out;
    background:
        url("/products/refrigerators/image/skyline/h30-elegant-design-honeycomb.png") repeat center,
        linear-gradient(60deg, #000 0%, #17191c 50%, #000 100%);
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .content {
    padding: 20px 0;
}

@media screen and (min-width: 767px) {
    .ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .content {
        padding: 40px 0;
    }
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-effortless-temperature-precision.content {
    padding-bottom: 0;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-new-era-of-vacuum-slides {
    background-color: #000;
    color: #fff;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-new-era-of-vacuum-slides .swiper-feature {
    position: relative;
    z-index: 10;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-new-era-of-vacuum-slides .swiper-feature.in-view {
    animation: animateFadeInUp 1000ms forwards;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-new-era-of-vacuum-slides .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space .ct-section-generous-space-video {
    padding: 10px 20px;
}

.ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space .ct-section-generous-space-content {
    padding: 20px;
}

@media screen and (min-width: 767px) {
    .ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space {
        padding: 40px 0;
    }

    .ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space .ct-section-generous-space-video,
    .ct-section-new-era-of-vacuum .ct-section-new-era-of-vacuum-content .ct-section-generous-space .ct-section-generous-space-content {
        padding: 20px auto;
    }
}

/* Swiper */
.swiper-slide {
    align-self: center;
    height: auto;
    padding: 0px 20px;
}

.swiper-wrapper {
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .swiper-wrapper {
        margin-bottom: 30px;
    }
}

.swiper-pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 12px;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #a2201c;
}

/* Rainbow divider */
.rainbow-divider {
    width: 220px;
    height: 3px;
    margin: 16px auto;
    border-radius: 999px;

    background: linear-gradient(135deg,
            #ff0000,
            /* Red */
            #ff7f00,
            /* Orange */
            #ffff00,
            /* Yellow */
            #00ff00,
            /* Green */
            #0000ff,
            /* Blue */
            #4b0082,
            /* Indigo */
            #9400d3,
            /* Violet */
            #ff0000);

    background-size: 300% 100%;

    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.15),
        0 0 20px rgba(111, 126, 158, 0.4);

    animation: rainbowFlow 12s linear infinite;
}

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

    to {
        background-position: 300% 50%;
    }
}

/* Smoke Ring */
.parent-container {
    position: relative;
    width: 100%;
    aspect-ratio: 965 / 414;
}

.smoke-ring {
    position: absolute;
    left: 50%;
    top: 57%;
    width: 25%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}

.ring {
    fill: none;
    stroke: white;
    stroke-linecap: round;
    filter: url(#smoke);
    transform-origin: center;
}

.ring1 {
    stroke-width: 10;
    opacity: 0.12;
    stroke-dasharray: 120 40 80 60 30 100;

    animation: rotate1 14s linear infinite;
}

.ring2 {
    stroke-width: 7;
    opacity: 0.22;
    stroke-dasharray: 20 50 80 25 15 90 40 30;

    animation: rotate2 9s linear infinite reverse;
}

.ring3 {
    stroke-width: 3;
    opacity: 0.45;
    stroke-dasharray: 8 25 12 45 18 20 10 35;

    animation: rotate3 7s linear infinite;
}

@keyframes rotate1 {
    from {
        transform: rotate(0deg) scale(0.98);
    }

    50% {
        transform: rotate(180deg) scale(1.02);
    }

    to {
        transform: rotate(360deg) scale(0.98);
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes rotate3 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Swiper */
@keyframes scroll-left-right {
    0% {
        transform: translateX(0);
    }

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

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

@keyframes center-fade-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

@keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}

/* Feature H30 */
.ct-section-feature-h30 .ct-feature-h30-image {
    height: 439px;
    width: 400px;
    background: linear-gradient(to right, #050505 0%, #282828 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
    position: relative;

}

.ct-section-feature-h30 .ct-feature-h30-image .ct-feature-h30-image-text {
    background: linear-gradient(to right, #050505 0%, #282828 100%);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 58px;
    width: 100%;
    z-index: 2;
    text-align: center;
    align-content: center;
    font-weight: 500;
    font-size: 1.4rem;
    white-space: nowrap;
}

.ct-section-feature-h30 .ct-feature-h30-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Space Saving */
.ct-section-space-saving .space-saving-extra-space1 {
    position: relative;
    width: 100%;
}

.ct-section-space-saving .ct-section-wrapper {
    margin: 25px auto;
}

.ct-section-space-saving .ct-section-wrapper .ct-section-inner-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 960px;
    margin: auto;
}

.ct-section-space-saving .ct-section-wrapper .ct-section-inner-wrapper .ct-space-saving-subtitle {
    width: 100%;
    margin: auto;
}

@media screen and (min-width: 767px) {
    .ct-section-space-saving .ct-section-wrapper .ct-section-inner-wrapper {
        gap: 50px;
    }
}

/* Dual Surround */
.ct-section-dual-surround .ct-section-dual-surround-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media screen and (min-width: 767px) {
    .ct-section-dual-surround .ct-section-dual-surround-image {
        width: 95%;
    }
}

.ct-section-dual-surround .ct-section-wrapper {
    margin: 0 auto;
    max-width: 370px;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 767px) {
    .ct-section-dual-surround .ct-section-wrapper {
        text-align: left;
    }
}

.ct-section-dual-surround .ct-section-wrapper .ct-section-dual-surround-description {
    width: 100%;
    margin: 25px 0;
    line-height: 20px;
    font-size: 1rem;
}

.ct-section-dual-surround .ct-section-wrapper .ct-section-dual-surround-description div {
    margin: 10px 0;
}

.ct-section-dual-surround .ct-section-wrapper .ct-th-option {
    line-height: 24px;
}

/* Selectable Zone */
.ct-section-selectable-zone {
    margin: 50px auto;
    position: relative;
    opacity: 0;
    transition: all 500ms ease-in-out;
    direction: ltr !important;
}

.ct-section-selectable-zone.in-view {
    opacity: 1;
}

.ct-section-selectable-zone.in-view .ct-background-wrapper .ct-background {
    transform: translate(-50%, -50%) scale(0.5);
}

@media screen and (min-width: 321px) {
    .ct-section-selectable-zone.in-view .ct-background-wrapper .ct-background {
        transform: translate(-50%, -50%) scale(0.6);
    }
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone.in-view .ct-background-wrapper .ct-background {
        transform: translate(-50%, -50%) scale(0.9);
    }
}

.ct-section-selectable-zone .ct-background-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 320px;
    overflow: hidden;
    z-index: 0;
    top: 100px;
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-background-wrapper {
        max-height: 410px;
        top: 40px;
    }
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 450ms ease-in-out;
    max-width: fit-content !important;
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="0"] {
    transform: translate(-45%, -50%) scale(0.5);
}

@media screen and (min-width: 321px) {
    .ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="0"] {
        transform: translate(-45%, -50%) scale(0.6);
    }
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="0"] {
        transform: translate(-40%, -50%) scale(0.9);
    }
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="2"] {
    transform: translate(-55%, -50%) scale(0.5);
}

@media screen and (min-width: 321px) {
    .ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="2"] {
        transform: translate(-55%, -50%) scale(0.6);
    }
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-background-wrapper .ct-background[data-slide="2"] {
        transform: translate(-60%, -50%) scale(0.9);
    }
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background-overlay {
    position: absolute;
    inset: 0;
    background: url("/products/refrigerators/image/skyline/h30-selectable-zone-filter.png") center center;
    pointer-events: none;
    z-index: 2;
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background-highlight-wrapper {
    position: absolute;
    max-width: 965px;
    width: 100%;
    z-index: 1;
    inset: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: plus-lighter;
}

.ct-section-selectable-zone .ct-background-wrapper .ct-background-highlight-wrapper .ct-background-highlight {
    width: 30%;
    height: 50%;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.6) 0%,
            #8edfff 50%);
    filter: blur(40px);
    pointer-events: none;
    transition: transform 400ms ease;
    transform: translateX(0);
    opacity: 0.6;
    margin: auto;
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-background-wrapper .ct-background-highlight-wrapper .ct-background-highlight {
        height: 100%;
    }
}

.ct-section-selectable-zone:has(.swiper-pagination-wrapper-image.active[data-image="0"]) .ct-background-highlight {
    transform: translateX(-100%);
}

.ct-section-selectable-zone:has(.swiper-pagination-wrapper-image.active[data-image="1"]) .ct-background-highlight {
    transform: translateX(0);
}

.ct-section-selectable-zone:has(.swiper-pagination-wrapper-image.active[data-image="2"]) .ct-background-highlight {
    transform: translateX(100%);
}

.ct-section-selectable-zone .ct-selectable-zone-wrapper-text .ct-selectable-zone-text {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 15px auto;
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-selectable-zone-wrapper-text .ct-selectable-zone-text {
        font-size: 2rem;
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 15px auto;
    }
}

@media screen and (min-width: 767px) {
    .ct-section-selectable-zone .ct-selectable-zone-wrapper-text .ct-selectable-zone-text {
        font-size: 2.625rem;
        font-weight: 700;
    }
}

.ct-section-selectable-zone .ct-selectable-zone-wrapper-text .ct-selectable-zone-description {
    max-width: 965px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    font-size: 1rem;
}

.ct-section-selectable-zone .swiper-selectable-zone {
    max-width: 965px;
    width: 100%;
    margin: 0 auto;
}

.ct-section-selectable-zone .swiper-selectable-zone .swiper-wrapper {
    opacity: 0;
    margin: 0;
}

.ct-section-selectable-zone .swiper-selectable-zone .swiper-wrapper.in-view {
    animation: animateFadeInUp 1000ms forwards;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide {
    display: flex;
    max-width: 560px;
    width: 100%;
    padding: 15px 0;
    align-items: center;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-hex {
    width: 100px;
    min-width: 100px;
    height: 90px;
    background: #a2201c;
    /* hexagon shape */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    padding: 10px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-hex .hex-content {
    font-size: 0.75rem;
    color: #ffffff;
}

.ct-th-font-family .ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-hex .hex-content .label {
    line-height: 0.895rem;
    font-family: "Sarabun", sans-serif;
}

.ct-th-font-family .ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-hex .hex-content .temp {
    font-family: "Sarabun", sans-serif;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-hex .hex-content .temp {
    font-size: 1.75rem;
    font-weight: 700;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-text {
    padding: 0 15px;
}

@media screen and (min-width: 321px) {
    .ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-text {
        padding: 0 30px;
    }
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-text .title {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 700;
}

.ct-section-selectable-zone .swiper-selectable-zone .selectable-zone-swiper-slide .selectable-zone-inner-slide-text .description {
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.ct-section-selectable-zone .ct-title {
    margin: 0;
    color: #a2201c;
    font-size: 2.25rem;
    line-height: 2.25rem;
}

.ct-section-selectable-zone .ct-card-zone {
    border-radius: 8px;
    border: none;
}

.ct-section-selectable-zone .ct-card-zone .ct-body {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
    font-size: 0.813rem;
    line-height: 1.188rem;
    margin: 5px auto;
}

/* Selectable Zone Swiper */
.swiper-selectable-zone {
    padding: 15px 0 15px;
}

.swiper-selectable-zone .swiper-wrapper {
    width: 100%;
    height: auto;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* or contain */
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-obj {
    position: absolute;
    bottom: 0;
    z-index: 11;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-obj .swiper-obj-description {
    padding: 30px 0;
    text-align: center;
    color: #ffffff;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-image {
    position: relative;
    z-index: 10;
    width: 100%;
    height: auto;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-image .swiper-image-gradient-overlay {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(162, 32, 28, 0.5) 0%,
            rgb(162, 32, 28) 85%);
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-image .swiper-image-gradient-overlay .swiper-image-wrapper {
    display: flex;
    align-items: flex-end;
    padding: 25px 10px 5px;
    color: #ffffff;
    max-width: 395px;
    width: 100%;
}

.swiper-selectable-zone .swiper-wrapper .swiper-slide .swiper-image .swiper-image-gradient-overlay .swiper-image-wrapper span {
    font-size: 0.75rem;
    text-align: center;
}

.swiper-selectable-zone .swiper-pagination-nav {
    width: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.swiper-selectable-zone .swiper-pagination-custom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    margin: 50px auto 0;
    bottom: 0;
    z-index: 2;
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
}

@media screen and (min-width: 321px) {
    .swiper-selectable-zone .swiper-pagination-custom {
        margin: 110px auto 0;
    }
}

@media screen and (min-width: 374px) {
    .swiper-selectable-zone .swiper-pagination-custom {
        margin: 120px auto 0;
    }
}

@media screen and (min-width: 767px) {
    .swiper-selectable-zone .swiper-pagination-custom {
        margin: 150px auto 0;
    }
}

.swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image {
    display: flex;
    transform: scale(0.8);
    transition: transform 500ms ease-in-out;
}

.swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image.active {
    position: relative;
    transform: scale(1);
}

.swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image img {
    width: 100%;
    height: auto;
    margin: auto;
}

@media screen and (min-width: 767px) {
    .swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image img {
        width: 85%;
    }
}

.swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image img.image-item-active {
    display: none;
}

.swiper-selectable-zone .swiper-pagination-custom .swiper-pagination-wrapper-image img.image-item {
    display: block;
}

.swiper-selectable-zone .swiper-pagination {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet {
    list-style-type: none;
    display: inline-grid;
    place-items: center;
    width: auto;
    height: auto;
    background: transparent;
    opacity: 1;
    border-radius: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #666;
    transition: all 300ms;
    position: relative;
    top: 8px;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    background: #afafaf;
    border-width: 8px;
    transition: left 200ms ease-in-out;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 15px solid #afafaf;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet:nth-child(1) {
    border-right: 1px solid #afafaf;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet:nth-child(2) {
    border-right: 1px solid #afafaf;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet p {
    margin-bottom: 5px;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet p:nth-child(1) {
    color: #8d8d8e;
    font-weight: 600;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet p:nth-child(2) {
    color: #8d8d8e;
    font-weight: 400;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet p:last-child {
    color: #8d8d8e;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active p:nth-child(1) {
    color: #000000;
    font-weight: 700;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active p:nth-child(2) {
    color: #000000;
    font-weight: 400;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active p:last-child {
    color: #a2201c !important;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background-color: #a2201c;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    border-top: 15px solid #a2201c;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-nav-tab:first-child .swiper-navbar {
    border-bottom-right-radius: 0;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-nav-tab:nth-child(2) .swiper-navbar {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-nav-tab:last-child .swiper-navbar {
    border-bottom-left-radius: 0;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-nav-tab .swiper-navs {
    width: 80%;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet.swiper-nav-tab .swiper-navs.active {
    opacity: 1;
}

.swiper-selectable-zone .swiper-pagination .swiper-pagination-bullet .swiper-navbar {
    width: 100%;
    position: relative;
    bottom: 0;
    background: linear-gradient(to top, #c1c1c1 0%, #dfdfdf 64%, #ffffff 100%);
    align-items: center;
    position: relative;
    background: linear-gradient(to top, #c1c1c1 0%, #dfdfdf 64%, #ffffff 100%);
    padding: 5px 0;
    user-select: none;
    margin-top: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.ct-selectablezone-tab-nav {
    display: flex;
    margin: 10px auto 0;
    position: relative;
    max-width: 780px;
}

.ct-selectablezone-tab-nav .ct-clickscroll-swipe {
    position: absolute;
    top: -20px;
    width: 100%;
    height: auto;
    color: #ffffff;
    font-size: 1rem;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.ct-selectablezone-tab-nav .ct-clickscroll-swipe span {
    background: #000000;
    padding: 5px;
    border-radius: 14px;
}

.ct-selectablezone-tab-nav .tab-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ct-selectablezone-tab-nav .tab-wrapper div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-wrap: nowrap;
}

.ct-selectablezone-tab-nav .tab-wrapper div:nth-child(2) p {
    position: relative;
    font-size: 0.75rem;
}

@media screen and (min-width: 321px) {
    .ct-selectablezone-tab-nav .tab-wrapper div:nth-child(2) p {
        font-size: 1rem;
    }
}

.ct-selectablezone-tab-nav .tab-wrapper div p {
    font-size: 0.75rem;
    white-space: nowrap;
}

@media screen and (min-width: 321px) {
    .ct-selectablezone-tab-nav .tab-wrapper div p {
        font-size: 1rem;
        white-space: nowrap;
    }
}

.ct-selectablezone-tab-nav .tab-wrapper .ct-btn-freeze,
.ct-selectablezone-tab-nav .tab-wrapper .ct-btn-ref {
    cursor: pointer;
}

.ct-selectablezone-tab-nav .tab-wrapper input[type="range"] {
    background-color: #d7d7d7;
    cursor: pointer;
    border-radius: 5px;
    height: 31px;
    width: 189px;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0px 0px 20px 4px rgba(164, 164, 164, 0.5);
    box-shadow: inset 0px 0px 20px 4px rgba(164, 164, 164, 0.5);
    transition: transform 0.2s ease;
}

.ct-selectablezone-tab-nav .tab-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 62px;
    height: 28px;
    margin-top: -1px;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    transition: transform 2s ease;
}

.ct-selectablezone-tab-nav .tab-wrapper input[type="range"]::-moz-range-thumb {
    width: 62px;
    height: 28px;
    margin-top: -1px;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-box-shadow: 5px 5px 5px 0px #000000;
    box-shadow: 5px 5px 5px 0px #000000;
    position: relative;
    z-index: 1;
    transition: transform 2s ease;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 10px;
    width: 100%;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    top: 0;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-left {
    left: 3.25rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-left-2 {
    left: 3.75rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-left-3 {
    left: 4.25rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-right {
    right: 3.25rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-right-2 {
    right: 3.75rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim.arrowAnim-right-3 {
    right: 4.25rem;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrowSliding .arrow {
    width: 12px;
    height: 12px;
    border: 4px solid;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-left {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-left-order {
    border-color: #46cc73 transparent transparent #46cc73 !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-left-order-2 {
    border-color: rgba(70, 204, 115, 0.6039215686) transparent transparent rgba(70, 204, 115, 0.6039215686) !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-left-order-3 {
    border-color: rgba(70, 204, 115, 0.3176470588) transparent transparent rgba(70, 204, 115, 0.3176470588) !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-right {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-right-order {
    border-color: #42cdef transparent transparent #42cdef !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-right-order-2 {
    border-color: rgba(66, 204, 239, 0.6078431373) transparent transparent rgba(66, 204, 239, 0.6078431373) !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrow-right-order-3 {
    border-color: rgba(66, 204, 239, 0.3137254902) transparent transparent rgba(66, 204, 239, 0.3137254902) !important;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrowSliding-left {
    position: absolute;
    -webkit-animation: slide-left 2s linear infinite;
    animation: slide-left 2s linear infinite;
    animation-timing-function: cubic-bezier(0.935, 0, 0, 0.995);
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .arrowSliding-right {
    position: absolute;
    -webkit-animation: slide-right 2s linear infinite;
    animation: slide-right 2s linear infinite;
    animation-timing-function: cubic-bezier(0.935, 0, 0, 0.995);
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .delay1 {
    animation-delay: 1s;
}

.ct-selectablezone-tab-nav .tab-wrapper .wrap-input-arrow .arrowAnim .delay2 {
    animation-delay: 2s;
}

@media screen and (max-width: 767px) {
    .ct-selectablezone-tab-nav .tab-wrapper div img {
        width: 70%;
    }

    .ct-selectablezone-tab-nav .tab-wrapper input[type="range"] {
        width: 150px;
    }
}

/* Soft Freeze Card */
.ct-section-soft-freeze .swiper-freeze-h30 .swiper-wrapper {
    margin: 0;
}

.ct-section-soft-freeze .swiper-freeze-h30 .swiper-wrapper .swiper-slide {
    align-self: start;
    padding: 0;
}

.ct-section-soft-freeze .ct-soft-freeze-title {
    font-size: 2rem;
    font-weight: 700;
}

@media screen and (min-width: 767px) {
    .ct-section-soft-freeze .ct-soft-freeze-title {
        font-size: 2.625rem;
        font-weight: 700;
    }

    .ct-section-soft-freeze .ct-soft-freeze-subtitle {
        font-size: 1.125rem;
        margin: 15px auto 30px;
    }
}

.ct-section-soft-freeze .ct-soft-freeze-subtitle {
    font-size: 1rem;
    margin: 15px auto 30px;
}

.ct-section-soft-freeze .swiper-freeze-text {
    margin: 20px auto;
    font-size: 1rem;
}

.ct-section-soft-freeze .ct-body {
    padding: 30px 15px;
}

.ct-section-soft-freeze .ct-body div {
    padding: 15px 0;
}

/* Quick Freeze Card */
@media screen and (min-width: 767px) {
    .ct-section-quick .swiper-quick-h30 .swiper-wrapper {
        margin: 0;
    }
}

.ct-section-quick .swiper-quick-h30 .swiper-wrapper .swiper-slide {
    align-self: start;
}

.ct-section-quick .ct-quick-wrapper-image {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ct-section-quick .ct-quick-wrapper-image .ct-quick-inner-image {
    position: relative;
    max-width: 100%;
    height: auto;
}

.ct-section-quick .ct-section-quick-description {
    max-width: 365px;
    margin: 0 auto;
}

.ct-section-quick .ct-section-quick-description .ct-inner-body {
    margin: 1.25rem auto;
}

.ct-section-quick .ct-section-quick-description .ct-inner-body .ct-inner-body-text {
    font-size: 1rem;
    line-height: 1.25rem;
}

.ct-section-quick .ct-section-quick-description .ct-inner-body .ct-inner-body-description {
    font-size: 0.75rem;
    color: #4c4c4c;
}

.ct-section-quick .swiper-wrapper .swiper-slide {
    padding: 0;
}

/* Triple Power Card */
.ct-section-triple-power .ct-section-triple-power-description {
    max-width: 365px;
    width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

[data-lang="ar"] .ct-section-triple-power .ct-section-triple-power-description {
    position: relative;
    max-width: 365px;
    width: 100%;
    text-align: center;
    left: unset;
    transform: unset;
    margin: auto;
}

@media screen and (min-width: 767px) {
    .ct-section-triple-power .ct-section-triple-power-description {
        text-align: left;
    }
}

.ct-section-triple-power .ct-section-triple-power-description .ct-description {
    font-size: 1rem;
    line-height: 1.375rem;
    margin: 1.25rem auto;
}

.ct-section-triple-power .ct-section-triple-power-description .ct-th-option {
    line-height: 1.38rem;
}

/* Warranty Card */
.ct-section-warranty .ct-section-wrapper {
    max-width: 960px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 20px 0;
}

/* Elegant Design Card */
.ct-section-elegant-design .ct-card-no-bg {
    border-color: transparent;
    border-radius: 0;
    position: relative;
    height: 100%;
    transition: all 250ms ease-in-out;
}

.ct-section-elegant-design .ct-card-no-bg .ct-title {
    margin: 0;
    color: #a2201c;
    font-size: 2.25rem;
    line-height: 36px;
}

.ct-section-elegant-design .ct-card-no-bg .ct-sub-title {
    color: #000000;
    font-size: 2.25rem;
    margin-left: 10px;
}

.ct-section-elegant-design .ct-card-no-bg .ct-text {
    width: 80%;
    margin: 1.25rem auto;
    font-size: 1rem;
    line-height: 22px;
}

.ct-section-elegant-design .ct-card-no-bg .ct-text span {
    color: #a2201c;
}

.ct-section-elegant-design .ct-card-no-bg .ct-small {
    font-size: 0.875rem;
    line-height: 22px;
    margin: 1.25rem auto;
}

.ct-section-elegant-design .ct-card-no-bg .ct-full-image {
    width: 100%;
    height: auto;
}

.ct-section-elegant-design .media-display {
    padding: 0 25px;
    margin-bottom: 30px;
}

.ct-section-elegant-design .media-display .border-red-line {
    height: 5px;
    background-color: #a2201c;
}

.ct-section-elegant-design .media-display .media-image {
    border-top: 5px solid #a2201c;
    background: #bebebe url("/assets/bg-hex-4.svg") no-repeat top center;
    height: 187px;
    width: 100%;
}

.ct-section-elegant-design .media-display .media-image img {
    width: 100%;
}

.ct-section-elegant-design .description-section {
    padding: 0 30px;
    text-align: center;
}

.ct-section-elegant-design .description-section .ct-text-normal {
    font-size: 0.875rem;
}

.ct-section-elegant-design .description-section .ct-text-italic {
    font-size: 0.875rem;
    color: #a2201c;
}

.ct-section-elegant-design {
    width: 100%;
    background-color: #000000;
    padding-bottom: 40px;
}

.ct-section-elegant-design {
    width: 100%;
    background-color: #000000;
    padding-bottom: 40px;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background {
    width: 100%;
    height: auto;
    position: relative;
    background: #000000;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    background: url("/products/refrigerators/image/skyline/h30-elegant-design-honeycomb.png") repeat center;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background.in-view::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.7;
    transition: opacity 2s ease 0.4s;
    background: url("/products/refrigerators/image/skyline/h30-elegant-design-honeycomb.png") repeat center;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text {
    position: relative;
    padding: 50px 0;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text .ct-elegant-design-heading {
    color: #ffffff;
    font-size: 2.625rem;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text .ct-elegant-design-heading .ct-elegant-design-title {
    font-weight: 700;
}

@media screen and (min-width: 767px) {
    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text {
        position: relative;
        padding: 50px 0;
    }

    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text .ct-elegant-design-heading {
        color: #ffffff;
        font-size: 2.625rem;
    }

    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-section-elegant-design-text .ct-elegant-design-heading .ct-elegant-design-title {
        font-weight: 700;
    }
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .slide-up {
    opacity: 0;
    transform: translateY(10rem);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.22, 0.9, 0.27, 1);
    will-change: opacity, transform;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade {
    position: relative;
    overflow: hidden;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade img.image {
    width: 100%;
    display: block;
    transition:
        opacity 2s ease 0.4s,
        transform 1.5s ease,
        visibility 1.2s ease;
    will-change: opacity, transform;
    object-fit: contain;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade img.old {
    opacity: 1;
    transform: translateY(0);
    z-index: 1;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade img.new {
    opacity: 0;
    transform: translateY(12rem);
    z-index: 0;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade.in-view img.old {
    opacity: 0;
    transform: translateY(12rem);
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .bg-fade.in-view img.new {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    mask-image: linear-gradient(to bottom, black 50%, transparent 90%);
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-h30-product-image {
    position: relative;
    z-index: 1;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-h30-product-image .image {
    max-width: 100%;
    height: auto;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-design-background .ct-h30-product-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 30%,
            rgb(0, 0, 0) 100%);
    z-index: 2;
}

.ct-section-elegant-design .ct-section-wrapper .swiper-elegant-design {
    max-width: 965px;
    width: 100%;
    margin: 0 auto;
}

.ct-section-elegant-design .ct-section-wrapper .swiper-elegant-design.slide-up-content {
    opacity: 0;
    transform: translateY(10rem);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.22, 0.9, 0.27, 1);
    will-change: opacity, transform;
}

.ct-section-elegant-design .ct-section-wrapper .swiper-elegant-design.slide-up-content.in-view {
    opacity: 1;
    transform: translateY(0);
}

.ct-section-elegant-design .ct-section-wrapper .swiper-elegant-design .swiper-elegant-h30 .swiper-pagination .swiper-pagination-bullet {
    background-color: #ffffff;
}

.ct-section-elegant-design .ct-section-wrapper .swiper-elegant-design .swiper-elegant-h30 .swiper-pagination .swiper-pagination-bullet-active {
    background-color: red;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .mobile-display {
    position: absolute;
    top: -6rem;
    left: 50%;
    transform: translateX(-50%);
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-title-mobile {
    color: #ffffff;
    font-size: 1.75rem;
    text-align: center;
    padding-bottom: 4px;
    white-space: nowrap;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-title-mobile .text-nowrap {
    white-space: nowrap;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-title-mobile .font-weight-400 {
    font-weight: 400;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-title-mobile .font-weight-300 {
    font-weight: 300;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-title-mobile .border-custom {
    padding-bottom: 4px;
    border-bottom: 1px solid #a2201c;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description {
    text-align: center;
    color: #ffffff;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .swiper-elegant-1 {
    padding-left: 0;
}

@media screen and (min-width: 767px) {
    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description {
        text-align: left;
        font-size: 1rem;
    }

    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .swiper-elegant-1 {
        padding-left: 60px;
    }

    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .swiper-elegant-1 .ct-elegant-hr {
        width: 100%;
        height: 2px;
        background-color: #a2201c;
        margin-top: -16px;
    }
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-title {
    font-size: 2rem;
    padding: 20px 0;
    color: #ffffff;
    font-weight: 400;
}

@media screen and (min-width: 767px) {
    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-title {
        font-size: 2.625rem;
    }
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-title .font-weight-400 {
    font-weight: 400;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-title .font-weight-300 {
    font-weight: 300;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-title .border-custom {
    padding-bottom: 4px;
    border-bottom: 1px solid #a2201c;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #ffffff;
    padding-top: 16px;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-subtitle .paragraph-bold {
    font-weight: 700;
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-subtitle .paragraph-normal {
    font-weight: 400;
}

@media screen and (min-width: 767px) {
    .ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-subtitle {
        font-size: 1rem;
        line-height: 24px;
        padding-top: 20px;
    }
}

.ct-section-elegant-design .ct-section-wrapper .ct-elegant-h30-slide .ct-elegant-h30-description .ct-elegant-h30-remark {
    padding-top: 40px;
    font-size: 0.75rem;
    padding-bottom: 1.5rem;
}