:root {



  --paper: #f6edd9;



  --paper-2: #efe3c7;



  --ink: #3a2e23;



  --ink-soft: #6b5b48;



  --maroon: #8b3a3a;



  --maroon-dark: #6e2c2c;



  --gold: #c19433;



  --gold-soft: #e7c873;



  --line: #d8c39a;



  --shadow: rgba(58, 46, 35, 0.18);



  --radius: 14px;



  --serif: 'Playfair Display', Georgia, serif;



  --sans: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, sans-serif;



}







* { box-sizing: border-box; }







body {



  margin: 0;



  font-family: var(--sans);



  color: var(--ink);



  background-color: var(--paper);



  background-image:



    radial-gradient(circle at 20% 10%, rgba(193,148,51,0.10), transparent 40%),



    radial-gradient(circle at 80% 90%, rgba(139,58,58,0.08), transparent 40%);



  line-height: 1.6;



}







h1, h2, h3, .serif { font-family: var(--serif); font-weight: 700; }







a { color: var(--maroon); }







.container { width: min(1080px, 92%); margin: 0 auto; }







/* ===== Top nav ===== */



.nav {



  position: sticky; top: 0; z-index: 50;



  background: linear-gradient(180deg, #f6dca0, #e9c97f);



  border-bottom: 3px solid var(--maroon);



  box-shadow: 0 4px 18px rgba(110, 44, 44, .18);



}



.nav .container { width: min(1340px, 96%); display: flex; align-items: center; gap: 14px; padding: 9px 0; }







/* Brand: font vuong van day dan, mau do, nhap nhay */



.brand {



  font-family: 'Playfair Display', Georgia, serif;



  font-style: italic; font-weight: 800; font-size: 1.78rem; line-height: 1.1; letter-spacing: .3px;



  color: #d62828; text-decoration: none; white-space: nowrap;



  animation: brandBlink 1.3s steps(1, end) infinite;



}



@keyframes brandBlink {



  0%, 49%   { opacity: 1;   text-shadow: 0 0 10px rgba(214, 40, 40, .55); }



  50%, 100% { opacity: .35; text-shadow: none; }



}







.nav-links { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }


.nav-links > a,

.nav-links > .nav-flyout > a {

  position: relative;

  text-decoration: none;

  color: #3a261d;

  padding: 9px 14px;


  border-radius: 999px;


  border: 1px solid transparent;


  font-weight: 800;


  font-size: .9rem;


  letter-spacing: .01em;


  line-height: 1;


  white-space: nowrap;


  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;


}


.nav-links > a:hover,

.nav-links > .nav-flyout > a:hover {

  background: rgba(255, 253, 246, .62);

  border-color: rgba(148, 58, 63, .18);

  color: var(--maroon);


  transform: translateY(-1px);


}


.nav-links > a.active,

.nav-links > .nav-flyout > a.active {

  background: var(--maroon);

  border-color: rgba(255,255,255,.22);

  color: #fff;


  box-shadow: 0 8px 18px rgba(91, 35, 37, .18);


}


.nav-links > a.nav-event,

.nav-links > .nav-flyout > a.nav-event {

  padding-left: 26px;

  color: var(--maroon);

  background: rgba(255, 253, 246, .36);


  border-color: rgba(209, 166, 70, .28);


}


.nav-links > a.nav-event::before,

.nav-links > .nav-flyout > a.nav-event::before {

  content: '★';

  position: absolute;


  left: 10px;


  top: 50%;


  transform: translateY(-51%);


  color: var(--gold);


  font-size: .76rem;


  line-height: 1;


}


.nav-links > a.nav-event.active,

.nav-links > .nav-flyout > a.nav-event.active {

  color: #fff;

  background: linear-gradient(135deg, #8b3438, #a33d43);

  border-color: rgba(255,255,255,.28);


  box-shadow: 0 9px 20px rgba(139, 52, 56, .25);


}


.nav-links > a.nav-event.active::before,

.nav-links > .nav-flyout > a.nav-event.active::before { color: #f7d777; }



.nav-flyout {

  position: relative;

  display: inline-flex;

  align-items: center;

}

.nav-flyout::after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 100%;

  height: 10px;

}

.nav-flyout-menu {

  position: absolute;

  left: 50%;

  top: calc(100% + 10px);

  transform: translate(-50%, -6px);

  min-width: 190px;

  background: #fffdf6;

  border: 1px solid var(--line);

  border-radius: 12px;

  box-shadow: 0 14px 34px var(--shadow);

  padding: 6px;

  opacity: 0;

  visibility: hidden;

  transition: opacity .18s, transform .18s, visibility .18s;

  z-index: 65;

}

.nav-flyout:hover .nav-flyout-menu {

  opacity: 1;

  visibility: visible;

  transform: translate(-50%, 0);

}

.nav-flyout-menu a {

  display: block;

  text-decoration: none;

  color: var(--ink);

  padding: 10px 12px;

  border-radius: 8px;

  font-weight: 700;

  font-size: .9rem;

  white-space: nowrap;

}

.nav-flyout-menu a:hover {

  background: var(--paper-2);

  color: var(--maroon);

}





/* Nut Dang nhap / Dang ky khi chua login */



.nav-cta { text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--maroon); border: 1.5px solid var(--maroon); margin-left: 4px; }



.nav-cta:hover { background: var(--maroon); color: #fff; }



.nav-cta.gold { background: var(--gold); color: #3a2e23; border-color: var(--gold); }



.nav-cta.gold:hover { background: var(--gold-soft); color: #3a2e23; }







/* Menu tai khoan (dropdown hover) */



.user-menu { position: relative; margin-left: 6px; }



.user-btn {



  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;



  background: rgba(139, 58, 58, .08); border: 1px solid var(--line);



  padding: 8px 14px; border-radius: 999px; font-family: var(--sans);



  font-weight: 600; font-size: .94rem; color: var(--ink); white-space: nowrap;



}



.user-btn b { color: var(--maroon); font-weight: 700; }



.user-menu .caret { font-size: .8rem; transition: transform .2s; }



.user-menu:hover .caret { transform: rotate(180deg); }



.user-menu::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* cau noi hover */



.user-dropdown {



  position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px;



  background: #fffdf6; border: 1px solid var(--line); border-radius: 12px;



  box-shadow: 0 14px 34px var(--shadow); padding: 6px;



  opacity: 0; visibility: hidden; transform: translateY(-6px);



  transition: opacity .18s, transform .18s, visibility .18s; z-index: 60;



}



.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }



.user-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .92rem; }


.user-dropdown a:hover { background: var(--paper-2); color: var(--maroon); }


.notif-menu { position: relative; margin-left: 4px; }


.notif-btn {


  position: relative;


  width: 40px;


  height: 40px;


  border-radius: 50%;


  border: 1px solid var(--line);


  background: rgba(139, 58, 58, .08);


  cursor: pointer;


  display: inline-grid;


  place-items: center;


  font-size: 1.05rem;


}


.notif-btn:hover { background: rgba(139, 58, 58, .13); }


.notif-count {


  position: absolute;


  top: -5px;


  right: -5px;


  min-width: 18px;


  height: 18px;


  padding: 0 5px;


  border-radius: 999px;


  background: #d62828;


  color: #fff;


  font-size: .68rem;


  font-weight: 800;


  line-height: 18px;


  box-shadow: 0 2px 8px rgba(0,0,0,.18);


}


.notif-dropdown {


  position: absolute;


  right: 0;


  top: calc(100% + 10px);


  width: min(340px, calc(100vw - 24px));


  max-height: min(520px, calc(100vh - 110px));


  overflow: hidden;


  background: #fffdf6;


  border: 1px solid var(--line);


  border-radius: 12px;


  box-shadow: 0 14px 34px var(--shadow);


  opacity: 0;


  visibility: hidden;


  transform: translateY(-6px);


  transition: opacity .18s, transform .18s, visibility .18s;


  z-index: 70;


}


.notif-menu.open .notif-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }


.notif-head {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 10px;


  padding: 11px 12px;


  border-bottom: 1px solid var(--line);


}


.notif-head b { color: var(--maroon); }


.notif-head button {


  border: 0;


  background: transparent;


  color: var(--maroon);


  font-family: var(--sans);


  font-weight: 800;


  cursor: pointer;


  padding: 5px 2px;


}


.notif-list { max-height: 450px; overflow-y: auto; padding: 5px; }


.notif-item {


  display: grid;


  grid-template-columns: 36px minmax(0, 1fr);


  gap: 10px;


  padding: 10px;


  border-radius: 10px;


  color: var(--ink);


  text-decoration: none;


}


.notif-item:hover { background: var(--paper-2); }


.notif-item.unread { background: rgba(148, 58, 63, .08); }


.notif-avatar {


  width: 36px;


  height: 36px;


  border-radius: 50%;


  overflow: hidden;


  display: grid;


  place-items: center;


  background: var(--gold-soft);


  color: var(--maroon);


  font-weight: 800;


  font-family: var(--serif);


}


.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }


