/* =========================================================
   AFFILIATE SITE FRAMEWORK — main.css
   Toàn bộ màu/font lấy từ CSS variable do inc/customizer.php
   inject qua wp_head (Appearance > Customize > Site Branding).
   KHÔNG hardcode mã hex hay tên font trực tiếp ở file này —
   đổi brand cho site mới chỉ cần đổi giá trị trong Customizer.
   ========================================================= */

*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
}
a{color:var(--signal); text-decoration:none;}
a:visited{color:var(--signal);}
img{max-width:100%; display:block;}

/* ===== Header / Branding ===== */
.site-header{max-width:1080px; margin:0 auto; padding:20px 24px 0;}
.site-branding{margin-bottom:4px;}
.site-title{font-family:var(--font-display); font-size:20px; font-weight:700; margin:0;}
.site-title a{color:var(--text-primary); text-decoration:none;}
.site-description{color:var(--text-secondary); font-size:13px; margin-top:4px;}
.custom-logo-link{display:inline-block;}
.custom-logo-link img{max-height:36px; width:auto; display:block;}

.nav-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.main-navigation{position:relative;}
.main-navigation .nav-menu{display:flex; gap:24px; list-style:none;}
.main-navigation .nav-menu > li{position:relative;}
.main-navigation .nav-menu > li > a{
  color:var(--text-primary); font-family:var(--font-mono); font-size:13px;
  text-decoration:none; padding:20px 0; display:inline-block;
}
.main-navigation .nav-menu > li > a:hover{color:var(--signal);}
.menu-item-has-mega .mega-dropdown{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px; z-index:100;
  box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.menu-item-has-mega:hover .mega-dropdown{display:block;}
.mega-dropdown-list{list-style:none;}
.mega-dropdown-list li a{display:block; padding:8px 10px; color:var(--text-secondary); font-size:14px; text-decoration:none; border-radius:6px;}
.mega-dropdown-list li a:hover{color:var(--signal); background:var(--bg-elevated);}
.menu-toggle{display:none;}

.header-search{margin-left:0;}
.header-search .search-form{display:flex; align-items:center; gap:6px;}
.header-search .search-field{background:var(--bg-surface); border:1px solid var(--border); border-radius:999px; padding:6px 14px; color:var(--text-primary); font-family:var(--font-mono); font-size:12px; width:160px;}
.header-search .search-field:focus{outline:none; border-color:var(--signal);}
.header-search .search-submit{background:var(--bg-surface); border:1px solid var(--border); border-radius:999px; padding:6px 12px; color:var(--text-secondary); font-family:var(--font-mono); font-size:12px; cursor:pointer;}
.header-search .search-submit:hover{color:var(--signal); border-color:var(--signal);}

@media(max-width:780px){
  .menu-toggle{display:block; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 14px;}
  .main-navigation .nav-menu{display:none; flex-direction:column;}
  .main-navigation.toggled .nav-menu{display:flex;}
  .menu-item-has-mega .mega-dropdown{position:static; grid-template-columns:1fr;}
  .header-search{display:none;}
}

/* ===== Homepage ===== */
.homepage{max-width:100%;}
.section-inner{max-width:1080px; margin:0 auto; padding:64px 24px;}
.section-inner h2{font-family:var(--font-display); font-size:26px; font-weight:600; margin-bottom:8px;}
.section-lede{color:var(--text-secondary); font-size:14px; margin-bottom:28px;}

.home-hero{text-align:center; padding:90px 24px 70px; background:var(--bg-surface);}
.home-hero-inner{max-width:720px; margin:0 auto;}
.home-hero .eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--signal);}
.home-hero h1{font-family:var(--font-display); font-size:42px; font-weight:700; line-height:1.15; margin:16px 0 20px;}
.home-hero h1 span{color:var(--signal);}
.home-hero-sub{color:var(--text-secondary); font-size:16px; margin-bottom:28px;}

