@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Jost:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  /* ---------- FONT ---------- */
  --font-display:'Fraunces', serif;   /* Logo / tiêu đề lớn, chữ nghiêng sang trọng */
  --font-body:'Jost', sans-serif;     /* Toàn bộ nội dung, nút, menu */
  --font-nav:'Plus Jakarta Sans', 'Jost', sans-serif;

  /* ---------- NỀN (BACKGROUND) ---------- */
  --bg:#FFFFFF;
  --bg-section:#FFFFFF;
  --bg-soft:#F8ECEE;                  /* Nền hồng phấn rất nhạt, ánh mận — hài hoà logo */
  --white:#FFFFFF;

  /* ---------- PRIMARY / SECONDARY (theo màu logo MAKIEKY) ---------- */
  --primary:#73263B;                  /* Primary — đỏ mận/burgundy, đúng màu mực logo */
  --primary-hover:#9F2B48;            /* Primary khi hover — đỏ tươi sang trọng Rose Crimson */
  --primary-light:#F0DCE1;            /* Sắc nhạt của Primary, dùng cho nền mềm/bong bóng */
  --secondary:#1B1216;                /* Secondary — gần đen ánh nâu, giống nền logo bản đảo (đen) */

  /* ---------- TRẠNG THÁI (STATUS) ---------- */
  --success:#7BA893;                  /* Success — xanh lá pastel, hài hoà tông mận */
  --alert:#B5453D;                    /* Alert — đỏ cam đất, ấm, không phá tone burgundy */

  /* ---------- TYPE (CHỮ) ---------- */
  --text-base:#2E1B21;                /* Base Color — chữ thường, nâu đen ánh mận */
  --text-headline:#1B1216;            /* Headline Color — H1–H6, gần đen như logo */
  --text-muted:#8C6B72;               /* Chữ phụ / mô tả nhạt */
  --divider:#EAD9DE;                  /* Divider Color — viền, đường kẻ ngăn cách */

  /* ---------- LINKS ---------- */
  --link:#73263B;                     /* = Primary */
  --link-hover:#591D2E;
  --widget-link:#8C6B72;              /* Link ở sidebar/footer widget */
  --widget-link-hover:#73263B;

  /* ---------- TOOLTIP ---------- */
  --tooltip-text:#FFFFFF;
  --tooltip-bg:#1B1216;

  /* ---------- SHOP COLORS ---------- */
  --btn-cart-bg:var(--primary);         /* Nút mua hàng / thêm giỏ hàng — màu primary đỏ mận logo (#73263B) */
  --btn-cart-bg-hover:var(--primary-hover);/* Hover — đậm hơn 1 tông (#591D2E) */
  --badge-sale:#73263B;               /* Bong bóng "Sale" */
  --badge-new:#D8B978;                /* Bong bóng "Mới" (vàng gold, cao cấp, tôn màu mận) */
  --badge-custom:#8C6B72;             /* Tag tuỳ chỉnh: "Hot", "Giới hạn"... */
  --review-stars:#D8B978;             /* Vàng gold — chuẩn sao đánh giá */
  --price-regular:#8C6B72;            /* Giá gốc, thường gạch ngang */
  --price-sale:#73263B;               /* Giá khuyến mãi, nổi bật */

  /* ---------- ALIAS TƯƠNG THÍCH NGƯỢC (để các rule cũ phía dưới tự động ăn đúng tone mới) ---------- */
  --text-dark:var(--text-base);       /* #2E1B21 */
  --text-navy:var(--text-headline);   /* #1B1216 */
  --border:var(--divider);            /* #EAD9DE */
  --gold:var(--review-stars);         /* #D8B978 */
  --primary-dark:var(--primary-hover);/* #591D2E */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text-dark);
  font-family:var(--font-body);
  font-weight:400;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:1240px;margin:0 auto;padding:0 32px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--primary-dark); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:1240px; margin:0 auto;
}
.topbar-spacer{width:96px;}
.wordmark{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:26px; letter-spacing:0.06em; text-align:center; color:var(--text-navy);
}
.wordmark small{
  display:block; font-family:var(--font-body); font-style:normal; font-weight:500;
  font-size:10px; letter-spacing:0.4em; color:var(--primary-dark); margin-top:2px;
}
.topbar-icons{display:flex; gap:20px; align-items:center; width:96px; justify-content:flex-end;}
.icon-btn{background:none; border:none; color:var(--text-navy); display:flex;}
.icon-btn svg{width:19px; height:19px;}
.cart-dot{position:relative;}
.cart-dot::after{content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:var(--primary-dark);}