.notif-body { min-width: 0; font-size: .88rem; line-height: 1.35; }


.notif-body b { color: var(--maroon); }


.notif-preview {


  margin-top: 4px;


  color: var(--ink-soft);


  overflow: hidden;


  text-overflow: ellipsis;


  white-space: nowrap;


}


.notif-body small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .75rem; }


.notif-empty { padding: 18px 12px; color: var(--ink-soft); text-align: center; }






/* Logo goc trai */



.nav-logo { display: inline-flex; flex: none; margin-right: 4px; }



.nav-logo img {



  width: 62px; height: 62px; border-radius: 50%;



  border: 2.5px solid var(--maroon); box-shadow: 0 2px 10px var(--shadow);



  object-fit: cover; background: #fff;



}



.nav-toggle { display: none; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--maroon); cursor: pointer; padding: 2px 8px; }







@media (max-width: 760px) {



  /* ===== Nav: hamburger menu tha doc ===== */



  .nav .container { flex-wrap: wrap; gap: 8px 10px; }



  .nav-logo { order: -1; }



  .nav-logo img { width: 44px; height: 44px; }



  .brand { font-size: 1.1rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }



  .nav-toggle { display: inline-flex; }







  .nav-links {



    display: none; width: 100%; flex-direction: column; align-items: stretch;



    gap: 4px; margin: 6px 0 2px; order: 5;



  }



  #navbar.open .nav-links { display: flex; }



  .nav-links > a,

  .nav-links > .nav-flyout > a {

    display: block;

    width: 100%;

    text-align: center;

    padding: 12px;

    font-size: 1rem;

  }

  .nav-flyout { display: block; width: 100%; }

  .nav-flyout::after { display: none; }

  .nav-flyout-menu {

    position: static;

    visibility: visible;

    opacity: 1;

    transform: none;

    min-width: 0;

    box-shadow: none;

    border: 0;

    background: rgba(255, 253, 246, .42);

    margin: 2px 0 4px;

    padding: 4px;

  }

  .nav-flyout-menu a { text-align: center; }

  .nav-cta { text-align: center; margin: 2px 0; }

  .user-menu { width: 100%; margin: 0; }


  .user-btn { width: 100%; justify-content: center; }


  .notif-menu { width: 100%; margin: 0; }


  .notif-btn { width: 100%; border-radius: 999px; }


  .notif-dropdown {

    display: none;

    position: static;

    width: 100%;

    max-height: 360px;

    margin-top: 6px;

    transform: none;

    box-shadow: none;

  }

  .notif-menu.open .notif-dropdown {

    display: block;

  }

  .user-menu::after { display: none; }


  .user-menu .user-dropdown {



    position: static; opacity: 1; visibility: visible; transform: none;



    box-shadow: none; border: none; background: transparent; min-width: 0; padding: 0;



  }



  .user-dropdown a { justify-content: center; }



}







/* ===== Buttons ===== */



.btn {



  display: inline-flex; align-items: center; gap: 8px; justify-content: center;



  border: none; cursor: pointer; font-family: var(--sans); font-weight: 600;



  font-size: 1rem; padding: 12px 22px; border-radius: 999px;



  background: var(--maroon); color: #fff; text-decoration: none;



  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;



  box-shadow: 0 6px 16px var(--shadow);



}



.btn:hover { background: var(--maroon-dark); transform: translateY(-1px); }



.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }



.btn.gold { background: var(--gold); color: #3a2e23; }



.btn.gold:hover { background: var(--gold-soft); }



.btn.ghost { background: transparent; color: var(--maroon); border: 1.5px solid var(--maroon); box-shadow: none; }



.btn.ghost:hover { background: var(--maroon); color: #fff; }



.btn.sm { padding: 7px 14px; font-size: .88rem; }



.btn.block { width: 100%; }



.invite-actions {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 8px;



  margin-top: 16px;



}



.invite-actions .btn {



  min-width: 0;



  min-height: 44px;



  padding: 9px 10px;



  font-size: .84rem;



  line-height: 1.1;



  white-space: nowrap;



  box-shadow: 0 5px 14px var(--shadow);



}



.invite-actions .fb-share { background: #1877f2; }







@media (max-width: 380px) {



  .invite-actions { gap: 6px; }



  .invite-actions .btn {



    padding: 8px 6px;



    font-size: .76rem;



  }



}







/* ===== Cards / forms ===== */



.card {



  background: #fffdf6;



  border: 1px solid var(--line);



  border-radius: var(--radius);



  box-shadow: 0 10px 30px var(--shadow);



  padding: 28px;



}



.field { margin-bottom: 16px; }



.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; color: var(--ink-soft); }



.input, textarea, select {



  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;



  font-family: var(--sans); font-size: 1rem; background: #fffef9; color: var(--ink);



}



.input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,148,51,.18); }



textarea { resize: vertical; min-height: 90px; }







.msg { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .95rem; display: none; }



.msg.show { display: block; }



.msg.ok { background: #e3f0d8; color: #355f1c; border: 1px solid #b7d59a; }



.msg.err { background: #f6dcdc; color: #8b2c2c; border: 1px solid #e2a9a9; }







.muted { color: var(--ink-soft); }



.center { text-align: center; }



.divider { height: 1px; background: var(--line); border: none; margin: 22px 0; }







/* ===== Hero / landing ===== */



.hero { text-align: center; padding: 70px 0 50px; }



.hero .eyebrow { letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 700; font-size: .85rem; }



.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 12px 0 6px; color: var(--maroon); line-height: 1.05; }



.hero .sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 620px; margin: 0 auto 26px; }



.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }







.countdown { display: flex; gap: 14px; justify-content: center; margin: 36px 0; flex-wrap: wrap; }



.cd-box {



  background: #fffdf6; border: 1px solid var(--line); border-radius: var(--radius);



  padding: 18px 10px; min-width: 92px; box-shadow: 0 8px 20px var(--shadow);



}