.home-categories, .home-reviews, .home-deals, .home-trust, .home-faq{border-top:1px solid var(--border);}

.category-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px;}
.category-card{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; text-decoration:none; transition:border-color 0.15s;
}
.category-card:hover{border-color:var(--signal);}
.category-name{color:var(--text-primary); font-size:14px; font-weight:600;}
.category-count{color:var(--text-muted); font-family:var(--font-mono); font-size:11px;}

.reviews-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}
.review-card{
  display:block; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; text-decoration:none;
}
.review-card:hover{border-color:var(--ping);}
.review-rating{display:inline-block; font-family:var(--font-mono); font-size:12px; color:var(--ping); margin-bottom:10px;}
.review-card h3{font-family:var(--font-display); font-size:16px; color:var(--text-primary); margin-bottom:8px;}
.review-cat{font-family:var(--font-mono); font-size:11px; color:var(--text-muted);}
.empty-state{color:var(--text-muted); font-size:14px;}

.trust-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px;}
.trust-label{display:block; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; color:var(--signal); letter-spacing:0.06em; margin-bottom:10px;}
.trust-item p{color:var(--text-secondary); font-size:14px;}

.home-faq .faq-item{max-width:760px;}

@media(max-width:700px){ .home-hero h1{font-size:30px;} }

/* ===== Content pages (Review/Comparison/Coupon/Best-of/Support) ===== */
#page{overflow-x:hidden;}
#primary:not(.homepage){max-width:1080px; margin:0 auto; padding:48px 24px;}

.entry-header{margin-bottom:24px;}
.entry-title{font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--text-primary); margin-bottom:12px;}
.entry-content{color:var(--text-secondary); font-size:15px; line-height:1.7;}
.entry-content p{margin-bottom:16px;}
.entry-content h2{font-family:var(--font-display); font-size:24px; color:var(--text-primary); margin:32px 0 14px;}
.entry-content h3{font-family:var(--font-display); font-size:19px; color:var(--text-primary); margin:24px 0 10px;}
.entry-content a{color:var(--signal);}
.entry-content ul, .entry-content ol{margin:0 0 16px 20px; color:var(--text-secondary);}
.entry-content table{width:100%; border-collapse:collapse; margin:16px 0 28px; font-size:13.5px;}
.entry-content th{text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--text-muted); padding:10px 12px; border-bottom:1px solid var(--border);}
.entry-content td{padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text-secondary);}
.entry-footer, .entry-meta{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:20px;}

.page-title, .archive-title, .search-title{font-family:var(--font-display); font-size:28px; margin-bottom:20px;}
.comments-area{max-width:1080px; margin:0 auto; padding:0 24px 48px; color:var(--text-secondary);}
.cat-links{display:none;}

.article-head{padding:40px 0 0; display:grid; grid-template-columns:1fr 220px; gap:32px; align-items:start; border-bottom:1px solid var(--border); padding-bottom:28px;}
.meta-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}
.meta-bar .stars{color:var(--ping); font-size:13px; letter-spacing:1px;}
.meta-bar .sep{color:var(--border);}
.meta-bar a.disc-link{color:var(--text-muted); text-decoration:underline dotted; text-underline-offset:3px;}
.meta-bar a.disc-link:hover{color:var(--signal);}

.side-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; text-align:center; max-width:220px;}
.side-logo, .side-logo-img{width:44px; height:44px; border-radius:10px; margin:0 auto 12px; display:block;}
.side-logo{background:var(--bg-elevated); color:var(--signal); font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center;}
.side-price{font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); margin-bottom:14px;}
.side-card-cta .btn{width:100%;}

table{width:100%; border-collapse:collapse; margin:16px 0 28px; font-size:13.5px;}
th{text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--text-muted); padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text-secondary);}
td.plan{color:var(--text-primary); font-weight:600;}
td.price{color:var(--signal); font-family:var(--font-mono);}

