/* Design token dùng chung cho MỌI trang v6/*.html — 1 nguồn duy nhất.
   Sửa màu/spacing chung thì sửa Ở ĐÂY, không sửa từng trang.
   Lưu ý: file này nằm trong shared/, nên url() trỏ ảnh phải lùi 1 cấp "../images/..." */
:root{
  --ink-950:#0a0f1d; --ink-900:#111827; --ink-800:#1b2a45; --ink-700:#243759;
  --blue-700:#21548f; --blue-600:#306fb6; --blue-500:#4a8fd6; --blue-300:#a9c9ea;
  --teal:#10b981; --teal-deep:#047857;
  --gold:#f59e0b; --gold-deep:#b45309;
  --purple:#8b5cf6; --purple-deep:#6d28d9;
  --slate:#94a3b8; --slate-deep:#64748b;
  --green:#10b981; --red:#ef4444; --amber:#f59e0b;
  --bg:#f1f5f9; --paper:#ffffff; --line:#e2e8f0;
  --text-1:#0f172a; --text-2:#64748b; --text-3:#94a3b8;
  --radius-xl:18px; --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --mint:#5eead4;
  --shadow-soft:0 2px 10px rgba(20,30,70,.06), 0 10px 30px -12px rgba(20,30,70,.10);
  --shadow-card:0 4px 16px rgba(16,24,60,.08), 0 20px 40px -20px rgba(16,24,60,.18);
  --shadow-float:0 12px 34px -8px rgba(10,18,48,.45);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #dbe6f2 0%, transparent 55%), #d7dceb;
  display:flex;justify-content:center;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
svg{width:20px;height:20px;}
.phone{width:100%;max-width:480px;min-height:100vh;background:var(--bg);position:relative;overflow:hidden;}
/* mỗi trang tự khai báo .scroll-area{padding-bottom:...} riêng (tuỳ có bottom-nav/FAB hay không), phần còn lại dùng chung */
.scroll-area{height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.scroll-area::-webkit-scrollbar{display:none;}

/* watermark logo HALAL mờ trong header — độ mờ + viền mềm đã nướng sẵn vào file ảnh (logo-watermark.webp), thở nhẹ làm điểm nhấn */
@keyframes logoBreathe{0%,100%{background-size:150px 150px, cover;}50%{background-size:165px 165px, cover;}}
.islamic-bg{
  background-image:
    url("../images/logo-watermark.webp"),
    linear-gradient(150deg,var(--blue-700) 0%, var(--ink-950) 100%);
  background-repeat:no-repeat, no-repeat;
  background-position:right -25px top -25px, 0 0;
  background-size:150px 150px, cover;
  animation:logoBreathe 8s ease-in-out infinite;
}