.navrow{border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.navlinks{
  display:flex; justify-content:center; gap:44px; padding:16px 0;
  max-width:1240px; margin:0 auto;
}
.navlinks a:hover,
.navlinks a.active{color:var(--primary-hover);}

/* Flatsome Header Custom CSS (Luxury Beauty Brand Styling) */
#header .header-nav > li > a,
#header .header-bottom-nav > li > a,
#header .nav-top-link,
#wide-nav .nav-top-link {
  font-family: var(--font-nav, 'Plus Jakarta Sans', 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  position: relative !important;
  padding: 10px 0 !important;
  margin: 0 14px !important;
  transition: color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hiệu ứng thanh gạch chân mảnh khi Hover */
#header .header-nav > li > a::after,
#header .header-bottom-nav > li > a::after,
#wide-nav .nav-top-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--primary-hover, #9F2B48) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#header .header-nav > li > a:hover,
#header .header-bottom-nav > li > a:hover,
#header .nav-top-link:hover,
#wide-nav .nav-top-link:hover,
#header .header-nav > li.active > a,
#header .header-nav > li.current-menu-item > a,
#header .header-bottom-nav > li.current-menu-item > a,
#header .header-bottom-nav > li.active > a,
.header-bottom-nav > li:hover > a {
  color: var(--primary-hover, #9F2B48) !important;
}

#header .header-nav > li > a:hover::after,
#header .header-bottom-nav > li > a:hover::after,
#wide-nav .nav-top-link:hover::after,
#header .header-bottom-nav > li.current-menu-item > a::after,
#header .header-bottom-nav > li.active > a::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

#header .header-search > a:hover i,
#header .cart-item .header-cart-link:hover i,
#header .mobile-nav .nav-icon a:hover i {
  color: var(--primary-hover, #9F2B48) !important;
  transform: scale(1.1);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.hero-wrap{position:relative; background:var(--bg-soft);}
.hero{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center;
  max-width:1240px; margin:0 auto; padding:56px 70px; gap:20px; min-height:440px;
}
.hero-badge{
  display:inline-block; background:var(--text-navy); color:var(--white);
  font-size:11px; font-weight:600; letter-spacing:0.08em; padding:5px 12px; border-radius:4px; margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-body); font-weight:700; font-size:clamp(26px,3vw,34px);
  line-height:1.25; color:var(--text-navy); text-transform:uppercase; margin-bottom:22px; max-width:460px;
}
.hero-features{display:flex; gap:26px; margin-bottom:28px; flex-wrap:wrap;}
.hero-feature{display:flex; align-items:center; gap:8px; max-width:150px;}
.hero-feature .dot{
  min-width:30px; height:30px; border-radius:50%; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--primary-dark);
}
.hero-feature span{font-size:12px; color:var(--text-muted); line-height:1.4;}
.btn-cta{
  display:inline-block; background:var(--primary-dark); color:var(--white);
  padding:14px 40px; border-radius:6px; font-size:13px; font-weight:600; letter-spacing:0.08em;
  transition:background .2s ease;
}
.btn-cta:hover{background:var(--primary-hover);}
.hero-disclaimer{font-size:10.5px; color:var(--text-muted); margin-top:16px; max-width:420px; line-height:1.5;}

.hero-visual{position:relative; height:340px; display:flex; align-items:center; justify-content:center;}
.hero-tube{
  position:relative; width:110px; height:280px;
  background:linear-gradient(180deg,#ffffff,var(--primary-light));
  border-radius:14px 14px 30px 30px; box-shadow:0 30px 60px -22px rgba(46,27,33,0.28); z-index:3;
}
.hero-tube::before{content:''; position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:40px; height:26px; background:var(--gold); border-radius:6px;}
.bubble{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.85);
  box-shadow:0 14px 30px -12px rgba(46,27,33,0.25); display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--primary-dark); text-align:center; letter-spacing:0.02em; padding:6px;
}
.bubble.b1{width:78px; height:78px; top:12%; left:4%;}
.bubble.b2{width:92px; height:92px; bottom:10%; left:10%;}
.bubble.b3{width:70px; height:70px; top:38%; right:2%;}
.hero-newtag{
  position:absolute; top:6%; right:14%; background:var(--gold); color:var(--white);
  font-size:9px; font-weight:700; letter-spacing:0.05em; padding:4px 8px; border-radius:4px; z-index:4;
}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:var(--white); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -8px rgba(46,27,33,0.2); z-index:5;
}
.carousel-arrow.left{left:14px;}
.carousel-arrow.right{right:14px;}
.carousel-dots{display:flex; gap:6px; justify-content:center; padding-bottom:18px;}
.carousel-dots span{width:6px; height:6px; border-radius:50%; background:var(--border);}
.carousel-dots span.active{background:var(--primary-dark); width:18px; border-radius:3px;}

/* ==========================================================================
   TRUST STRIP (marquee)
   ========================================================================== */