.proscons{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0;}
.pc-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px;}
.pc-card h3{font-family:var(--font-display); font-size:16px; margin-bottom:12px;}
.pc-card ul{list-style:none;}
.pc-card li{font-size:13.5px; color:var(--text-secondary); padding:5px 0;}
.pc-card li.pro::before{content:'✓  '; color:var(--signal);}
.pc-card li.con::before{content:'✗  '; color:var(--alert, #DC2626);}

.btn{display:inline-block; text-align:center; box-sizing:border-box; font-family:var(--font-body); font-weight:600; font-size:14px; padding:11px 20px; border-radius:var(--radius-sm); border:none; cursor:pointer;}
.btn-primary{background:var(--signal); color:var(--on-signal) !important;}
.btn-secondary{background:transparent; color:var(--text-primary); border:1px solid var(--border);}
.btn-ghost{background:transparent; color:var(--signal); border:1px solid var(--signal);}

.mid-cta{background:var(--bg-surface); border:1px solid var(--border); border-left:3px solid var(--signal); border-radius:var(--radius-md); padding:18px 20px; margin:28px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.mid-cta span{font-size:14px; color:var(--text-secondary);}
.mid-cta .btn{width:auto; padding:10px 22px; flex:none;}

.sticky-cta{display:none;}
@media(max-width:700px){
  .article-head{grid-template-columns:1fr; padding-bottom:20px;}
  .side-card{order:-1; margin-bottom:20px; max-width:100%;}
  .proscons{grid-template-columns:1fr;}
  table{display:block; overflow-x:auto; white-space:nowrap;}
  body{padding-bottom:64px;}
  .sticky-cta{display:flex; align-items:center; gap:12px; position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--bg-surface); border-top:1px solid var(--border); padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .sticky-cta .price{font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); white-space:nowrap;}
  .sticky-cta .btn{flex:1; padding:12px; margin:0; width:auto;}
  h1{font-size:26px;}
  h2{font-size:20px;}
}

.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
.faq-item .q{font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--text-primary); margin-bottom:6px; line-height:1.4;}
.faq-item .a{font-size:14px; color:var(--text-secondary); margin:0; line-height:1.6;}
.entry-content h2 + .faq-item{margin-top:-8px;}

.sources-block{margin:32px 0; padding:20px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);}
.sources-block h2{margin-top:0;}
.sources-block p{font-size:13px; color:var(--text-secondary); line-height:1.6; margin:0;}
.sources-block a{color:var(--signal);}

.helpful-widget{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 20px; margin:24px 0; font-size:13px; color:var(--text-secondary);}
.helpful-widget button{font-family:var(--font-body); font-size:13px; font-weight:600; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; padding:7px 16px; cursor:pointer; color:var(--text-primary); display:inline-block;}
.helpful-widget button:hover{border-color:var(--signal);}
.helpful-thanks{font-weight:600; color:var(--signal);}

/* ===== Comparison ===== */
.quick-answer-box{background:var(--bg-surface); border:1px solid var(--border); border-left:3px solid var(--signal); border-radius:var(--radius-md); padding:18px 20px; margin:24px 0; font-size:14.5px; color:var(--text-secondary);}
.quick-answer-box strong{color:var(--text-primary);}

.brand-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0;}
.brand-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; text-align:center;}
.brand-card.a{border-top:2px solid var(--signal);}
.brand-card.b{border-top:2px solid var(--ping);}
.badge, .badge-img{width:40px; height:40px; border-radius:10px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;}
.badge{background:var(--bg-elevated); font-family:var(--font-display); font-weight:700; font-size:14px;}
.brand-card.a .badge{color:var(--signal);}
.brand-card.b .badge{color:var(--ping);}
.brand-name{font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:4px;}
.brand-price{font-family:var(--font-mono); font-size:13px;}
.brand-price.a{color:var(--signal);}
.brand-price.b{color:var(--ping);}
.badge-img, .side-logo-img{object-fit:cover;}

