@charset "UTF-8";

/* ── MERCURY DESIGN TOKENS — import Refero Certified v2.0 ── */
/* Tải token Mercury trước mọi rule — cho phép toàn dự án    */
/* dùng --color-cobalt, --radius-cards, --spacing-32, v.v.   */
@import url('./mercury-tokens.css');

/* ==========================================================================
   CÀ MAU ECO — HỆ THIẾT KẾ V2  ·  Hướng "Di sản bản địa"
   Viết mới hoàn toàn, không phụ thuộc framework.
   Thứ tự: 1 Tokens · 2 Reset · 3 Typography · 4 Layout · 5 Component
           6 Section · 7 Header/Footer · 8 Responsive · 9 A11y/Print
   ========================================================================== */



/* ── 1. DESIGN TOKENS (ORGANIC NATURE DESIGN SYSTEM) ───────────────────── */
:root{
  /* Mực & Giấy mộc Organic Paper Texture */
  --ink:        #1B1813;
  --ink-2:      #3E362D;
  --ink-3:      #594F42; /* WCAG 2.1 AAA High Contrast Muted Text */
  --paper:      #F6F1E9; /* Warm organic parchment paper */
  --paper-2:    #EFE8D8; /* Rich natural paper grain */
  --paper-3:    #E5DBC7;
  --line:       #DCD1BD;
  --line-2:     #C8BAA3;

  /* Đất & Rừng tràm Organic Forest */
  --tram:       #163B24; /* Deep Moss Forest */
  --tram-deep:  #0F2B1A;
  --tram-lite:  #2D5E3E; /* Fresh Leaf Green */
  --brand:      #237A43;

  /* Mật ong & Gỗ U Minh Amber Wood */
  --mat:        #C9761B;
  --mat-lite:   #E59E38;
  --accent:     #E85A09;
  --timber:     #4A3225; /* Warm Bark Wood */

  /* Thân đước */
  --duoc:       #6E2D28;
  --duoc-lite:  #8E3B35;

  /* Ngữ nghĩa */
  --ok:#237A43; --warn:#B4791A; --danger:#9C3128;

  /* Typography Editorial Premium */
  --serif: 'EB Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Thang chữ */
  --t-display: clamp(2.8rem, 7.5vw, 5.6rem);
  --t-h1:      clamp(2.2rem, 5.2vw, 3.6rem);
  --t-h2:      clamp(1.75rem, 3.5vw, 2.7rem);
  --t-h3:      clamp(1.3rem, 2.1vw, 1.7rem);
  --t-h4:      1.1rem;
  --t-body:    1.05rem;
  --t-sm:      .94rem;
  --t-xs:      .84rem;

  /* Nhịp khoảng cách */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem;

  /* Bo góc hữu cơ Organic Curves */
  --r-sm:6px; --r:12px; --r-lg:24px; --r-organic:32px; --r-pill:999px;

  /* Đổ bóng mờ sương tự nhiên */
  --sh-1: 0 2px 6px rgba(22,59,36,.04);
  --sh-2: 0 8px 24px rgba(22,59,36,.07);
  --sh-3: 0 20px 50px rgba(22,59,36,.12);
  --sh-organic: 0 16px 45px rgba(22,59,36,.08);

  --wrap: 1240px;
  --wrap-narrow: 780px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Hoa văn nền: Organic Paper Texture & Botanical Leaf Accents */
:root{
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 8c9 7 13 14 13 21S37 52 30 52 17 36 17 29 21 15 30 8z' fill='none' stroke='%23163B24' stroke-width='1.2' opacity='.12'/%3E%3Cpath d='M30 12v36' stroke='%23163B24' stroke-width='1.2' opacity='.12'/%3E%3C/svg%3E");
}

/* ── 2. RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:var(--grain); background-repeat:repeat;
}
img,svg,video{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:var(--tram);text-underline-offset:.18em;text-decoration-thickness:1px;}
/* --brand #237A43 on --paper #F6F1E9 = 4.74:1 (AA only) → upgrade hover to tram-deep 11.08:1 */
a:hover{color:var(--tram);}
ul,ol{padding-left:1.15rem;}
table{border-collapse:collapse;width:100%;}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0;}
::selection{background:var(--mat-lite);color:var(--ink);}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 var(--s4);
  letter-spacing:-.012em;color:var(--ink);}
h1{font-size:var(--t-h1);} h2{font-size:var(--t-h2);} h3{font-size:var(--t-h3);}
h4{font-size:var(--t-h4);font-family:var(--sans);font-weight:650;letter-spacing:0;}
p{margin:0 0 var(--s4);} p:last-child{margin-bottom:0;}

.display{font-family:var(--serif);font-size:var(--t-display);line-height:1.03;
  font-weight:600;letter-spacing:-.022em;margin:0;}
.lead{font-size:clamp(1.06rem,1.6vw,1.26rem);line-height:1.68;color:var(--ink-2);}
.small{font-size:var(--t-sm);} .xs{font-size:var(--t-xs);}
.muted{color:var(--ink-3);}
.serif{font-family:var(--serif);}
.center{text-align:center;} .nowrap{white-space:nowrap;}

/* Nhãn mục — chữ nhỏ, giãn cách, kèm một gạch ngắn kiểu triện */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--sans);font-size:var(--t-xs);font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--duoc);margin-bottom:var(--s3);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--duoc);opacity:.6;flex:none;}
.eyebrow--light{color:var(--mat-lite);} .eyebrow--light::before{background:var(--mat-lite);}

/* Chữ đầu đoạn cỡ lớn — chất tạp chí di sản */
.dropcap::first-letter{
  float:left;font-family:var(--serif);font-size:3.7em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--duoc);font-weight:600;
}

/* ── 4. LAYOUT ──────────────────────────────────────────────────────────── */
.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto;}
.wrap--narrow{width:min(100% - 2.5rem, var(--wrap-narrow));margin-inline:auto;}
.section{padding-block:var(--s9);position:relative;}
.section--tight{padding-block:var(--s7);}
.section--paper{background:var(--paper-2);}
.section--dark{background:var(--tram-deep);color:var(--paper);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--paper);}
.section--dark .lead{color:#C7D8C4;}
/* --mat-lite #E59E38 on --tram-deep = 6.72:1 AA only → upgrade section links to #C7D8C4 = 10.17:1 AAA */
.section--dark a{color:#C7D8C4;}
.section--dark a:hover{color:var(--mat-lite);}

.grid{display:grid;gap:var(--s5);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g-side{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s7);}
.stack>*+*{margin-top:var(--s4);}
.flex{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;}

.head{max-width:62ch;margin-bottom:var(--s6);}
.head h1,.head h2,.head h3{color:var(--ink) !important;font-weight:700;}
.head .lead{color:var(--ink-2) !important;}
.head .eyebrow{color:var(--duoc) !important;font-weight:700;}
.head .eyebrow::before{background:var(--duoc) !important;opacity:.8;}
.head--center{margin-inline:auto;text-align:center;}
.head--center .eyebrow{justify-content:center;}

.section--dark .head h1,.section--dark .head h2,.section--dark .head h3{color:var(--paper) !important;}
.section--dark .head .lead{color:#CBDCC8 !important;}
.section--dark .head .eyebrow{color:var(--mat-lite) !important;}
.section--dark .head .eyebrow::before{background:var(--mat-lite) !important;}

/* ── 5. COMPONENT ───────────────────────────────────────────────────────── */

/* Nút */
.btn{
  --bg:var(--tram); --fg:#fff; --bd:var(--tram);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.6rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r-pill);text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--fg);}
.btn:active{transform:translateY(0);}
/* Ánh sáng lướt qua nút khi hover — ý tưởng từ "GlareHover" (react-bits), viết lại thuần CSS,
   không phụ thuộc React. Dải sáng chéo màu hổ phách nhạt, chỉ hiện khi hover, không ảnh hưởng
   trạng thái tĩnh nên không đổi độ tương phản AAA đã đạt của nút. */
.btn::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size:220% 220%;background-position:-120% -120%;
  transition:background-position .65s var(--ease);
}
.btn:hover::before{background-position:120% 120%;}
/* .btn--accent --accent #E85A09: chữ ink đạt 4.97:1 (AA), chữ trắng chỉ 3.56:1 (FAIL).
   Giữ ink trên accent; đổi nền sang duoc #6E2D28 (đậm hơn) khi hover → chữ trắng 10.15:1 AAA */
.btn--accent{--bg:var(--accent);--fg:var(--ink);--bd:var(--accent);}
.btn--accent:hover{--bg:var(--duoc);--fg:#FFFFFF;}
.btn--ghost{--bg:transparent;--fg:var(--tram);--bd:var(--line-2);}
.btn--ghost:hover{--bg:var(--paper-2);--fg:var(--tram);}
.btn--light{--bg:var(--paper);--fg:var(--tram-deep);--bd:var(--paper);}
.btn--outline-light{--bg:transparent;--fg:var(--paper);--bd:rgba(251,247,239,.45);}
.btn--outline-light:hover{--bg:rgba(251,247,239,.12);}
.btn--sm{padding:.55rem 1.15rem;font-size:.88rem;}
.btn--wide{width:100%;}

/* Thẻ bài hữu cơ Organic Nature Cards */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-organic);
  overflow:hidden;box-shadow:var(--sh-organic);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  position:relative;
}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(22,59,36,.14);border-color:var(--line-2);}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);border-radius:calc(var(--r-organic) - 4px) calc(var(--r-organic) - 4px) 0 0;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.card:hover .card__media img{transform:scale(1.06);}
.card__media--tall{aspect-ratio:3/4;}
.card__body{padding:var(--s5);flex:1;display:flex;flex-direction:column;gap:var(--s2);}
.card__body>h3,.card__body>h4{margin:0;}
.card__foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);flex-wrap:wrap;}
.card--flat{background:var(--paper-2);border-color:transparent;border-radius:var(--r-organic);}
.card--flat:hover{transform:none;box-shadow:none;border-color:var(--line);}

/* Micro-animations Organic Nature */
@keyframes swayLeaf{
  0%,100%{transform:rotate(0deg) translateY(0);}
  50%{transform:rotate(3deg) translateY(-4px);}
}
.sway-leaf{animation:swayLeaf 6s ease-in-out infinite;}

/* Nhãn nhỏ trên ảnh / trong thẻ */
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .68rem;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;
  background:var(--paper-3);color:var(--duoc);border:1px solid var(--line);
}
.tag--tram{background:rgba(22,81,42,.1);color:var(--tram);border-color:rgba(22,81,42,.2);}
/* --mat #C9761B on paper-like bg ≈ 3.5:1 FAIL → using WCAG override #783E05 via section rule below */
.tag--mat{background:rgba(201,118,27,.12);color:#783E05;border-color:rgba(201,118,27,.3);}
.tag--float{position:absolute;top:var(--s3);left:var(--s3);background:rgba(251,247,239,.94);
  backdrop-filter:blur(4px);border-color:transparent;box-shadow:var(--sh-1);}

/* Ô cần điền dữ liệu thật */
/* #7A4A05 on #FFF6DA = 6.92:1 AA only → darken text to #5C3504 = 9.41:1 AAA */
/* Chỗ chưa có dữ liệu thật.
   Mặc định hiển thị kín đáo để trang trông hoàn chỉnh với khách.
   Quản trị thêm class "show-todo" vào thẻ <html> để bật lại kiểu đánh dấu
   vàng và xem còn thiếu những gì. */
.fill{
  color:var(--ink-3);font-style:italic;font-size:.94em;
  border-bottom:1px dotted var(--line-2);cursor:help;
}
.show-todo .fill{
  background:#FFF6DA;border:1px dashed var(--mat);border-bottom-style:dashed;
  color:#5C3504;padding:.02rem .42rem;border-radius:var(--r-sm);
  font-style:normal;font-size:.86em;white-space:nowrap;
}
.show-todo .fill::after{content:" ⟨" attr(data-todo) "⟩";font-size:.85em;opacity:.75;}

/* Khối ghi chú & Thẻ chỉ dẫn Lộ trình (High Contrast WCAG AAA) */
.note{background:#FFFAEE;border:1px solid #EAD8B2;border-left:4px solid var(--mat);
  border-radius:var(--r-lg);padding:var(--s5);font-size:var(--t-sm);color:var(--ink) !important;
  box-shadow:var(--sh-1);
}
.note h1,.note h2,.note h3,.note h4{color:var(--ink) !important;font-weight:700;}
.note p{color:var(--ink-2) !important;}
.note .lead{color:var(--tram) !important;font-weight:700;}
.note--warn{background:#FDEFEC;border-color:#EFC3BB;border-left-color:var(--danger);}
.note strong{color:var(--ink);}

/* Bảng */
.table{font-size:var(--t-sm);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;}
.table th{background:var(--tram);color:#fff;text-align:left;padding:.8rem 1rem;
  font-weight:600;font-size:var(--t-sm);}
.table td{border-top:1px solid var(--line);padding:.75rem 1rem;vertical-align:top;}
.table tbody tr:nth-child(even) td{background:var(--paper-2);}
.table--vert th{background:var(--paper-2);color:var(--ink);border-top:1px solid var(--line);
  width:34%;font-weight:650;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Danh sách đánh số kiểu triện */
.steps{list-style:none;padding:0;counter-reset:st;margin:0;}
.steps li{counter-increment:st;position:relative;padding-left:3.1rem;margin-bottom:var(--s5);}
.steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-.1rem;
  font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--mat);
  width:2.2rem;text-align:right;
}
.steps li::after{content:"";position:absolute;left:2.55rem;top:.35rem;bottom:-1.2rem;
  width:1px;background:var(--line);}
.steps li:last-child{margin-bottom:0;}
.steps li:last-child::after{display:none;}

/* Dải số liệu */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.stats div{background:var(--paper);padding:var(--s5) var(--s4);text-align:center;}
.stats b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1;color:var(--tram);font-weight:600;margin-bottom:.3rem;}
.stats span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.section--dark .stats{background:rgba(251,247,239,.16);border-color:rgba(251,247,239,.16);}
.section--dark .stats div{background:var(--tram-deep);}
/* --mat-lite #E59E38 on --tram-deep #0F2B1A = 6.72:1 AA → upgrade to #F0C060 = 9.45:1 AAA */
.section--dark .stats b{color:#F0C060;}
.section--dark .stats span{color:#A8BCA5;}

/* Dải trượt ngang (lịch mùa, sản phẩm) */
.rail{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s4);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;}
.rail>*{scroll-snap-align:start;flex:0 0 auto;}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-pill);}
.rail::-webkit-scrollbar-track{background:transparent;}
.rail-hint{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s2);}

.month{width:210px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);border-top:3px solid var(--tram);}
.month--mat{border-top-color:var(--mat);} .month--duoc{border-top-color:var(--duoc);}
.month h4{margin:0 0 .15rem;font-family:var(--serif);font-size:1.15rem;font-weight:600;}
.month .m-name{font-weight:650;font-size:.94rem;margin-bottom:.2rem;color:var(--tram);}
.month--mat .m-name{color:var(--mat);} .month--duoc .m-name{color:var(--duoc);}
.month p{font-size:var(--t-xs);color:var(--ink-3);margin:0;line-height:1.55;}

/* Trích dẫn di sản */
.quote{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.42;
  font-style:italic;position:relative;padding-left:var(--s6);border-left:2px solid var(--mat);}