.trust-strip{
  position:relative; overflow:hidden; border-bottom:1px solid var(--border);
  padding:20px 0; background:var(--white);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.trust-track{
  display:flex; align-items:center; width:max-content; gap:14px;
  animation:trust-scroll var(--trust-duration, 28s) linear infinite;
}
.trust-strip:hover .trust-track{animation-play-state:paused;}
.trust-track .trust-item{
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:600; letter-spacing:0.06em; color:var(--text-navy);
  white-space:nowrap;
}
.trust-track .trust-item .sep{color:var(--primary-dark);}
@keyframes trust-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){.trust-track{animation:none;}}

/* ==========================================================================
   CATEGORY / PRODUCT SECTION (WooCommerce + Flatsome optimized)
   Đã gộp 3 lớp override trùng lặp trong bản gốc thành 1 bộ rule duy nhất.
   ========================================================================== */
.cat-section{
  padding:60px 0;
  max-width:1240px;
  margin:0 auto;
}
.cat-heading{
  font-weight:700; font-size:26px; text-transform:uppercase; line-height:1.35;
  color:var(--text-navy); margin-bottom:28px; letter-spacing:0.01em;
}
.cat-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  align-items:start;
}
.cat-filters{display:flex; flex-direction:column; gap:16px;}
.cat-filters a{
  font-size:14.5px; color:var(--text-muted); transition:color .2s ease;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.cat-filters a:hover,
.cat-filters a.active{color:var(--primary-dark);}
.cat-filters a.active{font-weight:600; border-color:var(--primary-dark);}

/* --- Thanh cuộn ngang sản phẩm --- */
.cat-scroll{
  width:100%;
  min-width:0; /* bắt buộc để grid con không tràn khỏi cột 1fr */
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:12px;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE / Edge */
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  user-select:none;
}
.cat-scroll:active{cursor:grabbing;}
.cat-scroll::-webkit-scrollbar{display:none; width:0; height:0;}

.cat-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  align-items:stretch;
  width:max-content;
}

/* --- Product card --- */
.cat-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 0 8px;
  background:var(--white);
  overflow:hidden;
  position:relative;
  transition:box-shadow .3s cubic-bezier(0.25,0.8,0.25,1), transform .3s cubic-bezier(0.25,0.8,0.25,1), border-color .3s ease;
}
.cat-card:hover{
  box-shadow:0 8px 18px -6px rgba(115,38,59,0.15);
  transform:translateY(-2px);
  border-color:var(--primary-light);
}

/* Ảnh sản phẩm + hiệu ứng đổi ảnh phụ khi hover */
.cat-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  border-radius:10px 10px 0 0;
  background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
  overflow:hidden;
}
.cat-thumb a{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  overflow:hidden;
}
.cat-thumb img{
  width:100%; height:100%;
  object-fit:contain;
  padding:4px;
  object-position:center;
  transition:opacity .45s cubic-bezier(0.25,1,0.5,1), transform .45s cubic-bezier(0.25,1,0.5,1);
}
.cat-thumb img.primary-img{position:relative; z-index:1; opacity:1;}
.cat-thumb img.secondary-img{position:absolute; top:0; left:0; z-index:2; opacity:0; transform:scale(1.05);}
.cat-card:hover .cat-thumb img.primary-img{opacity:0;}
.cat-card:hover .cat-thumb img.secondary-img{opacity:1; transform:scale(1);}
.cat-card:hover .cat-thumb img.primary-img:only-child{opacity:1; transform:scale(1.06);}

.cat-thumb .mini-tube{
  width:36px; height:80px; background:var(--white);
  border-radius:8px 8px 16px 16px;
  box-shadow:inset 0 0 0 1px var(--border), 0 8px 14px -8px rgba(46,27,33,0.2);
}

/* Nội dung card */
.cat-card-body{
  padding:0 8px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:space-between;
}
.cat-card-body h3{
  font-size:11.5px; font-weight:500; line-height:1.3; color:var(--text-navy);
  margin-bottom:3px; min-height:2.5em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.cat-card-body h3 a{color:var(--text-navy); transition:color .2s ease;}
.cat-card-body h3 a:hover{color:var(--primary-hover);}

.cat-price{
  font-size:12.5px; font-weight:600; color:var(--text-navy);
  margin-bottom:6px; display:flex; align-items:baseline; gap:4px;
}
.btn-add.button{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; background:var(--primary) !important; color:var(--white) !important;
  padding:5px 8px !important; border:none !important; border-radius:999px !important;
  font-size:10.5px !important; font-weight:600 !important; margin:0 !important; min-height:28px !important;
}

/* Giá (hỗ trợ giá gốc gạch ngang + giá sale WooCommerce) */
.cat-price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:15px; font-weight:600; color:var(--text-navy);
  margin-bottom:14px; min-height:24px;
}
.cat-price del{color:var(--text-muted); font-size:13px; font-weight:400; text-decoration:line-through; opacity:.8;}
.cat-price ins{text-decoration:none; color:var(--primary-dark); font-weight:700; font-size:16px;}
.cat-price .woocommerce-Price-amount{display:inline-block;}
.cat-price .woocommerce-Price-currencySymbol{font-size:.85em; margin-left:2px;}

