:root {
  --red:#b90f1a; --red2:#991b1b; --orange:#f97316; --blue:#2563eb; --green:#84bd32;
  --dark:#07111f; --line:#e5e7eb; --muted:#667085; --bg:#f8fafc;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:#101828; line-height:1.6; }
a { text-decoration:none; color:inherit; }
.container { max-width:1180px; margin:0 auto; padding:0 18px; }
.topbar { background:#991b1b; color:#fff; text-align:center; padding:9px 12px; font-weight:800; font-size:14px; }
.nowrap { white-space:nowrap; }

.header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.logo { display:flex; align-items:center; gap:12px; font-weight:900; }
.logo-mark { width:46px; height:46px; border-radius:50%; background:#020617; color:#fde047; display:flex; align-items:center; justify-content:center; }
.logo-title { font-size:18px; line-height:1.1; }
.logo-sub { font-size:12px; color:#64748b; font-weight:500; }
.nav { display:flex; align-items:center; gap:23px; font-weight:900; text-transform:uppercase; font-size:14px; }
.nav a:hover { color:var(--red); }
.drop { position:relative; padding:25px 0; }
.drop-menu { display:none; position:absolute; top:64px; left:0; width:280px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:0 16px 35px rgba(0,0,0,.13); text-transform:none; }
.drop:hover .drop-menu { display:block; }
.drop-menu a { display:block; padding:12px 14px; border-radius:12px; font-weight:800; }
.drop-menu a:hover { background:#f8fafc; }
.action-btn { background:var(--red); color:#fff; border-radius:12px; padding:12px 16px; font-weight:900; }
.menu-toggle { display:none; }
.hamb { display:none; background:#020617; color:#fff; border-radius:14px; padding:12px 15px; font-size:22px; cursor:pointer; }
.mobile-menu { display:none; }

.hero { background:radial-gradient(circle at 82% 18%,rgba(255,0,80,.33),transparent 28%),radial-gradient(circle at 72% 64%,rgba(0,160,255,.18),transparent 25%),linear-gradient(135deg,#000 0%,#08111f 48%,#000 100%); color:#fff; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; padding:58px 18px 40px; }
.badge { display:inline-block; background:rgba(250,204,21,.16); color:#fde047; border-radius:999px; padding:8px 15px; font-weight:900; margin-bottom:14px; }
h1 { font-size:52px; line-height:1.08; margin:0 0 14px; font-weight:900; letter-spacing:-1px; }
.hero p { font-size:19px; color:#e5e7eb; max-width:700px; margin:0; }
.btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.btn { display:inline-block; border-radius:14px; padding:14px 20px; font-weight:900; border:1px solid transparent; text-align:center; cursor:pointer; }
.btn.red { background:var(--red); color:#fff; }
.btn.orange { background:var(--orange); color:#fff; }
.btn.blue { background:var(--blue); color:#fff; }
.btn.green { background:var(--green); color:#fff; }
.btn.outline { border-color:rgba(255,255,255,.35); color:#fff; }
.hero-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:28px; padding:18px; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quick-card { background:#fff; border-radius:18px; padding:15px; color:#101828; }
.quick-img { height:92px; border-radius:14px; background:linear-gradient(135deg,#fee2e2,#fff7ed); display:flex; align-items:center; justify-content:center; font-weight:900; color:#991b1b; }
.quick-card b { display:block; margin-top:10px; }
.quick-card small { display:block; color:#b91c1c; font-weight:900; margin-top:4px; }

.why { background:radial-gradient(circle at 78% 18%,rgba(255,0,80,.24),transparent 23%),radial-gradient(circle at 62% 78%,rgba(0,170,255,.14),transparent 26%),linear-gradient(135deg,#000,#050d16,#000); color:#fff; padding:34px 0 40px; }
.why-title { text-align:center; font-size:24px; font-weight:900; margin-bottom:28px; text-transform:uppercase; }
.why-title span { color:#ff1d2d; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px 28px; }
.benefit { display:grid; grid-template-columns:68px 1fr; gap:16px; align-items:flex-start; }
.iconbox { width:68px; height:68px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:900; color:#fff; }
.i1 { background:#f59e0b; } .i2 { background:#fb7c4d; } .i3 { background:#9ac43b; } .i4 { background:#8db33d; } .i5 { background:#1d7edd; } .i6 { background:#305f9b; }
.benefit h3 { margin:0 0 6px; font-size:18px; }
.benefit p { margin:0; color:#f3f4f6; font-size:15px; }
.why-cta { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:30px; }

.trust { background:#fff; border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px; }
.trust-item { font-weight:800; }
.section { padding:48px 0; }
.section.white { background:#fff; }
.eyebrow { color:var(--red); font-weight:900; text-transform:uppercase; letter-spacing:2px; font-size:13px; }
.section h2 { font-size:36px; line-height:1.2; margin:8px 0 10px; font-weight:900; }
.section-desc { color:#475569; max-width:760px; }
.breadcrumbs { font-size:14px; color:#667085; margin:18px 0; }
.breadcrumbs a { color:#b90f1a; font-weight:900; }

/* Clean product layout */
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:28px; align-items:stretch; }
.product-card { background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); display:flex; flex-direction:column; min-width:0; }
.product-img { height:190px; background:linear-gradient(135deg,#fee2e2,#fff7ed); display:flex; align-items:center; justify-content:center; color:#991b1b; font-weight:900; font-size:22px; flex:0 0 auto; }
.product-content { padding:20px; text-align:center; display:flex; flex-direction:column; align-items:center; flex:1; }
.product-content h3 { margin:0; font-size:20px; min-height:32px; }
.stars { color:#f59e0b; margin:10px 0; }
.variants { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 12px; min-height:58px; }
.variant-btn { border:1px solid #d0d5dd; background:#fff; color:#344054; border-radius:8px; padding:7px 10px; font-weight:900; cursor:pointer; font-size:14px; line-height:1.25; }
.variant-btn b { display:block; color:#b90f1a; font-size:13px; }
.variant-btn.active { background:#4b5563; color:#fff; border-color:#4b5563; }
.variant-btn.active b { color:#fff; }
.price { font-size:24px; color:var(--red); font-weight:900; margin-top:4px; }
.product-note { margin:8px 0 18px; color:#475569; font-size:14px; }
.product-content .buy-btn { margin-top:auto; min-width:150px; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px; }
.info-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.info-card h3 { font-size:24px; margin:5px 0; }
.area-list { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
.area-list a { background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; font-weight:800; }
.seo-box { background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; margin-top:28px; }
.seo-box p { color:#475569; }
.cta { background:#020617; color:#fff; border-radius:30px; padding:34px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.cta p { color:#cbd5e1; }
.footer { background:#020617; color:#fff; padding:42px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
.footer p,.footer a { color:#cbd5e1; }
.copyright { border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:16px; margin-top:32px; color:#94a3b8; }
.floating { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:60; }
.float { width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.float.z { background:#2563eb; } .float.p { background:#b91c1c; }

@media(max-width:900px) {
  .nav,.action-btn { display:none; }
  .hamb { display:flex; align-items:center; justify-content:center; min-width:52px; min-height:52px; }
  .header-inner { height:76px; }
  .hero-grid { display:block; padding:36px 18px 30px; }
  h1 { font-size:36px; }
  .hero p { font-size:17px; }
  .hero-panel { display:none; }
  .benefits,.product-grid,.card-grid,.footer-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .benefit { grid-template-columns:58px 1fr; }
  .iconbox { width:58px; height:58px; }
  .area-list { grid-template-columns:1fr 1fr; }
  .cta { grid-template-columns:1fr; }
  .topbar { font-size:13px; line-height:1.35; }
  .menu-toggle:checked ~ .mobile-menu { display:block; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.55); }
  .mobile-panel { position:absolute; right:0; top:0; width:88%; max-width:390px; height:100vh; height:100dvh; overflow-y:auto; background:#fff; padding:14px 16px 24px; box-shadow:-10px 0 30px rgba(0,0,0,.25); }
  .mobile-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid #e5e7eb; color:#111827; }
  .close { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid #e5e7eb; border-radius:12px; font-size:30px; color:#111827; background:#fff; cursor:pointer; }
  .mnav a,.mnav summary { display:block; padding:10px 8px; border-bottom:1px solid #eee; color:#111827; background:#fff; font-size:15px; font-weight:900; }
  .mnav details a { padding-left:24px; color:#4b5563; font-size:14px; font-weight:800; }
  .m-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
  .m-actions .btn { padding:12px 10px; font-size:14px; }
  .product-content .buy-btn { width:100%; }
}

/* PRODUCT NOTE 3 LINES */
.product-benefits{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  width:100%;
  text-align:left;
}
.product-benefits li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
  font-size:15px;
  line-height:1.45;
  color:#334155;
  font-weight:600;
}
.product-benefits li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#f59e0b;
  font-weight:900;
}
@media(max-width:900px){
  .product-benefits li{
    font-size:14px;
  }
}




/* MOBILE MENU TIGHT FINAL - overrides all previous mobile menu rules */
@media(max-width:900px){
  .mobile-menu{
    background:rgba(0,0,0,.45)!important;
    align-items:flex-start!important;
  }
  .mobile-panel{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    bottom:auto!important;
    left:auto!important;
    width:68vw!important;
    max-width:280px!important;
    min-width:250px!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    padding:9px 10px 10px!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 14px 38px rgba(0,0,0,.28)!important;
  }
  .mobile-head{
    margin:0 0 4px!important;
    padding:0 0 6px!important;
    gap:8px!important;
    border-bottom:1px solid #e5e7eb!important;
  }
  .mobile-head b{
    font-size:14px!important;
    line-height:1.2!important;
  }
  .mobile-head small{
    font-size:11px!important;
  }
  .close{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    font-size:24px!important;
    border-radius:10px!important;
  }
  .mnav a,.mnav summary{
    padding:6px 4px!important;
    font-size:13px!important;
    line-height:1.2!important;
    border-bottom:1px solid #eeeeee!important;
  }
  .mnav details a{
    padding:6px 4px 6px 16px!important;
    font-size:12.5px!important;
    line-height:1.2!important;
  }
  .m-actions{
    margin-top:8px!important;
    gap:6px!important;
    grid-template-columns:1fr 1fr!important;
  }
  .m-actions .btn{
    padding:8px 4px!important;
    font-size:12px!important;
    border-radius:10px!important;
  }
}
@media(max-width:380px){
  .mobile-panel{
    width:70vw!important;
    max-width:270px!important;
    min-width:235px!important;
  }
}



/* ====================== CART / DETAIL / FORMS (frontend bổ sung) ====================== */
.breadcrumb{font-size:13px;color:#64748b;padding:14px 0;}
.breadcrumb a{color:#64748b;} .breadcrumb a:hover{color:var(--red);}
.section-pad{padding:34px 0;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
.detail-img{height:380px;border-radius:24px;background:linear-gradient(135deg,#fee2e2,#fff7ed);display:flex;align-items:center;justify-content:center;color:#991b1b;font-weight:900;font-size:26px;overflow:hidden;}
.detail-img img{width:100%;height:100%;object-fit:cover;}
.detail-info h1{font-size:30px;color:#0f172a;}
.qty-row{display:flex;align-items:center;gap:12px;margin:14px 0;}
.qty-row input{width:70px;padding:10px;border:1px solid var(--line);border-radius:10px;text-align:center;font-weight:900;}
.cart-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;}
.cart-table th,.cart-table td{padding:14px;border-bottom:1px solid var(--line);text-align:left;}
.cart-table img{width:54px;height:54px;object-fit:cover;border-radius:10px;}
.form-grid{display:grid;gap:14px;max-width:560px;}
.form-grid label{font-weight:800;font-size:14px;display:block;margin-bottom:4px;}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;}
.alert{padding:12px 16px;border-radius:12px;margin:14px 0;font-weight:700;}
.alert.ok{background:#dcfce7;color:#166534;} .alert.err{background:#fee2e2;color:#991b1b;}
.modal-back{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;align-items:center;justify-content:center;padding:16px;}
.modal-back.open{display:flex;}
.modal{background:#fff;border-radius:20px;padding:24px;max-width:460px;width:100%;}
.modal h3{margin-top:0;}
.modal .close-x{float:right;cursor:pointer;font-size:24px;color:#94a3b8;}
.post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;}
.post-card .thumb{height:170px;background:linear-gradient(135deg,#e0f2fe,#fce7f3);display:flex;align-items:center;justify-content:center;color:#0369a1;font-weight:900;overflow:hidden;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .body{padding:16px;}
.post-card h3{font-size:17px;margin:0 0 8px;}
.article{max-width:820px;margin:0 auto;}
.article .content{font-size:17px;color:#1f2937;}
.article .content img{max-width:100%;border-radius:14px;}
.cart-count-badge{background:#fde047;color:#020617;border-radius:999px;padding:1px 8px;font-size:12px;margin-left:4px;}
@media(max-width:900px){ .detail-grid{grid-template-columns:1fr;} .detail-img{height:260px;} }

/* ====================== ADMIN ====================== */
.adm-body{background:#0f172a;min-height:100vh;color:#e2e8f0;display:flex;font-family:Arial,Helvetica,sans-serif;margin:0;}
.adm-side{width:240px;background:#020617;min-height:100vh;padding:18px 0;flex:0 0 auto;}
.adm-side .brand{font-weight:900;font-size:18px;padding:0 20px 18px;color:#fde047;border-bottom:1px solid #1e293b;}
.adm-side a{display:block;color:#cbd5e1;padding:11px 20px;font-weight:700;font-size:14px;}
.adm-side a:hover,.adm-side a.active{background:#1e293b;color:#fff;}
.adm-side .grp{font-size:11px;text-transform:uppercase;color:#64748b;padding:16px 20px 6px;letter-spacing:.5px;}
.adm-main{flex:1;background:#f1f5f9;color:#0f172a;min-height:100vh;}
.adm-top{background:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e2e8f0;}
.adm-top a{color:#b91c1c;font-weight:800;}
.adm-content{padding:24px;}
.adm-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;margin-bottom:18px;}
.adm-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;}
.adm-table th,.adm-table td{padding:11px 12px;border-bottom:1px solid #e2e8f0;text-align:left;font-size:14px;}
.adm-table th{background:#f8fafc;font-size:12px;text-transform:uppercase;color:#64748b;}
.adm-table img{width:42px;height:42px;object-fit:cover;border-radius:8px;}
.btn-sm{display:inline-block;padding:6px 12px;border-radius:8px;font-weight:800;font-size:13px;border:none;cursor:pointer;text-decoration:none;}
.btn-primary{background:#b91c1c;color:#fff;} .btn-edit{background:#2563eb;color:#fff;}
.btn-del{background:#ef4444;color:#fff;} .btn-gray{background:#e2e8f0;color:#0f172a;}
.adm-form label{display:block;font-weight:800;font-size:13px;margin:14px 0 5px;}
.adm-form input,.adm-form textarea,.adm-form select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;font-family:inherit;}
.adm-form textarea{min-height:120px;}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.adm-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.adm-stat .box{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;}
.adm-stat .box b{font-size:28px;display:block;color:#b91c1c;}
.seo-fieldset{border:1px dashed #cbd5e1;border-radius:12px;padding:6px 16px 16px;margin-top:18px;}
.seo-fieldset legend{font-weight:900;color:#0369a1;padding:0 8px;}
.login-wrap{max-width:380px;margin:8vh auto;background:#fff;color:#0f172a;border-radius:18px;padding:30px;}
.variant-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:8px;}
.muted{color:#64748b;font-size:13px;}
@media(max-width:760px){ .adm-side{width:64px;} .adm-side .brand,.adm-side .grp,.adm-side a span{display:none;} .adm-grid2,.adm-stat{grid-template-columns:1fr;} }


/* ===== HOME v2: hero slider (flickity), square thumb, reviews ===== */
.hero-wrap{background:#000}
.hero-slider{width:100%}
.hero-slider .hero-cell{width:100%;position:relative}
.hero-slider .hero-cell img{display:block;width:100%;height:440px;object-fit:cover}
.hero-slider .hero-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 22px;color:#fff;font-weight:900;font-size:26px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.flickity-page-dots{bottom:14px}
.flickity-page-dots .dot{background:#fff;opacity:.55}
.flickity-page-dots .dot.is-selected{opacity:1;background:#fde047}
.flickity-button{background:rgba(0,0,0,.4);color:#fff}
.flickity-button:hover{background:rgba(0,0,0,.65)}
.flickity-button-icon{fill:#fff}

/* Ảnh đại diện sản phẩm 1:1 vuông */
.product-img{height:auto;aspect-ratio:1/1}
.product-img img{width:100%;height:100%;object-fit:cover}

/* Khối đánh giá khách hàng */
.reviews-sec{margin-top:42px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.review-card .stars{color:#f59e0b;font-size:18px;letter-spacing:2px}
.review-card p{color:#475569;margin:10px 0 0;font-style:italic}
.review-card .who{font-weight:900;margin-top:12px;color:#0f172a}

@media(max-width:900px){ .hero-slider .hero-cell img{height:210px} .hero-slider .hero-cap{font-size:18px;padding:16px} }