.cd-box .num { font-family: var(--serif); font-size: 2.6rem; font-weight: 800; color: var(--maroon); line-height: 1; }



.cd-box .lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-top: 6px; }







.section { padding: 50px 0; }



.section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--maroon); text-align: center; margin-bottom: 8px; }



.section .lead { text-align: center; color: var(--ink-soft); max-width: 640px; margin: 0 auto 34px; }







.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }



.info-grid .card { text-align: center; }



.info-grid .ico { font-size: 2rem; }



.info-grid h3 { color: var(--maroon); margin: 10px 0 4px; }







.stat-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }



.stat { text-align: center; }



.stat .big { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); font-weight: 800; }







.footer { text-align: center; padding: 34px 0; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 40px; font-size: .9rem; }







/* ===== Auth pages ===== */



.auth-wrap { max-width: 440px; margin: 50px auto; }



.auth-wrap h1 { color: var(--maroon); text-align: center; margin-bottom: 4px; }



.tabs { display: flex; gap: 6px; background: var(--paper-2); padding: 5px; border-radius: 999px; margin-bottom: 22px; }



.tabs button { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 999px; font-family: var(--sans); font-weight: 600; cursor: pointer; color: var(--ink-soft); }



.tabs button.active { background: var(--maroon); color: #fff; }







/* ===== Social wall ===== */



.wall { max-width: 600px; margin: 26px auto; }







/* Composer - tong vang de phan biet voi bai dang */



.composer { padding: 16px 18px; background: linear-gradient(180deg, #fff8e8, #fbeccb); border: 1px solid var(--gold-soft); box-shadow: 0 8px 22px var(--shadow); margin-bottom: 6px; }



.composer .post-head .time { color: var(--gold); font-style: italic; }







/* Nhan dong thoi gian */



.feed-label { font-family: var(--serif); font-weight: 800; color: var(--maroon); font-size: 1.1rem; margin: 20px 4px 12px; display: flex; align-items: center; gap: 8px; }



.feed-label::before { content: ''; flex: none; width: 4px; height: 18px; background: var(--gold); border-radius: 2px; }



.composer textarea { border: none; background: transparent; min-height: 54px; padding: 0; font-size: 1.05rem; width: 100%; }



.composer textarea:focus { box-shadow: none; outline: none; }



.composer .row { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }



.preview-img { max-height: 240px; border-radius: 10px; margin-top: 12px; display: none; }







/* Post card kieu Zalo */



.post { margin-bottom: 16px; padding: 0; overflow: hidden; }



.post-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }



.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); color: var(--maroon-dark); display: grid; place-items: center; font-weight: 800; font-family: var(--serif); font-size: 1.1rem; overflow: hidden; flex: none; }



.avatar img { width: 100%; height: 100%; object-fit: cover; }



.post-head .name { font-weight: 700; }



.post-head .name .nick { font-weight: 500; color: var(--ink-soft); font-size: .9em; }



.post-head .time { font-size: .8rem; color: var(--ink-soft); }



.post-del { background: none; border: none; cursor: pointer; font-size: 1.05rem; color: var(--ink-soft); padding: 4px 6px; border-radius: 8px; }



.post-del:hover { background: var(--paper-2); }



.post .body { white-space: pre-wrap; word-break: break-word; padding: 0 16px 12px; }



.post img.photo { width: 100%; display: block; margin: 0; border-radius: 0; }







/* Dong thong ke like / comment */



.post-stats { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; font-size: .85rem; color: var(--ink-soft); border-top: 1px solid var(--line); }







/* Thanh hanh dong: 2 nut chia doi */



.post-actions { display: flex; border-top: 1px solid var(--line); }



.post-actions .act { flex: 1; background: none; border: none; cursor: pointer; color: var(--ink-soft); font-family: var(--sans); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; transition: background .15s; }



.post-actions .act:hover { background: var(--paper-2); }



.post-actions .act.liked { color: var(--maroon); }







/* Binh luan */



.comments { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: #fbf4e4; }



.comment { font-size: .92rem; margin-bottom: 8px; }



.comment .c-name { font-weight: 700; color: var(--maroon); }



.comment-form { display: flex; gap: 8px; margin-top: 10px; }



.comment-form input { flex: 1; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-family: var(--sans); background: #fff; }







.badge { background: var(--maroon); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 8px; margin-left: 4px; }



.empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }







/* ===== Admin table ===== */



.table { width: 100%; border-collapse: collapse; background: #fffdf6; border-radius: var(--radius); overflow: hidden; }



.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }



.table th { background: var(--paper-2); font-family: var(--serif); }



.pill { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }



.pill.pending { background: #f5e3c0; color: #8a6312; }



.pill.approved { background: #d8ecc8; color: #3a6420; }



.pill.rejected { background: #f1cccc; color: #8b2c2c; }



.admin-tabs { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }







/* ===== Landing full-bleed panels ===== */



.panel {



  position: relative; min-height: 100vh; display: flex; align-items: center;



  background-color: #5e2626;            /* fallback am khi chua co anh nen */



  background-size: cover; background-position: center; background-repeat: no-repeat;



  overflow: hidden;



}



.panel > .container { position: relative; z-index: 2; width: min(1080px, 92%); }



.panel .scrim { position: absolute; inset: 0; z-index: 1; }



.scrim.bottom { background: linear-gradient(to top, rgba(28,18,12,.82), rgba(28,18,12,.25) 55%, rgba(28,18,12,.05)); }



.scrim.full   { background: linear-gradient(rgba(20,14,10,.55), rgba(20,14,10,.65)); }



.scrim.side   { background: linear-gradient(105deg, rgba(20,14,10,.80) 0%, rgba(20,14,10,.45) 48%, rgba(20,14,10,.05) 80%); }







.panel-label { letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; font-size: .82rem; }



.panel h2 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.4rem); color: #fff; margin: 8px 0 14px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }







/* hop noi dung kinh mo (luon de doc tren moi anh nen) */



.glass {



  max-width: 620px;



  background: rgba(26,18,12,.55);



  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);



  border: 1px solid rgba(255,255,255,.18); border-radius: 18px;



  padding: 34px 36px; color: #fdf6e7; box-shadow: 0 18px 50px rgba(0,0,0,.4);



}



.glass h2 { text-align: left; }



.glass p { color: #ece1cc; }



.glass .tag { display: inline-block; background: var(--gold); color: #2a1b10; font-weight: 700; padding: 4px 14px; border-radius: 999px; font-size: .82rem; margin-bottom: 12px; }



.glass .class-photo { width: 100%; display: block; border-radius: 10px; margin: 14px 0; border: 4px solid #fffdf6; box-shadow: 0 10px 26px rgba(0,0,0,.45); }



.class-facts { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 9px; }



.class-facts li { display: flex; align-items: center; gap: 10px; color: #ece1cc; font-size: 1.02rem; }



.class-facts .ic { font-size: 1.15rem; }



.class-facts b { color: #fff; }







/* Frame 1 - hero: anh GOC full-width, khong nen, khong phu toi */



.hero-stage { position: relative; width: 100%; background: var(--paper); }



.hero-img { display: block; width: 100%; height: auto; }



.hero-missing { padding: 90px 24px; text-align: center; color: var(--ink-soft); background: var(--paper-2); }



.hero-bar-wrap { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 20px 0; }



.hero-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }



.hero-bar .countdown { margin: 0; }



.hero-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }



.hero-cta .btns { display: flex; gap: 12px; flex-wrap: wrap; }



.hero-cta .note { color: var(--ink-soft); font-size: .92rem; }







/* Dem nguoc + CTA overlay tren poster (vung san truong) */



.hero-overlay {



  width: 100%; box-sizing: border-box;



  background: var(--paper-2); border-bottom: 1px solid var(--line);



  padding: 20px 16px;



  display: flex; flex-direction: row; align-items: center; justify-content: center;



  gap: 24px; flex-wrap: wrap;



}



.hero-overlay .countdown { margin: 0; gap: 10px; }



.hero-overlay .cd-box {



  background: linear-gradient(150deg, rgba(255,240,222,.95), rgba(255,223,231,.95));



  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);



  border: 1px solid rgba(255,255,255,.75); padding: 11px 8px; min-width: 70px;



  box-shadow: 0 6px 16px rgba(150,90,60,.28);



}



.hero-overlay .cd-box .num { font-size: 1.95rem; color: var(--maroon); }



.hero-overlay .cd-box .lbl { font-size: .72rem; color: #a87b5a; }



.hero-overlay .hero-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }



.btn.lg { padding: 13px 30px; font-size: 1.05rem; }



.hero-overlay .note {



  color: #2f5d1c; font-weight: 700; font-size: .9rem;



  background: rgba(206,234,184,.92); border: 1px solid rgba(126,176,96,.55);



  padding: 5px 14px; border-radius: 999px; backdrop-filter: blur(2px);



}







/* Title-Bar (banner ngan cach giua cac frame) */



.title-bar {



  background: linear-gradient(90deg, var(--maroon-dark), var(--maroon) 50%, var(--maroon-dark));



  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);



  padding: 20px 0; text-align: center;



}



.title-bar h2 {



  font-family: var(--serif); color: #fce8c6;



  font-size: clamp(1.4rem, 3.6vw, 2.2rem); margin: 0; letter-spacing: .5px;



  text-shadow: 0 2px 8px rgba(0,0,0,.35);



}



.title-bar h2::before, .title-bar h2::after {



  content: '✦'; color: var(--gold-soft); font-size: .65em; vertical-align: middle; margin: 0 16px;



}







/* Frame "feature" - hien anh GOC tron ven tren nen sang (vd anh tap the lop) */



.feature { background: var(--paper); padding: 58px 0 0; text-align: center; }



.feature .head { width: min(1080px, 92%); margin: 0 auto 26px; }



.feature .label { letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 700; font-size: .82rem; }



.feature h2 { font-family: var(--serif); color: var(--maroon); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 10px; }



.feature .lead { color: var(--ink-soft); max-width: 660px; margin: 0 auto; }



.feature .photo-wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }



.feature .photo { width: 100%; display: block; border-radius: 12px; box-shadow: 0 14px 36px var(--shadow); }



.feature .photo-missing { padding: 70px 24px; color: var(--ink-soft); background: var(--paper-2); border-radius: 12px; border: 1px dashed var(--line); }



.feature .caption { background: var(--paper-2); border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 0; color: var(--ink-soft); }







/* Frame 3 - timeline tren glass */



.timeline { position: relative; padding-left: 26px; margin-top: 6px; }



.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,.3); }



