/* ==========================================================================
   THY THO PORTFOLIO - MASTER CSS STYLESHEET
   ========================================================================== */

/* --- 1. CSS VARIABLES --- */
:root { 
  color-scheme: light; 
  --color-ink: #23201d;
  --color-paper: #faf7f2;
  --color-brand: #d1532e;
  --color-brandsoft: #f6ddd0;
  --color-line: #e7ded1;
  --color-subtle: #6f6862;
  --color-tone1: #d1532e;
  --color-tone2: #1a8f80;
  --color-tone3: #cf8a1e;
  --color-tone4: #5b58d6;
}

/* --- 2. BASE RESET & SCROLL BEHAVIOR --- */
html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 4.5rem; 
}  

body { 
  background: var(--color-paper); 
  color: var(--color-ink); 
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; 
}

/* Ẩn Scrollbar chuẩn Cross-browser */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}  
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}  

/* --- 3. EXPANDABLE CARD BODY ACCORDION --- */
.card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}  
.card-body.open {
  grid-template-rows: 1fr;
}  
.card-body > div {
  overflow: hidden;
}

/* --- 4. GLASSMORPHISM UTILITIES --- */
.apple-glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(231, 222, 209, 0.6);
}

.apple-glass-dark {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.apple-glass-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- 5. ANIMATED DASHBOARD SVG CHART --- */
.dash-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawDash 2.5s ease-out forwards;
}
@keyframes drawDash {
  to { 
    stroke-dashoffset: 0; 
  }
}

/* --- 6. CURSOR UTILITIES FOR SCROLL TRACKS --- */
.cursor-grab { 
  cursor: grab; 
}
.cursor-grabbing { 
  cursor: grabbing !important; 
}

/* --- 7. REUSABLE COMPONENT CLASSES --- */
.btn-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: none;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-brand);
  color: #ffffff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 300ms ease;
}
.btn-back-to-top:hover {
  background-color: var(--color-ink);
  transform: translateY(-2px);
}

.mobile-toc-card {
  display: block;
  margin-bottom: 2rem;
  border-radius: 1rem;
  background-color: #ffffff;
  border: 1px solid var(--color-line);
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 1024px) {
  .mobile-toc-card {
    display: none;
  }
}