/* Nút thêm giỏ hàng — dùng chung cho nút thường và nút Flatsome/WooCommerce (.button) */
.btn-add,
.cat-card-body .btn-add.button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
  background:var(--btn-cart-bg, var(--primary, #73263B)) !important;
  color:var(--white) !important;
  padding:10px 16px !important;
  min-height:38px !important;
  line-height:1.2 !important;
  border:none !important;
  border-radius:999px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:0.03em !important;
  text-transform:none !important;
  box-shadow:none !important;
  margin:0 !important;
  transition:all .25s ease !important;
  cursor:pointer;
}
.btn-add:hover,
.cat-card-body .btn-add.button:hover{
  background:var(--btn-cart-bg-hover, var(--primary-hover, #591D2E)) !important;
  color:var(--white) !important;
  box-shadow:0 6px 16px rgba(115,38,59,0.35) !important;
  transform:translateY(-1px);
}
.cat-card-body .btn-add.loading{opacity:.75;}
.cat-card-body .btn-add.added::after{content:' ✓'; font-weight:bold;}

/* Thanh tiến trình cuộn ngang */
.cat-progress{
  position:relative;
  height:2px;
  width:100%;
  max-width:100%;
  margin:24px 0 0;
  background:var(--primary-light);
  border-radius:999px;
  overflow:hidden;
}
.cat-progress::after{
  content:'';
  position:absolute; left:0; top:0;
  height:100%;
  width:var(--scroll-progress, 30%);
  background:var(--primary-dark);
  border-radius:999px;
  transition:width .12s linear;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--bg-soft); padding:70px 32px 40px; border-top:1px solid var(--border);}
.footer-inner{max-width:1240px; margin:0 auto;}
.footer-brand{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:26px; color:var(--text-navy); margin-bottom:14px;}
.footer-desc{font-size:14.5px; color:var(--text-muted); max-width:520px; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:34px; line-height:1.7;}
.footer-news h4{font-size:18px; font-weight:600; color:var(--text-navy); margin-bottom:18px;}
.footer-form{display:flex; max-width:420px; border-bottom:1px solid var(--text-navy); padding-bottom:8px; margin-bottom:16px;}
.footer-form input{flex:1; border:none; background:transparent; font-size:14px; color:var(--text-navy); font-family:inherit;}
.footer-form input::placeholder{color:var(--text-muted);}
.footer-form button{background:none; border:none; color:var(--text-navy); display:flex;}
.footer-form button svg{width:20px; height:20px;}
.footer-consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-muted); max-width:480px; line-height:1.6; margin-bottom:44px;}
.footer-consent input{margin-top:3px;}
.footer-consent a{color:var(--text-navy); text-decoration:underline;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-hashtag{font-size:13px; font-weight:500; letter-spacing:0.06em; color:var(--text-navy);}
.socials{display:flex; gap:16px;}
.socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-navy);
  transition:background .2s ease, color .2s ease;
}
.socials a:hover{background:var(--primary-dark); color:var(--white); border-color:var(--primary-dark);}
.socials svg{width:15px; height:15px;}

/* ==========================================================================
   FLOATING ELEMENTS
   ========================================================================== */
.float-gift{
  position:fixed; left:0; bottom:120px; background:var(--text-navy); color:var(--white);
  padding:14px 10px; border-radius:0 10px 10px 0; font-size:11px; font-weight:600; letter-spacing:0.04em;
  writing-mode:vertical-rl; text-orientation:mixed; z-index:40; display:flex; align-items:center; gap:8px;
}
.float-chat{
  position:fixed; right:24px; bottom:24px; width:52px; height:52px; border-radius:50%; background:var(--primary-dark);
  color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -10px rgba(115,38,59,0.5); z-index:40;
}
.float-chat svg{width:22px; height:22px;}

/* ==========================================================================
   RESPONSIVE (≤900px) — đã gộp 2 media query trùng lặp
   ========================================================================== */
@media (max-width: 900px){
  .navlinks{flex-wrap:wrap; gap:18px 24px; padding:14px 20px;}
  .hero{grid-template-columns:1fr; padding:40px 24px; text-align:center;}
  .hero-features{justify-content:center;}
  .hero-disclaimer{margin-left:auto; margin-right:auto;}
  .hero-visual{height:260px; margin-top:20px;}
  .cat-layout{grid-template-columns:1fr;}
  .cat-filters{flex-direction:row; flex-wrap:wrap; gap:10px 20px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}