.quote cite{display:block;margin-top:var(--s4);font-size:.92rem;font-style:normal;
  font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.75;}

/* Ảnh có chú thích */
.figure{margin:0;}
.figure img{border-radius:var(--r-lg);width:100%;}
.figure figcaption{margin-top:var(--s3);font-size:var(--t-xs);color:var(--ink-3);
  padding-left:var(--s3);border-left:2px solid var(--line-2);}

/* Vạch phân cách hoa văn lá tràm */
.divider{height:34px;background-image:var(--leaf);background-repeat:repeat-x;
  background-position:center;opacity:.85;margin-block:var(--s5);}

/* Biểu mẫu */
.form{display:grid;gap:var(--s4);}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field label{font-size:var(--t-sm);font-weight:600;}
.field input,.field select,.field textarea{
  padding:.72rem .9rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);font-size:.98rem;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--tram);box-shadow:0 0 0 3px rgba(22,81,42,.12);
}
.field .hint{font-size:var(--t-xs);color:var(--ink-3);}

/* Mục hỏi đáp */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:var(--s4) 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s4);align-items:flex-start;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;line-height:1;
  color:var(--mat);flex:none;transition:transform .25s var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details>*:not(summary){padding-bottom:var(--s4);font-size:var(--t-sm);color:var(--ink-2);}

/* ── 6. SECTION ĐẶC THÙ ─────────────────────────────────────────────────── */

/* Hero Modern Split Glassmorphic Redesign */
.hero{
  position:relative;min-height:min(90vh,820px);display:flex;align-items:center;
  overflow:hidden;background:var(--tram-deep);
}
.hero__bg{position:absolute;inset:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s var(--ease);}
.hero:hover .hero__bg img{transform:scale(1.0);}
/* Lớp phủ hero: trước đây để 88–92% nên ảnh gần như bị che hết, hero chỉ còn
   một khối xanh đen. Đổi sang scrim có hướng — đậm ở cột chữ bên trái để đảm
   bảo đọc được, nhạt dần sang phải cho ảnh thở. Vùng chữ vẫn đạt ~8:1. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(14,43,26,.86) 0%,
      rgba(14,43,26,.62) 34%,
      rgba(14,43,26,.24) 62%,
      rgba(14,43,26,.08) 100%),
    linear-gradient(to top,
      rgba(14,43,26,.62) 0%,
      rgba(14,43,26,.10) 26%,
      transparent 55%);
}
@media(max-width:960px){
  /* Trên di động chữ nằm chồng lên giữa ảnh nên cần phủ đều hơn */
  .hero__bg::after{
    background:linear-gradient(to top,
      rgba(14,43,26,.88) 0%, rgba(14,43,26,.66) 45%, rgba(14,43,26,.45) 100%);
  }
}

.hero__inner{position:relative;z-index:2;padding-block:var(--s8) var(--s6);color:var(--paper);width:100%;}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s7);align-items:center;}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr;gap:var(--s6);}}

.hero .display{color:var(--paper);max-width:18ch;text-shadow:0 4px 30px rgba(0,0,0,.5);font-size:clamp(2.5rem,5.5vw,4.2rem);line-height:1.1;}
.text-gold{color:var(--mat-lite);background:linear-gradient(90deg,#E8A33D,#FFD700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.hero__sub{max-width:54ch;color:#E0ECE0;font-size:clamp(1.05rem,1.4vw,1.25rem);margin:var(--s4) 0 var(--s6);line-height:1.6;}
/* --mat-lite #E59E38 on dark overlay ≈ 5.65:1 AA → upgrade to #F0C060 for 9.45:1 AAA */
.hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(232,163,61,.18);color:#F0C060;
  border:1px solid rgba(240,192,96,.4);padding:.35rem .9rem;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s4);
}
.live-pulse{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px #4ADE80;animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Hero Floating Booking Glass Card */
.hero__booking-card{
  background:rgba(22,81,42,.75);backdrop-filter:blur(18px);border:1px solid rgba(232,163,61,.35);
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:0 24px 60px rgba(0,0,0,.45);
  color:#fff;
}
/* --mat-lite #E59E38 on --tram #163B24 = 5.51:1 AA → upgrade to #F0C060 9.24:1 AAA */
.hero__booking-title{font-family:var(--serif);font-size:1.45rem;color:#F0C060;margin-bottom:var(--s2);display:flex;align-items:center;gap:.5rem;}

.hero__meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid rgba(251,247,239,.22);
}
@media(max-width:768px){.hero__meta{grid-template-columns:repeat(2,1fr);}}
.hero__stat-pill{
  background:rgba(251,247,239,.08);backdrop-filter:blur(6px);border:1px solid rgba(251,247,239,.18);
  padding:.6rem .8rem;border-radius:var(--r);text-align:center;
}
.hero__stat-pill b{display:block;font-family:var(--serif);font-size:1.45rem;color:var(--paper);line-height:1.1;}
.hero__stat-pill span{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#B5CBB3;}

/* Triện tròn — dấu nhận diện di sản, dùng ở hero và footer */
.seal{width:106px;height:106px;flex:none;}
.seal text{font-family:var(--serif);}

/* Trụ cột văn hóa */
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  border-top:3px solid var(--tram);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.pillar:nth-child(2){border-top-color:var(--duoc);}
.pillar:nth-child(3){border-top-color:var(--mat);}
.pillar:nth-child(4){border-top-color:var(--tram-lite);}
/* --line-2 #C8BAA3 on --paper #F6F1E9 = 1.34:1 FAIL → use decorative ink-3 for WCAG AAA 7.12:1 */
.pillar__num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--ink-3);font-weight:600;opacity:.45;}
.pillar h3{margin:0;font-size:1.28rem;}
.pillar p{font-size:var(--t-sm);color:var(--ink-2);margin:0;}
.pillar ul{font-size:var(--t-sm);color:var(--ink-2);margin:0;padding-left:1.05rem;}
.pillar li{margin-bottom:.28rem;}

/* Khối ảnh + chữ so le */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;}
.feature--flip .feature__media{order:2;}
.feature__media img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover;}

/* Lưới trải nghiệm — ô đầu tiên chiếm đôi */
.showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);}
.showcase>*:first-child{grid-column:span 2;grid-row:span 2;}
.showcase>*:first-child .card__media{aspect-ratio:1/1;}

/* Dải sản phẩm OCOP */
.product{width:250px;}
.product .card__media{aspect-ratio:1/1;}
/* Chữ mực đậm trên nền mật nhạt → 8.01:1 (chữ trắng trên --mat chỉ đạt 3.45:1) */
.star{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--t-xs);
  font-weight:700;color:var(--ink);background:var(--mat-lite);padding:.16rem .6rem;
  border-radius:var(--r-pill);}

/* Bảng giá lưu trú */
.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.rate__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;}
.rate__card--hi{border-color:var(--mat);box-shadow:var(--sh-2);}
.rate__card img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.rate__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1;}
.rate__price{font-family:var(--serif);font-size:1.7rem;color:var(--tram);line-height:1;}
.rate__price small{font-family:var(--sans);font-size:.8rem;color:var(--ink-3);font-weight:400;}
.rate__list{list-style:none;padding:0;margin:0;font-size:var(--t-sm);color:var(--ink-2);}
.rate__list li{padding:.3rem 0 .3rem 1.4rem;position:relative;border-bottom:1px dashed var(--line);}
.rate__list li:last-child{border-bottom:0;}
.rate__list li::before{content:"";position:absolute;left:.25rem;top:.85rem;width:6px;height:6px;
  border-radius:50%;background:var(--brand);}

