/* LUNA SOLIS V5 — bổ sung cho bản đầy đủ: form, auth, bài viết, pagination, modal, skeleton */

/* ---------- FORMS ---------- */
.form{display:grid;gap:1rem}
.form .row2{display:grid;gap:1rem}
@media(min-width:640px){.form .row2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:var(--text-main)}
.field .hint{font-size:.76rem;color:var(--text-secondary);margin-top:.25rem}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],
.field select,.field textarea{
  width:100%;font-family:inherit;font-size:.95rem;padding:.62rem .85rem;
  border:1.5px solid var(--border);border-radius:10px;color:var(--text-main);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ocean-teal);box-shadow:0 0 0 3px rgba(14,124,134,.15);
}
.field textarea{min-height:120px;resize:vertical}
.field.err input,.field.err textarea{border-color:var(--error)}
.field .errmsg{font-size:.78rem;color:var(--error);margin-top:.25rem;font-weight:500}
.checkline{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;color:var(--text-secondary)}
.checkline input{margin-top:.22rem}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- AUTH ---------- */
.auth-wrap{max-width:460px;margin:0 auto;padding:3rem 1.25rem 4rem}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);padding:1.8rem}
.auth-card h1{font-size:1.4rem}
.auth-alt{text-align:center;font-size:.85rem;color:var(--text-secondary);margin-top:1.1rem}
.auth-sep{display:flex;align-items:center;gap:.8rem;color:var(--text-secondary);font-size:.78rem;margin:1.1rem 0}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.g-signin-slot{display:flex;justify-content:center;min-height:44px}

/* ---------- ARTICLE (Insights) ---------- */
.article{max-width:760px;margin:0 auto;padding:0 1.25rem}
.article .lede{font-size:1.08rem;color:var(--text-secondary)}
.article h2{margin-top:2rem}
.article figure{margin:1.6rem 0}
.article .src-note{font-size:.78rem;color:var(--text-secondary);border-left:3px solid var(--solar-gold);padding-left:.8rem;margin:1.2rem 0}
.article .tbl-note{font-size:.78rem;color:var(--text-secondary);margin-top:.5rem}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:2rem}
.pagination a,.pagination span{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:8px;font-size:.85rem;text-decoration:none;
  color:var(--teal-link);background:#fff;font-variant-numeric:tabular-nums;
}
.pagination .on{background:var(--deep-ocean);color:#fff;border-color:var(--deep-ocean)}
.pagination a:hover{border-color:var(--ocean-teal)}

/* ---------- MODAL ---------- */
.modal-back{position:fixed;inset:0;background:rgba(7,24,39,.55);z-index:120;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:14px;max-width:480px;width:100%;box-shadow:var(--shadow-pop)}
.modal .m-head{padding:1rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center}
.modal .m-head h3{margin:0;font-size:1.05rem}
.modal .m-head button{margin-left:auto;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-secondary)}
.modal .m-body{padding:1.3rem}
.modal .m-foot{padding:1rem 1.3rem;border-top:1px solid var(--border);display:flex;gap:.6rem;justify-content:flex-end}

/* ---------- SKELETON ---------- */
.skel{background:linear-gradient(90deg,#EDF1F3 25%,#F6F8F9 50%,#EDF1F3 75%);background-size:200% 100%;animation:skel 1.3s infinite;border-radius:8px;min-height:1em}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}

/* ---------- FLASH ---------- */
.flash{max-width:var(--maxw);margin:1rem auto 0;padding:0 1.25rem}

/* ---------- QUOTA BAR (Desk) ---------- */
.quota-note{font-size:.8rem;color:var(--text-secondary)}
.quota-note b{color:var(--deep-ocean)}

/* ---------- COOKIE BANNER ---------- */
.cookie-bar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:110;background:#fff;color:var(--text-main);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);
  padding:.9rem 1.1rem;display:none;gap:.9rem;align-items:center;flex-wrap:wrap;font-size:.85rem;
}
.cookie-bar.show{display:flex}
.cookie-bar .actions{display:flex;gap:.5rem;margin-left:auto}
@media(min-width:960px){.cookie-bar{left:auto;max-width:440px}}

/* ---------- BREADCRUMB light ---------- */
.crumbs--light{color:var(--text-secondary)}
.crumbs--light a{color:var(--text-secondary)}
.crumbs--light a:hover{color:var(--text-main)}

/* ---------- Mobile layout fix (LS) ---------- */
@media (max-width: 959px){
  header .inner{flex-wrap:wrap;row-gap:10px;}
  header .inner .btn--sm{margin-left:auto;}
}
@media (max-width: 640px){
  .grid.grid--4,.grid.grid--3,.grid.grid--2{grid-template-columns:1fr;}
}

/* ---------- Footer brand fix (LS) ---------- */
.ls-footer .brand{gap:.72rem;align-items:center;}
.ls-footer .brand .mark{width:56px;height:56px;}
.ls-footer .brand .word b{font-size:1.18rem;letter-spacing:.14em;line-height:1.15;}
.ls-footer .brand .word span{font-size:.66rem;letter-spacing:.16em;}
@media (max-width: 640px){
  .ls-footer{padding-bottom:5.5rem;}
  .ls-footer .brand .mark{width:52px;height:52px;}
}