/* ============================================================
   Mua Đẹp Rẻ — Design System
   Chuyển từ thiết kế JSX gốc — giữ nguyên 100% visual
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- Design Tokens ---- */
:root {
  --mint-50: #F4FAF7; --mint-100: #E8F4F0; --mint-200: #CFE6DC;
  --mint-300: #A8C9B5; --mint-500: #5B8F7A; --mint-700: #2F5F4E; --mint-900: #1F4A3F;
  --ivory: #FBF8F3; --cream: #F5EFE6; --sand: #E8DFD1;
  --ink-900: #1A1F1C; --ink-700: #3D4641; --ink-500: #6B736D;
  --ink-300: #A8AEA9; --ink-200: #D4D8D4;
  --gold: #C9A961; --gold-soft: #E5D5A8; --blush: #F5E1DB; --coral: #E8A598;
  --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(31,74,63,.04),0 1px 3px rgba(31,74,63,.06);
  --shadow:    0 4px 12px rgba(31,74,63,.06),0 2px 4px rgba(31,74,63,.04);
  --shadow-lg: 0 12px 32px rgba(31,74,63,.08),0 4px 8px rgba(31,74,63,.04);
  --font-display: 'Playfair Display','Cormorant Garamond',Georgia,serif;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink-900);background:var(--ivory);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---- Layout ---- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* ---- Topbar ---- */
.topbar{background:var(--mint-900);padding:8px 0}
.topbar__inner{display:flex;justify-content:space-between;align-items:center}
.topbar__text{font-size:11px;color:var(--mint-300);letter-spacing:.06em}

/* ---- Header ---- */
.site-header{background:var(--ivory);border-bottom:1px solid var(--mint-100);
  padding:16px 0;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 var(--mint-100)}
.header__inner{display:flex;align-items:center;gap:32px}
.site-logo{font-family:var(--font-display);font-size:22px;font-weight:600;
  color:var(--mint-900);letter-spacing:-.02em}
.site-logo span{color:var(--gold)}
.main-nav{display:flex;gap:8px;margin:0 auto}
.main-nav a{font-size:13px;font-weight:600;color:var(--ink-700);padding:6px 12px;
  border-radius:var(--radius-sm);transition:color .15s,background .15s;letter-spacing:.02em}
.main-nav a:hover,.main-nav a.active{color:var(--mint-900);background:var(--mint-50)}
.header__search{display:flex;align-items:center;gap:8px;background:var(--mint-50);
  border:1px solid var(--mint-200);border-radius:var(--radius-sm);
  padding:6px 12px;min-width:180px}
.header__search input{border:none;background:none;font-size:13px;color:var(--ink-900);
  outline:none;width:100%;font-family:var(--font-sans)}
.header__search input::placeholder{color:var(--ink-300)}
.header__search svg{color:var(--ink-300);flex-shrink:0}

/* ---- Hero ---- */
.hero{padding:72px 0 80px;background:var(--mint-50);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,143,122,.08) 0%,transparent 70%);
  top:-150px;right:-100px;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--mint-700);
  text-transform:uppercase;margin-bottom:16px}
.hero__title{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);
  font-weight:500;line-height:1.1;color:var(--ink-900);margin:0 0 20px}
.hero__title em{color:var(--mint-700);font-style:italic}
.hero__desc{font-size:16px;line-height:1.75;color:var(--ink-500);margin:0 0 32px;max-width:480px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hero__image{position:relative;border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio:4/5;background:var(--mint-100)}
.hero__image img{width:100%;height:100%;object-fit:cover}
.hero__image-placeholder{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:80px;background:linear-gradient(135deg,var(--mint-100),var(--cream))}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  border-radius:var(--radius);font-size:14px;font-weight:600;letter-spacing:.04em;
  border:none;cursor:pointer;transition:all .2s;font-family:var(--font-sans)}