.tl-item { position: relative; padding: 0 0 26px 24px; }



.tl-item:last-child { padding-bottom: 0; }



.tl-item::before { content: ''; position: absolute; left: -27px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); border: 3px solid rgba(0,0,0,.3); }
.tl-item .t { font-family: var(--serif); font-weight: 800; color: var(--gold-soft); font-size: 1.35rem; margin-bottom: 2px; }
.tl-item .d { font-weight: 500; color: #f1e7d4; font-size: 1.12rem; line-height: 1.45; }
.coming-soon {
  margin-top: 24px;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(231, 200, 115, .65);
  border-radius: 16px;
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  background: rgba(255, 253, 246, .07);
}
.tbd { display: inline-block; background: rgba(231,200,115,.25); color: var(--gold-soft); border: 1px solid rgba(231,200,115,.4); border-radius: 6px; padding: 1px 8px; font-size: .8rem; font-weight: 700; }







/* ===== Nav trong suot tren trang chu ===== */



.home .nav {



  position: fixed; left: 0; right: 0; top: 0;



  background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent);



  border-bottom: none; backdrop-filter: none; transition: background .3s ease;



}



.home .nav .brand { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); }



.home .nav-links a { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }



.home .nav-links a:hover, .home .nav-links a.active { background: rgba(255,255,255,.2); }