td.a{color:var(--signal); text-align:right; font-family:var(--font-mono);}
td.b{color:var(--ping); text-align:right; font-family:var(--font-mono);}
td.feat{color:var(--text-primary);}
td.name{color:var(--text-primary); font-weight:600;}
td.name .t-badge{display:inline-flex; width:22px; height:22px; border-radius:6px; background:var(--bg-elevated); color:var(--signal); font-family:var(--font-mono); font-size:9px; font-weight:700; align-items:center; justify-content:center; margin-right:8px; vertical-align:middle;}

.cta-row{display:flex; gap:14px; margin:24px 0;}
.cta-row .btn{flex:1; text-align:center;}
.btn-a{background:var(--signal); color:var(--on-signal) !important;}
.btn-b{background:transparent; border:1px solid var(--ping); color:var(--ping);}

.verdict{background:var(--bg-elevated); border-radius:var(--radius-md); padding:18px 20px; margin:24px 0; font-size:14px; color:var(--text-secondary);}
.verdict .tag{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--signal); letter-spacing:0.06em; margin-bottom:8px; display:block;}

/* ===== Coupon ===== */
.coupon-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0;}
.coupon-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px;}
.coupon-badge{display:inline-block; background:var(--ping); color:var(--on-signal); font-family:var(--font-mono); font-weight:700; font-size:13px; padding:5px 12px; border-radius:999px; margin-bottom:14px;}
.coupon-code-box{background:var(--bg-elevated); border:1px dashed var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:12px; text-align:center;}
.coupon-code{font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--text-primary); letter-spacing:1.5px;}
.get-code-btn{display:block; width:100%; box-sizing:border-box; text-align:center; font-family:var(--font-body); font-weight:600; font-size:14px; background:var(--signal); color:var(--on-signal) !important; border:none; border-radius:var(--radius-sm); padding:14px; cursor:pointer; text-decoration:none; margin-bottom:10px;}
.get-code-btn:hover{opacity:0.92;}
.get-code-btn.copied{background:var(--bg-elevated); color:var(--signal); border:1px solid var(--signal);}
.coupon-meta{font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); text-align:center;}
.coupon-note{font-size:13px; color:var(--text-muted); margin-top:-8px; margin-bottom:24px;}

.price-old{color:var(--text-muted); font-family:var(--font-mono); text-decoration:line-through;}
.price-new{color:var(--signal); font-family:var(--font-mono); font-weight:600;}
.save{color:var(--ping); font-family:var(--font-mono);}

.verify-box{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; margin:24px 0;}
.verify-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.verify-text{font-size:13.5px; color:var(--text-secondary);}
.verify-text strong{color:var(--text-primary);}
.proof-toggle-btn{font-family:var(--font-mono); font-size:12px; background:transparent; border:1px solid var(--border); color:var(--signal); border-radius:999px; padding:6px 14px; cursor:pointer;}
.proof-toggle-btn:hover{border-color:var(--signal);}
.proof-image{display:none; margin-top:16px;}

.related{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; margin:24px 0;}
.related .tag{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--signal); letter-spacing:0.06em; margin-bottom:8px; display:block;}

@media(max-width:700px){
  .coupon-grid{grid-template-columns:1fr;}
  .coupon-card{padding:18px;}
  .get-code-btn{padding:15px 12px; font-size:13.5px;}
  .verify-row{flex-direction:column; align-items:flex-start;}
  .proof-toggle-btn{width:100%; text-align:center; padding:10px;}
}

