@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Ma+Shan+Zheng&family=Noto+Serif:wght@400;600;700&display=swap');

:root {
  --ink: #2b2622;         
  --brown-dark: #4a3525;  
  --gold-earth: #b38b4d;  
  --blue-water: #1e3a5f;  
  --paper-trans: rgba(245, 238, 219, 0.96); 
  --line: #d8c9ad;        
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Noto Serif", Georgia, serif;
  color: var(--ink);
  min-height: 100vh;
  /* Giữ nguyên link ảnh của bạn */
  background: url('https://i.pinimg.com/736x/67/f8/a0/67f8a021c87209fd2eb1928b0c82dfea.jpg') center/cover no-repeat fixed;
  padding: 15px;
  overflow-x: hidden;
}

/* Giữ nguyên nền mờ 0.55 của bạn */
.bg-blur {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55); 
  z-index: -1;
}

/* Bỏ height: 96vh cố định để cuộn được */
.app-shell {
  max-width: 1500px; 
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 15px;
  background: transparent;
  min-height: calc(100vh - 30px);
  border: none; box-shadow: none;
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 30px; 
  background: var(--paper-trans);
  border: 1px solid var(--gold-earth);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 15px; cursor: pointer; }
.brand-seal {
  width: 44px; height: 44px;
  background: var(--blue-water); color: #fff;
  display: grid; place-items: center;
  font-family: "Ma Shan Zheng", cursive; font-size: 22px;
  border-radius: 4px; transform: rotate(-3deg);
}
.brand-text strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--brown-dark); }
.brand-text span { font-size: 12px; color: var(--gold-earth); font-weight: 600; letter-spacing: 1px; }

.main-nav { display: flex; gap: 15px; }
.nav-btn {
  background: transparent; border: none;
  font-family: "Noto Serif", serif; font-size: 17px; font-weight: 600;
  color: var(--brown-dark); padding: 6px 10px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: 0.2s;
}
.nav-btn:hover { color: var(--blue-water); }
.nav-btn.active { color: var(--blue-water); border-bottom-color: var(--blue-water); }

.main-layout { 
  display: flex; flex: 1; gap: 15px; 
  position: relative;
  min-height: 550px;
}

.sidebar {
  width: 270px;
  background: var(--paper-trans);
  border: 1px solid var(--gold-earth);
  border-radius: 12px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.sidebar-title {
  padding: 18px; font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 700;
  color: var(--blue-water); border-bottom: 1px solid var(--line); margin: 0; text-align: center;
}

.module-list { list-style: none; overflow-y: auto; flex: 1; padding: 12px; }
.module-item {
  margin-bottom: 6px; cursor: pointer; border-radius: 6px; transition: 0.2s;
  color: var(--brown-dark); font-weight: 600; font-size: 15px; border: 1px solid transparent;
}
.module-item:hover { border-color: var(--gold-earth); color: var(--blue-water); background: rgba(255,255,255,0.4); }

.menu-title { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.arrow { font-size: 10px; transition: transform 0.3s ease; }
.sub-menu { list-style: none; margin-top: 2px; margin-bottom: 8px; border-left: 2px solid var(--line); margin-left: 18px; padding-left: 8px; }
.sub-item { padding: 10px 12px; font-size: 14px; color: var(--brown-dark); cursor: pointer; transition: 0.2s; border-radius: 4px; margin-bottom: 3px; }
.sub-item:hover { color: var(--blue-water); background: rgba(255,255,255,0.5); }
.active-item { background: var(--blue-water) !important; color: white !important; }

.content-area { 
  flex: 1; background: transparent; border-radius: 12px; 
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
iframe { width: 100%; height: 100%; min-height: 600px; display: block; border: none; background: transparent; }

.bottombar {
  background: var(--paper-trans);
  border: 1px solid var(--gold-earth); border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 30px; font-size: 13px; color: var(--brown-dark);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.footer-info { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-info b { color: var(--blue-water); }

.hamburger { display: none; background: none; border: none; font-size: 24px; color: var(--blue-water); cursor: pointer; }

/* TỐI ƯU HIỂN THỊ VÀ CUỘN TRANG TRÊN ĐIỆN THOẠI */
@media (max-width: 850px) {
  body { padding: 8px; }
  .hamburger { display: block; }
  
  /* Chuyển app-shell sang height: auto để cuộn được tự do */
  .app-shell { min-height: 100vh; height: auto; gap: 10px; }
  
  .topbar { padding: 10px 15px; flex-wrap: wrap; gap: 8px; }
  .main-nav { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
  
  .sidebar { 
    position: fixed; top: 75px; left: 8px; bottom: 8px; width: 260px;
    z-index: 100; box-shadow: 5px 0 25px rgba(0,0,0,0.3); 
    transform: translateX(-110%); transition: transform 0.3s ease; 
    background: #fdfaf3;
  }
  .sidebar.open { transform: translateX(0); }
  
  .main-layout { flex-direction: column; min-height: unset; }
  /* Cho phép thẻ iframe dài ra tự do trên đt */
  .content-area { height: auto; min-height: 70vh; overflow: visible; }
  
  .bottombar { flex-direction: column; text-align: center; gap: 6px; padding: 12px; }
  .footer-info { flex-direction: column; gap: 4px; align-items: center; }
}