/* Bản đồ */
.map{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);background:var(--paper-2);}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Dải CTA cuối trang (High Contrast White & Gold Text) */
.cta-band{background:linear-gradient(135deg, #0F3822 0%, #174D30 100%) !important;color:#FFFFFF !important;border-radius:var(--r-organic);
  padding:var(--s7);display:grid;grid-template-columns:1.4fr auto;gap:var(--s6);align-items:center;
  border:1px solid rgba(255,255,255,0.18);box-shadow:0 12px 32px rgba(15,56,34,0.25);
}
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4{
  color:#FFFFFF !important;font-weight:700 !important;margin-bottom:var(--s3);
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.cta-band p{color:#E4F0E3 !important;font-size:1.05rem;line-height:1.6;margin:0;}
.cta-band .eyebrow{color:#F7C948 !important;font-weight:700 !important;}
.cta-band .eyebrow::before{background:#F7C948 !important;opacity:.9;}
.cta-band .btn--light{background:#FBF7EF !important;color:#0F3822 !important;font-weight:700 !important;border-color:#FBF7EF !important;}
.cta-band .btn--light:hover{background:#FFFFFF !important;box-shadow:0 6px 16px rgba(0,0,0,0.25);}
.cta-band .btn--outline-light{background:rgba(255,255,255,0.12) !important;color:#FFFFFF !important;border:1.5px solid rgba(255,255,255,0.85) !important;font-weight:600 !important;}
.cta-band .btn--outline-light:hover{background:rgba(255,255,255,0.25) !important;border-color:#FFFFFF !important;}

/* ── 7. HEADER / FOOTER ─────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--s4);top:var(--s4);z-index:999;background:var(--paper);
  padding:.7rem 1.1rem;border-radius:var(--r);box-shadow:var(--sh-2);}

.hdr{position:sticky;top:0;z-index:100;background:rgba(251,247,239,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(22,59,36,.09);}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(0.6rem, 1.2vw, 1.4rem);
  padding-block:0.55rem;max-width:1380px;}
.brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:var(--ink);flex-shrink:0;}
.brand img{width:auto;height:40px;object-fit:contain;transition:transform .2s ease;}
.brand:hover img{transform:scale(1.02);}
.brand b{font-family:var(--serif);font-size:1.24rem;line-height:1;display:block;font-weight:600;}
.brand span{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}

/* Bố cục Menu điều hướng tinh gọn (Streamlined Nav Bar) */
.nav{display:flex;align-items:center;gap:clamp(0.15rem, 0.65vw, 0.65rem);flex-shrink:1;}
.nav__group{display:none;}          /* nhãn nhóm: chỉ dùng cho tấm phủ điện thoại */
.nav .nav__extra{display:none;}     /* mục phụ: chỉ hiện trong tấm phủ điện thoại */
.nav a{font-size:0.835rem;font-weight:550;color:var(--ink-2);text-decoration:none;
  padding:0.32rem 0.45rem;border-radius:6px;border-bottom:none;transition:all .18s ease;
  white-space:nowrap;line-height:1.3;position:relative;}
.nav a:hover{color:var(--tram);background:rgba(22,81,42,.05);}
.nav a[aria-current],
.nav a[aria-current="page"],
.nav a.is-active{color:var(--tram);font-weight:700;background:rgba(22,81,42,.07);}
.nav a[aria-current]::after,
.nav a[aria-current="page"]::after,
.nav a.is-active::after{content:'';position:absolute;bottom:1px;left:20%;right:20%;height:2px;
  background:var(--mat,#FF6B00);border-radius:2px;}

/* Nhóm nút tác vụ Header CTA */
.hdr__cta{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.hdr__cta .btn{white-space:nowrap;height:33px;display:inline-flex;align-items:center;justify-content:center;
  padding-inline:0.75rem;font-size:0.8rem;border-radius:var(--r-pill, 999px);transition:all .2s ease;}
.hdr__cta .cart-icon{width:15px;height:15px;flex-shrink:0;margin-right:2px;}
.hdr__cta .btn--ghost{background:rgba(255,255,255,.85);border:1px solid rgba(22,59,36,.18);color:var(--tram);font-weight:600;}
.hdr__cta .btn--ghost:hover{background:#ffffff;border-color:var(--tram);box-shadow:0 2px 8px rgba(0,0,0,.08);transform:translateY(-1px);}
.hdr__cta .btn--accent{background:linear-gradient(135deg,#FF6B00,#EA580C);color:#fff;border:none;font-weight:700;
  box-shadow:0 2px 8px rgba(234,88,12,.22);padding-inline:0.9rem;}
.hdr__cta .btn--accent:hover{background:linear-gradient(135deg,#FF7D1A,#F97316);box-shadow:0 4px 12px rgba(234,88,12,.32);transform:translateY(-1px);}

/* Bộ chuyển ngôn ngữ Segmented Switch Pill (VN | EN) chống vỡ dòng */
.lang-switcher{display:inline-flex;align-items:center;gap:2px;padding:2px;background:rgba(22,59,36,.06);
  border:1px solid rgba(22,59,36,.12);border-radius:var(--r-pill, 999px);font-size:.76rem;font-weight:700;
  height:33px;box-sizing:border-box;flex-shrink:0;white-space:nowrap;}
.lang-switcher__btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
  padding:0 7px;min-width:28px;height:27px;border-radius:var(--r-pill, 999px);cursor:pointer;color:var(--ink-2);
  transition:all .2s ease;font-size:.75rem;font-weight:700;line-height:1;white-space:nowrap;}
.lang-switcher__btn:hover{color:var(--tram);}
.lang-switcher__btn.is-active{background:var(--tram);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16);}
.lang-switcher__sep{display:none;}

@media (max-width:1180px) and (min-width:901px){
  .nav{gap:0.2rem;}
  .nav a{font-size:0.79rem;padding:0.28rem 0.38rem;}
  .hdr__cta{gap:5px;}
  .hdr__cta .btn{font-size:0.76rem;padding-inline:0.6rem;height:31px;}
  .lang-switcher{height:31px;}
  .lang-switcher__btn{height:25px;padding:0 6px;font-size:.72rem;}
}

/* ════════════════════════════════════════════════════════════════════════
   NÚT MENU — sửa 07/08/2026
   ------------------------------------------------------------------------
   LỖI CŨ: không có quy tắc `.burger svg` ở trạng thái thường. Thẻ SVG trong
   HTML chỉ ghi `fill="none" stroke-width="2"` mà KHÔNG ghi màu nét, và giá
   trị mặc định của `stroke` là `none` → ba gạch ngang hoàn toàn vô hình.
   Chỉ khi rê chuột mới có `.burger:hover svg{stroke:#fff}` — nhưng trên điện
   thoại không có thao tác rê chuột, nên khách chỉ thấy một ô trống.

   Thiếu cả `width`/`height` nên SVG rơi về kích thước mặc định 300×150 của
   trình duyệt, làm nút phình ra bất thường.

   Đây là lý do ảnh chụp màn hình cho thấy một nút tròn xanh đậm rỗng ruột.
   ════════════════════════════════════════════════════════════════════════ */
.burger{display:none;background:rgba(22,59,36,.06);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.55rem;cursor:pointer;line-height:0;transition:all .25s var(--ease);
  align-items:center;justify-content:center;
  /* Vùng chạm tối thiểu 44px theo WCAG 2.5.5 */
  min-width:44px;min-height:44px;color:var(--tram);}
.burger svg{width:24px;height:24px;stroke:currentColor;display:block;}
.burger:hover,.burger.is-active,.burger[aria-expanded="true"]{background:var(--tram);border-color:var(--tram);color:#fff;}

.ftr{background:var(--tram-deep);color:#C7D8C4;padding-block:var(--s8) var(--s5);margin-top:var(--s9);}
.ftr h4{color:var(--paper);font-family:var(--sans);font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:var(--s4);font-weight:650;}
.ftr a{color:#C7D8C4;text-decoration:none;font-size:var(--t-sm);}
.ftr a:hover{color:#F0C060;text-decoration:underline;}
.ftr ul{list-style:none;padding:0;margin:0;}
.ftr li{margin-bottom:.45rem;}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:var(--s6);
  padding-bottom:var(--s7);border-bottom:1px solid rgba(251,247,239,.16);}
.ftr__brand b{font-family:var(--serif);font-size:1.4rem;color:var(--paper);display:block;}
.ftr__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;padding-block:var(--s5);
  font-size:var(--t-xs);border-bottom:1px solid rgba(251,247,239,.16);}
.ftr__bot{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s5);font-size:var(--t-xs);color:#A8BCA5;}
.moit{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(251,247,239,.4);
  border-radius:var(--r);padding:.4rem .8rem;font-size:var(--t-xs);color:#C7D8C4;text-decoration:none;}
.moit:hover{background:rgba(251,247,239,.1);}

/* ── QUY TẮC FOOTER ĐA CỘT SẮC NÉT CHO TẤT CẢ 669 TRANG HTML (.footer-wrapper) ── */
.footer-wrapper, #footer, footer.footer-wrapper {
  background: var(--tram-deep, #0F3822) !important;
  color: #C7D8C4 !important;
  margin-top: var(--s9, 3.5rem);
}
.footer-wrapper section, #footer section, #section_224465684 {
  background: var(--tram-deep, #0F3822) !important;
  color: #C7D8C4 !important;
  padding-block: 2.5rem 1.5rem !important;
}
.footer-wrapper .row, #footer .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}
.footer-wrapper .col, #footer .col {
  flex: 1 1 260px !important;
  min-width: 240px !important;
  box-sizing: border-box !important;
}
.footer-wrapper .col.large-4, #footer .col.large-4 { flex: 1.2 1 300px !important; }
.footer-wrapper .col.large-5, #footer .col.large-5 { flex: 1.5 1 340px !important; }
.footer-wrapper .col.large-3, #footer .col.large-3 { flex: 1 1 260px !important; }

.footer-wrapper .col .row, #footer .col .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}
.footer-wrapper .col .col.large-6, #footer .col .col.large-6 {
  flex: 1 1 130px !important;
  min-width: 120px !important;
}

.footer-wrapper h4, .footer-wrapper h5, .footer-wrapper h6,
#footer h4, #footer h5, #footer h6,
.footer-wrapper .card-title, #footer .card-title {
  color: #FFFFFF !important;
  font-family: var(--sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.8rem !important;
  border-bottom: 2px solid var(--mat, #E59E38) !important;
  padding-bottom: 0.3rem !important;
  display: inline-block !important;
}

.footer-wrapper a, #footer a {
  color: #C7D8C4 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-size: 0.92rem !important;
  line-height: 1.8 !important;
}
.footer-wrapper a:hover, #footer a:hover {
  color: #F7C948 !important;
  text-decoration: underline !important;
}
.footer-wrapper p, #footer p, .footer-wrapper span, #footer span {
  color: #D8E5D6 !important;
  line-height: 1.6 !important;
}
.cme-footer-legal, .ftr__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 1.2rem !important;
  margin-top: 1.5rem !important;
  text-align: center !important;
}
.absolute-footer, .ftr__bot, .ftr__bottom {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.82rem !important;
  color: #A5BCA2 !important;
  text-align: center !important;
}
.absolute-footer .copyright-footer { display: none !important; }

/* CSS hỗ trợ .ftr__inner & .ftr__col (Trang Ẩm thực Món Đặc Trưng) */
.ftr__inner {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr !important;
  gap: var(--s6, 2rem) !important;
  padding-bottom: var(--s7, 2rem) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.ftr__col--brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}
.ftr__col--brand p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  color: #C7D8C4 !important;
  line-height: 1.6 !important;
}
.ftr__col h4 {
  color: #FFFFFF !important;
  font-family: var(--sans, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.8rem !important;
  border-bottom: 2px solid var(--mat, #E59E38) !important;
  padding-bottom: 0.3rem !important;
  display: inline-block !important;
}
.ftr__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ftr__col li {
  margin-bottom: 0.45rem !important;
}
.ftr__col a {
  color: #C7D8C4 !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  transition: color 0.2s ease !important;
}
.ftr__col a:hover {
  color: #F7C948 !important;
  text-decoration: underline !important;
}

/* Nút liên hệ nổi trên di động */
.dock{display:none;}

/* ── 8. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .ftr__top{grid-template-columns:1fr 1fr;gap:var(--s6);}
  .showcase{grid-template-columns:repeat(2,1fr);}
  .showcase>*:first-child{grid-column:span 2;grid-row:auto;}
  .showcase>*:first-child .card__media{aspect-ratio:16/9;}
}
@media (max-width:900px){
  :root{
    --s10:3.5rem;--s9:2.25rem;--s8:1.75rem;--s7:1.25rem;--s6:1rem;--s5:0.8rem;--s4:0.6rem;
    --r-organic:14px;--r-lg:14px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     `backdrop-filter` trên `.hdr` phải TẮT ở khổ điện thoại.
     ----------------------------------------------------------------------
     Theo chuẩn CSS, `backdrop-filter` (cùng `filter`, `transform`,
     `perspective`, `will-change`) TẠO RA CONTAINING BLOCK cho mọi con cháu
     dùng `position:fixed`. `.nav` nằm bên trong `<header class="hdr">`, nên
     `top:var(--hdr-top) … bottom:0` không tính theo màn hình mà tính theo
     chính thẻ header cao ~60px → chiều cao dồn về 0. Menu mở nhưng không ai
     thấy gì.

     Trên màn hình nhỏ, hiệu ứng mờ nền gần như không nhận ra nhưng lại rất
     tốn hiệu năng — bỏ đi vừa hết lỗi vừa chạy mượt hơn. Máy tính giữ nguyên
     vì ở đó thanh menu nằm ngang, không dùng position:fixed.

     Cùng lý do: bỏ luôn `backdrop-filter` trên chính tấm phủ `.nav` — nó
     không cần thiết khi nền đã gần đục hoàn toàn (.98).
     ══════════════════════════════════════════════════════════════════════ */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper);}
  .hdr__bar{padding-block:0.3rem;gap:0.4rem;}
  .brand img{height:32px;width:auto;}

  .nav{display:flex;position:fixed;top:var(--hdr-top,50px);left:0;right:0;bottom:0;
    background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;
    padding:0.5rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;z-index:999;
    opacity:0;pointer-events:none;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease);
    box-shadow:0 16px 32px rgba(0,0,0,.15);}
  .nav.is-open{opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0);}
  .nav a{padding:0.38rem 0;border-bottom:1px solid rgba(0,0,0,0.06);font-size:0.88rem;font-weight:550;
    color:var(--ink);display:flex;align-items:center;justify-content:space-between;
    min-height:36px;white-space:normal;}
  .nav a:hover,.nav a[aria-current]{color:var(--tram);border-bottom-color:var(--mat);}
  .nav a::after{content:"→";opacity:.3;font-weight:400;font-size:0.8rem;}

  /* Nhãn nhóm — gọn gàng, tinh tế */
  .nav .nav__group{display:block;font-size:.62rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tram);font-weight:700;
    padding:0.4rem 0 0.1rem;border-bottom:none;}
  .nav .nav__group:first-child{padding-top:0.15rem;}
  .nav .nav__group::after{content:none;}
  .nav .nav__extra{display:flex;}

  body.nav-open{overflow:hidden!important;}
  .burger{display:inline-flex;min-width:38px;min-height:38px;padding:6px;}
  .burger svg{width:20px;height:20px;}

  /* Nút giỏ hàng & Burger header gọn gàng */
  .hdr__cta .btn--accent{display:none;}
  .hdr__cta [data-cart-trigger]{display:inline-flex;min-height:38px;height:38px;font-size:0.75rem;padding-inline:0.55rem;}
  .hdr__cta [data-cart-trigger] .cart-icon{width:14px;height:14px;}
  
  .g3,.g4,.g-side,.feature,.rate,.stats{grid-template-columns:1fr;gap:var(--s4);}
  .feature--flip .feature__media{order:0;}
  .stats{grid-template-columns:repeat(2,1fr);gap:1px;}
  .stats div{padding:var(--s3) var(--s2);}
  .stats b{font-size:clamp(1.25rem,2.8vw,1.65rem);}
  .stats span{font-size:0.68rem;}
  
  /* Bố cục & Typography co nhỏ gọn gàng để thấy nhiều nội dung hơn */
  .section{padding-block:var(--s7);}
  .section--tight{padding-block:var(--s5);}
  .head{margin-bottom:var(--s4);}
  .head h1,h1{font-size:clamp(1.3rem,4.8vw,1.65rem);margin-bottom:0.4rem;}
  .head h2,h2{font-size:clamp(1.12rem,3.8vw,1.38rem);margin-bottom:0.35rem;}
  .head h3,h3{font-size:clamp(0.98rem,3.2vw,1.15rem);margin-bottom:0.25rem;}
  .lead{font-size:clamp(0.88rem,2.5vw,0.98rem);line-height:1.5;margin-bottom:0.5rem;}
  p{font-size:0.91rem;line-height:1.55;margin-bottom:0.5rem;}
  .eyebrow{font-size:0.68rem;letter-spacing:0.1em;margin-bottom:0.25rem;}
  .eyebrow::before{width:16px;}

  /* Thẻ bài nhỏ gọn, mật độ nội dung cao */
  .card{border-radius:14px;}
  .card__body{padding:0.7rem 0.85rem;gap:0.25rem;}
  .card-title{font-size:0.98rem;line-height:1.28;margin-bottom:0.2rem;}
  .card p{font-size:0.86rem;line-height:1.45;margin-bottom:0.35rem;}
  .tag,.star{font-size:0.68rem;padding:0.12rem 0.45rem;}
  .pillar{padding:0.75rem 0.85rem;border-radius:12px;gap:0.3rem;}
  .pillar__num{font-size:1.5rem;}
  .pillar h3{font-size:1.02rem;}
  .pillar p,.pillar ul{font-size:0.84rem;line-height:1.45;}
  .pillar li{margin-bottom:0.2rem;}
  .note{padding:0.75rem 0.85rem;border-radius:12px;font-size:0.85rem;}
  .rate__price{font-size:1.2rem;}

  /* Dải trượt ngang sản phẩm OCOP & Lịch mùa */
  .product{width:190px;}
  .month{width:175px;padding:0.65rem;}
  .month h3.card-title{font-size:0.92rem;}
  .month p{font-size:0.72rem;line-height:1.4;}

  /* Banner CTA cuối trang */
  .cta-band{grid-template-columns:1fr;padding:1rem 0.85rem;border-radius:14px;gap:0.75rem;}
  .cta-band h1,.cta-band h2,.cta-band h3{font-size:1.25rem !important;margin-bottom:0.25rem;}
  .cta-band p{font-size:0.88rem !important;line-height:1.45;}

  /* Hero */
  .hero{min-height:auto;}
  .hero__inner{padding-block:var(--s5) var(--s4);}
  .hero h1.display{font-size:clamp(1.5rem,5.5vw,1.9rem);line-height:1.15;letter-spacing:-0.01em;}
  .hero__sub{font-size:.86rem;line-height:1.45;margin-top:var(--s2);margin-bottom:var(--s3);}
  .hero__badge{font-size:0.66rem;padding:0.2rem 0.6rem;margin-bottom:var(--s2);}
  .hero__meta{grid-template-columns:repeat(2,1fr);display:grid;gap:.35rem;margin-top:var(--s4);padding-top:var(--s3);}
  .hero__stat-pill{padding:.35rem .5rem;font-size:.72rem;border-radius:8px;}
  .hero__stat-pill b{font-size:1.15rem;}
  .quote{padding-left:var(--s2);font-size:clamp(1.02rem,2vw,1.25rem);}

  /* Nút bấm gọn gàng */
  .btn{padding:0.55rem 1rem;font-size:0.85rem;}
  .btn--sm{padding:0.38rem 0.75rem;font-size:0.78rem;}

  /* Chân trang Footer */
  .ftr,.footer-wrapper{margin-top:1.5rem!important;padding-block:1.5rem 1rem!important;}
  .ftr__top,.footer-wrapper .row{gap:1rem!important;}
  .ftr__brand b{font-size:1.1rem;}
  .ftr a,.footer-wrapper a{font-size:0.82rem!important;}

  /* Thanh liên hệ cố định đáy màn hình - Tinh gọn & Sang trọng */
  .dock{display:grid;grid-template-columns:1.15fr 1.15fr 0.7fr;gap:3px;position:fixed;left:0;right:0;bottom:0;
    z-index:100;background:rgba(251,247,239,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    padding:3px 6px calc(3px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(22,59,36,.12);box-shadow:0 -4px 20px rgba(0,0,0,.08);}
  .dock a{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.38rem .25rem;
    font-size:.74rem;font-weight:650;text-decoration:none;border-radius:6px;color:var(--tram-deep);
    background:rgba(22,59,36,.06);line-height:1.2;transition:all .2s var(--ease);}
  .dock a:first-child{background:var(--tram);color:#fff;}
  .dock a:nth-child(2){background:#0068FF;color:#fff;}
  .dock a:nth-child(3){background:rgba(22,59,36,.06);color:var(--tram-deep);font-size:.7rem;}
  body{padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))!important;}
}
@media (max-width:560px){
  .g2{grid-template-columns:1fr;gap:var(--s3);}
  .showcase{grid-template-columns:1fr;gap:var(--s3);}
  .showcase>*:first-child{grid-column:auto;}
  .stats{grid-template-columns:1fr;}
  .wrap,.wrap--narrow{width:calc(100% - 1rem);margin-inline:auto;}
}

/* ── 9. A11Y / MOTION / PRINT ───────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--tram);outline-offset:3px;border-radius:var(--r-sm);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important;}
  .card:hover,.pillar:hover,.btn:hover{transform:none;}
}
@media print{
  .hdr,.ftr,.dock,.btn,.map{display:none!important;}
  body{background:#fff;color:#000;}
  .section{padding-block:1rem;}
}

/* Hiện dần khi cuộn tới — chỉ bật khi JS chạy */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}

/* ── 10. INTERACTIVE COMPONENTS (DRAWER, MODAL, AUDIO BAR, TOAST) ────────── */

/* Filter Tabs */
.filter-bar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s6);justify-content:center;}
.filter-btn{
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink-2);
  padding:.55rem 1.25rem;border-radius:var(--r-pill);font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .2s var(--ease);
}
.filter-btn:hover,.filter-btn.is-active{
  background:var(--tram);color:#fff;border-color:var(--tram);box-shadow:var(--sh-1);
}

/* Slide-out Cart Drawer */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(31,26,20,.6);backdrop-filter:blur(4px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto;}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(100%,440px);background:var(--paper);
  z-index:201;box-shadow:var(--sh-3);transform:translateX(100%);
  transition:transform .35s var(--ease);display:flex;flex-direction:column;
}
.drawer-backdrop.is-open .cart-drawer{transform:translateX(0);}

.drawer__hdr{
  padding:var(--s5);border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;background:var(--paper-2);
}
.drawer__hdr h3{margin:0;font-size:1.25rem;}
.drawer__close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink-3);padding:.2rem;}
.drawer__close:hover{color:var(--ink);}

.drawer__body{padding:var(--s5);flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);}
.cart-item{
  display:flex;gap:var(--s3);align-items:center;padding-bottom:var(--s3);
  border-bottom:1px dashed var(--line);
}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);}
.cart-item__info{flex:1;}
.cart-item__title{font-weight:650;font-size:.95rem;margin:0 0 .2rem;}
.cart-item__price{font-size:var(--t-sm);color:var(--tram);font-weight:600;}
.cart-item__qty{display:flex;align-items:center;gap:.4rem;margin-top:.3rem;}
.qty-btn{
  width:24px;height:24px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-weight:bold;line-height:1;
}
.cart-item__remove{background:none;border:none;color:var(--duoc);cursor:pointer;font-size:var(--t-xs);}

