/*
Theme Name:   QUE Child (Kadence) — Phang
Theme URI:    https://longnhan.net
Description:  Child theme cho longnhan.net. Phong cach PHANG: khong chuyen sac, khong do bong, vien 2px, bo goc 4px. Mau rut tu logo QUE (vang kim + la xanh). Khong dung mau xanh duong.
Author:       QUE - Nong San Tu Te
Template:     kadence
Version:      3.0
Text Domain:  que-child
*/

/* ============ TOKEN QUE v3 ============ */
:root{
  --que-nen:#FFFFFF;
  --que-nen-2:#F4F1E8;
  --que-cui:#F0DCAE;
  --que-vang:#D4A62A;      /* mang mau nhan, dac */
  --que-vang-chu:#8E6210;  /* khi mau nhan phai lam chu tren nen sang */
  --que-la:#14392A;        /* thay cho mau den o khoi lon */
  --que-vo:#6E4B2A;
  --que-than:#16130E;
  --que-mo:#6F6659;
  --que-vien:#16130E;
  --que-vien-nhat:#DCD5C4;
  --que-r:4px;
}

/* ============ GHI DE BANG MAU KADENCE ============
   Kadence dung --global-palette1..9 o khap noi. */
:root{
  --global-palette1:#D4A62A;
  --global-palette2:#8E6210;
  --global-palette3:#16130E;
  --global-palette4:#6E4B2A;
  --global-palette5:#6F6659;
  --global-palette6:#DCD5C4;
  --global-palette7:#F4F1E8;
  --global-palette8:#FFFFFF;
  --global-palette9:#14392A;
}

/* ============ CHU ============ */
body,button,input,select,textarea{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65;
}
h1,h2,h3,h4,.entry-title,.site-title{
  font-family:"Archivo","Be Vietnam Pro",system-ui,sans-serif;
  font-weight:800; line-height:1.05; letter-spacing:-.03em;
}
h1,.entry-title{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.2vw,38px)}
h3{font-size:22px}
.price,.woocommerce-Price-amount,.que-so,code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* ============ LUAT PHANG — go bong va chuyen sac cua theme ============ */
.entry-content img,.wp-block-image img,.kadence-thumbnail,
.entry, .content-bg, .post-thumbnail, .widget, .kt-blocks-info-box-link-wrap{
  box-shadow:none !important;
  background-image:none !important;
}

/* ============ NUT PHANG ============ */
.wp-block-button__link,.button,button,input[type=submit],
.woocommerce a.button,.woocommerce button.button{
  background:var(--que-vang); color:var(--que-than);
  border:2px solid var(--que-vien); border-radius:var(--que-r);
  padding:15px 26px; font-weight:700; box-shadow:none;
}
.wp-block-button__link:hover,.button:hover,button:hover,
.woocommerce a.button:hover{
  background:var(--que-than); color:#fff; border-color:var(--que-than);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--que-than);
}

/* ============ CHU KY: 4 O SAY ============
   Ban gradient cu doi thanh 4 o mau dac = 4 moc gio trong lo.
   Cach dung: khoi HTML tuy chinh, dan doan nay:
   <div class="que-osay"><span></span><span></span><span></span><span></span></div> */
.que-osay{display:flex;gap:4px}
.que-osay span{height:14px;flex:1}
.que-osay span:nth-child(1){background:#FBF3E2}
.que-osay span:nth-child(2){background:var(--que-cui)}
.que-osay span:nth-child(3){background:var(--que-vang)}
.que-osay span:nth-child(4){background:var(--que-vo)}
.que-osay-nho{width:132px}

/* Gach chan tu dong cho H2 trong bai viet — 4 o thu nho */
.entry-content h2{position:relative;padding-bottom:16px}
.entry-content h2::after{
  content:""; position:absolute; left:0; bottom:0; width:120px; height:8px;
  background:
    linear-gradient(to right,#FBF3E2 0 25%,transparent 25% 100%),
    linear-gradient(to right,transparent 0 26%,var(--que-cui) 26% 50%,transparent 50%),
    linear-gradient(to right,transparent 0 51%,var(--que-vang) 51% 75%,transparent 75%),
    linear-gradient(to right,transparent 0 76%,var(--que-vo) 76% 100%);
}

/* ============ THE PHANG: vien thay bong ============ */
.que-the,.kt-blocks-info-box-link-wrap,.entry.loop-entry{
  border:2px solid var(--que-vien) !important;
  border-radius:var(--que-r) !important;
  box-shadow:none !important;
}
.entry.loop-entry:hover{background:var(--que-nen-2)}

/* ============ ANH BIA IN SAN CAU HOOK ============
   Cach dung: khoi Group -> Advanced -> Additional CSS class: que-bia
   Them que-bia-la / que-bia-vang / que-bia-cui de doi nen. */
.que-bia{
  aspect-ratio:4/3; border:2px solid var(--que-vien); border-radius:var(--que-r);
  padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .12s ease, box-shadow .12s ease;
}
.que-bia:hover{transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--que-vien)}
.que-bia-la{background:var(--que-la); color:#fff}
.que-bia-vang{background:var(--que-vang); color:var(--que-than)}
.que-bia-cui{background:var(--que-cui); color:var(--que-than)}
.que-bia .que-hook{
  font-family:"Archivo","Be Vietnam Pro",sans-serif; font-weight:800;
  font-size:26px; line-height:1.08; letter-spacing:-.02em;
}
.que-bia .que-tag{
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
}

/* ============ HOP MEO trong bai how-to ============
   Khoi Group -> Additional CSS class: que-meo */
.que-meo{
  border:2px solid var(--que-vien); border-left-width:8px;
  border-radius:var(--que-r); background:var(--que-nen-2);
  padding:22px 24px; margin:26px 0;
}

/* ============ KHOI TOI ============ */
.que-toi{background:var(--que-la); color:#EFE7D4}
.que-toi h1,.que-toi h2,.que-toi h3{color:#fff}
.que-toi .que-so{color:var(--que-vang)}

/* ============ BAI VIET: de doc ============ */
.entry-content p{max-width:68ch}
.entry-content a{color:var(--que-vang-chu); text-decoration:underline; text-underline-offset:3px}

/* ============ TIEU DIEM BAN PHIM ============ */
a:focus-visible,button:focus-visible{outline:3px solid var(--que-vang); outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}