/*
Theme Name: Flatsome
Theme URI: http://flatsome.uxthemes.com/
Author: UX-Themes
Author URI: http://www.uxthemes.com/
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.11.0
Text Domain: flatsome
License: http://themeforest.net/licenses
License URI: http://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
:root{
    --bottom-w: 220px;
    --top-scale: .7;          /* itemTop = 70% itemBottom */
    --gap-extra: 80px;         /* thêm khoảng cách giữa 2 item dưới */
    --ratio: 4/3;
    --speed-base: 80000ms;     /* tốc độ chuẩn theo hàng dưới */

    /* Suy ra cho layout zigzag */
    --top-w:   calc(var(--bottom-w) * var(--top-scale));
    --gap-btm: calc(var(--top-w) + var(--gap-extra));
    --period:  calc(var(--bottom-w) + var(--gap-btm));
  }
html,body{ height:100%; overflow: hidden;}
#kay-banner img {
    width: 100%;
    max-width: 100%;
    display: block;
}
.listItem {
    width: 100%;
    display: grid;
    position: relative;
    padding-top: 15%;
}

  /* Marquee */
  .marquee-mask{ width:100%; position:relative; }
  .marquee-track{
    display:flex; width:max-content; will-change: transform;
    animation: slide var(--speed-base) linear infinite;
  }
  @keyframes slide{
    from{ transform: translateX(calc(-1 * var(--dist, 0px))); }
    to  { transform: translateX(0px); }
  }
  .itemHead-bg {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    position: absolute;
    height: 150px;
    top: -11%;
    left: 0;
    z-index: 2;
}
.itemHead-img {
    min-width: 5760px;
    height: 100%;
    background-image: url(/wp-content/uploads/2025/11/wave-1.webp);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left top;
    background-size: 60px auto;
    animation: 103.68s 
linear 0s infinite normal none running animation-wave;
    backface-visibility: hidden;
}
.itemTop {
  position: absolute;
  z-index: 4;
}
.itemTop-bg {
    width: 100%;
    display: flex
;
    justify-content: flex-end;
    pointer-events: none;
    position: absolute;
    height: 277px;
    top: 62%;
    left: 0;
}
.itemTop-bg-img {
    min-width: 5760px;
    height: 100%;
    background-image: url(/wp-content/uploads/2025/11/wave-2.webp);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left top;
    animation: 86.4s 
linear 0s infinite normal none running animation-wave;
    backface-visibility: hidden;
    background-size: 103px auto;
}
.itemBottom {
    position: absolute;
    z-index: 6;
}
.itemBottom-bg {
    width: 100%;
    display: flex
;
    justify-content: flex-end;
    pointer-events: none;
    position: absolute;
    height: 100%;
    top: 94%;
    left: 0;
}
.itemBottom-bg-img {
    min-width: 5760px;
    height: 100%;
    background-image: url(/wp-content/uploads/2025/11/wave-3.webp);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left top;
    animation: 57.6s 
linear 0s infinite normal none running animation-wave;
    backface-visibility: hidden;
    background-size: 100px auto;
    
}
  @keyframes animation-wave{
  0% {
    transform: translateX(0px);
  }
  100% {
      transform: translateX(1980px);
  }
}

  /* Item */
  .item{
    position:relative; width: var(--bottom-w); aspect-ratio: var(--ratio);
    display:grid; place-items:center; overflow:visible;
    cursor: default;
    /* wobble liên tục */
    animation-duration: 6s; animation-timing-function: ease-in-out;
    animation-delay: 300ms; animation-iteration-count: infinite;
  }
  .item:hover{ cursor:pointer; }
  .itemTop .item{ width: var(--top-w); }

  .item-inner{ position:relative; width:100%; height:100%; }
  .item img{ width:100%; height:100%; object-fit:cover; display:block; }

  .name-pill{
    position:absolute; right:10px; bottom:19px; z-index:2;
    padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9);
    color:#1b1b1b; font-weight:600; font-size:12px; line-height:1;
    max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    pointer-events:none;
  }

  /* Tooltip portal (fixed) */
  #wishPortal{
    position:fixed; z-index:9999; opacity:0; pointer-events:none; transition:opacity .15s ease;
    width: clamp(160px, 20vw, 240px); max-width:90vw;
    padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.94);
    color:#101011; font-size:14px; line-height:1.35; font-weight:600;
    box-shadow:0 6px 24px rgba(0,0,0,.35);
    white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  }
  #wishPortal.show{ opacity:1; }

  /* Wobble theo cặp 2-2 */
  @keyframes animation-nn44pw{
    0%,100%{ transform: translateY(0) rotate(0); }
    25%    { transform: translateY(5px) rotate(-2deg); }
    50%    { transform: translateY(0) rotate(0); }
    75%    { transform: translateY(5px) rotate(2deg); }
  }
  @keyframes animation-nn44pw-rev{
    0%,100%{ transform: translateY(0) rotate(0); }
    25%    { transform: translateY(-5px) rotate(2deg); }
    50%    { transform: translateY(0) rotate(0); }
    75%    { transform: translateY(-5px) rotate(-2deg); }
  }
  .itemTop   .item:nth-child(4n+1),
  .itemTop   .item:nth-child(4n+2),
  .itemBottom .item:nth-child(4n+1),
  .itemBottom .item:nth-child(4n+2){ animation-name: animation-nn44pw; }
  .itemTop   .item:nth-child(4n+3),
  .itemTop   .item:nth-child(4n+4),
  .itemBottom .item:nth-child(4n+3),
  .itemBottom .item:nth-child(4n+4){ animation-name: animation-nn44pw-rev; }

  /* Zigzag spacing (top nằm giữa 2 bottom) */
  .itemBottom .marquee-track{column-gap: var(--gap-btm); }
  .itemTop .marquee-track{
    margin-top: -106px;
    column-gap: calc(var(--period) - var(--top-w));
    padding-left: calc(var(--bottom-w) + var(--gap-btm)/2 - var(--top-w)/2);
  }

  /* WOW-like: bounceInDown – chỉ add cho items thấy ngay lúc load */
  @keyframes bounceInDown{
    0%   { opacity:0; transform: translate3d(0,-3000px,0); }
    60%  { opacity:1; transform: translate3d(0,25px,0); }
    75%  { transform: translate3d(0,-10px,0); }
    90%  { transform: translate3d(0,5px,0); }
    100% { transform:none; }
  }
  .item-inner.init-bounce{ animation: bounceInDown 1.2s ease both; }