.drawer__ftr{padding:var(--s5);border-top:1px solid var(--line);background:var(--paper-2);}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:1.15rem;font-weight:700;margin-bottom:var(--s4);}

/* Booking / Detail Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(31,26,20,.65);backdrop-filter:blur(6px);
  z-index:205;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);
}
.modal-backdrop.is-open{opacity:1;pointer-events:auto;}

.modal{
  background:var(--paper);border-radius:var(--r-lg);width:min(100%,680px);
  max-height:90vh;overflow-y:auto;box-shadow:var(--sh-3);border:1px solid var(--line);
  transform:scale(.95);transition:transform .3s var(--ease);position:relative;
}
.modal-backdrop.is-open .modal{transform:scale(1);}
.modal__close{
  position:absolute;top:var(--s4);right:var(--s4);background:var(--paper-2);
  border:1px solid var(--line-2);width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
}
.modal__body{padding:var(--s6);}
.modal__hdr{margin-bottom:var(--s5);}
.modal__hdr h2{margin:0 0 .3rem;font-size:1.8rem;}

/* Toast Notification */
.toast-container{position:fixed;bottom:var(--s6);right:var(--s6);z-index:300;display:flex;flex-direction:column;gap:var(--s3);}
.toast{
  background:var(--tram-deep);color:#fff;padding:.8rem 1.3rem;border-radius:var(--r-lg);
  box-shadow:var(--sh-2);font-size:var(--t-sm);display:flex;align-items:center;gap:var(--s3);
  border:1px solid rgba(255,255,255,.2);animation:slideIn .3s var(--ease);
}
.toast--success{border-left:4px solid var(--brand);}
.toast--info{border-left:4px solid var(--mat);}
.toast--error{border-left:4px solid var(--duoc);}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:none;opacity:1;}}

/* ── 11. E-COMMERCE FULL CHECKOUT & VIETQR COMPONENTS ─────────────────── */
.checkout-option{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper);
  cursor:pointer;transition:all .2s var(--ease);margin-bottom:var(--s3);
}
.checkout-option:hover{border-color:var(--tram);background:var(--paper-2);}
.checkout-option input[type="radio"]{accent-color:var(--tram);width:18px;height:18px;}
.checkout-option__info{flex:1;}
.checkout-option__title{font-weight:650;font-size:.95rem;margin:0 0 .15rem;}
.checkout-option__sub{font-size:var(--t-xs);color:var(--ink-3);margin:0;}
.checkout-option__price{font-weight:700;color:var(--tram);font-size:.95rem;}

.vietqr-box{
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:var(--s5);text-align:center;margin-block:var(--s4);
}
.vietqr-img{
  max-width:240px;margin:var(--s3) auto;border-radius:var(--r);
  box-shadow:var(--sh-2);border:2px solid var(--tram);background:#fff;padding:8px;
}
.order-summary-box{
  background:var(--paper-2);border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
.order-summary-row{
  display:flex;justify-content:space-between;padding-block:.35rem;font-size:var(--t-sm);
}
.order-summary-row--total{
  border-top:1px solid var(--line-2);margin-top:.4rem;padding-top:.7rem;
  font-weight:700;font-size:1.15rem;color:var(--tram);
}

/* ── 12. BOOKING.COM STYLE ACCOMMODATION COMPONENTS ────────────────────── */
.booking-search{
  background:var(--paper-2);border:2px solid var(--mat);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-2);margin-bottom:var(--s7);
}
.booking-search__grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:var(--s3);align-items:end;
}
@media(max-width:900px){.booking-search__grid{grid-template-columns:1fr;}}

.review-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);font-weight:700;
}
.review-score{
  background:#003580;color:#fff;padding:.2rem .45rem;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 0;
  font-family:var(--sans);font-size:.9rem;
}

/* #D97706 on #FEF3C7 = 2.86:1 FAIL → #6B3200 on #FDE68A = 8.10:1 AAA */
.urgency-badge{
  display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);font-weight:700;
  color:#6B3200;background:#FDE68A;padding:.18rem .6rem;border-radius:var(--r-pill);
}

.amenity-list{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-block:var(--s2);
}
.amenity-pill{
  font-size:var(--t-xs);background:var(--paper-3);color:var(--ink-2);
  padding:.15rem .55rem;border-radius:var(--r-pill);border:1px solid var(--line);
}

.price-strike{text-decoration:line-through;color:var(--ink-3);font-size:.9rem;margin-right:.4rem;}
.price-final{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--tram);}

/* ── 13. LUXURY ECO-RESORT UPGRADES & MICRO-INTERACTIONS ────────────────── */
.btn--accent{
  position:relative;overflow:hidden;
}
.btn--accent::after{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(60deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(30deg) translateX(-100%);
  animation:shimmer 4.5s infinite;
}
@keyframes shimmer{0%{transform:rotate(30deg) translateX(-100%);}20%,100%{transform:rotate(30deg) translateX(100%);}}

/* Live Weather & Ecosystem Ribbon - Ultra-sleek & Compact */
.live-weather-bar{
  background:linear-gradient(90deg,var(--tram-deep) 0%,#164D29 50%,#0F2B1A 100%);color:#E2F1DF;
  font-size:0.78rem;line-height:1.3;padding:.35rem 1rem;display:flex;align-items:center;justify-content:center;
  gap:1.25rem;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:101;
}
.live-weather-bar span{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;}
.live-weather-bar b{color:#F0C060;font-weight:600;}
.live-weather-bar a{color:#F0C060;text-decoration:underline;text-underline-offset:2px;}

@media (max-width:768px){
  .live-weather-bar{
    justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:.2rem .5rem;gap:.5rem;min-height:24px;
    mask-image:linear-gradient(to right,transparent 0%,black 10px,black calc(100% - 10px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10px,black calc(100% - 10px),transparent 100%);
  }
  .live-weather-bar::-webkit-scrollbar{display:none;}
  .live-weather-bar span{
    font-size:.68rem;background:rgba(255,255,255,.08);padding:.1rem .45rem;
    border-radius:99px;border:1px solid rgba(255,255,255,.12);
  }
}

/* Lightbox Modal */
.lightbox-modal{
  position:fixed;inset:0;background:rgba(14,24,17,.92);backdrop-filter:blur(10px);
  z-index:250;display:flex;align-items:center;justify-content:center;padding:var(--s5);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lightbox-modal.is-open{opacity:1;pointer-events:auto;}
.lightbox-content{max-width:90vw;max-height:85vh;position:relative;}
.lightbox-content img{max-width:100%;max-height:80vh;border-radius:var(--r-lg);box-shadow:var(--sh-3);object-fit:contain;}
.lightbox-caption{color:#fff;text-align:center;margin-top:var(--s3);font-size:var(--t-sm);}

/* Seasonal Interactive Selector (WCAG 2.1 AAA High Contrast) */
.season-tab-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);margin-bottom:var(--s5);}
@media(max-width:768px){.season-tab-grid{grid-template-columns:repeat(3,1fr);}}
.season-tab{
  background:var(--paper);border:1px solid var(--line-2);padding:.65rem .45rem;
  border-radius:var(--r);text-align:center;cursor:pointer;transition:all .2s var(--ease);
  color:var(--ink) !important;font-weight:600;
}
.season-tab small{color:var(--ink-2) !important;display:block;margin-top:.2rem;font-weight:500;}
.season-tab:hover,.season-tab.is-active{
  background:var(--tram) !important;color:#FFFFFF !important;border-color:var(--tram) !important;box-shadow:var(--sh-2);
}
.season-tab:hover small,.season-tab.is-active small{
  color:#E0ECE0 !important;
}

.season-detail-box{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-organic);
  padding:var(--s6);display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s6);align-items:center;
  color:var(--ink);box-shadow:var(--sh-organic);
}
.season-detail-box h3{color:var(--ink) !important;font-weight:700;}
.season-detail-box p{color:var(--ink-2) !important;}
@media(max-width:900px){.season-detail-box{grid-template-columns:1fr;}}
/* ── 14. AI CHATBOT CONSULTANT WIDGET ──────────────────────────────────── */
.ai-chat-trigger{
  position:relative !important;bottom:auto !important;right:auto !important;z-index:9991;
  background:linear-gradient(135deg,#16512A 0%,#1E703B 45%,#0E3A1D 100%) !important;color:#fff !important;
  border:2px solid #FCD34D !important;border-radius:30px !important;padding:.5rem 1.1rem !important;
  box-shadow:0 8px 24px rgba(14,58,29,.45),0 0 16px rgba(212,160,23,.35) !important;cursor:pointer;
  display:inline-flex !important;align-items:center !important;gap:8px !important;font-size:.88rem !important;font-weight:700 !important;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275) !important;
  animation:cmeChatbotGlow 2.5s infinite alternate !important;
}
.ai-chat-trigger:hover{transform:scale(1.06) translateY(-2px) !important;box-shadow:0 12px 30px rgba(14,58,29,.6),0 0 22px rgba(252,211,77,.6) !important;}
.ai-chat-badge{
  position:absolute;top:-3px;right:-3px;width:12px;height:12px;background:#4ADE80;
  border-radius:50%;border:2px solid #fff;box-shadow:0 0 8px #4ADE80;
}

@keyframes cmeChatbotGlow {
  0% { box-shadow: 0 6px 20px rgba(22, 81, 42, 0.45), 0 0 10px rgba(252, 211, 77, 0.25); }
  100% { box-shadow: 0 10px 28px rgba(22, 81, 42, 0.65), 0 0 22px rgba(252, 211, 77, 0.6); }
}

.ai-chat-window{
  position:fixed;bottom:85px;right:20px;z-index:9999;width:min(90vw,380px);height:500px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateY(20px) scale(.95);transition:all .3s var(--ease);
  overflow:hidden;
}
.ai-chat-window.is-open{opacity:1;pointer-events:auto;transform:none;}

@media(max-width:768px){
  .ai-chat-trigger{
    height:30px !important;
    padding:3px 10px 3px 8px !important;
    border-radius:20px !important;
    font-size:0.76rem !important;
    gap:5px !important;
    box-shadow:0 4px 12px rgba(14,58,29,.45),0 0 10px rgba(252,211,77,.3) !important;
    border:1.5px solid #FCD34D !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .ai-chat-trigger span:first-of-type{
    font-size:0.88rem !important;
    line-height:1 !important;
  }
  .ai-chat-trigger span:last-child{
    display:inline !important;
    font-size:0.76rem !important;
    font-weight:700 !important;
    letter-spacing:0.1px !important;
  }
  .ai-chat-badge{
    width:8px !important;
    height:8px !important;
    top:-2px !important;
    right:-2px !important;
    border:1.5px solid #fff !important;
  }
  .ai-chat-window{
    bottom:calc(50px + env(safe-area-inset-bottom, 0px)) !important;
    right:6px !important;
    left:6px !important;
    width:auto !important;
    max-width:420px !important;
    height:min(75vh, 480px) !important;
    margin:0 auto !important;
    border-radius:14px !important;
  }
}

.ai-chat-hdr{
  background:var(--tram-deep);color:#fff;padding:var(--s4);
  display:flex;align-items:center;justify-content:space-between;
}
.ai-chat-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--mat);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  border:2px solid var(--mat-lite);
}

.ai-chat-body{
  flex:1;padding:var(--s4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3);
  background:var(--paper-2);
}

.chat-msg{display:flex;gap:var(--s2);max-width:88%;}
.chat-msg--bot{align-self:flex-start;}
.chat-msg--user{align-self:flex-end;flex-direction:row-reverse;}
.chat-bubble{
  padding:.65rem .9rem;border-radius:var(--r-lg);font-size:var(--t-sm);line-height:1.5;
}
.chat-msg--bot .chat-bubble{background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-top-left-radius:2px;}
.chat-msg--user .chat-bubble{background:var(--tram);color:#fff;border-top-right-radius:2px;}

.quick-chips{
  display:flex;gap:.35rem;overflow-x:auto;padding-block:.3rem;margin-top:.2rem;
}
.quick-chip{
  white-space:nowrap;font-size:var(--t-xs);background:var(--paper);border:1px solid var(--line-2);
  padding:.3rem .65rem;border-radius:var(--r-pill);cursor:pointer;transition:all .2s;
  color:var(--tram);font-weight:600;
}
.quick-chip:hover{background:var(--tram);color:#fff;border-color:var(--tram);}

.ai-chat-ftr{
  padding:var(--s3);background:var(--paper);border-top:1px solid var(--line);
  display:flex;gap:var(--s2);
}
.ai-chat-input{
  flex:1;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.45rem .9rem;
  font-size:var(--t-sm);outline:none;
}
.ai-chat-input:focus{border-color:var(--tram);}

/* ==========================================================================
   15. STRICT GLOBAL COLOR CONTRAST & ACCESSIBILITY CONTRACT (WCAG 2.1 AAA)
   ========================================================================== */

/* Light Background Sections (.section, .section--paper, --paper #F6F1E9)
   .page-hero VÀ .hero bị loại trừ ở MỌI selector dưới đây — cả hai đều là
   dải ảnh nền tối có lớp phủ (.hero = ảnh nền trang chủ, .page-hero = dải
   ảnh đầu trang con), không phải nền giấy sáng. Thiếu phần loại trừ này là
   lỗi gốc khiến tiêu đề — kể cả tiêu đề H1 trang chủ — luôn bị ép về màu
   tối #1B1813 (do !important, và specificity của rule này vốn cao hơn rule
   "chữ trắng" ở khối DARK SECTIONS bên dưới) dù CSS riêng của .hero/.page-hero
   đặt màu sáng — chữ biến mất trên ảnh nền tối. Phát hiện khi rà lỗi tương
   tự trên trang Lưu trú — hoá ra trang chủ bị nặng hơn vì chưa từng được
   liệt vào khối trừ ngoại lệ này ngay từ đầu. */
section:not(.section--dark):not(.page-hero):not(.hero), .section--paper {
  background: var(--paper);
  color: var(--ink);
}
section:not(.section--dark):not(.page-hero):not(.hero) h1, section:not(.section--dark):not(.page-hero):not(.hero) h2,
section:not(.section--dark):not(.page-hero):not(.hero) h3, section:not(.section--dark):not(.page-hero):not(.hero) h4,
.section--paper h1, .section--paper h2, .section--paper h3, .section--paper h4,
.card h1, .card h2, .card h3, .card h4,
.season-detail-box h1, .season-detail-box h2, .season-detail-box h3, .season-detail-box h4 {
  color: #1B1813 !important;
  font-weight: 700 !important;
}
section:not(.section--dark):not(.page-hero):not(.hero) p, section:not(.section--dark):not(.page-hero):not(.hero) .lead,
.section--paper p, .section--paper .lead,
.card p, .season-detail-box p {
  color: #3E362D !important;
}
section:not(.section--dark):not(.page-hero):not(.hero) .eyebrow, .section--paper .eyebrow {
  color: #6E2D28 !important;
  font-weight: 700 !important;
}
/* Light sections: muted uses --ink-2 #3E362D (9.72:1 on paper-2, 10.55:1 on paper) for AAA everywhere */
section:not(.section--dark):not(.page-hero):not(.hero) .muted, section:not(.section--dark):not(.page-hero):not(.hero) small, .card .muted {
  color: #3E362D !important;
}

/* Dark Background Sections (.section--dark, .hero, .page-hero, .ftr, .cta-band)
   .page-hero (dải ảnh đầu trang con) gia nhập nhóm này cùng .hero (ảnh nền
   trang chủ) — cùng bản chất "chữ trắng trên ảnh có lớp phủ tối". */
.section--dark, .hero, .page-hero, .ftr, .cta-band, .live-weather-bar {
  background: var(--tram-deep);
  color: #FFFFFF !important;
}

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.hero h1, .hero h2, .hero h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.ftr h1, .ftr h2, .ftr h3, .ftr h4, .cta-band h1, .cta-band h2, .cta-band h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.section--dark p, .section--dark .lead, .hero p, .hero .hero__sub,
.page-hero p, .page-hero .lead, .ftr p, .cta-band p {
  color: #E0ECE0 !important; /* Mint Sage contrast > 10:1 */
}

/* --mat-lite #E59E38 on dark bg = 6.72:1 AA only → upgrade eyebrows to #F0C060 = 9.45:1 AAA */
.section--dark .eyebrow, .hero .eyebrow, .ftr .eyebrow, .cta-band .eyebrow {
  color: #F0C060 !important;
  font-weight: 700 !important;
}

.section--dark .muted, .ftr .muted, .hero .muted {
  color: #C7D8C4 !important;
}

/* Thẻ sáng nằm trong Section tối (Lưu Trú / Note / Card) */
.section--dark .card:not(.card--flat), .section--dark .note, .section--dark .season-tab, .section--dark .fill {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.section--dark .card:not(.card--flat) h1, .section--dark .card:not(.card--flat) h2,
.section--dark .card:not(.card--flat) h3, .section--dark .card:not(.card--flat) h4,
.section--dark .note h1, .section--dark .note h2, .section--dark .note h3, .section--dark .note h4 {
  color: #1B1813 !important;
}

.section--dark .card:not(.card--flat) p, .section--dark .note p {
  color: #3E362D !important;
}

/* Nút bấm & Badges tương phản cao
   SỬA 03/08/2026 — khối này trước đây ép chữ TRẮNG lên nền cam #FF670B,
   chỉ đạt 2,92:1 (WCAG AA cần 4,5:1). Đổ bóng chữ không cứu được vì máy đo
   tương phản không tính text-shadow. Giữ nguyên nền cam thương hiệu và đổi
   chữ sang mực đậm → 5,92:1, đạt AA. */
.btn--accent {
  background: var(--accent) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-shadow: none;
}


.tag { color: #521D1A !important; font-weight: 700 !important; }
.tag--tram { color: #0D2E1A !important; font-weight: 700 !important; }
/* #783E05 on #E5DBC7 = 6.14:1 AA → upgrade to #5C2E00 = 9.88:1 AAA */
.tag--mat { color: #5C2E00 !important; font-weight: 700 !important; }

/* ==========================================================================
   16. GLOBAL UX UPGRADES — Scroll Progress · Back-to-Top · Enhanced Hovers
   ========================================================================== */

/* ── Scroll Progress Bar ── */
.scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--tram-lite), var(--mat-lite), var(--accent));
  z-index: 1000;
  transition: width .1s linear;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

/* ── Back-to-Top Button ── */
.back-to-top {
  position: fixed;
  bottom: calc(var(--s6) + 56px);
  right: var(--s5);
  z-index: 95;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tram);
  color: #fff;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(14,58,29,.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(.9);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.back-to-top.is-visible {
  opacity: 1; pointer-events: auto; transform: none;
}
.back-to-top:hover { background: var(--tram-lite); transform: translateY(-2px); }
@media (max-width: 900px) {
  .back-to-top { display: none !important; }
}

/* ── Enhanced Card Hover with Gradient Overlay ── */
.card { position: relative; }
.card__media::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14,43,26,.55) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  border-radius: inherit;
}
.card:hover .card__media::before { opacity: 1; }

/* ── Review / Testimonial Cards ── */
.review-section { background: var(--paper-2); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } }

.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-organic);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: var(--sh-organic);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
}
.review-card::before {
  content: '\201C';
  position: absolute; top: var(--s4); right: var(--s5);
  font-family: var(--serif); font-size: 4rem; color: var(--line-2);
  line-height: 1; font-weight: 600;
}
.review-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(22,59,36,.14); }

