/*
Theme Name: Yellow Black
Theme URI: https://example.com/
Author: Yellow Black
Description: Black-and-yellow landing page theme for an AliExpress affiliate product showcase. Works with the AFF Showcase plugin (3x3 product grid + Load more). Edit homepage text in Appearance → Customize → Trang chủ Landing.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yellow-black
*/

/* Bố cục: dải đen toàn chiều rộng xen kẽ dải vàng; nội dung trong khung 1180px.
   Điểm nhấn duy nhất: dải băng chữ chạy chéo màu vàng giữa hero và phần giới thiệu. */
:root{
  --vd-black:#0d0c0a;      /* nền chính */
  --vd-coal:#17150f;       /* nền thẻ / khối */
  --vd-line:#2d2a21;       /* đường kẻ */
  --vd-yellow:#ffcf1a;     /* màu nhấn */
  --vd-yellow-deep:#e6b400;
  --vd-paper:#f6f1e3;      /* chữ chính trên nền đen */
  --vd-muted:#a8a191;      /* chữ phụ */
  --vd-display:"Archivo","Arial Black","Segoe UI",system-ui,sans-serif;
  --vd-body:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --vd-max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--vd-black);color:var(--vd-paper);font:400 16px/1.65 var(--vd-body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto}
a{color:var(--vd-yellow)}
a:hover{color:var(--vd-paper)}
:focus-visible{outline:3px solid var(--vd-yellow);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;background:var(--vd-yellow);color:var(--vd-black);padding:10px 14px;font-weight:700}

.vd-wrap{max-width:var(--vd-max);margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

h1,h2,h3{font-family:var(--vd-display);font-stretch:125%;line-height:1.14;letter-spacing:-.01em;text-wrap:balance;margin:0}
.vd-eyebrow{font:700 12px/1 var(--vd-body);letter-spacing:.16em;text-transform:uppercase;color:var(--vd-yellow);margin:0 0 20px;display:flex;align-items:center;gap:10px}
.vd-eyebrow::before{content:"";width:22px;height:3px;background:currentColor}

/* Nút */
.vd-btn{display:inline-flex;align-items:center;gap:10px;font:800 15px/1 var(--vd-display);font-stretch:112%;letter-spacing:.01em;
  text-decoration:none;padding:16px 24px;border-radius:4px;border:2px solid var(--vd-yellow);transition:transform .15s,background .15s,color .15s}
.vd-btn--solid{background:var(--vd-yellow);color:var(--vd-black)}
.vd-btn--solid:hover{background:var(--vd-paper);border-color:var(--vd-paper);color:var(--vd-black);transform:translateY(-2px)}
.vd-btn--ghost{background:transparent;color:var(--vd-yellow)}
.vd-btn--ghost:hover{background:var(--vd-yellow);color:var(--vd-black)}
.vd-btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
.vd-header{position:sticky;top:0;z-index:50;background:rgba(13,12,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--vd-line);
  padding-top:env(safe-area-inset-top,0px)}
.admin-bar .vd-header{top:32px}
@media (max-width:782px){.admin-bar .vd-header{top:46px}}
.vd-header .vd-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.vd-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--vd-paper);font:900 20px/1 var(--vd-display);font-stretch:125%;text-transform:uppercase}
.vd-brand:hover{color:var(--vd-yellow)}
.vd-brand-mark{width:30px;height:30px;background:var(--vd-yellow);display:grid;place-items:center;border-radius:3px;color:var(--vd-black);font-size:16px}
.vd-brand img{max-height:44px;width:auto}
.vd-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.vd-nav a{color:var(--vd-paper);text-decoration:none;font-weight:600;font-size:15px}
.vd-nav a:hover,.vd-nav .current-menu-item>a{color:var(--vd-yellow)}
.vd-menu-btn{display:none;background:none;border:2px solid var(--vd-line);color:var(--vd-paper);border-radius:4px;padding:8px 12px;font:600 14px var(--vd-body);cursor:pointer}
@media (max-width:820px){
  .vd-menu-btn{display:block}
  .vd-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--vd-black);border-bottom:1px solid var(--vd-line)}
  .vd-nav.is-open{display:block}
  .vd-nav ul{flex-direction:column;gap:0;padding:8px max(20px,env(safe-area-inset-left,0px)) 16px}
  .vd-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--vd-line)}
}