.btn--primary{background:var(--mint-900);color:var(--ivory)}
.btn--primary:hover{background:var(--mint-700);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--outline{background:transparent;color:var(--mint-900);
  border:1.5px solid var(--mint-900)}
.btn--outline:hover{background:var(--mint-50);transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{opacity:.9;transform:translateY(-1px)}
.btn--sm{padding:8px 16px;font-size:13px;border-radius:var(--radius-sm)}

/* ---- Trust Bar ---- */
.trust-bar{padding:24px 0;border-bottom:1px solid var(--mint-100)}
.trust-bar__items{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.trust-item{display:flex;align-items:center;gap:10px}
.trust-item__icon{width:32px;height:32px;background:var(--mint-100);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.trust-item__text{font-size:13px;font-weight:600;color:var(--ink-700)}

/* ---- Section ---- */
.section{padding:64px 0}
.section--alt{background:var(--mint-50)}
.section__header{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:40px;gap:16px}
.section__title{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);
  font-weight:500;color:var(--ink-900);margin:0}
.section__title em{color:var(--mint-700);font-style:italic}
.section__link{font-size:13px;font-weight:600;color:var(--mint-700);
  display:flex;align-items:center;gap:4px;white-space:nowrap}
.section__link:hover{color:var(--mint-900)}

/* ---- Category Pills ---- */
.cat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.cat-pill{padding:8px 18px;border-radius:20px;font-size:13px;font-weight:500;
  border:1.5px solid var(--mint-200);color:var(--ink-700);cursor:pointer;
  transition:all .15s;background:var(--ivory)}
.cat-pill:hover,.cat-pill.active{background:var(--mint-900);color:var(--ivory);
  border-color:var(--mint-900)}

/* ---- Product Card ---- */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.product-card{background:#fff;border:1px solid var(--mint-100);border-radius:var(--radius-lg);
  overflow:hidden;transition:box-shadow .2s,transform .2s;position:relative}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.product-card__image{aspect-ratio:1;background:var(--mint-50);position:relative;overflow:hidden}
.product-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.product-card:hover .product-card__image img{transform:scale(1.04)}
.product-card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:60px}
.badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge--gold{background:var(--gold-soft);color:#8A6D20}
.badge--dark{background:var(--ink-900);color:var(--ivory)}
.badge--blush{background:var(--blush);color:#9B5B4E}
.badge--mint{background:var(--mint-100);color:var(--mint-900)}
.product-card__body{padding:20px}
.product-card__brand{font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--mint-700);text-transform:uppercase;margin-bottom:4px}
.product-card__name{font-size:16px;font-weight:600;color:var(--ink-900);
  margin:0 0 4px;line-height:1.35}
.product-card__name-vi{font-size:13px;color:var(--ink-500);margin:0 0 12px}
.stars{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.stars__rating{font-size:13px;font-weight:600;color:var(--ink-700)}
.stars__count{font-size:12px;color:var(--ink-300);margin-left:2px}
.stars__dots{display:flex;gap:2px}
.star{width:12px;height:12px;color:var(--gold)}
.product-card__price{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.price{font-size:20px;font-weight:700;color:var(--ink-900)}
.price-old{font-size:14px;color:var(--ink-300);text-decoration:line-through}
.product-card__cta{display:flex;gap:8px}
.product-card__cta .btn{flex:1;justify-content:center}

/* ---- Article Card ---- */
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.article-card{background:#fff;border:1px solid var(--mint-100);border-radius:var(--radius-lg);
  overflow:hidden;transition:box-shadow .2s,transform .2s}
.article-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.article-card__image{aspect-ratio:16/9;background:var(--mint-50);overflow:hidden}
.article-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-card:hover .article-card__image img{transform:scale(1.04)}
.article-card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:40px;background:linear-gradient(135deg,var(--mint-50),var(--cream))}
.article-card__body{padding:20px}
.article-card__cat{font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--mint-700);text-transform:uppercase;margin-bottom:8px}
.article-card__title{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink-900);
  margin:0 0 8px}
.article-card:hover .article-card__title{color:var(--mint-900)}
.article-card__excerpt{font-size:13px;color:var(--ink-500);line-height:1.6;
  margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card__meta{display:flex;gap:12px;align-items:center}
.article-card__author{font-size:12px;font-weight:600;color:var(--ink-700)}
.article-card__date,.article-card__read{font-size:12px;color:var(--ink-300)}

/* ---- Article Detail ---- */
.article-hero{padding:48px 0 32px}
.article-hero__cat{font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--mint-700);text-transform:uppercase;margin-bottom:12px}
.article-hero__title{font-family:var(--font-display);font-size:clamp(28px,4vw,44px);
  font-weight:500;line-height:1.15;color:var(--ink-900);margin:0 0 20px}
.article-hero__meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--mint-100)}
.article-hero__author{font-size:14px;font-weight:600;color:var(--ink-700)}
.article-hero__date,.article-hero__read{font-size:13px;color:var(--ink-300)}
.article-hero__image{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  margin:32px 0;background:var(--mint-100)}
.article-hero__image img{width:100%;height:100%;object-fit:cover}

.disclosure{background:var(--mint-50);border:1px solid var(--mint-200);
  border-radius:var(--radius);padding:16px 20px;margin:24px 0;
  font-size:13px;color:var(--mint-700);line-height:1.6}
.disclosure strong{font-weight:700}

.article-body{font-size:16px;line-height:1.85;color:var(--ink-700)}
.article-body h2{font-family:var(--font-display);font-size:26px;font-weight:500;
  color:var(--ink-900);margin:44px 0 16px;padding-top:8px;
  border-top:2px solid var(--mint-100)}
