@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap");

/* ============================================================
   Cung Sanh — giao diện
   Mọi dòng đều bọc trong #cs-app nên không ảnh hưởng phần còn
   lại của website. Muốn đổi màu thì sửa 7 biến ngay bên dưới.
   ============================================================ */
#cs-app{
  --cs-lacquer:#15100D;    /* nền */
  --cs-lacquer-2:#1E1815;  /* thẻ, ô */
  --cs-shell:#F2EAE0;      /* chữ chính */
  --cs-shell-dim:#B7ABA0;  /* chữ phụ */
  --cs-cinnabar:#C4302B;   /* nhấn, nút, quẻ hung */
  --cs-brass:#C9A227;      /* vàng thếp, thơ, lời nhắn */
  --cs-jade:#4E8C6E;       /* quẻ cát */
  --cs-line:rgba(242,234,224,.14);

  background:var(--cs-lacquer);
  color:var(--cs-shell);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:28px 22px 34px;
  margin:26px 0;
}
#cs-app *{box-sizing:border-box}

/* ---------- đầu trang ---------- */
#cs-app .cs-masthead{border-bottom:1px solid var(--cs-line);padding-bottom:18px;margin-bottom:24px}
#cs-app .cs-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cs-brass);font-weight:500}
#cs-app .cs-title{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:clamp(24px,4.2vw,22px);margin:.25em 0 .1em;letter-spacing:-.01em;
  color:var(--cs-brass);line-height:1.2;
}
#cs-app .cs-lead{margin:0;color:var(--cs-shell-dim);font-size:14px;max-width:64ch}

/* ---------- biểu mẫu ---------- */
#cs-app .cs-bar{
  display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;
  border:1px solid var(--cs-line);background:var(--cs-lacquer-2);padding:18px 20px;margin-bottom:26px;
}
#cs-app .cs-bar label{
  display:block;font-size:12pt;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cs-shell-dim);margin:0 0 6px;font-weight:500;
}
#cs-app .cs-bar input{
  width:100%;background:#0E0A08;color:var(--cs-shell);border:1px solid var(--cs-line);
  border-radius:2px;padding:10px 12px;font:400 16px "Be Vietnam Pro",sans-serif;margin:0;
}
#cs-app .cs-bar input:focus{outline:2px solid var(--cs-brass);outline-offset:1px}
#cs-app .cs-go{
  background:var(--cs-cinnabar);color:#fff;border:none;border-radius:2px;
  padding:12px 26px;font:500 15px "Be Vietnam Pro",sans-serif;letter-spacing:.04em;
  cursor:pointer;height:44px;text-transform:none;
}
#cs-app .cs-go:hover{background:#a9251f;color:#fff}
#cs-app .cs-note{grid-column:1/-1;font-size:12px;color:var(--cs-shell-dim);margin-top:2px}
@media(max-width:720px){#cs-app .cs-bar{grid-template-columns:1fr}}

/* ---------- hai cột nam / nữ ---------- */
#cs-app .cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
@media(max-width:720px){#cs-app .cs-pair{grid-template-columns:1fr}}
#cs-app .cs-card{border:1px solid var(--cs-line);background:var(--cs-lacquer-2)}
#cs-app .cs-card header{
  padding:10px 16px;border-bottom:1px solid var(--cs-line);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-shell-dim);
}
#cs-app .cs-card.cs-nam header{color:#8FB6E8}
#cs-app .cs-card.cs-nu  header{color:#E39AC0}
#cs-app .cs-card table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0;background:none}
#cs-app .cs-card td{
  padding:9px 16px;border:none;border-bottom:1px solid var(--cs-line);
  vertical-align:top;background:none;color:#7b5519;
}
#cs-app .cs-card td:first-child{color: #000;font-size:12.5px;width:38%}
#cs-app .cs-card tr:last-child td{border-bottom:none}
#cs-app .cs-big{font-family:"Playfair Display",Georgia,serif;font-size:19px;color:var(--cs-brass)}

/* ---------- quẻ ---------- */
#cs-app .cs-verdict{border:1px solid var(--cs-line);padding:22px 24px;margin-bottom:26px;background:var(--cs-lacquer-2)}
#cs-app .cs-que{font-family:"Playfair Display",Georgia,serif;font-size:clamp(22px,3.8vw,24px);margin:6px 0 4px;line-height:1.3}
#cs-app .cs-que a{color:inherit;text-decoration:none;border-bottom:2px solid var(--cs-brass);box-shadow:none}
#cs-app .cs-que a:hover{color:var(--cs-brass)}
#cs-app .cs-grade{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid;
}
#cs-app .cs-g-thuong{color:var(--cs-jade);border-color:rgba(78,140,110,.55)}
#cs-app .cs-g-trung {color:var(--cs-brass);border-color:rgba(201,162,39,.5)}
#cs-app .cs-g-ha    {color:var(--cs-cinnabar);border-color:rgba(196,48,43,.55)}
#cs-app .cs-y{margin:12px 0 0;font-size:15px;max-width:70ch;color:var(--cs-shell)}

/* ---------- thơ ---------- */
#cs-app .cs-block{margin-bottom:26px}
#cs-app .cs-block h2{font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:500;margin:0 0 12px;color:var(--cs-shell)}
#cs-app .cs-tho{
  border-left:2px solid var(--cs-brass);padding:4px 0 4px 20px;
  white-space:pre-line;font-size:16px;line-height:1.9;color:var(--cs-shell);
}
#cs-app .cs-tho .cs-head{font-weight:500;color:var(--cs-brass);display:block;margin-bottom:6px;white-space:normal}
#cs-app .cs-chua{border:1px dashed var(--cs-line);padding:20px;color:var(--cs-shell-dim);font-size:14px}
#cs-app .cs-chua code{color:var(--cs-brass);font-size:13px;background:none;padding:0}

/* ---------- lời nhắn ---------- */
#cs-app .cs-thay{border:none;background:#20190E;padding:30px 34px 34px}
#cs-app .cs-thay h2{
  color:var(--cs-brass);margin:0 0 18px;
  font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:500;
}
#cs-app .cs-thay p{
  margin:0 0 16px;font-size:15.5px;line-height:1.75;color:var(--cs-shell);
  text-align:justify;text-justify:inter-word;hyphens:none;
}
#cs-app .cs-thay p:last-child{margin-bottom:0}
#cs-app .cs-sig{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;color:var(--cs-brass);
  text-align:left !important;margin-top:22px;
}

#cs-app .cs-empty{color:var(--cs-shell-dim);font-size:14px;border:1px dashed var(--cs-line);padding:30px;text-align:center}
#cs-app .cs-foot{margin-top:34px;border-top:1px solid var(--cs-line);padding-top:14px;font-size:12px;color:var(--cs-shell-dim)}

@media (prefers-reduced-motion:no-preference){
  #cs-app .cs-card,#cs-app .cs-verdict,#cs-app .cs-block,#cs-app .cs-thay{animation:cs-rise .35s ease both}
  @keyframes cs-rise{from{opacity:0;transform:translateY(6px)}}
}