/* ---------- Hero ---------- */
.vd-hero{padding-block:clamp(56px,9vw,112px) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.vd-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,26,.16),transparent 70%);pointer-events:none}
.vd-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center}
.vd-hero h1{font-size:clamp(38px,6.4vw,76px);font-weight:900;text-transform:uppercase}
.vd-hero h1 em{font-style:normal;color:var(--vd-black);background:var(--vd-yellow);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vd-hero .vd-lede{font-size:clamp(17px,1.6vw,19px);color:var(--vd-muted);max-width:52ch;margin:24px 0 32px}
.vd-hero .vd-lede strong{color:var(--vd-paper);font-weight:600}
.vd-actions{display:flex;flex-wrap:wrap;gap:12px}
.vd-promise{background:var(--vd-yellow);color:var(--vd-black);padding:28px;border-radius:6px;position:relative}
.vd-promise h2{font-size:22px;font-weight:900;text-transform:uppercase;margin-bottom:16px}
.vd-promise ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vd-promise li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-weight:500;line-height:1.45}
.vd-promise li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--vd-black)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf1a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.vd-promise .vd-note{margin:18px 0 0;padding-top:14px;border-top:2px solid rgba(13,12,10,.18);font-size:13px;line-height:1.5}
@media (max-width:860px){.vd-hero-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Dải băng chữ chạy ---------- */
.vd-ticker{background:var(--vd-yellow);color:var(--vd-black);overflow:hidden;transform:rotate(-1.2deg);margin:0 -2%;width:104%;
  border-block:3px solid var(--vd-black);box-shadow:0 0 0 2px var(--vd-yellow)}
.vd-ticker-track{display:flex;width:max-content;animation:vd-run 38s linear infinite}
.vd-ticker span{font:900 18px/1 var(--vd-display);font-stretch:125%;text-transform:uppercase;padding:14px 0;white-space:nowrap;display:flex;align-items:center}
.vd-ticker span::after{content:"";width:9px;height:9px;background:var(--vd-black);transform:rotate(45deg);margin:0 26px}
@keyframes vd-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.vd-ticker-track{animation:none}}
.vd-ticker-holder{overflow:hidden;padding-block:14px}

/* ---------- Phần chung ---------- */
.vd-section{padding-block:clamp(64px,9vw,104px)}
.vd-section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:40px}
.vd-section-head h2{font-size:clamp(28px,4vw,46px);font-weight:900;text-transform:uppercase}
.vd-section-head > p{margin:0;max-width:46ch;color:var(--vd-muted)}

/* Giới thiệu */
.vd-about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vd-feature{border:1px solid var(--vd-line);background:var(--vd-coal);padding:28px;border-radius:6px;display:flex;flex-direction:column;gap:12px}
.vd-feature-icon{width:44px;height:44px;border-radius:4px;background:var(--vd-yellow);color:var(--vd-black);display:grid;place-items:center}
.vd-feature-icon svg{width:22px;height:22px}
.vd-feature h3{font-size:19px;font-weight:800;font-stretch:112%}
.vd-feature p{margin:0;color:var(--vd-muted)}
@media (max-width:860px){.vd-about-grid{grid-template-columns:minmax(0,1fr)}}