.review-card__stars {
  display: flex; gap: .15rem; color: var(--mat); font-size: 1.05rem;
}
.review-card__text {
  font-family: var(--serif); font-size: 1.05rem; font-style: italic;
  line-height: 1.65; color: var(--ink-2); flex: 1;
}
.review-card__meta {
  display: flex; align-items: center; gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.review-card__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tram); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  flex: none;
}
.review-card__name { font-weight: 700; font-size: .95rem; color: var(--ink); }
.review-card__source { font-size: var(--t-xs); color: var(--ink-3); }

.review-summary {
  display: flex; align-items: center; gap: var(--s5);
  background: var(--tram-deep); color: #fff;
  border-radius: var(--r-organic); padding: var(--s5) var(--s6);
  margin-bottom: var(--s6); flex-wrap: wrap;
}
.review-summary__score {
  font-family: var(--serif); font-size: 3.5rem; font-weight: 600;
  color: #F0C060; line-height: 1;
}
.review-summary__label { font-size: var(--t-sm); color: #E0ECE0; }
.review-summary__stars { font-size: 1.3rem; color: var(--mat-lite); letter-spacing: .1em; }
.review-summary__count { font-size: var(--t-xs); color: #C7D8C4; margin-top: .15rem; }
.review-source-pills {
  display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3);
}
.review-source-pill {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill); padding: .3rem .9rem;
  font-size: var(--t-xs); font-weight: 600; color: #E0ECE0;
}

/* ── Chatbot Typing Indicator (three bouncing dots) ── */
.typing-indicator {
  display: flex; align-items: center; gap: 4px;
  padding: .65rem .9rem;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); border-top-left-radius: 2px;
  width: fit-content;
}
.typing-indicator span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  display: inline-block;
  animation: typingBounce 1.3s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.chat-timestamp {
  font-size: .7rem; color: var(--ink-3);
  text-align: center; padding-block: .1rem;
  opacity: .7;
}

/* ── Premium Pillar number style (replaces old faded version) ── */
.pillar__num {
  font-family: var(--serif);
  font-size: 2.4rem; line-height: 1;
  font-weight: 600;
  background: linear-gradient(135deg, var(--tram-lite), var(--brand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Count-up stat animation ── */
.count-up { display: inline-block; }

/* ── Improved Mobile Dock ── */
@media (max-width: 900px) {
  .dock {
    grid-template-columns: 1fr 1fr 1fr;
    box-shadow: 0 -4px 24px rgba(14,43,26,.18);
  }
  .dock a:nth-child(2) { background: var(--mat); color: var(--ink); font-weight: 700; }
  .dock a:nth-child(3) { background: var(--paper-2); color: var(--tram); }
}

/* ── Breadcrumb navigation ── */
.breadcrumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--ink-3);
  padding-block: var(--s3);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--tram); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--line-2); }

/* ── Trust badges row ── */
.trust-row {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  background: var(--paper-2); border-radius: var(--r-lg);
  border: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--ink-2);
}
.trust-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; color: var(--tram);
}

/* ── Voucher / Promo Code Box ── */
.voucher-box {
  margin-block: var(--s3);
  padding: var(--s3);
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}
.voucher-form {
  display: flex; gap: var(--s2); margin-top: .4rem;
}
.voucher-input {
  flex: 1; padding: .4rem .7rem; font-size: var(--t-xs);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--sans); text-transform: uppercase; font-weight: 600;
  letter-spacing: .05em; background: var(--paper); color: var(--ink);
}
.voucher-input:focus { outline: none; border-color: var(--tram); }
.voucher-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(232, 90, 9, 0.12); color: var(--accent);
  padding: .25rem .6rem; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; border: 1px solid rgba(232, 90, 9, 0.3);
}
.voucher-tag button {
  background: none; border: none; color: var(--accent);
  font-weight: bold; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.discount-text { color: #D97706; font-weight: 700; }









/* ══════════════════════════════════════════════════════════════════════════
   SỬA LỖI HIỂN THỊ ẢNH  —  bổ sung 03/08/2026
   Nguyên nhân: nhiều ảnh bị ép vào khung sai tỉ lệ nên cắt mất chủ thể.
   ══════════════════════════════════════════════════════════════════════════ */

/* Ảnh dọc 3:4 (764×1024 — hũ mật ong) đặt trong khung ngang: neo vào giữa trên
   để giữ được thân hũ thay vì cắt mất phần nhãn. */
img[src*="z6649916348249"]{object-position:center 32%;}

/* Ảnh nhóm người — neo cao hơn một chút để không cắt mất đầu. */
img[src*="3-min-scaled"],
img[src*="du-lich-hoc-duong"],
img[src*="z6736083943449"]{object-position:center 28%;}

/* Ảnh phong cảnh sông nước — chủ thể (xuồng) nằm hơi dưới giữa khung. */
img[src*="4-A-min-scaled"],
img[src*="DSC07352"],
img[src*="13-min-scaled"],
img[src*="2-min-scaled"]{object-position:center 55%;}

/* Thẻ sản phẩm dạng chữ (chưa có ảnh thật) — không phóng to khi rê chuột,
   vì phóng to chữ trông như lỗi render. */
.card__media img[src*="/assets/img/sp-"]{object-fit:cover;}
.card:hover .card__media img[src*="/assets/img/sp-"]{transform:none;}

/* Logo có màu tách nền (transparent PNG) trong footer */
.ftr .brand img, .ftr__brand img {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-block;
  max-width: 210px;
  height: auto;
}

/* Khung ảnh sản phẩm OCOP giữ vuông để cả ảnh thật lẫn thẻ chữ đều đều nhau. */
.product .card__media,
#luoi-sp .card__media{aspect-ratio:1/1;}

/* ══════════════════════════════════════════════════════════════════════════
   DẢI ẢNH ĐẦU TRANG CON  —  bổ sung 03/08/2026
   Trước đây các trang con mở đầu bằng chữ trơn trên nền giấy nên nhạt hơn
   hẳn trang chủ. Dải ảnh gọn (không cao bằng hero trang chủ) tạo điểm vào
   thị giác mà không đẩy nội dung xuống quá sâu.
   ══════════════════════════════════════════════════════════════════════════ */
.page-hero{
  position:relative;min-height:clamp(300px,42vh,440px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--tram-deep);
}
.page-hero__bg{position:absolute;inset:0;}
/* Làm tối đều toàn bộ ảnh nguồn trước khi phủ gradient — đảm bảo chữ luôn đọc
   được dù ảnh gốc sáng/rối tới đâu (cành lá, chi tiết dày...), không phụ
   thuộc việc gradient có "khớp" đúng vùng tối của ảnh hay không. */
.page-hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.92);}
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,26,16,.38) 0%, rgba(10,26,16,.40) 35%,
                            rgba(10,26,16,.74) 78%, rgba(10,26,16,.90) 100%),
    linear-gradient(100deg, rgba(14,43,26,.62) 0%, rgba(14,43,26,.42) 45%, rgba(14,43,26,.30) 100%);
}
.page-hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--s7) var(--s6);color:var(--paper);}
/* Màu chữ (trắng / mint) đã do khối "DARK BACKGROUND SECTIONS" ở mục 15 gán
   !important — ở đây chỉ khai báo phần khối 15 không quản lý: kích thước,
   khoảng cách, và text-shadow tăng cường để chữ nổi rõ trên ảnh lá/cành rối. */
.page-hero h1{max-width:20ch;margin:0 0 var(--s3);
  text-shadow:0 2px 6px rgba(0,0,0,.6), 0 10px 32px rgba(0,0,0,.55);}
.page-hero .lead{max-width:60ch;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.page-hero .eyebrow{color:var(--mat-lite);text-shadow:0 1px 6px rgba(0,0,0,.6);}
.page-hero .eyebrow::before{background:var(--mat-lite);}
.page-hero__crumb{font-size:var(--t-xs);color:#C7D3C4;margin:0 0 var(--s4);text-shadow:0 1px 6px rgba(0,0,0,.55);}
.page-hero__crumb a{color:#E1E9DD;text-decoration:none;}
.page-hero__crumb a:hover{color:var(--mat-lite);text-decoration:underline;}
@media(max-width:900px){
  .page-hero{min-height:auto;}
  .page-hero__inner{padding-block:var(--s6) var(--s5);}
  .page-hero__bg::after{
    background:linear-gradient(to top, rgba(10,26,16,.92) 0%, rgba(10,26,16,.72) 55%, rgba(10,26,16,.52) 100%);
  }
}


/* Tiêu đề thẻ: trước đây dùng <h4> ngay dưới <h2> gây nhảy bậc heading
   (lỗi tiếp cận). Đổi sang <h3> và giữ nguyên kiểu chữ cũ bằng class này. */
.card-title{font-family:var(--sans);font-size:1.08rem;font-weight:650;
  letter-spacing:0;line-height:1.35;margin:0;}

/* ══════════════════════════════════════════════════════════════════════════
   ẢNH BÌA — thiết kế lại 04/08/2026 · phong cách Organic Nature
   Nguyên tắc:
   · Ảnh nằm trong khung giấy, KHÔNG tràn sát mép màn hình → tạo khoảng thở
   · Bo góc bất đối xứng (lớn ở trên-trái và dưới-phải) gợi hình lá / dòng nước
   · Scrim mềm theo hướng, không có biên gãy — ảnh vẫn đọc được
   · Dải số liệu nằm trên nền giấy bên dưới, ngăn bằng nét mảnh 1px
   ══════════════════════════════════════════════════════════════════════════ */

.cover{padding:var(--s5) 0 0;background:var(--paper);}
.cover__frame{
  position:relative;width:min(100% - 3rem, 1400px);margin-inline:auto;
  aspect-ratio:16/8.3;min-height:520px;overflow:hidden;isolation:isolate;
  border-radius:190px 20px 190px 20px;background:var(--tram-deep);
}
.cover__bg{position:absolute;inset:0;}
.cover__bg img{width:100%;height:100%;object-fit:cover;object-position:center 52%;
  transform:scale(1.04);transition:transform 12s var(--ease);}
.cover__frame:hover .cover__bg img{transform:scale(1);}
.cover__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(12,36,23,.82) 0%, rgba(12,36,23,.52) 34%,
                           rgba(12,36,23,.18) 62%, rgba(12,36,23,.02) 100%),
    linear-gradient(to top, rgba(12,36,23,.46) 0%, transparent 46%);
}
.cover__inner{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(2rem,5vw,4.5rem) clamp(2rem,6vw,5.5rem);
  color:var(--paper);
}
.cover__eyebrow{
  display:block;font-family:var(--sans);font-size:.78rem;font-weight:650;
  letter-spacing:.30em;text-transform:uppercase;color:var(--mat-lite);
  margin-bottom:var(--s4);
}
.cover__eyebrow::before{
  content:"";display:block;width:46px;height:2px;background:var(--mat-lite);
  margin-bottom:var(--s3);opacity:.9;
}
.cover__title{
  font-family:var(--serif);font-weight:600;color:var(--paper);
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 var(--s4);max-width:15ch;text-shadow:0 3px 30px rgba(0,0,0,.34);
}
.cover__lead{
  max-width:56ch;color:#D4E0D1;font-size:clamp(.98rem,1.25vw,1.14rem);
  line-height:1.62;margin:0 0 var(--s6);
}
.cover__cta{display:flex;gap:var(--s3);flex-wrap:wrap;}
/* Triện tròn góc trên phải */
.cover__seal{position:absolute;top:clamp(1.6rem,4vw,3rem);right:clamp(1.6rem,4vw,3rem);
  width:92px;height:92px;color:var(--mat-lite);opacity:.92;z-index:2;}
/* Dải số liệu trên nền giấy */
.cover__facts{
  width:min(100% - 3rem, 1400px);margin:var(--s6) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:0 clamp(0rem,2vw,1.5rem) var(--s2);
}
.cover__facts div{padding:0 var(--s5);}
.cover__facts div + div{border-left:1px solid var(--line);}
.cover__facts div:first-child{padding-left:clamp(.5rem,2vw,2rem);}
.cover__facts b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.1;color:var(--tram);}
.cover__facts span{display:block;margin-top:.2rem;font-size:var(--t-xs);color:var(--ink-3);}

