:root {
  --primary: #654332;
  --primary-dark: #523626;
  --primary-light: #8a6c5a;
  --communist-red: #d42427;
  --communist-red-dark: #b41e21;
  --white: #ffffff;
  --off-white: #f5f5f5;
  --gray-light: #e0e0e0;
  --gray-dark: #444;
  --text-dark: #212121;
  --text-light: #757575;
  --dark-bg: #181818;
  --dark-card: #232323;
  --dark-border: #393939;
}

/* Reset & Base */
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family: 'Be Vietnam Pro',sans-serif;
  background:var(--off-white);
  color:var(--text-dark);
  overflow-x:hidden; min-height:100vh; font-size:16px;
}
h1,h2,h3,h4,h5,h6,.title-font { font-family:'Playfair Display',serif; }
img { display:block; max-width:100%; height:auto; border:none; }

/* Section, Titles */
.section-title, .footer-title {
  font-size:2.2rem; font-weight:700; color:var(--primary);
  position:relative; display:inline-block; font-family:'Playfair Display',serif;
}
.section-title::after, .footer-title::after {
  content:''; position:absolute; left:0; bottom:-10px;
  width:100px; height:4px; background:var(--communist-red); border-radius:2px;
}
.section-title.section-title-centered { display:block; text-align:center; }
.section-title.section-title-centered::after { left:50%; transform:translateX(-50%); }

/* ===== FLOAT BAR, BUTTONS, TTS ACTIVE ===== */
.float-bar-mobile {
  position: fixed; z-index: 1003; right: 18px; bottom: 20px;
  display: flex; flex-direction: column; gap: 15px;
}
.float-btn {
  background: var(--primary); color: #fff; border: none; border-radius: 50%;
  width: 50px; height: 50px; box-shadow: 0 2px 13px rgba(0,0,0,0.13);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; font-size: 22px; cursor: pointer;
  position: relative;
}
.float-btn:active, .float-btn:focus { transform: scale(0.92); }
.float-btn:hover { background: var(--communist-red);}
.float-btn.tts-active,
#tts-btn.tts-active {
  animation: ttsPulse 1.4s infinite cubic-bezier(.36,.07,.19,.97);
  background: var(--communist-red-dark)!important;
  color: #fff;
}
@keyframes ttsPulse {
  0% { box-shadow: 0 0 0 0 var(--communist-red-dark, #b41e21); }
  70% { box-shadow: 0 0 0 13px rgba(212,36,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,36,39,0);}
}

/* Responsive float-bar (mobile horizontal) */
@media (max-width: 600px) {
  .float-bar-mobile {
    left: 0; right: 0; bottom: 0; width: 100vw;
    justify-content: space-evenly; flex-direction: row;
    padding: 0 7px 8px 7px; background: rgba(245,245,245,0.97);
    border-radius: 14px 14px 0 0; box-shadow: 0 0 18px rgba(0,0,0,0.13);
  }
  .float-bar-mobile .float-btn {
    width: 41px; height: 41px; font-size: 17px; padding: 0;
  }
}

/* Back to top (id hoặc class) */
#backToTop, .back-to-top {
  position: fixed; right: 28px; bottom: 32px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--communist-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(212,36,39,0.13);
  cursor: pointer; opacity: 0; visibility: hidden; transition:all 0.23s; z-index: 1100;
}
#backToTop.active, .back-to-top.active {opacity:1;visibility:visible;}
#backToTop:hover, .back-to-top:hover {
  background: var(--communist-red-dark);
  transform: scale(1.10) translateY(-5px);
  box-shadow: 0 12px 32px rgba(212,36,39,0.25);
}
@media (max-width: 767px) {
  #backToTop, .back-to-top { right: 13px; bottom: 14px; width: 38px; height: 38px;}
}