.home .nav-links a.btn.ghost { color: #fff; border-color: rgba(255,255,255,.7); box-shadow: none; }



.home .nav.scrolled {



  background: rgba(246,237,217,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px);



}



.home .nav.scrolled .brand { color: var(--maroon); text-shadow: none; }



.home .nav.scrolled .nav-links a { color: var(--ink); text-shadow: none; }



.home .nav.scrolled .nav-links a:hover { background: var(--paper-2); }



.home .nav.scrolled .nav-links a.active { background: var(--maroon); color: #fff; }



.home .nav.scrolled .nav-links a.btn.ghost { color: var(--maroon); border-color: var(--maroon); }







@media (max-width: 700px) {



  .hero-bar { justify-content: center; }



  .hero-cta { align-items: center; }



  .glass { padding: 26px 22px; }



}







@media (max-width: 560px) {



  .card { padding: 20px; }



}







/* ===== Mobile hero/title (dat CUOI file de override rule goc) ===== */



@media (max-width: 760px) {



  /* 1 hang ngang: [4 o nho] [Tham Gia] [pill], can le trai, can giua doc */



  .hero-overlay { justify-content: flex-start; align-items: center; gap: 6px 8px; padding: 8px 10px; }



  .hero-overlay .countdown { width: auto; gap: 3px; }



  .hero-overlay .cd-box { min-width: 0; width: 35px; flex: none; max-width: none; padding: 5px 1px; border-radius: 8px; text-align: center; }



  .hero-overlay .cd-box .num { font-size: .95rem; }



  .hero-overlay .cd-box .lbl { font-size: .44rem; letter-spacing: 0; margin-top: 1px; }



  .hero-overlay .hero-cta { flex-direction: row; align-items: center; gap: 8px; }



  .hero-overlay .btn.lg { padding: 6px 14px; font-size: .82rem; }



  .hero-overlay .note { font-size: .7rem; padding: 4px 9px; white-space: nowrap; }







  .title-bar { padding: 15px 12px; }



  .title-bar h2 { font-size: 1.2rem; line-height: 1.35; }



  .title-bar h2::before, .title-bar h2::after { margin: 0 8px; }







  .glass { padding: 22px 18px !important; }



  .tl-item .t { font-size: 1.15rem; }



  .tl-item .d { font-size: 1rem; }



}







/* ===== Trang noi dung (Bang tin / Thu vien / Lien he) ===== */



.page { padding: 40px 0 60px; min-height: 62vh; }



.page-head { text-align: center; margin-bottom: 26px; }



.page-head h1 { color: var(--maroon); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; }



.page-head p { color: var(--ink-soft); margin: 0; }







.admin-box { background: #fffdf6; border: 1px dashed var(--gold); border-radius: var(--radius); padding: 18px; margin-bottom: 26px; }



.admin-box h3 { margin: 0 0 12px; color: var(--maroon); }







/* Bang tin - the ngang */



.news-card { display: flex; gap: 0; background: #fffdf6; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px var(--shadow); overflow: hidden; margin-bottom: 16px; height: 178px; }



.news-card .thumb { flex: none; width: 178px; background: var(--paper-2); cursor: pointer; }



.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }



.news-card .thumb.no-img { display: grid; place-items: center; color: var(--gold); font-size: 2.4rem; height: 100%; }



.news-card .body { flex: 1; padding: 14px 18px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }



.news-card .body h3 { color: var(--maroon); margin: 0 0 4px; font-size: 1.12rem; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



.news-card .body h3:hover { text-decoration: underline; }







/* Modal xem chi tiet thong bao */



.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; z-index: 200; overflow: auto; padding: 16px; }



.modal.open { display: block; }



.modal-card { max-width: 640px; margin: 36px auto; background: #fffdf6; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); }



.modal-card .mc-img img { width: 100%; display: block; }



.modal-card .mc-body { padding: 22px 24px; }



.modal-card .mc-title { color: var(--maroon); margin: 0 0 8px; font-family: var(--serif); font-size: 1.5rem; }



.modal-card .mc-date { color: var(--ink-soft); font-size: .85rem; margin-bottom: 14px; }



.modal-card .mc-content { white-space: pre-wrap; color: var(--ink); line-height: 1.65; }



.modal-close { position: fixed; top: 14px; right: 20px; font-size: 2.2rem; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; z-index: 201; }



/* ===== RSVP list page ===== */

.rsvp-list-page { margin: 32px auto 70px; }

.rsvp-list-head {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;

}

.rsvp-list-head h1 {

  color: var(--maroon);

  font-size: clamp(2rem, 5vw, 4rem);

  line-height: 1;

  margin: 0 0 8px;

}

.eyebrow {

  margin: 0 0 8px;

  color: var(--gold);

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .08em;

  font-size: .78rem;

}

.rsvp-summary {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin: 18px 0;

}

.rsvp-summary .stat {

  background: #fffdf6;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 16px 12px;

  box-shadow: 0 8px 22px rgba(58, 46, 35, .08);

}

.rsvp-toolbar {

  display: flex;

  gap: 10px;

  align-items: center;

  margin: 18px 0;

}

.rsvp-toolbar .input { flex: 1; margin: 0; }

.rsvp-list {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 12px;

}

.rsvp-card {

  background: #fffdf6;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 16px;

  box-shadow: 0 10px 24px rgba(58, 46, 35, .08);

}

.rsvp-card.mine {

  border-color: var(--gold);

  box-shadow: 0 10px 26px rgba(193, 148, 51, .18);

}

.rsvp-card-main {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}

.rsvp-card h3 {

  margin: 0;

  color: var(--maroon);

  line-height: 1.25;

}

.rsvp-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

  margin: 12px 0 0;

  color: var(--ink-soft);

  font-size: .88rem;

}

.rsvp-note {

  margin: 12px 0 0;

  white-space: pre-wrap;

  color: var(--ink);

}

.rsvp-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 14px;

}

.btn.danger { color: #9b2f2f; border-color: #9b2f2f; }

.modal-card > h2,

.modal-card > form { padding: 0 24px; }

.modal-card > h2 { color: var(--maroon); margin: 24px 0 12px; }

.modal-card > form { padding-bottom: 24px; }

.modal-actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 16px;

}



@media (max-width: 680px) {

  .rsvp-list-page { margin-top: 24px; }

  .rsvp-list-head {

    display: block;

  }

  .rsvp-list-head .btn { margin-top: 12px; width: 100%; }

  .rsvp-toolbar { display: grid; grid-template-columns: 1fr; }

  .rsvp-toolbar .btn { width: 100%; }

  .rsvp-summary { grid-template-columns: 1fr 1fr; }

  .rsvp-list { grid-template-columns: 1fr; }

}

.news-card .body .excerpt { margin: 0; color: var(--ink); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



.news-card .meta { margin-top: auto; padding-top: 8px; font-size: .82rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }







/* Thu vien - luoi anh */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-grid .cell { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.gallery-grid .cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.gallery-grid .cell:hover img { transform: scale(1.06); }
.gallery-grid .cell .del { position: absolute; top: 6px; right: 6px; }
@media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } }

.public-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.public-gallery .cell {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(58, 46, 35, .13);
}
.public-gallery .cell img {
  object-position: center;
}
@media (min-width: 760px) {
  .public-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 430px) {
  .public-gallery {
    gap: 10px;
  }
  .public-gallery .cell {
    border-radius: 12px;
  }
}




.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.86); display: none; place-items: center; z-index: 200; padding: 20px; }



.lightbox.open { display: grid; }



.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }



.lightbox .close { position: absolute; top: 14px; right: 20px; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; background: none; border: none; }







/* Lien he */