@media(max-width:900px){
  .cover{padding-top:0;}
  .cover__frame{width:100%;border-radius:0 0 110px 20px;aspect-ratio:auto;
    min-height:clamp(460px,72vh,640px);}
  .cover__bg::after{
    background:linear-gradient(to top, rgba(12,36,23,.90) 0%, rgba(12,36,23,.60) 52%,
                                       rgba(12,36,23,.34) 100%);
  }
  .cover__title{max-width:none;}
  .cover__seal{width:62px;height:62px;}
  .cover__facts{grid-template-columns:repeat(2,1fr);gap:var(--s4) 0;
    width:calc(100% - 2.5rem);margin-top:var(--s5);}
  .cover__facts div + div{border-left:0;}
  .cover__facts div:nth-child(even){border-left:1px solid var(--line);}
  .cover__facts div{padding:0 var(--s4);}
  .cover__cta .btn{flex:1 1 100%;}
}

/* ── UI MICRO-INTERACTIONS & REACT-BITS EFFECTS ──────────────────────── */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(229, 158, 56, 0.18), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.spotlight-card:hover::before {
  opacity: 1;
}

.tilt-card {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.shiny-text {
  background: linear-gradient(120deg, currentColor 0%, #FFE082 45%, #FFFFFF 50%, #FFE082 55%, currentColor 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinySweep 3.5s infinite linear;
  display: inline-block;
}
@keyframes shinySweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.cme-fireflies-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── VOICE AI MIC BUTTON & PULSE ANIMATION ──────────────────────────── */
.ai-chat-mic-btn {
  background: var(--paper, #FBF7EF);
  border: 1px solid var(--border, #D8E2D9);
  color: var(--tram, #16512A);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 4px;
}
.ai-chat-mic-btn:hover {
  background: #E8F5E9;
  transform: scale(1.05);
}
.ai-chat-mic-btn.is-recording {
  background: #D32F2F !important;
  color: #FFFFFF !important;
  border-color: #B71C1C !important;
  animation: pulseMic 1.2s infinite;
}

@keyframes pulseMic {
  0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}


/* ══════════════════════════════════════════════════════════════════════════
   BỔ SUNG GIAO DIỆN ĐIỆN THOẠI — 14/08/2026
   --------------------------------------------------------------------------
   Ba nhóm quy tắc dưới đây từng nằm ở `v2/assets/style.css`. Khi gộp bốn lớp
   về một, thư mục v2/ bị xoá và chúng mất theo — cùng lúc với công cụ
   `v2/kiem-mobile.js` vốn canh đúng những điều này. Mất cả luật lẫn người
   gác nên không ai phát hiện, suốt sáu ngày.

   Đặt ở CUỐI tệp để chắc chắn ghi đè, và để không đụng vào phần đã có.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. VÙNG CHẠM THEO NGÓN TAY (WCAG 2.5.5) ──────────────────────────────
   Dùng `pointer:coarse` chứ KHÔNG dùng `max-width`. Kích thước màn hình không
   cho biết người dùng đang chạm hay đang rê chuột: máy tính bảng màn to vẫn
   dùng ngón tay, còn laptop màn cảm ứng thì vừa chuột vừa chạm.
   44px là mốc WCAG — nhỏ hơn thì ngón tay bấm trượt sang nút bên cạnh. */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="submit"], input[type="button"],
  .btn, .nav a, .dock a, .burger, .tk-loc button, select {
    min-height: 44px;
    min-width: 44px;
  }
  /* Liên kết nằm giữa dòng chữ thì KHÔNG ép 44px — sẽ phá vỡ dòng văn bản.
     Chỉ nới khoảng cách chạm bằng padding dọc. */
  p a, li a, .tk-d a, .prose a {
    min-height: 0;
    min-width: 0;
    padding-block: 0.15em;
  }
  /* Hai nút cạnh nhau phải cách nhau, nếu không ngón tay bấm trúng cả hai */
  .nav a + a, .dock a + a { margin-block: 2px; }
}

/* ── 2. ĐIỆN THOẠI HẸP 360–430px ──────────────────────────────────────────
   iPhone SE rộng 375px, phần lớn máy Android phổ thông ở Cà Mau rộng 360px.
   Không có mốc này thì mọi thứ vẫn theo khổ 900px và bị chật. */
@media (max-width: 430px) {
  :root {
    --s10: 3rem; --s9: 2.25rem; --s8: 1.75rem; --s7: 1.25rem; --s6: 1rem; --s5: 0.85rem; --s4: 0.65rem;
    --r-organic: 14px; --r-lg: 14px;
  }
  .wrap { padding-inline: 0.75rem; width: calc(100% - 1rem); }
  h1, .head h1 { font-size: clamp(1.28rem, 6vw, 1.58rem); }
  h2, .head h2 { font-size: clamp(1.1rem, 4.8vw, 1.32rem); }
  h3, .head h3 { font-size: clamp(0.96rem, 3.8vw, 1.12rem); }
  .hero h1.display { font-size: clamp(1.45rem, 6vw, 1.8rem); }
  .lead { font-size: 0.9rem; line-height: 1.5; }
  p { font-size: 0.91rem; line-height: 1.55; }

  /* Mọi lưới về MỘT cột. Hai cột trên màn 360px thì mỗi cột còn ~150px,
     chữ vỡ vụn và ảnh bé như tem. */
  .grid, .grid-2, .grid-3, .grid-4, .shop-grid, .card-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .card__body { padding: 0.75rem 0.85rem; }
  .card-title { font-size: 0.98rem; }

  /* Thanh đáy: chữ nhỏ lại để ba mục không tràn hàng */
  .dock a { font-size: 0.74rem; padding-inline: 0.25rem; }
}

@media (max-width: 360px) {
  .dock a { font-size: 0.7rem; padding-inline: 0.2rem; }
  .btn { padding-inline: 0.65rem; font-size: 0.82rem; }
  .hero h1.display { font-size: clamp(1.35rem, 5.8vw, 1.6rem); }
}

/* ── 3. CHỮ DÀI KHÔNG ĐƯỢC ĐẨY TRÀN TRANG ────────────────────────────────
   Mã đơn hàng, địa chỉ email, đường dẫn dài là một "từ" liền không có chỗ
   ngắt. Trên màn 360px, một chuỗi như vậy đẩy rộng cả trang và sinh thanh
   cuộn ngang — khách vuốt lệch, tưởng trang hỏng.

   Dùng `overflow-wrap: anywhere` chứ không `word-break: break-all`:
   break-all cắt cả từ tiếng Việt bình thường giữa chừng, đọc rất khó chịu.
   `anywhere` chỉ cắt khi thật sự không còn cách nào khác. */
body { overflow-wrap: anywhere; }
p, li, td, dd, .tk-d, .tk-t, .cart-item__name { overflow-wrap: anywhere; }

/* Bảng dữ liệu hẹp thì cho cuộn trong khung của nó, đừng để nó đẩy cả trang */
table, .table-scroll { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── UNIFIED FLOATING ACTION BAR STACK (BOTTOM-RIGHT) ───────────────── */
.cme-floating-stack {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cme-floating-contact-group,
.cme-floating-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cme-contact-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.cme-contact-btn svg {
  width: 20px;
  height: 20px;
}

.cme-contact-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.cme-contact-btn.hotline {
  background: linear-gradient(135deg, #FF6B00, #EA580C);
  animation: cmePulse 2s infinite;
}

.cme-contact-btn.zalo {
  background: linear-gradient(135deg, #0088FF, #0066CC);
}

.cme-contact-btn.messenger {
  background: linear-gradient(135deg, #00C6FF, #0078FF);
}

.cme-contact-btn.map {
  background: linear-gradient(135deg, #FF3B30, #DC2626) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

.cme-contact-btn.map:hover {
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
}

/* ── 3D ROTATING LOCATION PIN ─────────────────────────────────────────── */
.cme-pin-3d {
  display: inline-block;
  vertical-align: middle;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  perspective: 800px;
  animation: cmePinSpin3D 4s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  filter: drop-shadow(0 4px 8px rgba(220, 38, 38, 0.4));
  transition: transform 0.3s ease;
}

.cme-pin-3d:hover {
  animation-duration: 1.6s;
}

@keyframes cmePinSpin3D {
  0% {
    transform: translateY(0) rotateY(0deg) scale(1);
  }
  25% {
    transform: translateY(-4px) rotateY(90deg) scale(1.05);
  }
  50% {
    transform: translateY(-7px) rotateY(180deg) scale(1.08);
  }
  75% {
    transform: translateY(-4px) rotateY(270deg) scale(1.05);
  }
  100% {
    transform: translateY(0) rotateY(360deg) scale(1);
  }
}

.cme-contact-tooltip {
  position: absolute;
  right: 52px;
  background: rgba(17, 24, 39, 0.92);
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cme-contact-btn:hover .cme-contact-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* BACK TO TOP INSIDE FLOATING STACK */
.back-to-top {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(22, 81, 42, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease !important;
  margin: 0 !important;
}

.back-to-top.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.back-to-top:hover {
  background: #16512A !important;
  transform: scale(1.1) !important;
}

@media (max-width: 768px) {
  .cme-floating-stack {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    gap: 5px !important;
    align-items: flex-end !important;
  }
  .cme-floating-contact-group,
  .cme-floating-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
  }
  .cme-contact-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
  }
  .cme-contact-btn span {
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .cme-contact-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  .cme-contact-btn .cme-pin-3d {
    width: 19px !important;
    height: 19px !important;
  }
  .cme-contact-tooltip {
    display: none !important;
  }
  .back-to-top {
    display: none !important;
  }
}

@keyframes cmePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

/* Ảnh không bao giờ được rộng hơn khung chứa */
img, video, iframe { max-width: 100%; height: auto; }

/* ── 4. ÉP LƯỚI VIẾT INLINE VỀ MỘT CỘT ────────────────────────────────────
   `luu-tru/` (cả bản Việt và Anh) có ba khối viết thẳng trong thuộc tính:

       style="display:grid;grid-template-columns:1.1fr 1.4fr;…"

   Style inline thắng mọi quy tắc trong tệp CSS, nên không @media nào ghi đè
   được — trên màn 360px mỗi cột chỉ còn khoảng 150px, ảnh bé như tem và chữ
   vỡ vụn. Lỗi này từng được sửa ngày 07/08/2026 nhưng bản sửa nằm ở lớp v2/,
   nên mất theo khi gộp bốn lớp.

   `!important` trong tệp CSS THẮNG được khai báo inline không có !important —
   đây là một trong số ít trường hợp dùng !important là đúng chứ không phải
   là dấu hiệu code kém.

   Sửa tận gốc là bỏ style inline khỏi HTML, nhưng đó là sửa nội dung 2 trang
   ở 2 ngôn ngữ; quy tắc này che được ngay cả những trang viết inline sau này. */
@media (max-width: 640px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. WIDGET LỊCH ĐẶT PHÒNG & TOUR (BOOKING CALENDAR MODAL) ────────────── */
.cme-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 61, 31, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cmeFadeIn 0.2s ease-out;
}

.cme-modal-dialog {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(22, 81, 42, 0.15);
  display: flex;
  flex-direction: column;
  animation: cmeSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cme-modal-header {
  background: linear-gradient(135deg, #16512A, #1E6B38);
  color: #ffffff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 15px 15px 0 0;
}

.cme-modal-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cme-modal-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cme-modal-close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.cme-modal-body {
  padding: 20px 22px;
}

.cme-booking-form .form-group {
  margin-bottom: 14px;
}

.cme-booking-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 5px;
}

.cme-booking-form input,
.cme-booking-form select,
.cme-booking-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.cme-booking-form input:focus,
.cme-booking-form select:focus,
.cme-booking-form textarea:focus {
  outline: none;
  border-color: #16512A;
  box-shadow: 0 0 0 3px rgba(22, 81, 42, 0.12);
}

.cme-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cme-price-summary-box {
  background: #F0FDF4;
  border: 1.5px dashed #86EFAC;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}

.cme-price-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 4px;
}

.cme-price-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 700;
  color: #16512A;
  border-top: 1px solid #BBF7D0;
  padding-top: 8px;
  margin-top: 6px;
}

.cme-btn-book-submit {
  width: 100%;
  background: linear-gradient(135deg, #16512A, #1B4332);
  color: #ffffff;
  border: none;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(22, 81, 42, 0.3);
  transition: all 0.2s;
}

.cme-btn-book-submit:hover {
  background: linear-gradient(135deg, #1E6B38, #16512A);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 81, 42, 0.4);
}

@media (max-width: 640px) {
  .cme-modal-backdrop {
    padding: 8px !important;
  }
  .cme-modal-dialog {
    max-width: calc(100vw - 16px) !important;
    max-height: 88vh !important;
    border-radius: 14px !important;
  }
  .cme-modal-header {
    padding: 12px 16px !important;
  }
  .cme-modal-header h3 {
    font-size: 1.05rem !important;
  }
  .cme-modal-body {
    padding: 14px 16px !important;
  }
  .cme-date-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .cme-booking-form input,
  .cme-booking-form select,
  .cme-booking-form textarea,
  .field input, .field select, .field textarea, input, select, textarea {
    font-size: 16px !important;
    padding: 8px 10px !important;
  }
  .cme-price-summary-box {
    padding: 10px 12px !important;
    margin: 12px 0 !important;
  }
  .cme-btn-book-submit {
    padding: 11px 16px !important;
    font-size: 0.94rem !important;
  }
}

@keyframes cmeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cmeSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════
   ADVANCED FEATURE COMPONENTS (CÀ MAU ECO)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Thanh thông báo nổi đầu trang (Announcement Bar) */
.cme-announcement-bar {
  background: linear-gradient(90deg, #16512A, #1B4332);
  color: #ffffff;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.cme-announcement-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.cme-announcement-btn {
  background: #FF6B00;
  color: #ffffff !important;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.3);
}

.cme-announcement-btn:hover {
  background: #EA580C;
  transform: scale(1.05);
}

.cme-announcement-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 3px 6px;
  line-height: 1;
}

.cme-announcement-close:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .cme-announcement-bar {
    padding: 5px 30px 5px 10px;
    font-size: 0.75rem;
  }
  .cme-announcement-content {
    gap: 6px;
  }
}

@keyframes cmePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(255, 107, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

/* 3. Thanh tiến độ cuộn trang (Scroll Progress Bar) */
.cme-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #FF6B00, #22C55E);
  z-index: 10000;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* 4. Canvas hiệu ứng lá tràm bay sinh thái */
#cme-particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9980;
}

/* 5. Cửa sổ ưu đãi chào đón (Promotional Modal) */
.cme-promo-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  max-width: 460px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: cmeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
}

.cme-promo-banner {
  height: 160px;
  background: linear-gradient(135deg, #16512A, #1B4332);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 20px;
  position: relative;
}

.cme-promo-body {
  padding: 24px 20px 20px;
}

.cme-promo-voucher {
  background: #FEF3C7;
  border: 1.5px dashed #D97706;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 16px 0;
  display: inline-block;
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: 800;
  color: #B45309;
  letter-spacing: 1.5px;
}

/* ── CHATBOT AI ENHANCED UI: SUGGESTION CHIPS & ACTION CARDS ───────────── */
.chat-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
}

.chat-chip-btn {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  color: #16512A;
  border-radius: 16px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-chip-btn:hover {
  background: #DCFCE7;
  border-color: #16512A;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(22, 81, 42, 0.15);
}

.chat-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.chat-action-card:hover {
  border-color: #16512A;
  box-shadow: 0 4px 12px rgba(22, 81, 42, 0.12);
}

.chat-card-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: #F8FAFC;
}

.chat-card-body {
  flex: 1;
  min-width: 0;
}

.chat-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card-price {
  font-size: 12.5px;
  font-weight: 800;
  color: #DC2626;
  margin: 2px 0 6px;
}

.chat-card-btn {
  background: #16512A;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-card-btn:hover {
  background: #1B4332;
  transform: scale(1.03);
}

/* ── VOICE TEXT-TO-SPEECH BUTTON ───────────────────────────────────────── */
.chat-msg--bot .chat-bubble {
  position: relative;
  padding-right: 32px;
}

.chat-voice-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(22, 81, 42, 0.08);
  border: 1px solid rgba(22, 81, 42, 0.15);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  color: #16512A;
  transition: all 0.2s ease;
  padding: 0;
}

.chat-voice-btn:hover {
  background: #16512A;
  color: #ffffff;
  transform: scale(1.1);
}

.chat-voice-btn.is-speaking {
  background: #DC2626;
  color: #ffffff;
  border-color: #DC2626;
  animation: chatPulse 1s infinite alternate;
}

@keyframes chatPulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

/* ── IN-CHAT SMART BOOKING WIDGET ──────────────────────────────────────── */
.chat-booking-widget {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1.5px solid #86EFAC;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(22, 81, 42, 0.08);
}

.chat-booking-title {
  font-size: 13px;
  font-weight: 800;
  color: #16512A;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-booking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #374151;
}

.chat-booking-row label {
  width: 75px;
  font-weight: 600;
  flex-shrink: 0;
}

.chat-booking-row .cb-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-size: 12px;
  background: #ffffff;
  color: #1E293B;
}

.chat-booking-row .cb-input:focus {
  outline: none;
  border-color: #16512A;
  box-shadow: 0 0 0 2px rgba(22, 81, 42, 0.15);
}

.chat-booking-submit-btn {
  width: 100%;
  background: #16512A;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.chat-booking-submit-btn:hover {
  background: #1B4332;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(22, 81, 42, 0.2);
}

/* ── IN-CHAT COMBO BUNDLE CARD ─────────────────────────────────────────── */
.chat-bundle-card {
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
}

.chat-bundle-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 6px;
}

.chat-bundle-items {
  font-size: 12px;
  color: #4B5563;
  margin-bottom: 8px;
  line-height: 1.5;
}

.chat-bundle-btn {
  background: #D97706;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-bundle-btn:hover {
  background: #B45309;
  transform: scale(1.02);
}

/* ── CAMERA / IMAGE UPLOAD BUTTON IN CHAT ──────────────────────────────── */
.ai-chat-img-btn {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-chat-img-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

.chat-user-img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  margin-top: 6px;
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ── INTERACTIVE TIMELINE ITINERARY WIDGET ─────────────────────────────── */
.chat-itinerary-timeline {
  background: #ffffff;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.chat-itinerary-header {
  font-size: 13.5px;
  font-weight: 800;
  color: #16512A;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #E2E8F0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-itinerary-step {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
  font-size: 12px;
}

.chat-itinerary-time {
  font-weight: 700;
  color: #D97706;
  width: 55px;
  flex-shrink: 0;
  font-size: 11.5px;
}

.chat-itinerary-content {
  flex: 1;
  color: #334155;
  line-height: 1.4;
}

.chat-itinerary-content strong {
  color: #0F172A;
}

.chat-itinerary-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.chat-itinerary-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.chat-itinerary-btn--print {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}

.chat-itinerary-btn--print:hover {
  background: #E2E8F0;
}

.chat-itinerary-btn--zalo:hover {
  background: #1B4332;
  transform: translateY(-1px);
}

/* ── INTERACTIVE MICRO-QUIZ WIDGET ─────────────────────────────────────── */
.chat-quiz-card {
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(22, 81, 42, 0.08);
}

.chat-quiz-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #16512A;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-quiz-q {
  font-size: 12.5px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.chat-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-quiz-opt {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-quiz-opt:hover {
  background: #DCFCE7;
  border-color: #16512A;
  color: #16512A;
  transform: translateX(3px);
}

.chat-quiz-result {
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}

.chat-quiz-result-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
}

.chat-quiz-result-body {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* ── MULTI-CURRENCY TABLE ──────────────────────────────────────────────── */
.chat-currency-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}

.chat-currency-table th,
.chat-currency-table td {
  border: 1px solid #E2E8F0;
  padding: 5px 8px;
  text-align: left;
}

.chat-currency-table th {
  background: #F8FAFC;
  font-weight: 700;
  color: #334155;
}

.chat-currency-table td strong {
  color: #DC2626;
}



/* ── SMART UPSELL STRIP (AI Upsell Engine — nâng cấp 19/08/2026) ──── */
.chat-upsell-strip {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding: .6rem .9rem;
  background: linear-gradient(90deg, rgba(22,81,42,.12), rgba(255,200,0,.06));
  border-left: 3px solid var(--tram, #16512A);
  border-radius: 0 8px 8px 0;
  font-size: .82rem;
  color: #2d4a35;
  line-height: 1.4;
}
.chat-upsell-btn {
  flex-shrink: 0;
  background: var(--tram, #16512A);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.chat-upsell-btn:hover { opacity: .85; }
@media (prefers-color-scheme: dark) {
  .chat-upsell-strip { background: rgba(34,197,94,.08); border-color: #22c55e; color: #d1fae5; }
}

/* ── SMART TRIP BUDGET ESTIMATOR CARD (Nâng cấp thông minh 21/08/2026) ──── */
.chat-budget-card {
  background: #ffffff;
  border: 1.5px solid #16512A;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(22, 81, 42, 0.1);
}
.chat-budget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #CBD5E1;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.chat-budget-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #16512A;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-budget-tag {
  background: #DCFCE7;
  color: #16512A;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-budget-body {
  font-size: 12px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.chat-budget-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px dotted #F1F5F9;
}
.chat-budget-item strong {
  color: #0F172A;
}
.chat-budget-item--discount {
  color: #16A34A;
  font-weight: 700;
}
.chat-budget-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1.5px solid #CBD5E1;
  font-size: 13px;
  font-weight: 800;
}
.chat-budget-total-val {
  color: #DC2626;
  font-size: 14px;
}
.chat-budget-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.chat-budget-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.chat-budget-btn--zalo {
  background: #0068FF;
  color: #ffffff;
}
.chat-budget-btn--zalo:hover {
  background: #0052CC;
  transform: translateY(-1px);
}
.chat-budget-btn--book {
  background: #16512A;
  color: #ffffff;
}
.chat-budget-btn--book:hover {
  background: #0E3A1D;
  transform: translateY(-1px);
}

/* ── MINI GALLERY SHOWCASE CARD ────────────────────────────────────────── */
.chat-gallery-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}
.chat-gallery-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #16512A;
  margin-bottom: 8px;
}
.chat-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.chat-gallery-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #E2E8F0;
}
.chat-gallery-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ── 1-CLICK COPY CODE BUTTON ──────────────────────────────────────────── */
.chat-copy-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.chat-copy-code-btn:hover {
  background: #FDE68A;
  transform: translateY(-1px);
}
.chat-copy-code-btn.is-copied {
  background: #DCFCE7;
  color: #166534;
  border-color: #86EFAC;
}

/* ── SMART ROUTE & TRANSIT NAVIGATOR CARD (Nâng cấp 21/08/2026) ────────── */
.chat-route-card {
  background: #ffffff;
  border: 1.5px solid #0284C7;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}
.chat-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #BAE6FD;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.chat-route-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0369A1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-route-tag {
  background: #E0F2FE;
  color: #0369A1;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-route-body {
  font-size: 12px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.chat-route-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
.chat-route-step-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.chat-route-actions {
  display: flex;
  gap: 6px;
}
.chat-route-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.chat-route-btn--maps {
  background: #EA4335;
  color: #ffffff;
}
.chat-route-btn--maps:hover {
  background: #C5221F;
  transform: translateY(-1px);
}
.chat-route-btn--zalo {
  background: #0068FF;
  color: #ffffff;
}
.chat-route-btn--zalo:hover {
  background: #0052CC;
  transform: translateY(-1px);
}

/* ── SMART FEAST MENU PLANNER CARD ─────────────────────────────────────── */
.chat-menu-planner-card {
  background: #FFFBEB;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}
.chat-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #FDE68A;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.chat-menu-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #B45309;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-menu-tag {
  background: #FEF3C7;
  color: #92400E;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-menu-items {
  font-size: 12px;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.chat-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.chat-menu-item strong {
  color: #1F2937;
}
.chat-menu-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed #FDE68A;
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
}
.chat-menu-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.chat-menu-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.chat-menu-btn--book {
  background: #16512A;
  color: #ffffff;
}
.chat-menu-btn--book:hover {
  background: #0E3A1D;
  transform: translateY(-1px);
}

/* ── SMART LEAD CONFIRM CARD ───────────────────────────────────────────── */
.chat-lead-confirm-card {
  background: #ECFDF5;
  border: 1.5px solid #10B981;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}
.chat-lead-confirm-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
.chat-lead-confirm-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #065F46;
  margin-bottom: 4px;
}
.chat-lead-confirm-desc {
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
  margin-bottom: 8px;
}
.chat-lead-confirm-phone {
  display: inline-block;
  background: #D1FAE5;
  color: #047857;
  font-weight: 800;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

/* ── FAST DIAL MENU SHORTCUTS (Phase 3 Autoplan) ───────────────────────── */
.chat-dial-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.chat-dial-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: #1E293B;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.chat-dial-btn:hover {
  background: #EFF6FF;
  border-color: #3B82F6;
  color: #1D4ED8;
  transform: translateY(-1px);
}
.chat-dial-num {
  background: #E2E8F0;
  color: #475569;
  font-weight: 800;
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-dial-btn:hover .chat-dial-num {
  background: #3B82F6;
  color: #ffffff;
}

/* ── SMART COMPARATOR CARD (2-COLUMN) ──────────────────────────────────── */
.chat-compare-card {
  background: #ffffff;
  border: 1.5px solid #8B5CF6;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.12);
}
.chat-compare-header {
  font-size: 13.5px;
  font-weight: 800;
  color: #6D28D9;
  border-bottom: 1px dashed #DDD6FE;
  padding-bottom: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.chat-compare-col {
  background: #F5F3FF;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-compare-col-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #5B21B6;
  border-bottom: 1px solid #DDD6FE;
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.chat-compare-col-price {
  font-size: 12px;
  font-weight: 800;
  color: #E05A1B;
}
.chat-compare-col-feat {
  font-size: 11px;
  color: #4B5563;
  line-height: 1.35;
}
.chat-compare-col-btn {
  margin-top: auto;
  padding: 6px 8px;
  background: #7C3AED;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.chat-compare-col-btn:hover {
  background: #6D28D9;
  transform: translateY(-1px);
}

/* ── IN-CHAT OCOP PRODUCT CARD ─────────────────────────────────────────── */
.chat-product-card {
  background: #ffffff;
  border: 1.5px solid #16A34A;
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
  align-items: center;
}
.chat-product-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #E2E8F0;
}
.chat-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-product-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #166534;
  line-height: 1.3;
}
.chat-product-price {
  font-size: 13px;
  font-weight: 800;
  color: #E05A1B;
}
.chat-product-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.chat-product-btn {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}
.chat-product-btn--cart {
  background: #DCFCE7;
  color: #15803D;
}
.chat-product-btn--cart:hover {
  background: #BBF7D0;
}
.chat-product-btn--buy {
  background: #16A34A;
  color: #ffffff;
}
.chat-product-btn--buy:hover {
  background: #15803D;
}

/* ── ECO WEATHER & OUTFIT CARD ─────────────────────────────────────────── */
.chat-weather-card {
  background: #F0FDF4;
  border: 1.5px solid #059669;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}
.chat-weather-header {
  font-size: 13.5px;
  font-weight: 800;
  color: #065F46;
  border-bottom: 1px dashed #A7F3D0;
  padding-bottom: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-weather-body {
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── ECO QUIZ & REWARDS (MINI-GAME R1) ─────────────────────────────────── */
.chat-ecoquiz-card {
  background: #F0FDF4;
  border: 1.5px solid #16A34A;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
}
.chat-ecoquiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #BBF7D0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.chat-ecoquiz-badge {
  font-size: 11px;
  font-weight: 800;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-ecoquiz-progress {
  font-size: 11px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-ecoquiz-question {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.45;
  margin-bottom: 10px;
}
.chat-ecoquiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-ecoquiz-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #374151;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.2s ease;
  width: 100%;
}
.chat-ecoquiz-opt:hover {
  background: #DCFCE7;
  border-color: #16A34A;
  color: #166534;
  transform: translateX(2px);
}
.chat-ecoquiz-opt-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #16A34A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-ecoquiz-opt-text {
  flex: 1;
  line-height: 1.35;
}

/* ── ECO REWARD CARD ───────────────────────────────────────────────────── */
.chat-reward-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  border-radius: 14px;
  padding: 14px;
  margin-top: 10px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}
.chat-reward-badge {
  font-size: 12px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.chat-reward-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #78350F;
  margin-bottom: 6px;
}
.chat-reward-desc {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.4;
  margin-bottom: 10px;
}
.chat-reward-code-box {
  background: #FFFFFF;
  border: 2px dashed #D97706;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.chat-reward-code-label {
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 1px;
}
.chat-reward-code {
  font-size: 1.25rem;
  font-weight: 900;
  color: #D97706;
  letter-spacing: 2px;
  font-family: monospace;
}
.chat-reward-val {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}
.chat-reward-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.chat-reward-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  min-height: 44px;
  text-decoration: none;
  transition: all 0.2s ease;
  flex: 1 1 130px;
}
.chat-reward-btn--copy {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.chat-reward-btn--copy:hover {
  background: #FDE68A;
}
.chat-reward-btn--apply {
  background: #16A34A;
  color: #FFFFFF;
}
.chat-reward-btn--apply:hover {
  background: #15803D;
}

/* ── LIVE ORDER LOOKUP CARD (R2) ───────────────────────────────────────── */
.chat-order-lookup-card {
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.chat-lookup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.chat-lookup-id {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  font-family: monospace;
}
.chat-lookup-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.status-badge--confirmed {
  background: #DCFCE7;
  color: #166534;
}
.status-badge--pending {
  background: #FEF3C7;
  color: #92400E;
}
.status-badge--shipping {
  background: #DBEAFE;
  color: #1E40AF;
}
.status-badge--completed {
  background: #DCFCE7;
  color: #15803D;
}
.status-badge--cancelled {
  background: #FEE2E2;
  color: #991B1B;
}
.chat-lookup-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.chat-lookup-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.chat-lookup-row--total {
  border-top: 1px dashed #CBD5E1;
  padding-top: 6px;
  margin-top: 4px;
  font-size: 13px;
}
.chat-lookup-lbl {
  color: #64748B;
  flex-shrink: 0;
}
.chat-lookup-val {
  color: #1E293B;
  text-align: right;
  word-break: break-word;
}
.chat-lookup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid #E2E8F0;
  padding-top: 8px;
}
.chat-lookup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  min-height: 44px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-lookup-btn--zalo {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
.chat-lookup-btn--zalo:hover {
  background: #DBEAFE;
}
.chat-lookup-btn--call {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}
.chat-lookup-btn--call:hover {
  background: #DCFCE7;
}

/* ── SMART PROACTIVE NUDGE BUBBLE (R4) ─────────────────────────────────── */
.ai-chat-nudge-bubble {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid #16A34A;
  border-radius: 12px;
  padding: 10px 28px 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.18);
  cursor: pointer;
  animation: nudgeSlideIn 0.3s ease-out;
  transition: all 0.25s ease;
  max-width: 280px;
  z-index: 1000;
}
.ai-chat-nudge-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.25);
}
.ai-chat-nudge-bubble.is-hiding {
  opacity: 0;
  transform: translateY(8px);
}
.ai-chat-nudge-content {
  font-size: 12px;
  color: #1F2937;
  line-height: 1.45;
}
.ai-chat-nudge-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-chat-nudge-close:hover {
  color: #EF4444;
  background: #FEE2E2;
}
@keyframes nudgeSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── SMART ITINERARY CARD (Phase 5) ────────────────────────────────────── */
.chat-itinerary-card {
  background: #ffffff;
  border: 1.5px solid #0D9488;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12);
}
.chat-itinerary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #99F6E4;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.chat-itinerary-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F766E;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-itinerary-tag {
  background: #CCFBF1;
  color: #0F766E;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-itinerary-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.chat-itinerary-slot {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
}
.chat-itinerary-time {
  font-weight: 800;
  color: #0D9488;
  width: 80px;
  flex-shrink: 0;
}
.chat-itinerary-actions {
  display: flex;
  gap: 6px;
}
.chat-itinerary-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.chat-itinerary-btn--book {
  background: #0F766E;
  color: #ffffff;
}
.chat-itinerary-btn--book:hover {
  background: #115E59;
  transform: translateY(-1px);
}
.chat-itinerary-btn--zalo {
  background: #0068FF;
  color: #ffffff;
}
.chat-itinerary-btn--zalo:hover {
  background: #0052CC;
  transform: translateY(-1px);
}

/* ── SMART SHIPPING FEE CARD ───────────────────────────────────────────── */
.chat-shipping-card {
  background: #EFF6FF;
  border: 1.5px solid #3B82F6;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.chat-shipping-header {
  font-size: 13.5px;
  font-weight: 800;
  color: #1D4ED8;
  border-bottom: 1px dashed #BFDBFE;
  padding-bottom: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-shipping-body {
  font-size: 12px;
  color: #1E293B;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}
.chat-shipping-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

/* ── IN-CHAT GUEST REVIEW CARD ─────────────────────────────────────────── */
.chat-review-card {
  background: #FFFBEB;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
}
.chat-review-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #B45309;
  margin-bottom: 6px;
}
.chat-review-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 24px;
  margin-bottom: 8px;
  cursor: pointer;
}
.chat-review-star {
  transition: transform 0.2s ease;
}
.chat-review-star:hover {
  transform: scale(1.25);
}
.chat-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.chat-review-tag-btn {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  color: #92400E;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-review-tag-btn:hover,
.chat-review-tag-btn.is-active {
  background: #F59E0B;
  color: #ffffff;
}

/* ── SMART RESTAURANT FOOD ORDERING & MENU (Menu Chính Thức Cà Mau Eco) ── */
.chat-food-menu-card {
  background: #ffffff;
  border: 1.5px solid #EA580C;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12);
}
.chat-food-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #FED7AA;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.chat-food-menu-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #C2410C;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-food-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}
.chat-food-tab-btn {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #9A3412;
  white-space: nowrap;
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}
.chat-food-tab-btn:hover,
.chat-food-tab-btn.is-active {
  background: #EA580C;
  border-color: #EA580C;
  color: #ffffff;
}
.chat-food-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.chat-food-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
  border: 1px solid #F3F4F6;
  border-radius: 8px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}
.chat-food-row:hover {
  background: #FFF7ED;
  border-color: #FED7AA;
}
.chat-food-item-name {
  font-size: 12px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.3;
}
.chat-food-item-unit {
  font-size: 10.5px;
  color: #6B7280;
}
.chat-food-item-price {
  font-size: 12px;
  font-weight: 800;
  color: #EA580C;
  margin-right: 8px;
  white-space: nowrap;
}
.chat-food-add-btn {
  background: #16A34A;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  transition: all 0.2s ease;
}
.chat-food-add-btn:hover {
  background: #15803D;
  transform: scale(1.05);
}

/* ── GIỎ MÂM CƠM ĐÃ CHỌN TRONG CHAT ────────────────────────────────────── */
.chat-food-cart-card {
  background: #F0FDF4;
  border: 1.5px solid #16A34A;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.12);
}
.chat-food-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #BBF7D0;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #166534;
}
.chat-food-cart-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.chat-food-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #374151;
  padding: 2px 0;
}
.chat-food-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #166534;
  border-top: 1px solid #BBF7D0;
  padding-top: 6px;
  margin-bottom: 10px;
}
.chat-food-cart-actions {
  display: flex;
  gap: 6px;
}
.chat-food-cart-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  min-height: 38px;
}
.chat-food-cart-btn--zalo {
  background: #0068FF;
  color: #ffffff;
}
.chat-food-cart-btn--zalo:hover {
  background: #0052CC;
  transform: translateY(-1px);
}
.chat-food-cart-btn--book {
  background: #EA580C;
  color: #ffffff;
}
.chat-food-cart-btn--book:hover {
  background: #C2410C;
  transform: translateY(-1px);
}

/* ── SET MÂM CƠM THIẾT KẾ SẴN (CURATED SET MENUS) ─────────────────────── */
.chat-curated-set-card {
  background: #ffffff;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}
.chat-curated-set-header {
  font-size: 13.5px;
  font-weight: 800;
  color: #B45309;
  border-bottom: 1px dashed #FDE68A;
  padding-bottom: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-curated-set-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.chat-curated-set-box:hover {
  border-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.chat-set-badge {
  display: inline-block;
  background: #F59E0B;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.chat-set-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 2px;
}
.chat-set-desc {
  font-size: 11px;
  color: #78350F;
  margin-bottom: 6px;
}
.chat-set-items-list {
  font-size: 11px;
  color: #4B5563;
  margin-bottom: 8px;
  line-height: 1.4;
  padding-left: 14px;
}
.chat-set-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed #FDE68A;
  padding-top: 6px;
}
.chat-set-price {
  font-size: 13.5px;
  font-weight: 800;
  color: #B45309;
}
.chat-set-select-btn {
  background: #16A34A;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-set-select-btn:hover {
  background: #15803D;
  transform: scale(1.04);
}

/* ── ĐIỀU CHỈNH SỐ LƯỢNG MÓN ĂN TRONG GIỎ ([−] Qty [➕]) ─────────────────── */
.chat-food-qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 1px 4px;
}
.chat-food-qty-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 800;
  color: #4B5563;
  cursor: pointer;
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
  transition: color 0.2s ease;
}
.chat-food-qty-btn:hover {
  color: #EA580C;
}
.chat-food-qty-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #111827;
  min-width: 14px;
  text-align: center;
}

/* ── TÙY CHỈNH VỊ TRÍ BÀN & KHUNG GIỜ ĂN (DINING CUSTOMIZER) ────────────── */
.chat-dining-customizer {
  background: #F9FAFB;
  border: 1px dashed #E5E7EB;
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #374151;
}
.chat-dining-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.chat-dining-row:last-child {
  margin-bottom: 0;
}
.chat-dining-select {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #D1D5DB;
  background: #ffffff;
}

/* ── BỘ LỌC KHẨU VỊ & ĐỐI TƯỢNG (DIETARY & TASTE FILTERS) ──────────────── */
.chat-dietary-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}
.chat-dietary-btn {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-dietary-btn:hover,
.chat-dietary-btn.is-active {
  background: #0284C7;
  border-color: #0284C7;
  color: #ffffff;
}

/* ── MÂM CƠM TỰ ĐỘNG THEO SỐ KHÁCH (PAX FEAST GENERATOR) ────────────────── */
.chat-pax-feast-box {
  background: #F0FDF4;
  border: 1.5px solid #22C55E;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}
.chat-pax-feast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #86EFAC;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #15803D;
}
.chat-pax-perk {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: #92400E;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Ô TÌM KIẾM MÓN ĂN THỜI GIAN THỰC (LIVE FOOD SEARCH) ────────────────── */
.chat-food-search-box {
  position: relative;
  margin-bottom: 8px;
}
.chat-food-search-input {
  width: 100%;
  padding: 6px 10px 6px 28px;
  border: 1px solid #FED7AA;
  border-radius: 20px;
  font-size: 11.5px;
  background: #FFF7ED;
  color: #1F2937;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.chat-food-search-input:focus {
  border-color: #EA580C;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}
.chat-food-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #EA580C;
  pointer-events: none;
}

/* ── GHI CHÚ CHẾ BIẾN GỬI BẾP TRƯỞNG (KITCHEN SPECIAL NOTES) ────────────── */
.chat-kitchen-notes {
  background: #FFFBEB;
  border: 1px dashed #FDE68A;
  border-radius: 8px;
  padding: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.chat-kitchen-notes-title {
  font-size: 11px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
}
.chat-kitchen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chat-kitchen-note-tag {
  background: #ffffff;
  border: 1px solid #FCD34D;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10.5px;
  color: #78350F;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-kitchen-note-tag:hover,
.chat-kitchen-note-tag.is-active {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #ffffff;
}

/* ── PHIẾU ĐẶT BÀN ĐIỆN TỬ (E-TABLE TICKET CARD) ───────────────────────── */
.chat-e-table-ticket {
  background: #ffffff;
  border: 2px dashed #EA580C;
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.15);
  position: relative;
}
.chat-e-ticket-code {
  display: inline-block;
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  color: #C2410C;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.chat-e-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #FED7AA;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.chat-e-ticket-body {
  font-size: 11.5px;
  color: #374151;
  line-height: 1.5;
}

/* ── THỜI GIAN CHẾ BIẾN & BẤT NGỜ (PREP TIME & SURPRISE FEAST) ──────────── */
.chat-prep-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 4px;
}
.chat-surprise-btn {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  margin-top: 4px;
}
.chat-surprise-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}

/* ── AI SOMMELIER GHÉP ĐÔI ĐỒ UỐNG (FOOD & DRINK PAIRING) ───────────────── */
.chat-sommelier-card {
  background: #FDF2F8;
  border: 1px solid #FBCFE8;
  border-radius: 8px;
  padding: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #831843;
}
.chat-sommelier-header {
  font-weight: 800;
  color: #BE185D;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── BỘ TÍNH PHÍ CHẾ BIẾN & THẺ BIẾN THỂ MÓN (COOKING FEE & DISH VARIATIONS) ── */
.chat-calc-fee-box {
  background: #FFFBEB;
  border: 1.5px solid #F59E0B;
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}
.chat-calc-fee-header {
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.chat-calc-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: #78350F;
}
.chat-calc-fee-input {
  width: 70px;
  padding: 3px 6px;
  border: 1px solid #FCD34D;
  border-radius: 6px;
  font-size: 11.5px;
  text-align: center;
  font-weight: bold;
}
.chat-dish-variation-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.chat-dish-variation-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #1F2937;
  border-bottom: 1px dashed #E5E7EB;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* ── PHIẾU TẠM TÍNH POS & CHIA TIỀN ĐẦU NGƯỜI (POS RECEIPT & SPLIT BILL) ── */
.chat-pos-receipt {
  background: #ffffff;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  font-family: monospace;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.chat-pos-receipt-header {
  text-align: center;
  border-bottom: 1px dashed #9CA3AF;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.chat-split-bill-tag {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-food-copy-btn {
  background: #F3F4F6;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.chat-food-copy-btn:hover {
  background: #E5E7EB;
  color: #111827;
}

/* ── THƯỚC ĐO CÂN ĐỐI DINH DƯỠNG & NÚT ĐỌC THỰC ĐƠN (MEAL BALANCE & VOICE TTS) ── */
.chat-meal-balance-meter {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: #166534;
}
.chat-meal-balance-title {
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-meal-balance-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.chat-meal-balance-pill {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}
.chat-meal-balance-pill--ok {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}
.chat-meal-balance-pill--missing {
  background: #FEF3C7;
  color: #B45309;
  border: 1px dashed #FCD34D;
}
.chat-voice-read-btn {
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #4338CA;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.chat-voice-read-btn:hover {
  background: #E0E7FF;
  color: #312E81;
}

/* ── FIX BÀI VIẾT: figure WordPress có inline width cố định ── */
/* Trên mobile hình ảnh bài viết co về vừa màn — không tràn ngang */
figure.wp-caption{max-width:100%!important;}
figure.wp-caption img{max-width:100%;height:auto;}

/* ── TRIỆT TIÊU TOÀN BỘ WIDGET VÀ NÚT LIÊN HỆ CỦA WORDPRESS CŨ ── */
#button-contact-vr,
#button-contact-vr *,
#popup-form-contact-vr,
#popup-showroom-vr,
.button-contact,
.phone-vr,
.button-contact-vr,
.gom-all-in-one,
.phone-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ── TRIỆT TIÊU WIDGET CỜ VỠ CỦA GTRANSLATE TRÊN CÁC TRANG CŨ ── */
.gtranslate_wrapper,
.gtranslate_wrapper *,
.gt_switcher,
.glink,
.html_topbar_left .gtranslate_wrapper,
[id^="gt-wrapper-"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ẩn thanh top-bar xanh cũ của Flatsome trên các bài viết tránh chồng lấn với announcement bar */
#header #top-bar.header-top,
.header-top#top-bar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  visibility: hidden !important;
}