.bookmark-btn.active { background: var(--primary-dark);}
.social-bar {position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:1000;}
.social-bar a {display:block;margin:10px 0;width:44px;height:44px;background:var(--primary-light);color:#fff;border-radius:50%;text-align:center;line-height:44px;font-size:22px;transition:background 0.2s;}
.social-bar a:hover {background:var(--communist-red);}

/* ===== AI POPUP ===== */
#ai-popup {
  position:fixed;bottom:90px;right:30px;z-index:2000;width:330px;
  background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.25);
  animation:popIn 0.23s; border:1.5px solid var(--primary-light);
}
@keyframes popIn { from{transform:scale(0.8);opacity:0;} to{transform:scale(1);opacity:1;}}
#ai-popup .ai-header {font-weight:600;font-size:1.15em;padding:14px 18px 8px 18px;}
#ai-popup .ai-close {background:none;border:none;font-size:1.35em;color:var(--communist-red);font-weight:700;cursor:pointer;}
#ai-popup #ai-chat-log {padding:8px 16px 4px 18px;}
#ai-popup .ai-msg-user {background:var(--primary-light);color:#fff;padding:7px 14px;border-radius:13px;margin:8px 0 3px 50px;text-align:right;font-size:15px;}
#ai-popup .ai-msg-bot {background:var(--gray-light);color:var(--primary-dark);padding:8px 14px;border-radius:13px;margin:3px 45px 8px 0;text-align:left;position:relative;cursor:pointer;font-size:15px;}
#ai-popup #ai-form {display:flex;gap:6px;margin:12px 10px 0 10px;}
#ai-popup #ai-input {flex:1;padding:9px 12px;border:1px solid var(--gray-light);border-radius:6px;font-size:15px;}
#ai-popup #ai-send-btn {padding:8px 14px;background:var(--primary);color:#fff;font-weight:600;border:none;border-radius:6px;cursor:pointer;}
#ai-popup #ai-send-btn:hover {background:var(--communist-red);}
@media (max-width: 600px) {
  #ai-popup {right:0;left:0;bottom:0;width:100vw;max-width:none;border-radius:16px 16px 0 0;}
}

/* DARKMODE FULL */
html.dark, .darkmode, .dark-bg, body.darkmode {
  background:var(--dark-bg)!important; color:#ececec!important;
}
html.dark .main-section,
html.dark .content-card,
html.dark .timeline-content,
html.dark .book-card,
html.dark .award-card,
html.dark .footer,
body.darkmode .main-section,
body.darkmode .content-card {background:var(--dark-card)!important;color:#ececec!important;}
html.dark .section-title, html.dark .footer-title {color:var(--communist-red);}
html.dark .skill-tag {background:var(--communist-red-dark);color:#fff;}
html.dark .timeline-content::before {background:var(--dark-card);}
html.dark .timeline-details.open {border-top:1px solid var(--dark-border);}
html.dark #ai-popup {background:var(--dark-card);border-color:var(--dark-border);}
html.dark #ai-popup .ai-msg-user {background:var(--communist-red-dark);}
html.dark #ai-popup .ai-msg-bot {background:var(--dark-border);color:#ececec;}
html.dark #ai-popup #ai-input {background:var(--dark-bg);color:#ececec;border-color:var(--dark-border);}
html.dark .swiper-button-next, html.dark .swiper-button-prev {color:var(--communist-red);}
html.dark .footer-link {color:rgba(255,255,255,0.9);}
html.dark .mobile-menu {background:var(--dark-bg);}
html.dark .mobile-nav-link {color:#fff;border-bottom:1px solid var(--dark-border);}
html.dark .mobile-nav-link.active,.mobile-nav-link:hover {background:var(--communist-red-dark);color:#fff;}

/* ==== Responsive section (title, hero, card, v.v.) ==== */
@media (max-width:1023px) {
  .section-title {font-size:1.3rem;}
  .hero-title {font-size:2.2rem;}
  .hero-image-container {width:220px;height:220px;}
  .main-section {margin-top:-16px;}
}
@media (max-width:767px) {
  .hero-title {font-size:1.3rem;}
  .hero-section {min-height:550px;}
  .main-section {margin-top:-8px;}
  .hero-image-container {width:128px;height:128px;}
  .content-card, .book-card, .award-card, .timeline-content {padding:12px;}
  .footer-logo {width:54px;height:54px;}
  .footer-title {font-size:1.1rem;}
  .timeline-details.open {padding:9px;}
  .timeline-dot {left:-25px;}
  .timeline {padding-left:17px;}
  .social-bar {left:auto;right:0;}
}

/* Utility, Misc */
.overflow-hidden {overflow:hidden!important;}
.flex {display:flex;}
.justify-between {justify-content:space-between;}
.justify-center {justify-content:center;}
.align-center {align-items:center;}
.gap-6 {gap:6px;}
.bg-white {background:#fff;}
.bg-primary {background:var(--primary);}
.bg-communist-red {background:var(--communist-red);}
.rounded-full {border-radius:50%;}
.font-bold {font-weight:700;}
.text-center {text-align:center;}
.w-full {width:100%;}
.max-w-7xl {max-width:1220px;margin:0 auto;}
.hidden {display:none;}
.opacity-80 {opacity:0.8;}
.opacity-50 {opacity:0.5;}
.cursor-pointer {cursor:pointer;}

/* END main.css */