/* CAY YEU THUONG — moi loi nhan la mot chiec la tren cay.
   Nap SAU page-3-blocks.css. Mau chu dao lay theo theme: #f30000.

   Vi sao ve cay bang SVG inline chu khong dung anh: la phai moc dong
   theo so loi nhan, va moi la can bat duoc click/hover rieng. Anh tinh
   khong lam duoc chuyen do. */

/* Bien dat o :root chu KHONG o .lt-wrap: hai hop thoai (#lt-form-modal,
   #lt-view-modal) nam NGOAI .lt-wrap — la anh em, khong phai con — nen neu
   khai bao trong .lt-wrap thi moi var() trong modal deu rong. Do la ly do
   nut gui truoc day bi trong suot (chu trang tren nen trang). */
:root {
  --lt-red: #b20000;        /* = .alert cua theme, dong bo voi nut GUI QUA CUOI */
  --lt-red-soft: #f30000;   /* do tuoi, chi dung cho tieu de + vien focus */
  --lt-ink: #2a2b2c;
  --lt-bark: #7a5230;
  --lt-paper: #fffcf4;
}

.lt-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 46px 0 40px;
  font-family: Questrial, system-ui, sans-serif;
  color: var(--lt-ink);
  position: relative;
}

/* Duong ke tach cay khoi phan phia tren. Gradient mo dan hai dau + trai tim
   o giua cho hop thiep cuoi, thay vi mot vach ngang cung. */
.lt-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(178, 0, 0, 0) 0%,
    rgba(178, 0, 0, .28) 30%,
    rgba(178, 0, 0, .28) 70%,
    rgba(178, 0, 0, 0) 100%);
}

.lt-wrap::after {
  content: "\2764";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  background: var(--lt-paper);   /* "cat" duong ke o giua */
  padding: 0 12px;
  font-size: 13px;
  color: rgba(178, 0, 0, .45);
  line-height: 1;
}

.lt-title {
  font-family: "Snell Roundhand", "Dancing Script", "Segoe Script";
  font-size: clamp(28px, 6vw, 44px);
  color: var(--lt-red-soft);
  margin: 0 0 4px;
  line-height: 1.2;
}

.lt-sub {
  font-size: clamp(13px, 3.2vw, 15px);
  color: #6b5f56;
  margin: 0 0 18px;
  font-style: italic;
}