.article-body h3{font-size:20px;font-weight:600;color:var(--ink-900);margin:32px 0 12px}
.article-body p{margin:0 0 20px}
.article-body ul,
.article-body ol{margin:0 0 20px;padding-left:24px}
.article-body li{margin-bottom:8px}
.article-body blockquote{border-left:3px solid var(--gold);padding:12px 20px;
  margin:24px 0;background:var(--cream);border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;color:var(--ink-500)}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.article-body th{background:var(--mint-100);color:var(--mint-900);font-weight:700;
  padding:10px 16px;text-align:left;font-size:12px;letter-spacing:.06em}
.article-body td{padding:10px 16px;border-bottom:1px solid var(--mint-100);color:var(--ink-700)}
.article-body a{color:var(--mint-700);text-decoration:underline;text-decoration-color:var(--mint-200)}
.article-body a:hover{color:var(--mint-900)}

/* ---- Pros/Cons ---- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.pros-cons__box{border-radius:var(--radius);padding:20px}
.pros-cons__box--pros{background:var(--mint-50);border:1px solid var(--mint-200)}
.pros-cons__box--cons{background:#FFF8F7;border:1px solid #F5E1DB}
.pros-cons__title{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:12px}
.pros-cons__box--pros .pros-cons__title{color:var(--mint-700)}
.pros-cons__box--cons .pros-cons__title{color:#9B5B4E}
.pros-cons__list{list-style:none;padding:0;margin:0}
.pros-cons__list li{font-size:14px;color:var(--ink-700);padding:4px 0;
  display:flex;gap:8px;align-items:flex-start}
.pros-cons__list li::before{flex-shrink:0;margin-top:1px}
.pros-cons__box--pros li::before{content:'✓';color:var(--mint-700);font-weight:700}
.pros-cons__box--cons li::before{content:'✗';color:#E8A598;font-weight:700}

/* ---- Product Summary Box ---- */
.product-summary{background:var(--cream);border:1px solid var(--sand);
  border-radius:var(--radius-lg);padding:28px;margin:32px 0}
.product-summary__header{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px}
.product-summary__img{width:100px;height:100px;border-radius:var(--radius);
  background:var(--mint-50);object-fit:cover;flex-shrink:0}
.product-summary__info{flex:1}
.product-summary__brand{font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--mint-700);text-transform:uppercase;margin-bottom:4px}
.product-summary__name{font-size:20px;font-weight:600;color:var(--ink-900);margin:0 0 8px}
.product-summary__price-row{display:flex;align-items:baseline;gap:10px}
.product-summary__aff{margin-top:16px}

/* ---- Footer ---- */
.site-footer{background:var(--mint-900);color:var(--ivory);padding:56px 0 32px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer__brand{font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--ivory);margin-bottom:12px}
.footer__desc{font-size:13px;color:var(--mint-300);line-height:1.7}
.footer__heading{font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--mint-500);text-transform:uppercase;margin-bottom:16px}
.footer__links{list-style:none;padding:0;margin:0}
.footer__links li{margin-bottom:8px}
.footer__links a{font-size:13px;color:var(--mint-300);transition:color .15s}
.footer__links a:hover{color:var(--ivory)}
.footer__bottom{border-top:1px solid var(--mint-700);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer__copy{font-size:12px;color:var(--mint-500)}
.footer__disclaimer{font-size:11px;color:var(--mint-700);max-width:500px;line-height:1.6}

/* ---- Breadcrumb ---- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--ink-300);padding:16px 0;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-500);transition:color .15s}
.breadcrumb a:hover{color:var(--mint-900)}
.breadcrumb__sep{color:var(--ink-200)}
.breadcrumb__current{color:var(--ink-900);font-weight:500}

/* ---- Pagination ---- */
.pagination{display:flex;gap:8px;justify-content:center;padding:48px 0 0}
.pagination a,.pagination span{width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  border:1.5px solid var(--mint-200);color:var(--ink-700);transition:all .15s}
.pagination a:hover{border-color:var(--mint-700);color:var(--mint-900)}
.pagination .active{background:var(--mint-900);color:var(--ivory);border-color:var(--mint-900)}

/* ---- Admin Notice ---- */
.flash{padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:20px}
.flash--success{background:#E8F4F0;color:var(--mint-900);border:1px solid var(--mint-200)}
.flash--error{background:#FFF0F0;color:#B91C1C;border:1px solid #FCA5A5}

/* ---- Mobile ---- */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink-900)}
@media(max-width:768px){
  .hero__grid{grid-template-columns:1fr}
  .hero__image{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .articles-grid{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .main-nav{display:none}
  .hamburger{display:block}
  .trust-bar__items{gap:16px}
  .header__search{display:none}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .hero{padding:40px 0 48px}
  .section{padding:40px 0}
  .footer__grid{grid-template-columns:1fr}
}