.contact-box { display: grid; grid-template-columns: 1fr 1.25fr; background: #fffdf6; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px var(--shadow); overflow: hidden; max-width: 880px; margin: 0 auto; }



.contact-info { background: linear-gradient(160deg, var(--maroon), var(--maroon-dark)); color: #fdf3df; padding: 32px 28px; }



.contact-info h3 { color: #fff; margin: 0 0 16px; font-family: var(--serif); font-size: 1.4rem; }



.contact-info a { color: var(--gold-soft); text-decoration: none; }



.contact-info .row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: .98rem; }



.contact-info .row .ic { font-size: 1.2rem; }



.contact-info .contact-group { margin-top: 16px; }



.contact-info .cg-title { font-weight: 700; color: #fff; margin-bottom: 5px; }



.contact-info .cg-item { font-size: .96rem; padding-left: 6px; margin-bottom: 3px; color: #f3e9d6; }



.contact-info .cg-item a { color: var(--gold-soft); font-weight: 600; }



.contact-form { padding: 28px 26px; }



@media (max-width: 700px) {



  .contact-box { grid-template-columns: 1fr; }



  .news-card { height: 132px; }



  .news-card .thumb { width: 132px; }



  .news-card .body { padding: 10px 12px; }



  .news-card .body h3 { font-size: 1rem; -webkit-line-clamp: 2; }



  .news-card .body .excerpt { -webkit-line-clamp: 1; }



  .news-card .meta .btn { padding: 5px 10px; font-size: .8rem; }



}







/* ===== Mobile polish ===== */



@media (max-width: 760px) {



  .brand {



    animation: brandPulse 2.4s ease-in-out infinite;



    color: #d62828;



  }







  .nav .container { position: relative; }



  .nav-links {



    position: absolute;



    left: 0;



    right: 0;



    top: calc(100% + 8px);



    width: 100%;



    margin: 0;



    padding: 12px;



    background: linear-gradient(180deg, #f6dca0, #efd08b);



    border: 1px solid rgba(139,58,58,.28);



    border-bottom: 3px solid var(--maroon);



    border-radius: 0 0 16px 16px;



    box-shadow: 0 18px 36px rgba(58,46,35,.22);



    z-index: 80;



  }



  #navbar.open .nav-links { display: flex; }



  .nav-links > a {



    padding: 10px 12px;



    font-size: .98rem;



  }



  .nav-cta { margin: 2px 0; }







  .glass {



    border-radius: 16px;



    padding: 20px 18px !important;



  }



  .glass p {



    font-size: .98rem;



    line-height: 1.58;



    margin: 12px 0;



  }



  .glass .tag {



    max-width: 100%;



    line-height: 1.35;



    text-align: center;



  }







  .class-facts {



    gap: 10px;



    padding-top: 12px;



  }



  .class-facts li {



    display: grid;



    grid-template-columns: 26px minmax(92px, auto) 1fr;



    align-items: center;



    column-gap: 8px;



    font-size: .98rem;



    line-height: 1.35;



  }



  .class-facts .ic {



    width: 26px;



    text-align: center;



    font-size: 1.05rem;



  }



  .class-facts .fact-label {



    color: #eadfc9;



    white-space: nowrap;



  }



  .class-facts b {



    min-width: 0;



    line-height: 1.3;



  }



}







@media (max-width: 380px) {



  .class-facts li {



    grid-template-columns: 26px 1fr;



    row-gap: 1px;



  }



  .class-facts .fact-label,



  .class-facts b {



    grid-column: 2;



  }



}







@keyframes brandPulse {



  0%, 100% {



    opacity: 1;



    text-shadow: 0 0 10px rgba(214,40,40,.48);



  }



  50% {



    opacity: .78;



    text-shadow: 0 0 4px rgba(214,40,40,.26);



  }



}











/* ===== Admin polish ===== */



.admin-page { max-width: 1120px; }



.admin-title { font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.08; }



.admin-tabs { gap: 10px; align-items: center; }



.admin-tabs .btn.sm { padding: 8px 15px; font-size: .88rem; min-height: 36px; }



.admin-panel,



.admin-box.admin-panel {



  border: 1px solid var(--line);



  border-radius: 12px;



  box-shadow: 0 8px 20px rgba(79, 45, 28, .08);



}



.admin-box.admin-panel { border-style: solid; }



.admin-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }



.admin-actions .btn.sm { padding: 6px 11px; font-size: .82rem; min-height: 32px; }



.admin-table { table-layout: auto; }



.admin-table th { font-size: .9rem; white-space: nowrap; }



.admin-table td { vertical-align: middle; }



.admin-table .muted { font-size: .82rem; }



.admin-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }



.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }



.permission-grid label { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }



.toggle-line { display: flex; gap: 10px; align-items: center; font-weight: 600; }







@media (max-width: 760px) {



  .admin-page { margin-top: 24px !important; }



  .admin-tabs { gap: 8px; margin: 16px 0 22px; }



  .admin-tabs .btn.sm {



    padding: 7px 12px;



    font-size: .82rem;



    min-height: 34px;



    box-shadow: none;



  }



  .admin-panel,



  .admin-box.admin-panel {



    padding: 18px;



    margin-bottom: 18px;



    border-radius: 10px;



  }



  .admin-table {



    display: block;



    background: transparent;



    border-radius: 0;



    overflow: visible;



  }



  .admin-table thead { display: none; }



  .admin-table tbody { display: grid; gap: 12px; }



  .admin-table tr {



    display: grid;



    gap: 8px;



    padding: 14px;



    background: #fffdf6;



    border: 1px solid var(--line);



    border-radius: 10px;



    box-shadow: 0 6px 16px rgba(79, 45, 28, .07);



  }



  .admin-table td {



    display: grid;



    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);



    gap: 10px;



    padding: 0;



    border: 0;



    font-size: .88rem;



    min-width: 0;



  }



  .admin-table td::before {



    color: var(--ink-soft);



    font-weight: 700;



    font-size: .78rem;



  }



  .admin-table td > * { min-width: 0; }



  .admin-actions { justify-content: flex-start; }



  .admin-actions .btn.sm { padding: 6px 10px; font-size: .8rem; }



  .admin-users-table td:nth-child(1)::before { content: "ID"; }



  .admin-users-table td:nth-child(2)::before { content: "Th\00E0nh vi\00EAn"; }



  .admin-users-table td:nth-child(3)::before { content: "S\0110T"; }



  .admin-users-table td:nth-child(4)::before { content: "Bi\1EC7t danh"; }



  .admin-users-table td:nth-child(5)::before { content: "Tr\1EA1ng th\00E1i"; }



  .admin-users-table td:nth-child(6)::before { content: "Thao t\00E1c"; }



  .admin-rsvp-table td:nth-child(1)::before { content: "H\1ECD t\00EAn"; }



  .admin-rsvp-table td:nth-child(2)::before { content: "S\0110T"; }



  .admin-rsvp-table td:nth-child(3)::before { content: "Tham gia"; }



  .admin-rsvp-table td:nth-child(4)::before { content: "\0110i c\00F9ng"; }



  .admin-rsvp-table td:nth-child(5)::before { content: "L\1EDDi nh\1EAFn"; }



  .admin-rsvp-table td:nth-child(6)::before { content: "L\00FAc"; }



  .admin-rsvp-table td:nth-child(7)::before { content: "Thao t\00E1c"; }



  .admin-news-table td:nth-child(1)::before { content: "Ti\00EAu \0111\1EC1"; }



  .admin-news-table td:nth-child(2)::before { content: "Tr\1EA1ng th\00E1i"; }



  .admin-news-table td:nth-child(3)::before { content: "Ng\00E0y"; }



  .admin-news-table td:nth-child(4)::before { content: "Thao t\00E1c"; }



  .admin-gallery-table td:nth-child(1)::before { content: "\1EA2nh"; }



  .admin-gallery-table td:nth-child(2)::before { content: "Ch\00FA th\00EDch"; }



  .admin-gallery-table td:nth-child(3)::before { content: "Tr\1EA1ng th\00E1i"; }



  .admin-gallery-table td:nth-child(4)::before { content: "Thao t\00E1c"; }



  .admin-contact-table td:nth-child(1)::before { content: "H\1ECD t\00EAn"; }



  .admin-contact-table td:nth-child(2)::before { content: "Email"; }



  .admin-contact-table td:nth-child(3)::before { content: "N\1ED9i dung"; }



  .admin-contact-table td:nth-child(4)::before { content: "L\00FAc"; }



  .permission-grid { grid-template-columns: 1fr; }



}











/* ===== Admin compact mobile override ===== */



@media (max-width: 760px) {



  .admin-page { margin-top: 22px !important; }



  .admin-title { font-size: 2.45rem; margin-top: 0; }



  #admin-role { font-size: .9rem; line-height: 1.35; }



  .admin-tabs { gap: 7px; margin: 14px 0 18px; }



  .admin-tabs .btn.sm {



    padding: 6px 11px;



    min-height: 32px;



    font-size: .78rem;



    border-width: 1.3px;



    box-shadow: none;



  }



  .admin-panel,



  .admin-box.admin-panel {



    padding: 15px;



    margin-bottom: 16px;



    border-radius: 9px;



  }



  .admin-panel h2,



  .admin-box.admin-panel h3 { font-size: 1.35rem; }



  #content {



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



    padding-bottom: 8px;



  }



  .admin-table,



  .admin-table thead,



  .admin-table tbody,



  .admin-table tr,



  .admin-table th,



  .admin-table td {



    display: revert;



  }



  .admin-table {



    width: max-content;



    min-width: 100%;



    border-collapse: collapse;



    background: #fffdf6;



    border-radius: 10px;



    overflow: hidden;



    box-shadow: 0 6px 16px rgba(79, 45, 28, .06);



  }



  .admin-table tr {



    padding: 0;



    background: transparent;



    border: 0;



    border-radius: 0;



    box-shadow: none;



  }



  .admin-table th,



  .admin-table td {



    display: table-cell;



    padding: 9px 10px;



    border-bottom: 1px solid var(--line);



    font-size: .78rem;



    line-height: 1.35;



    vertical-align: middle;



  }



  .admin-table td::before { content: none !important; display: none !important; }



  .admin-table th {



    font-size: .76rem;



    white-space: nowrap;



  }



  .admin-users-table { min-width: 650px; }



  .admin-rsvp-table { min-width: 720px; }



  .admin-news-table { min-width: 560px; }



  .admin-gallery-table { min-width: 560px; }



  .admin-contact-table { min-width: 620px; }



  .admin-table .pill,



  .admin-table .badge {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    max-width: 100%;



    padding: 2px 7px;



    font-size: .68rem;



    line-height: 1.2;



    white-space: nowrap;



  }



  .admin-actions {



    display: inline-flex;



    flex-wrap: nowrap;



    gap: 5px;



    white-space: nowrap;



  }



  .admin-actions .btn.sm {



    min-height: 28px;



    padding: 4px 9px;



    font-size: .72rem;



  }



  .admin-thumb { width: 58px; height: 44px; }



  .stat-row .stat { min-width: 120px; padding: 12px 10px; }



  .stat .big { font-size: 2.1rem; }



}