/* ---------- Khung cay ---------- */
.lt-stage {
  position: relative;
  width: 100%;
  /* Cay cao hon rong: giu ti le de la khong bi bep tren mobile. */
  aspect-ratio: 1 / 1.02;
  max-height: 74vh;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 100%, #fdf3e7 0%, rgba(253,243,231,0) 60%),
    linear-gradient(180deg, #fffdf9 0%, var(--lt-paper) 100%);
  box-shadow: inset 0 0 0 1px rgba(243,0,0,.08);
  touch-action: manipulation;
}

.lt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Tham co duoi goc ---------- */
/* Moi la co dua quanh CHAN cua no (transform-origin duoi day), nhu co that
   bi gio thoi: ngon lay, chan dung yen. Bien do rat nho (1.5-2.5deg) de
   tham co khong "song" hon tan cay. */
/* Chi nham vao LA CO (.lt-blade), khong phai moi <path> trong nhom: vung
   dat cung la mot path, cho no lac theo thi ca mang dat nghieng qua lai
   va nhin nhu nhap nhay. */
.lt-blade {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: lt-grass-sway 5s ease-in-out infinite;
  will-change: transform;
}

/* Lop truoc lay manh hon lop sau mot chut => co chieu sau. */
.lt-grass--front .lt-blade { animation-name: lt-grass-sway2; }

@keyframes lt-grass-sway {
  0%, 100% { transform: rotate(-1.4deg) skewX(-1deg); }
  50%      { transform: rotate(1.6deg)  skewX(1.2deg); }
}

@keyframes lt-grass-sway2 {
  0%, 100% { transform: rotate(2deg)    skewX(1.4deg); }
  50%      { transform: rotate(-1.8deg) skewX(-1.2deg); }
}

/* ---------- La ---------- */
.lt-leaf-pos { cursor: pointer; }
.lt-leaf-pos:focus-visible { outline: none; }

.lt-leaf {
  transform-box: fill-box;
  /* Xoay quanh CUONG la (dinh tren) chu khong quanh tam: la that dinh vao
     canh o cuong, nen xoay o tam se trong nhu la dang troi lo lung. */
  transform-origin: 50% 8%;
  /* Moi la rung theo nhip rieng: JS dat animation-delay + gan 1 trong 3
     bien the ben duoi de tan cay khong dap cung mot nhip. */
  animation: lt-sway 4.4s ease-in-out infinite;
  transition: filter .18s ease;
  will-change: transform;
}

/* Ba bien the rung: chu ky va bien do lech nhau => nhin nhu gio that thoi
   qua tan cay, chu khong phai ca cay lac dong loat. */
.lt-leaf--a { animation-name: lt-sway;  animation-duration: 4.4s; }
.lt-leaf--b { animation-name: lt-sway2; animation-duration: 5.6s; }
.lt-leaf--c { animation-name: lt-sway3; animation-duration: 3.8s; }

.lt-leaf-pos:hover .lt-leaf,
.lt-leaf-pos:focus-visible .lt-leaf {
  filter: drop-shadow(0 3px 7px rgba(178, 0, 0, .5));
  outline: none;
  /* Cham vao thi la rung manh va nhanh han => biet la bam duoc. */
  animation-name: lt-wiggle;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

@keyframes lt-wiggle {
  0%, 100% { transform: rotate(-7deg)  scale(1.12); }
  25%      { transform: rotate(6deg)   scale(1.14); }
  50%      { transform: rotate(-5deg)  scale(1.12); }
  75%      { transform: rotate(4deg)   scale(1.14); }
}

/* La vua duoc them: moc len thay vi hien dot ngot. */
.lt-leaf.is-new {
  animation: lt-grow .9s cubic-bezier(.34, 1.56, .64, 1) both,
             lt-sway 4.4s ease-in-out .9s infinite;
}

/* Bien do ~5-6deg: gio nhe nhung nhin thay ro la dang lay dong,
   thay vi gan nhu dung yen nhu ban truoc. */
/* Rung rinh: xoay quanh cuong + nhun len xuong mot chut. Them buoc trung
   gian lech nhip (khong doi xung) de chuyen dong khong deu tam tap nhu
   con lac dong ho. */
/* Rung rinh: chi dung rotate + scale, KHONG dung translate.
   Ly do: trong SVG kem transform-box:fill-box, translate voi so 0 tran
   (translateY(0)) lam hong ca keyframe — la se dung yen hoan toan.
   Xoay quanh cuong (transform-origin 50% 8%) da du cam giac la dung dua. */
@keyframes lt-sway {
  0%   { transform: rotate(-5.5deg) scale(1);    }
  28%  { transform: rotate(2.5deg)  scale(1.025); }
  52%  { transform: rotate(5.5deg)  scale(1);    }
  76%  { transform: rotate(-2deg)   scale(1.018); }
  100% { transform: rotate(-5.5deg) scale(1);    }
}

@keyframes lt-sway2 {
  0%   { transform: rotate(4.5deg)  scale(1);    }
  33%  { transform: rotate(-3.5deg) scale(1.04); }
  61%  { transform: rotate(-6deg)   scale(1);    }
  84%  { transform: rotate(1deg)    scale(1.025); }
  100% { transform: rotate(4.5deg)  scale(1);    }
}

@keyframes lt-sway3 {
  0%   { transform: rotate(-3deg)   scale(1);    }
  24%  { transform: rotate(6deg)    scale(1.03); }
  55%  { transform: rotate(-5deg)   scale(1);    }
  79%  { transform: rotate(2deg)    scale(1.018); }
  100% { transform: rotate(-3deg)   scale(1);    }
}

@keyframes lt-grow {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Ton trong nguoi tat hieu ung chuyen dong trong he dieu hanh. */
@media (prefers-reduced-motion: reduce) {
  .lt-leaf,
  .lt-leaf.is-new,
  .lt-blade { animation: none !important; }
}

/* ---------- Nut gui ---------- */
.lt-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Bat chuoc .button.alert cua Flatsome: chu in hoa, dam, bo tron 99px —
   de nut nay dung canh nut "GUI QUA CUOI" trong khong bi lac dieu.
   Dung font-family TUONG MINH: theme khong dat font cho <button> nen neu
   de "inherit" thi nut an theo font serif cua trang => lech han chu. */
/* !important o day la co chu dich, khong phai lam bua: page-2-theme.css co
   mot selector rat dai ap background-color:#fffcf4 len MOI button[type=submit]
   (nut chim vao nen trang). Selector do dai hon nen thang ve do uu tien —
   cach sach nhat de gianh lai la khai bao tuong minh. */
.lt-btn,
.lt-wrap .lt-btn,
.lt-modal .lt-btn,
.lt-modal button[type="submit"].lt-btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 99px;
  /* Do khop VOI NUT "GUI QUA CUOI" va "XEM ANH KI NIEM" (a.button.alert).
     Nut do la the <a> nen an font cua body — ma page-3-blocks.css ep body
     sang "Times New Roman".
     Do bang trinh duyet: cao 39px, font 15.52px (.97em), weight 700,
     line-height 37.248px (2.4em), padding ngang 18.624px (1.2em), KHONG
     co padding doc — chieu cao do line-height quyet dinh.
     Truoc day dung padding 13px/32px nen nut cao 51px, to hon han hai nut
     kia dung canh. */
  font-family: "Times New Roman", Times, serif;
  font-size: .97em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 2.4em;
  padding: 0 1.2em;
  cursor: pointer;
  background-color: var(--lt-red) !important;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .15s ease, transform .15s ease;
}

.lt-btn:hover { background-color: #8f0000 !important; transform: translateY(-1px); }
.lt-btn:active { transform: translateY(0); }

/* Dang gui: mo di + con tro cho, KHONG doi mau chu thanh trang tren nen trang. */
.lt-btn:disabled,
.lt-btn.is-loading {
  opacity: .75;
  cursor: progress;
  transform: none;
}

/* Vong xoay nho truoc chu khi dang gui. */
.lt-btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lt-spin .7s linear infinite;
}

@keyframes lt-spin { to { transform: rotate(360deg); } }

/* Icon but long trong nut.
   Dung CSS mask thay vi <img>: anh goc mau den, ma nut nen do can icon
   TRANG. Mask lay hinh dang tu file PNG roi to bang background-color, nen
   icon tu dong an theo mau chu — doi mau nut khong phai sua anh. */
.lt-btn > i.lt-ico {
  display: inline-block;
  /* To hon chu mot chut: net but long manh nen de bi lot thom neu de
     bang co chu. */
  width: 1.5em;
  height: 1.5em;
  margin-left: 10px;
  vertical-align: -.38em;
  background-color: currentColor;
  -webkit-mask: var(--lt-ico) center / contain no-repeat;
          mask: var(--lt-ico) center / contain no-repeat;
}

/* Icon dang font cua theme (neu con dung o dau do). */
.lt-btn > i:not(.lt-ico) {
  margin-left: 9px;
  font-size: 1.05em;
  vertical-align: -1px;
  line-height: 1;
}

/* Dang gui thi giau icon di, cho vong xoay dung mot minh. */
.lt-btn.is-loading > i { display: none !important; }

/* Nut submit trong modal: cho chiem tron chieu ngang de khong bi lot thom. */
.lt-modal .lt-actions { margin-top: 18px; }
.lt-modal .lt-btn { width: 100%; }

.lt-btn--ghost {
  background: transparent;
  color: var(--lt-red);
  border-color: var(--lt-red);
}
.lt-btn--ghost:hover { background-color: var(--lt-red); color: #fff; }

.lt-count {
  margin-top: 12px;
  font-size: 13px;
  color: #7a6e64;
}

/* ---------- Modal (dung chung cho form va xem loi nhan) ---------- */
.lt-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;   /* tren ca lightbox cua Flatsome */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* Nen toi hon han (.55 -> .72): truoc day cay va tim roi phia sau
     an xuyen qua lam chu trong modal bi chim, doc rat met. */
  background: rgba(26, 14, 14, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lt-modal.is-open { display: flex; }

.lt-modal__box {
  /* Mau DAC, khong dung bien trong suot — hop thoai phai chan hoan toan
     hinh nen phia sau thi chu moi ro. */
  background: #fffdf8;
  border-radius: 18px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 430px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  animation: lt-pop .22s ease-out;
  text-align: left;
  /* Font he thong cho toan bo hop thoai: khong de font serif cua trang
     thua ke xuong lam lech chu. */
  font-family: Questrial, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lt-ink);
}

@keyframes lt-pop {
  from { transform: translateY(14px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.lt-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: #b0a49a;
  cursor: pointer;
  padding: 4px 8px;
  z-index: 1;
  font-family: system-ui, sans-serif;
}
.lt-modal__close:hover { color: var(--lt-red); }

.lt-modal__title {
  font-family: "Snell Roundhand", "Dancing Script", "Segoe Script";
  font-size: 30px;
  line-height: 1.25;
  color: var(--lt-red);
  margin: 0 0 18px;
  padding-bottom: 14px;
  text-align: center;
  border-bottom: 1px solid #efe4d6;
}

/* O bay chong bot. Khong dung display:none hay visibility:hidden — bot
   biet doc CSS se nhan ra va bo qua. Day no ra ngoai man hinh thi trong
   DOM no van la mot o nhap binh thuong, bot tu dong se dien vao. */
.lt-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lt-field { margin-bottom: 13px; }

.lt-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #6b5f56;
  letter-spacing: .01em;
}

/* Flatsome ep height:2.507em, padding:0 .75em va font-size:.97em len moi
   input => phai ghi de tuong minh, khong thi o nhap bi bep va lech font. */
.lt-field input[type="text"],
.lt-field textarea {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #ddd0be;
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 15px;   /* >=16px tren mobile de iOS khong tu zoom — xem media query duoi */
  font-family: Questrial, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  background-color: #fff;
  color: var(--lt-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.lt-field input[type="text"]::placeholder,
.lt-field textarea::placeholder { color: #b3a79c; opacity: 1; }

.lt-field input[type="text"]:focus,
.lt-field textarea:focus {
  outline: none;
  border-color: var(--lt-red);
  box-shadow: 0 0 0 3px rgba(178, 0, 0, .12);
}

/* Cao hon (96 -> 140px) vi gioi han da len 800 ky tu: o qua thap thi
   nguoi viet dai phai cuon trong o, rat kho doc lai cai minh vua go. */
.lt-field textarea { resize: vertical; min-height: 140px; max-height: 40vh; }

.lt-help {
  font-size: 12px;
  color: #8a7d74;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Bang mau la: vong tron nhu ban dau. Chi lam ro lai trang thai DANG CHON:
   truoc day vien do sat vien trang nen nhin khong biet dang chon cai nao. */
/* 8 o mau xep VUA MOT HANG ke ca tren dien thoai hep (~320px).
   Dung grid 8 cot thay vi flex-wrap: flex-wrap lam o cuoi bi rot xuong
   dong duoi, dung tro troi mot minh, nhin rat le. */
.lt-colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
  padding: 2px 0;
}

.lt-colors input { position: absolute; opacity: 0; pointer-events: none; }

.lt-colors label {
  position: relative;
  /* Co gian theo be ngang, chan tren duoi de khong qua to/nho. */
  width: 100%;
  max-width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
  background: var(--sw);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .15s ease;
}

.lt-colors label:hover { transform: scale(1.12); }

/* Vong tron chon: vong sang tach khoi mau la + vien do ben ngoai,
   cong them dau tick o giua => nhin phat la biet ngay. */
.lt-colors input:checked + label {
  transform: scale(1.18);
  box-shadow:
    0 0 0 3px #fffdf8,
    0 0 0 5px var(--lt-red),
    0 2px 6px rgba(0, 0, 0, .22);
}

.lt-colors input:checked + label::after {
  content: "";
  position: absolute;
  /* Canh giua theo % de dau tick van dung tam khi o co gian. */
  left: 50%;
  top: 50%;
  margin: -7px 0 0 -3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  /* Vien toi mo phia sau dau tick de no ro ca tren la mau vang. */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}

.lt-colors input:focus-visible + label {
  outline: 2px solid var(--lt-red);
  outline-offset: 4px;
}

.lt-msg {
  font-size: 13px;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  display: none;
}
.lt-msg.is-err  { display: block; background: #ffeaea; color: #a51616; }
.lt-msg.is-ok   { display: block; background: #eafaf0; color: #1c7a45; }

/* ---------- Noi dung khi xem 1 chiec la ---------- */
.lt-view__text {
  font-size: 16.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 16px;
  /* Loi chuc 800 ky tu co the rat dai: cho khung tu cuon de ten nguoi gui
     va ngay thang o duoi khong bi day ra khoi man hinh. */
  max-height: 46vh;
  overflow-y: auto;
  padding: 14px 16px;
  color: #2a2b2c;
  background: #fdf6ec;
  border-left: 3px solid var(--lt-red);
  border-radius: 0 10px 10px 0;
}

.lt-view__from {
  text-align: right;
  font-family: "Snell Roundhand", "Dancing Script", "Segoe Script";
  font-size: 21px;
  color: var(--lt-red);
}

.lt-view__date { text-align: right; font-size: 12px; color: #9a8f88; margin-top: 4px; }

/* ---------- Trang thai tai / rong ---------- */
.lt-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  opacity: .6;
  text-align: center;
  pointer-events: none;
  width: 80%;
}

@media (max-width: 600px) {
  .lt-stage { aspect-ratio: 1 / 1.15; max-height: 68vh; }
  /* 16px chan Safari iOS tu dong zoom khi focus o input. */
  .lt-field input, .lt-field textarea { font-size: 16px; }
  .lt-modal__box { padding: 24px 18px 18px; }
}