/* Cách mua – dải vàng */
.vd-steps-band{background:var(--vd-yellow);color:var(--vd-black)}
.vd-steps-band .vd-eyebrow{color:var(--vd-black)}
.vd-steps-band .vd-section-head > p{color:#3d3410}
.vd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:step;border-top:3px solid var(--vd-black)}
.vd-steps li{counter-increment:step;padding:28px 28px 8px 0;display:flex;flex-direction:column;gap:10px}
.vd-steps li+li{padding-left:28px;border-left:2px solid rgba(13,12,10,.2)}
.vd-steps li::before{content:counter(step,decimal-leading-zero);font:900 54px/1 var(--vd-display);font-stretch:125%;color:var(--vd-black)}
.vd-steps h3{font-size:20px;font-weight:800;font-stretch:112%}
.vd-steps p{margin:0;color:#3d3410}
@media (max-width:860px){
  .vd-steps{grid-template-columns:minmax(0,1fr)}
  .vd-steps li,.vd-steps li+li{padding:24px 0;border-left:0;border-bottom:2px solid rgba(13,12,10,.2)}
}

/* Sản phẩm – phối màu plugin AFF Showcase theo theme */
.vd-products .affs{
  --affs-surface:var(--vd-coal); --affs-ink:var(--vd-paper); --affs-muted:var(--vd-muted); --affs-line:var(--vd-line);
  --affs-soft:#0a0908; --affs-accent:var(--vd-yellow); --affs-accent-ink:var(--vd-black); --affs-sale:var(--vd-yellow);
  font-family:var(--vd-body);
}
.vd-products .affs-badge{color:var(--vd-black)}
.vd-products .affs-card{border-radius:6px;transition:border-color .15s}
.vd-products .affs-card:hover{border-color:var(--vd-yellow)}
.vd-products .affs .affs-buy{font-family:var(--vd-display);font-stretch:112%;font-weight:800;border-radius:4px}
.vd-products .affs .affs-buy:hover{background:var(--vd-paper);color:var(--vd-black);filter:none}
.vd-products .affs .affs-more{border-color:var(--vd-yellow);color:var(--vd-yellow);font-family:var(--vd-display);font-stretch:112%;border-radius:4px}
.vd-products .affs .affs-more:hover{background:var(--vd-yellow);color:var(--vd-black)}
.vd-products .affs-now{font-family:var(--vd-display)}
.vd-notice{border:2px dashed var(--vd-line);border-radius:6px;padding:32px;color:var(--vd-muted);text-align:center}

/* Công bố affiliate */
.vd-disclose{border-top:1px solid var(--vd-line)}
.vd-disclose .vd-wrap{padding-block:36px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.vd-disclose-tag{font:800 12px/1 var(--vd-body);letter-spacing:.14em;text-transform:uppercase;background:var(--vd-yellow);color:var(--vd-black);padding:7px 10px;border-radius:3px}
.vd-disclose p{margin:0;color:var(--vd-muted);font-size:14px;max-width:80ch}
@media (max-width:600px){.vd-disclose .vd-wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- Footer ---------- */
.vd-footer{background:#080706;border-top:3px solid var(--vd-yellow);color:var(--vd-muted);font-size:14px}
.vd-footer .vd-wrap{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.vd-footer a{color:var(--vd-paper);text-decoration:none}
.vd-footer a:hover{color:var(--vd-yellow)}
.vd-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px}

/* ---------- Trang & bài viết thường ---------- */
.vd-content{padding-block:56px 80px}
.vd-content .vd-wrap{max-width:820px}
.vd-content h1{font-size:clamp(30px,4.5vw,48px);font-weight:900;text-transform:uppercase;margin-bottom:24px}
.vd-content .entry h2{font-size:28px;margin:40px 0 14px}
.vd-content .entry h3{font-size:21px;margin:32px 0 12px}
.vd-content .entry p,.vd-content .entry li{color:#ded8c8}
.vd-content .entry blockquote{border-left:4px solid var(--vd-yellow);margin:24px 0;padding:4px 0 4px 20px;color:var(--vd-paper)}
.vd-content .entry .alignwide,.vd-content .entry .alignfull{max-width:none}
.vd-content--wide .vd-wrap{max-width:var(--vd-max)}
.vd-meta{color:var(--vd-muted);font-size:14px;margin:-12px 0 28px}
.vd-list article{padding-block:24px;border-bottom:1px solid var(--vd-line)}
.vd-list h2{font-size:24px}
.vd-list h2 a{color:var(--vd-paper);text-decoration:none}
.vd-list h2 a:hover{color:var(--vd-yellow)}
.vd-pagination{margin-top:32px;display:flex;gap:8px;flex-wrap:wrap}
.vd-pagination .page-numbers{padding:8px 14px;border:1px solid var(--vd-line);border-radius:4px;text-decoration:none;color:var(--vd-paper)}
.vd-pagination .current{background:var(--vd-yellow);color:var(--vd-black);border-color:var(--vd-yellow)}
.wp-block-button__link{background:var(--vd-yellow);color:var(--vd-black);border-radius:4px;font-weight:700}
.vd-404{text-align:center;padding-block:120px}
.vd-404 .vd-big{font:900 clamp(96px,18vw,200px)/1 var(--vd-display);font-stretch:125%;color:var(--vd-yellow)}