@media (max-width: 760px) {



  .admin-table { display: table; }



  .admin-table thead { display: table-header-group; }



  .admin-table tbody { display: table-row-group; }



  .admin-table tr { display: table-row; }



  .admin-table th,



  .admin-table td { display: table-cell; }



}











/* RSVP admin list: force compact table on mobile */



@media (max-width: 760px) {



  #content .admin-rsvp-table {



    display: table !important;



    width: max-content !important;



    min-width: 720px !important;



    border-collapse: collapse !important;



    background: #fffdf6 !important;



    border-radius: 10px !important;



    overflow: hidden !important;



  }



  #content .admin-rsvp-table thead { display: table-header-group !important; }



  #content .admin-rsvp-table tbody { display: table-row-group !important; gap: 0 !important; }



  #content .admin-rsvp-table tr {



    display: table-row !important;



    padding: 0 !important;



    background: transparent !important;



    border: 0 !important;



    border-radius: 0 !important;



    box-shadow: none !important;



  }



  #content .admin-rsvp-table th,



  #content .admin-rsvp-table td {



    display: table-cell !important;



    grid-template-columns: none !important;



    padding: 9px 10px !important;



    border-bottom: 1px solid var(--line) !important;



    font-size: .78rem !important;



    line-height: 1.35 !important;



    vertical-align: middle !important;



  }



  #content .admin-rsvp-table td::before {



    content: none !important;



    display: none !important;



  }



  #content .admin-rsvp-table .admin-actions {



    display: inline-flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    white-space: nowrap !important;



  }



  #content .admin-rsvp-table .btn.sm {



    min-height: 28px !important;



    padding: 4px 9px !important;



    font-size: .72rem !important;



  }



}











/* Final mobile admin tables: compact horizontal tables for every admin list */



@media (max-width: 760px) {



  #content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }



  #content .admin-table {



    display: table !important;



    width: max-content !important;



    min-width: 620px !important;



    border-collapse: collapse !important;



    background: #fffdf6 !important;



    border-radius: 10px !important;



    overflow: hidden !important;



    box-shadow: 0 6px 16px rgba(79, 45, 28, .06) !important;



  }



  #content .admin-users-table { min-width: 650px !important; }



  #content .admin-rsvp-table { min-width: 720px !important; }



  #content .admin-news-table,



  #content .admin-gallery-table { min-width: 560px !important; }



  #content .admin-contact-table { min-width: 620px !important; }



  #content .admin-table thead { display: table-header-group !important; }



  #content .admin-table tbody { display: table-row-group !important; gap: 0 !important; }



  #content .admin-table tr {



    display: table-row !important;



    padding: 0 !important;



    background: transparent !important;



    border: 0 !important;



    border-radius: 0 !important;



    box-shadow: none !important;



  }



  #content .admin-table th,



  #content .admin-table td {



    display: table-cell !important;



    grid-template-columns: none !important;



    padding: 9px 10px !important;



    border-bottom: 1px solid var(--line) !important;



    font-size: .78rem !important;



    line-height: 1.35 !important;



    vertical-align: middle !important;



  }



  #content .admin-table th {



    white-space: nowrap !important;



    font-size: .76rem !important;



  }



  #content .admin-table td::before {



    content: none !important;



    display: none !important;



  }



  #content .admin-table .admin-actions {



    display: inline-flex !important;



    flex-wrap: nowrap !important;



    gap: 5px !important;



    white-space: nowrap !important;



  }



  #content .admin-table .btn.sm {



    min-height: 28px !important;



    padding: 4px 9px !important;



    font-size: .72rem !important;



  }



  #content .admin-table .pill,



  #content .admin-table .badge {



    display: inline-flex !important;



    align-items: center !important;



    width: fit-content !important;



    padding: 2px 7px !important;



    font-size: .68rem !important;



    line-height: 1.2 !important;



    white-space: nowrap !important;



  }



}











/* Scroll only the table, never the whole admin content */



.admin-table-wrap {



  width: 100%;



  max-width: 100%;



  overflow-x: auto;



  -webkit-overflow-scrolling: touch;



}



@media (max-width: 760px) {



  #content {



    overflow-x: visible !important;



    max-width: 100% !important;



  }



  #content .admin-table-wrap {



    display: block !important;



    width: 100% !important;



    max-width: 100% !important;



    overflow-x: auto !important;



    overflow-y: hidden !important;



    -webkit-overflow-scrolling: touch !important;



    padding-bottom: 6px !important;



  }



  #content .admin-table-wrap .admin-table {



    margin-bottom: 0 !important;



  }



}











/* ===== Newfeed upgrade ===== */



.wall { max-width: 720px; margin: 28px auto 70px; }



.wall-hero {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto;



  gap: 18px;



  align-items: end;



  margin: 12px 0 18px;



}



.wall-eyebrow {



  margin: 0 0 6px;



  color: var(--gold);



  font-size: .78rem;



  font-weight: 800;



  letter-spacing: 2px;



  text-transform: uppercase;



}



.wall-hero h1 { margin: 0 0 8px; color: var(--maroon); font-size: clamp(2.2rem, 7vw, 3.3rem); line-height: 1.05; }



.wall-hero p { margin: 0; max-width: 520px; }



.wall-mini-stats { display: grid; grid-template-columns: repeat(2, 90px); gap: 8px; }



.wall-mini-stats div {



  background: #fffdf6;



  border: 1px solid var(--line);



  border-radius: 10px;



  padding: 10px;



  text-align: center;



  box-shadow: 0 6px 16px rgba(79, 45, 28, .07);



}



.wall-mini-stats b { display: block; color: var(--gold); font-family: var(--serif); font-size: 1.7rem; line-height: 1; }



.wall-mini-stats span { color: var(--ink-soft); font-size: .74rem; }



.composer { padding: 18px; border-radius: 14px; }



.composer-head { padding: 0 0 12px; }



.composer-person .name { font-size: 1rem; }



.composer textarea {



  min-height: 88px;



  max-height: 220px;



  overflow-y: auto;



  padding: 12px 0;



  line-height: 1.55;



}



.prompt-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 10px; }



.prompt-row button {



  border: 1px solid rgba(148, 58, 63, .28);



  background: rgba(255,255,255,.55);



  color: var(--maroon);



  border-radius: 999px;



  padding: 6px 10px;



  font-family: var(--sans);



  font-weight: 700;



  font-size: .78rem;



  cursor: pointer;



}