/* ===== Best-of ===== */
.rank-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin:20px 0; position:relative;}
.rank-num{position:absolute; top:20px; right:24px; font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}
.rank-header{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.rank-badge{width:36px; height:36px; border-radius:9px; background:var(--bg-elevated); color:var(--signal); font-family:var(--font-display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
.rank-header h3{margin:0; font-family:var(--font-display); font-size:17px;}
.rank-rating{font-family:var(--font-mono); font-size:12px; color:var(--ping);}
.rank-rating .unverified{color:var(--text-muted); font-style:italic;}
.rank-tag{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--signal); letter-spacing:0.05em; margin-bottom:12px;}
.rank-feat{margin:12px 0; padding-left:0; list-style:none;}
.rank-feat li{font-size:13.5px; color:var(--text-secondary); margin-bottom:8px;}
.rank-feat li strong{color:var(--text-primary);}
.watch-out{background:rgba(220,38,38,0.06); border-left:2px solid var(--alert, #DC2626); padding:10px 14px; margin-top:12px; font-size:13px; color:var(--text-secondary); border-radius:0 6px 6px 0;}
.watch-out strong{color:var(--alert, #DC2626);}
.g2-note{font-size:11px; color:var(--text-muted); font-style:italic; margin-top:10px;}
.rank-cta-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px;}
.rank-btn{display:inline-block; font-family:var(--font-body); font-weight:600; font-size:13.5px; background:var(--signal); color:var(--on-signal) !important; border:none; border-radius:var(--radius-sm); padding:10px 18px; text-decoration:none;}
.rank-links{display:flex; gap:14px; font-family:var(--font-mono); font-size:11.5px;}
.rank-links a{color:var(--text-secondary); text-decoration:underline dotted; text-underline-offset:3px;}
.rank-links a:hover{color:var(--signal);}
.rank-links .coupon-tag{color:var(--ping);}

.checklist{margin:16px 0 20px 0; list-style:none;}
.checklist li{font-size:14.5px; color:var(--text-secondary); margin-bottom:10px; padding-left:18px; position:relative;}
.checklist li::before{content:'—'; position:absolute; left:0; color:var(--signal); font-family:var(--font-mono);}

.decision-box{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; margin:24px 0;}
.decision-q{font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--text-primary); margin:16px 0 6px;}
.decision-q:first-child{margin-top:0;}

.changelog{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; margin:24px 0;}
.changelog-item{font-size:13.5px; color:var(--text-secondary); padding:8px 0; border-bottom:1px solid var(--border);}
.changelog-item:last-child{border-bottom:none;}
.changelog-item .date{font-family:var(--font-mono); color:var(--signal); font-weight:600; margin-right:8px;}

.pricing-shot{margin:14px 0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
.pricing-shot .shot-caption{background:var(--bg-surface); padding:8px 14px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); border-top:1px solid var(--border);}

@media(max-width:700px){ .rank-num{position:static; display:block; margin-bottom:6px;} }

/* ===== Author page ===== */
.author-hero{display:flex; gap:24px; align-items:flex-start; margin:24px 0 36px; flex-wrap:wrap;}
.author-hero-img{width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none;}
.author-role{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--signal); display:block; margin-bottom:10px;}
@media(max-width:700px){ .author-hero{flex-direction:column; align-items:center; text-align:center;} }

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); margin-top:60px; padding:48px 24px 24px; background:var(--bg-surface);}
.footer-inner{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; max-width:1080px; margin:0 auto 32px;}
.footer-logo{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text-primary);}
.footer-tagline{font-size:13px; color:var(--text-secondary); margin-top:8px;}
.footer-col-title{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--signal); letter-spacing:0.06em; margin-bottom:12px;}
.footer-legal{list-style:none;}
.footer-legal li a{color:var(--text-secondary); font-size:13px; text-decoration:none; line-height:2;}
.footer-legal li a:hover{color:var(--signal);}
.site-info{max-width:1080px; margin:0 auto; padding-top:20px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:11px; color:var(--text-muted); text-align:center;}
.site-info a{color:var(--text-muted);}
.site-info span{margin:0 6px;}

@media(max-width:780px){ .footer-inner{grid-template-columns:1fr;} }