.rotate-infinite-2 {
    -webkit-animation: rotate-infinite-2 15s linear infinite;
    animation: rotate-infinite-2 15s linear infinite;
}
@keyframes rotate-infinite-2 {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
    }
}
.footercopy{padding:10px 0;background:#1e2126;color:#fff;font-size:14px}
.gbooks-msg p{margin-bottom:0}
.d-none {display:none!important}
.car-wmt {
    width: 94px;
    height: 57px;
    background-image: url(/wp-content/uploads/2025/10/tuktuk.webp);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    -webkit-background-position: center;
    background-position: center;
    position: absolute;
    bottom: 15%;
    left: calc(50% + 400px);
    z-index: 5;
    -webkit-animation: animation-ee1efe 10s ease-in-out infinite;
    animation: animation-ee1efe 10s ease-in-out infinite;
    pointer-events: none;
}
@keyframes animation-ee1efe {
    0% {
        -webkit-transform: translateX(100vw);
        -moz-transform: translateX(100vw);
        -ms-transform: translateX(100vw);
        transform: translateX(100vw);
        left: auto;
    }
    40% {
        -webkit-transform: translateX(40vw);
        -moz-transform: translateX(40vw);
        -ms-transform: translateX(40vw);
        transform: translateX(40vw);
        left: auto;
    }
    60% {
        -webkit-transform: translateX(40vw);
        -moz-transform: translateX(40vw);
        -ms-transform: translateX(40vw);
        transform: translateX(40vw);
        left: auto;
    }
    100% {
        -webkit-transform: translateX(-100vw);
        -moz-transform: translateX(-100vw);
        -ms-transform: translateX(-100vw);
        transform: translateX(-100vw);
        left: auto;
    }
}
@media (min-width: 992px) {
    .d-lg-block {display:block!important}
}
@media (max-width:560px){
    :root{ --bottom-w: 180px; --gap-extra: 40px; }
    .name-pill{ font-size:12px }
    #wishPortal{ font-size:13px }
  }