.prompt-row button:hover { background: #fffdf6; }



.preview-wrap { position: relative; margin: 8px 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }



.preview-wrap img { display: block; width: 100%; max-height: 360px; object-fit: cover; }



#remove-image {



  position: absolute;



  top: 8px;



  right: 8px;



  width: 30px;



  height: 30px;



  border: 0;



  border-radius: 50%;



  background: rgba(0,0,0,.62);



  color: #fff;



  font-size: 1.2rem;



  cursor: pointer;



}



.composer-tools { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }



.composer-tools #file-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }



.char-count { margin-left: auto; color: var(--ink-soft); font-size: .78rem; }



.composer-tools #post-btn { margin-left: 0; }



.feed-toolbar {



  display: flex;



  gap: 12px;



  align-items: center;



  justify-content: space-between;



  margin: 18px 0 12px;



  flex-wrap: wrap;



}



.feed-tabs {



  display: inline-flex;



  gap: 5px;



  padding: 4px;



  background: rgba(255,253,246,.72);



  border: 1px solid var(--line);



  border-radius: 999px;



}



.feed-tabs button {



  border: 0;



  background: transparent;



  color: var(--maroon);



  border-radius: 999px;



  padding: 8px 12px;



  font-family: var(--sans);



  font-weight: 800;



  font-size: .82rem;



  cursor: pointer;



}



.feed-tabs button.active { background: var(--maroon); color: #fff; }



.feed-search { display: flex; gap: 8px; align-items: center; min-width: min(100%, 310px); }



.feed-search input {



  flex: 1;



  min-width: 0;



  border: 1.5px solid var(--line);



  border-radius: 999px;



  padding: 9px 13px;



  background: #fffdf6;



  font-family: var(--sans);



}



.feed-label { margin-top: 18px; }



.post {


  border-radius: 14px;


  border: 1px solid var(--line);


  box-shadow: 0 8px 22px rgba(79, 45, 28, .08);


}


.post.post-focus {


  outline: 3px solid rgba(209, 166, 70, .55);


  box-shadow: 0 0 0 6px rgba(209, 166, 70, .18), 0 12px 28px rgba(79, 45, 28, .13);


}


.post-head { padding: 15px 16px 9px; align-items: flex-start; }



.post-meta { min-width: 0; flex: 1; }



.post-head .name { line-height: 1.25; }



.post-head .name .nick {



  display: inline-flex;



  margin-left: 5px;



  padding: 1px 7px;



  border-radius: 999px;



  background: #f2e4c1;



  color: var(--maroon);



  font-size: .74rem;



  font-weight: 800;



  vertical-align: middle;



}



.post-del {



  width: 30px;



  height: 30px;



  border-radius: 50%;



  background: rgba(148,58,63,.08);



  color: var(--maroon);



  font-size: 1.25rem;



  line-height: 1;



}



.post .body { font-size: .98rem; line-height: 1.58; padding: 2px 16px 13px; }



.post .body a { color: var(--maroon); font-weight: 700; }



.photo-frame { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }



.post img.photo { max-height: 620px; object-fit: cover; background: #eee1c5; }



.post-stats { padding: 9px 16px; }



.post-actions .act { min-height: 42px; }



.post-actions .act.liked { color: var(--maroon); background: rgba(148,58,63,.06); }



.comments { background: #fff8e8; }



.comment {



  display: flex;



  align-items: flex-start;



  gap: 8px;



  margin-bottom: 9px;



}



.comment-avatar {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  display: grid;



  place-items: center;



  flex: none;



  background: var(--gold-soft);



  color: var(--maroon);



  font-family: var(--serif);



  font-weight: 800;



  font-size: .78rem;



}



.comment-bubble {



  background: #fffdf6;



  border: 1px solid var(--line);



  border-radius: 12px;



  padding: 7px 10px;



  min-width: 0;



  flex: 1;



  line-height: 1.45;



}



.comment .c-name { display: block; margin-bottom: 2px; font-size: .82rem; }



.comment-form { align-items: center; }



.comment-form input { min-height: 38px; }



.wall-lightbox {



  position: fixed;



  inset: 0;



  z-index: 200;



  background: rgba(38, 24, 18, .86);



  display: none;



  align-items: center;



  justify-content: center;



  padding: 18px;



}



.wall-lightbox.open { display: flex; }


.wall-lightbox img { max-width: min(100%, 980px); max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }


.wall-modal {


  position: fixed;


  inset: 0;


  z-index: 210;


  background: rgba(38, 24, 18, .58);


  display: none;


  align-items: center;


  justify-content: center;


  padding: 16px;


}


.wall-modal.open { display: flex; }


.wall-modal-card {


  width: min(420px, 100%);


  max-height: min(620px, 86vh);


  overflow: hidden;


  background: #fffdf6;


  border: 1px solid var(--line);


  border-radius: 14px;


  box-shadow: 0 24px 70px rgba(38, 24, 18, .32);


}


.wall-modal-head {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 10px;


  padding: 14px 16px;


  border-bottom: 1px solid var(--line);


}


.wall-modal-head h2 {


  margin: 0;


  color: var(--maroon);


  font-size: 1.05rem;


}


#likes-modal-close {


  width: 34px;


  height: 34px;


  border-radius: 50%;


  border: 0;


  background: rgba(148,58,63,.09);


  color: var(--maroon);


  font-size: 1.35rem;


  cursor: pointer;


}


.like-list { max-height: 520px; overflow-y: auto; padding: 6px; }


.like-user {


  display: flex;


  align-items: center;


  gap: 10px;


  padding: 10px;


  border-radius: 10px;


}


.like-user + .like-user { border-top: 1px solid rgba(217,197,154,.58); }


.like-avatar {


  width: 40px;


  height: 40px;


  border-radius: 50%;


  overflow: hidden;


  display: grid;


  place-items: center;


  background: var(--gold-soft);


  color: var(--maroon);


  font-family: var(--serif);


  font-weight: 800;


  flex: none;


}


.like-avatar img { width: 100%; height: 100%; object-fit: cover; }


.like-meta { min-width: 0; line-height: 1.25; }


.like-meta b { display: block; color: var(--ink); }


.like-meta span,


.like-meta small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }


.post-stats .likes-sum {


  border: 0;


  background: transparent;


  color: var(--ink-soft);


  font: inherit;


  padding: 0;


  cursor: pointer;


}


.post-stats .likes-sum:hover { color: var(--maroon); text-decoration: underline; }


#lightbox-close {


  position: fixed;



  top: 14px;



  right: 16px;



  width: 42px;



  height: 42px;



  border-radius: 50%;



  border: 1px solid rgba(255,255,255,.35);



  background: rgba(255,255,255,.12);



  color: #fff;



  font-size: 1.8rem;



  cursor: pointer;



}



@media (max-width: 760px) {



  .wall { margin-top: 22px; }



  .wall-hero { grid-template-columns: 1fr; gap: 12px; }



  .wall-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }



  .composer { padding: 15px; }



  .composer-tools { gap: 8px; }



  .char-count { order: 3; margin-left: 0; width: 100%; }



  .composer-tools #post-btn { margin-left: auto; }



  .feed-toolbar { align-items: stretch; }



  .feed-tabs { width: 100%; justify-content: space-between; }



  .feed-tabs button { flex: 1; padding: 8px 6px; }



  .feed-search { width: 100%; }



  .post { border-radius: 12px; }



  .post-actions .act { font-size: .84rem; gap: 5px; }



  .post img.photo { max-height: 440px; }



}