/* TravelMate — giấy dó, sơn mài, ngọc.
   Màu và chữ lấy theo bản thiết kế 25/09. */

:root{
  /* Hoa phượng đỏ Hải Phòng: cánh hoa đỏ cam, nền trắng, lá xanh đậm.
     Đỏ là màu thương hiệu nên KHÔNG dùng đỏ làm màu cảnh báo — cảnh báo
     dùng đỏ sẫm, còn tín hiệu "ổn" dùng xanh lá, không thì người dùng
     không phân biệt được nút bấm với lời cảnh báo. */
  --do:#D62A21;          /* cánh phượng */
  --do-dam:#A81C16;      /* nhuỵ, trạng thái hover */
  --do-nhat:#FDECEA;     /* nền phớt hồng cho thẻ */
  --do-rat-nhat:#FEF7F6; /* nền trang */
  --hong-nhat:#F3A79F;   /* chữ phụ trên nền tối */
  --trang:#FFFFFF;
  --muc:#2A1512;         /* nâu đen, ấm hơn đen thuần */
  --muc-nhe:#6E5450;
  --vien:#F0DCD9;
  --la:#2E6B4B;          /* lá phượng — chỉ dùng cho tín hiệu "ổn" */
  --vang:#DFA02E;        /* chỉ dùng cho sao đánh giá */
  --shadow:0 2px 0 rgba(42,21,18,.08);

  /* Tên cũ giữ lại để khỏi phải sửa hàng trăm chỗ trong file này. */
  --paper:var(--trang);
  --paper-alt:var(--do-nhat);
  --ink:var(--muc);
  --ink-soft:var(--muc-nhe);
  --lacquer:var(--do);
  --lacquer-dark:var(--do-dam);
  --line:var(--vien);
  --jade:var(--la);
  --turmeric:var(--vang);
  --indigo:var(--do-dam);
}

*{box-sizing:border-box}
html{background:var(--paper)}
/* body phải TRONG SUỐT: nếu body cũng có màu nền thì lớp nền trang chủ
   (z-index:-1) nằm dưới nó và không bao giờ nhìn thấy. */
body{margin:0;background:transparent;color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;-webkit-text-size-adjust:100%}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--do-nhat);color:var(--muc)}
:focus-visible{outline:2px solid var(--do);outline-offset:2px}

/* ---------------------------------------------------------- thanh trên */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:baseline;gap:8px;flex-shrink:0}
.logo .mark{font-weight:700;font-size:21px;letter-spacing:-.01em}
.logo .mark em{color:var(--lacquer);font-style:normal}
.logo .tag{font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{background:none;border:none;padding:9px 13px;font-size:13.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap;border-radius:100px;transition:.15s}
.tab-btn:hover{background:var(--paper-alt);color:var(--ink)}
.tab-btn.active{background:var(--do);color:#fff}
.nut-tk{flex-shrink:0;border:1px solid var(--do-dam);color:var(--do-dam);background:none;padding:8px 14px;border-radius:100px;font-size:12.5px;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nut-tk.active{background:var(--do-dam);color:#fff}

main{min-height:70vh}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.panel{padding:36px 0 72px}

/* ---------------------------------------------------------- nút */
.btn{border:none;border-radius:100px;padding:12px 22px;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:.15s;text-decoration:none}
.btn-primary{background:var(--lacquer);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--lacquer-dark)}
.btn-primary[disabled]{background:var(--ink-soft);cursor:progress}
.btn-ghost{background:none;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-jade{background:var(--muc);color:#fff}
.btn-jade:hover{background:#40201C}
.btn-sm{padding:8px 14px;font-size:12.5px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px;font-size:11.5px;color:var(--ink-soft);text-decoration:none;display:inline-block}
.icon-btn:hover{background:var(--paper-alt);color:var(--ink)}

/* ---------------------------------------------------------- nền trang chủ
   Hai lớp: vài quầng đỏ mờ như nắng qua tán phượng, và một lớp hoa phượng
   năm cánh lặp lại rất nhạt. Đặt sau nội dung và không bắt sự kiện chuột. */
.nen-trangchu{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--trang)}
.nen-trangchu::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(60vw 44vw at 88% -8%, rgba(214,42,33,.16), transparent 60%),
    radial-gradient(48vw 40vw at 6% 4%,  rgba(223,160,46,.14), transparent 62%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(214,42,33,.10), transparent 60%);
}
.nen-trangchu::after{
  content:'';position:absolute;inset:0;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23D62A21' fill-opacity='.07'%3E%3Cpath d='M40 30c0-7 5-12 10-12s10 5 10 12-5 10-10 10-10-3-10-10z'/%3E%3Cpath d='M60 42c5-5 12-5 15-1s1 11-5 14-12 1-13-4 1-7 3-9z'/%3E%3Cpath d='M52 62c2 7-1 13-6 14s-10-4-10-11 4-11 9-11 6 4 7 8z'/%3E%3Cpath d='M33 55c-6-3-9-9-6-14s10-5 15 0 4 11 0 13-6 2-9 1z'/%3E%3Ccircle cx='47' cy='45' r='3'/%3E%3Cpath d='M130 120c0-6 4-10 8-10s8 4 8 10-4 8-8 8-8-2-8-8z'/%3E%3Cpath d='M146 130c4-4 10-4 12-1s1 9-4 11-10 1-11-3 1-6 3-7z'/%3E%3Cpath d='M140 146c1 6-1 10-5 11s-8-3-8-9 3-9 7-9 5 4 6 7z'/%3E%3Cpath d='M124 141c-5-3-7-8-5-11s8-4 12 0 3 9 0 11-5 1-7 0z'/%3E%3Ccircle cx='136' cy='132' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- hero */
.hero{padding:56px 0 44px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--lacquer);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.hero h1{font-size:44px;line-height:1.18;margin:0 0 16px;font-weight:700;letter-spacing:-.01em}
.hero h1 span{color:var(--do)}
.hero p.lead{font-size:16.5px;color:var(--ink-soft);max-width:480px;line-height:1.55;margin:0 0 26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
.hero-stats div{flex:1;padding-right:14px}
.hero-stats .num{font-size:25px;font-weight:600;color:var(--do)}
.hero-stats .lbl{font-size:11.5px;color:var(--ink-soft);margin-top:2px}

.ticket{background:var(--paper-alt);border:1px solid var(--line);border-radius:10px;padding:22px}
.ticket-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:10px}
.ticket-head .city{font-size:19px;font-weight:600}
.ticket-head .days{font-size:11px;color:var(--ink-soft);text-align:right}
.route-line{position:relative;padding-left:22px;border-left:2px dashed var(--line);margin-left:6px}
.route-item{position:relative;padding-bottom:17px}
.route-item:last-child{padding-bottom:0}
.route-item::before{content:'';position:absolute;left:-29px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--do);border:2px solid var(--trang)}
.route-item .time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--lacquer);font-weight:600}
.route-item .place{font-size:13.5px;font-weight:600;margin:2px 0}
.route-item .cost{font-size:11.5px;color:var(--ink-soft)}

/* ---------------------------------------------------------- tiêu đề mục */
.sec-head{margin-bottom:22px}
.sec-head h2{font-size:28px;margin:0 0 6px;font-weight:600}
.sec-head p{color:var(--ink-soft);font-size:14.5px;margin:0;max-width:640px;line-height:1.55}

/* ---------------------------------------------------------- thẻ tính năng */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.feat-card{background:var(--paper-alt);border:1px solid var(--line);border-radius:10px;padding:20px;cursor:pointer;transition:.15s;text-align:left}
.feat-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.feat-card .ico{font-size:22px;margin-bottom:10px;display:block}
.feat-card h3{font-size:15px;margin:0 0 6px;font-weight:600}
.feat-card p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ---------------------------------------------------------- biểu mẫu */
.form-card{background:var(--paper-alt);border:1px solid var(--line);border-radius:12px;padding:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field>label,.field>legend{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;padding:0}
.field input,.field select,.field textarea{border:1px solid var(--line);background:#fff;border-radius:6px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);width:100%}
.field input:disabled,.field select:disabled{background:var(--paper);color:var(--ink-soft)}
.field small{font-size:11.5px;color:var(--ink-soft)}
fieldset.field{border:none;margin:0;padding:0}
.o-tien{position:relative}
.o-tien input{padding-right:30px;font-family:'IBM Plex Mono',monospace;font-weight:600}
.o-tien .don-vi{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:13px}
.doc-tien{color:var(--do-dam);font-weight:600}
.muc-nhanh{display:flex;gap:6px;flex-wrap:wrap}
.muc-nhanh button{border:1px solid var(--line);background:#fff;border-radius:100px;padding:5px 11px;font-size:11.5px;color:var(--ink-soft)}
.muc-nhanh button.chon{background:var(--do);border-color:var(--do);color:#fff;font-weight:600}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:100px;padding:7px 13px;font-size:12.5px;font-weight:500;color:var(--ink-soft);user-select:none}
.chip.on{background:var(--do);border-color:var(--do);color:#fff}

/* ---------------------------------------------------------- ô mật khẩu */
.o-mat-khau{position:relative}
.o-mat-khau input{padding-right:42px}
.nut-mat{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:15px;line-height:1;padding:6px 8px;border-radius:6px;opacity:.65}
.nut-mat:hover{opacity:1;background:var(--do-nhat)}
.canh-bao-caps{color:var(--do-dam);font-weight:600}
.o-tick{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muc);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
.o-tick input{width:auto;accent-color:var(--do);margin:0}

/* ---------------------------------------------------------- màn hình cần đăng nhập */
.khoa-man{display:flex;justify-content:center;padding:32px 0 60px}
.khoa-hop{max-width:560px;width:100%;background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:32px 30px;text-align:center;box-shadow:0 4px 20px rgba(214,42,33,.06)}
.khoa-icon{font-size:34px;margin-bottom:10px}
.khoa-hop .eyebrow{margin-bottom:8px}
.khoa-hop h2{font-size:24px;margin:0 0 10px;font-weight:600}
.khoa-hop>p{color:var(--muc-nhe);font-size:14.5px;line-height:1.6;margin:0 0 20px}
.khoa-ds{list-style:none;padding:0;margin:0 0 24px;text-align:left;display:inline-block}
.khoa-ds li{font-size:13.5px;color:var(--muc);padding:6px 0 6px 26px;position:relative;line-height:1.5}
.khoa-ds li::before{content:'✓';position:absolute;left:0;color:var(--la);font-weight:700}
.khoa-chu{font-size:12.5px;color:var(--muc-nhe);margin:18px 0 0}
.lien-ket{background:none;border:none;padding:0;color:var(--do-dam);font-weight:600;text-decoration:underline;font-size:inherit}
.tab-btn.khoa{opacity:.6}
.tab-btn .o-khoa{font-size:9.5px;margin-left:4px;vertical-align:middle}
@media (max-width:560px){.khoa-hop{padding:26px 20px}.khoa-hop h2{font-size:20px}}

/* ---------------------------------------------------------- đăng nhập Google */
.nut-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:1px solid var(--vien);background:var(--trang);border-radius:100px;padding:11px 16px;
  font-size:14px;font-weight:600;color:var(--muc);text-decoration:none;transition:.15s}
.nut-google:hover{border-color:var(--muc-nhe);background:var(--do-rat-nhat)}
.nut-google svg{flex-shrink:0}
.hoac{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muc-nhe);font-size:12px}
.hoac::before,.hoac::after{content:'';flex:1;height:1px;background:var(--vien)}
.the-google{display:inline-block;font-size:11px;font-weight:600;color:var(--la);
  border:1px solid var(--la);border-radius:100px;padding:1px 9px;margin-left:4px;vertical-align:middle}

/* ---------------------------------------------------------- thông báo */
.loi-box{background:#FCE4E2;border:1px solid var(--do-dam);border-left:4px solid var(--do-dam);color:var(--do-dam);border-radius:8px;padding:12px 14px;font-size:13.5px;margin-top:14px}
.canhbao-box{background:#fdf3e0;border:1px solid var(--turmeric);border-radius:8px;padding:12px 14px;font-size:13.5px;margin-bottom:18px}
.trong{text-align:center;color:var(--ink-soft);padding:44px 20px;border:1px dashed var(--line);border-radius:10px;font-size:14px}
.dangtai{text-align:center;padding:48px 20px}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--lacquer);border-radius:50%;margin:0 auto 14px;animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* ---------------------------------------------------------- lịch trình */
.itin-summary{display:flex;gap:14px;margin:26px 0;flex-wrap:wrap}
.itin-summary .box{flex:1;min-width:150px;background:var(--trang);border:1px solid var(--vien);border-left:4px solid var(--do);border-radius:10px;padding:16px 18px}
.itin-summary .box.over{background:var(--do-dam);border-color:var(--do-dam);color:#fff}
.itin-summary .box .n{font-size:21px;font-weight:600;color:var(--do-dam)}
.itin-summary .box .l{font-size:11px;color:var(--muc-nhe);margin-top:3px;line-height:1.4}
.itin-summary .box.over .n,.itin-summary .box.over .l{color:#fff}
.day-block{margin-bottom:22px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.day-head{background:var(--do);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.day-head .d{font-weight:600;font-size:15px}
.day-head .cost{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--hong-nhat)}
.day-head a{font-size:11.5px;color:var(--paper);border:1px solid rgba(255,255,255,.35);border-radius:100px;padding:5px 11px;text-decoration:none}
.day-head a:hover{background:rgba(255,255,255,.15)}
.day-body{padding:6px 22px 16px;background:#fff}
.tom-lo-trinh{font-size:11.5px;color:var(--ink-soft);padding:12px 0 4px;border-bottom:1px dashed var(--line);margin:0 0 6px;line-height:1.9}
.tom-lo-trinh i{color:var(--do);font-style:normal;margin:0 6px}

.lo-trinh{list-style:none;margin:0;padding:0}
.diem{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line)}
.diem:last-child{border-bottom:none}
.so-chang{width:28px;height:28px;border-radius:50%;background:var(--do);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-top:2px}
.the-diem{min-width:0}
.dong-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.gio{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--lacquer);font-weight:600}
.bua{font-size:10px;padding:2px 8px;border-radius:100px;background:var(--paper-alt);color:var(--ink-soft);font-weight:600}
/* Nhãn bữa ăn: giữ trong dải ấm cho hợp tông đỏ, phân biệt nhau bằng
   cả nền lẫn màu chữ chứ không chỉ bằng nền — nền nhạt quá thì khó phân biệt. */
.bua-sang{background:#FDF3D9;color:#8A6410}
.bua-cafe{background:#EFE4DC;color:#6B4A33}
.bua-trua{background:#FDE7E3;color:#A8322A}
.bua-xe{background:#FCEADB;color:#9A5A1C}
.bua-ngot{background:#FBE0EB;color:#9C2A55}
.bua-toi{background:#F6DCD8;color:#8C241C}
.bua-dem{background:#E7E0E4;color:#4A3B44}
.bua-choi{background:#E2EFE6;color:#2E6B4B}
.bua.bosung{background:none;border:1px dashed var(--line)}
.the-diem h4{font-size:15.5px;margin:0 0 4px;font-weight:600}
.anh{border-radius:8px;overflow:hidden;margin:8px 0;border:1px solid var(--line)}
.anh img{width:100%;height:170px;object-fit:cover}
.danhgia{font-size:12.5px;color:var(--ink-soft);margin:0 0 6px}
.danhgia .sao{color:var(--turmeric);letter-spacing:1px}
.danhgia b{color:var(--ink)}
.danhgia.chua a{color:var(--do-dam)}
.mon{font-size:13px;margin:4px 0}
.lydo{font-size:13.5px;color:var(--ink-soft);margin:6px 0;line-height:1.55}
.review{margin:8px 0;padding:9px 13px;background:var(--do-rat-nhat);border-left:3px solid var(--do);border-radius:0 6px 6px 0;font-size:12.5px;color:var(--ink-soft);font-style:italic}
.review cite{display:block;font-style:normal;font-size:10.5px;opacity:.75;margin-top:4px}
.thongtin{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0 0;font-size:12.5px}
.thongtin dt{color:var(--ink-soft);font-weight:600}
.thongtin dd{margin:0}
.thongtin .mo{color:var(--ink-soft);font-size:11px}
.hanhdong{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.nut-nho{font-size:11.5px;padding:6px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);text-decoration:none}
.nut-nho:hover{border-color:var(--ink);color:var(--ink)}
.nut-nho.chinh{background:var(--do);border-color:var(--do);color:#fff}
.nut-nho.chinh:hover{background:var(--do-dam);color:#fff}

.kythuat{margin:18px 0;border:1px solid var(--line);border-radius:10px;background:var(--paper-alt);padding:12px 18px;font-size:13px}
.kythuat summary{cursor:pointer;font-weight:600}
.kythuat dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:12px 0 4px;font-size:12.5px}
.kythuat dt{color:var(--ink-soft)}
.kythuat dd{margin:0;font-family:'IBM Plex Mono',monospace}

/* ---------------------------------------------------------- lưới thẻ quán */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filter-row select,.filter-row input{border:1px solid var(--line);background:#fff;border-radius:100px;padding:8px 14px;font-size:12.5px;font-family:inherit;color:var(--ink)}
.filter-row input{min-width:210px}
.dem-kq{font-size:12.5px;color:var(--ink-soft);margin-left:auto}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{background:var(--trang);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.pcard .swatch{height:84px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--paper-alt)}
.pcard .swatch img{width:100%;height:100%;object-fit:cover}
.pcard .body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.pcard .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.pcard h3{font-size:14.5px;margin:0;font-weight:600}
.pcard .stars{font-size:11.5px;color:var(--turmeric);white-space:nowrap}
.pcard .meta{font-size:11.5px;color:var(--ink-soft);margin-bottom:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tags span{font-size:10px;padding:2px 8px;border-radius:100px;background:var(--paper-alt);color:var(--ink-soft)}
.pcard .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
.pcard .price{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12.5px}

/* ---------------------------------------------------------- danh mục địa điểm */
.danh-muc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.danh-muc .chip{cursor:pointer;transition:.15s}
.danh-muc .chip:hover{border-color:var(--do);color:var(--do-dam)}
.danh-muc .chip.on:hover{color:#fff}
.danh-muc .chip .dem{opacity:.6;font-size:11px;margin-left:2px}
.danh-muc .chip.on .dem{opacity:.8}

/* ---------------------------------------------------------- vị trí */
.nut-vitri{border:1px solid var(--vien);background:var(--trang);border-radius:100px;padding:8px 14px;font-size:12.5px;color:var(--muc-nhe);white-space:nowrap}
/* Biến thể chiếm trọn chiều ngang, dùng ở cột hẹp của trợ lý AI. Ở đó câu
   "Cho mình biết bạn đang ở đâu" dài hơn cột, mà nowrap thì chữ tràn ra
   ngoài khung. Cho xuống dòng và bo góc nhẹ lại cho hợp nút rộng. */
.nut-vitri.rong{display:block;width:100%;margin-bottom:12px;white-space:normal;text-align:center;line-height:1.35;border-radius:12px;padding:10px 14px}
.nut-vitri:hover{border-color:var(--do);color:var(--do-dam)}
.nut-vitri.on{background:var(--do);border-color:var(--do);color:#fff}
.nut-vitri[disabled]{opacity:.6;cursor:progress}
.chu-vitri{font-size:12px;color:var(--muc-nhe);margin:-10px 0 18px;line-height:1.55}
.chu-vitri.canhbao{color:var(--do-dam)}
.pcard .meta .xa{color:var(--do-dam);font-weight:600}
.quan-nho .xa{color:var(--do-dam);font-weight:600}

/* ---------------------------------------------------------- chuyến đi */
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trip-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.trip-cover{height:74px;display:flex;align-items:flex-end;padding:12px 16px;color:#fff;font-size:16px;font-weight:600;background:var(--do)}
.trip-body{padding:14px 16px}
.trip-meta{font-size:12px;color:var(--ink-soft);margin-bottom:12px;line-height:1.6}
.trip-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------------------------------------------------- chuyến đã lưu */
.trip-card{cursor:pointer;transition:.15s}
.trip-card:hover{border-color:var(--do);transform:translateY(-2px);box-shadow:0 4px 14px rgba(214,42,33,.12)}
.trip-card:focus-visible{outline:2px solid var(--do);outline-offset:2px}
.trip-card .icon-btn.chinh{background:var(--do);border-color:var(--do);color:#fff;font-weight:600}
.luu-y{font-size:13.5px;color:var(--muc-nhe);line-height:1.6;margin:0 0 18px}
.da-ghe-nhan{font-size:11.5px;color:var(--la);font-weight:600;margin-bottom:10px}

/* tiến độ đã ghé */
.tien-do{background:var(--do-nhat);border:1px solid var(--vien);border-radius:12px;padding:16px 18px;margin-bottom:22px}
.tien-do-chu{font-size:14px;margin-bottom:4px}
.tien-do-chu b{font-size:18px;color:var(--do-dam)}
.tien-do .icon-btn{margin-top:10px}

/* ô tích trên từng điểm dừng */
.nut-ghe{border:2px solid var(--do);background:var(--trang);color:var(--do);font-weight:700;font-size:13px;padding:0;transition:.15s}
.nut-ghe:hover{background:var(--do-nhat)}
.nut-ghe.xong{background:var(--la);border-color:var(--la);color:#fff}
.diem.da-ghe .the-diem h4{text-decoration:line-through;text-decoration-color:var(--la);opacity:.75}
.diem.da-ghe{opacity:.8}

/* ---------------------------------------------------------- ngân sách */
.budget-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.budget-row{display:grid;grid-template-columns:110px 1fr 96px;gap:14px;align-items:center;margin-bottom:16px}
.budget-row label{font-size:13px;font-weight:600}
.budget-row input[type=range]{width:100%;accent-color:var(--do)}
.budget-row .val{font-family:'IBM Plex Mono',monospace;font-size:12.5px;text-align:right}
.receipt{background:var(--trang);border:1px solid var(--line);position:relative;padding:22px 20px 62px;font-family:'IBM Plex Mono',monospace;font-size:12.5px}
.receipt h4{font-family:'Be Vietnam Pro',sans-serif;font-size:15px;text-align:center;margin:0 0 4px}
.receipt .sub{text-align:center;font-size:10.5px;color:var(--ink-soft);margin-bottom:14px}
.receipt .rline{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--line)}
.receipt .rline.total{border-top:2px solid var(--ink);border-bottom:none;margin-top:6px;padding-top:8px;font-weight:700}
.receipt .stamp{position:absolute;left:20px;bottom:14px;border:3px solid;padding:5px 9px;border-radius:6px;font-weight:700;font-size:12.5px;transform:rotate(-7deg)}
.stamp.ok{color:var(--jade);border-color:var(--jade)}
.stamp.warn{color:var(--lacquer);border-color:var(--lacquer)}
.bar-outer{height:10px;background:var(--paper-alt);border-radius:100px;overflow:hidden;margin:10px 0 4px}
.bar-inner{height:100%;background:var(--jade);border-radius:100px}
.bar-inner.over{background:var(--lacquer)}

/* ---------------------------------------------------------- kiểm tra giá */
.pc-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.pc-ket-qua{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.pc-ket-qua .muc{font-size:26px;font-weight:700;margin:0 0 6px}
.pc-ket-qua .muc.re{color:var(--jade)}
.pc-ket-qua .muc.vua{color:var(--ink)}
.pc-ket-qua .muc.dat{color:var(--lacquer)}
.pc-ket-qua p{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.55}
.thang-gia{position:relative;height:8px;background:var(--paper-alt);border-radius:100px;margin:22px 0 40px}
.thang-gia .vung{position:absolute;top:0;bottom:0;background:var(--jade);opacity:.35;border-radius:100px}
.thang-gia .kim{position:absolute;top:-6px;width:3px;height:20px;background:var(--lacquer);border-radius:2px}
.thang-gia .nhan{position:absolute;top:22px;font-size:10.5px;color:var(--ink-soft);transform:translateX(-50%);white-space:nowrap}

/* ---------------------------------------------------------- tài khoản */
.tk-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
.tk-doi{display:flex;gap:6px;margin-bottom:18px}
.tk-doi button{flex:1;border:1px solid var(--line);background:#fff;border-radius:100px;padding:9px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.tk-doi button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tk-info{background:var(--paper-alt);border:1px solid var(--line);border-radius:10px;padding:20px;font-size:13px;line-height:1.6}
.tk-info h3{margin:0 0 10px;font-size:15px}
.tk-info code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px;word-break:break-all}

/* ---------------------------------------------------------- trợ lý AI */
.chat-shell{display:grid;grid-template-columns:230px 1fr;gap:20px;height:min(620px,72vh)}
.chat-quick{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--paper-alt);overflow-y:auto}
.chat-quick h4{font-size:11.5px;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;letter-spacing:.04em}
.q-chip{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12.5px;margin-bottom:8px;line-height:1.4;color:var(--ink)}
.q-chip:hover{border-color:var(--do)}
.chat-main{border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;background:#fff;min-width:0}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:78%;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.55}
.msg.ai{background:var(--paper-alt);align-self:flex-start;border-bottom-left-radius:3px}
.msg.nguoi{background:var(--do);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg.dang{color:var(--ink-soft);font-style:italic}
.msg-quan{align-self:flex-start;max-width:78%;display:flex;flex-direction:column;gap:8px}
.quan-nho{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--paper);font-size:12.5px}
.quan-nho b{font-size:13px}
.quan-nho .d{color:var(--ink-soft);margin:2px 0 6px;line-height:1.5}
.chat-nguon{align-self:flex-start;font-size:10.5px;color:var(--ink-soft);margin-top:-6px}
.chat-goiy{display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start;max-width:85%}
.chat-goiy button{border:1px solid var(--line);background:#fff;border-radius:100px;padding:5px 11px;font-size:11.5px;color:var(--ink-soft)}
.chat-goiy button:hover{border-color:var(--do);color:var(--ink)}
.chat-input{display:flex;border-top:1px solid var(--line);padding:10px;gap:8px}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;font-family:inherit;color:var(--ink);min-width:0}
.chat-input input:focus{outline:2px solid var(--do);outline-offset:-1px}
.chat-input button{background:var(--do);color:#fff;border:none;border-radius:8px;padding:0 18px;font-size:13px;font-weight:600;flex-shrink:0}
.chat-input button[disabled]{background:var(--ink-soft);cursor:progress}

/* ---------------------------------------------------------- cài đặt tài khoản */
.cai-dat{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1000px}
.the-cd{background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:20px}
.the-cd h3{margin:0 0 4px;font-size:15.5px;font-weight:600}
.the-cd .mo-ta{font-size:12.5px;color:var(--muc-nhe);margin:0 0 14px;line-height:1.55}
.the-cd .form-grid{grid-template-columns:1fr;gap:12px;margin-bottom:14px}
@media (max-width:880px){.cai-dat{grid-template-columns:1fr}}

/* ---------------------------------------------------------- chuyển tab
   Chỉ chạy khi ĐỔI TAB. Màn hình được vẽ lại sau mỗi lần gõ phím hay kéo
   thanh trượt, nếu cho chạy hiệu ứng mọi lần thì gõ một chữ là cả trang nháy. */
@keyframes hien-tab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel.doi-tab{animation:hien-tab .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes hien-the{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel.doi-tab .feat-card,
.panel.doi-tab .pcard,
.panel.doi-tab .trip-card,
.panel.doi-tab .day-block,
.panel.doi-tab .the-cd{animation:hien-the .34s cubic-bezier(.22,.61,.36,1) both}
.panel.doi-tab .feat-card:nth-child(n+2),
.panel.doi-tab .pcard:nth-child(n+2),
.panel.doi-tab .the-cd:nth-child(n+2){animation-delay:.04s}
.panel.doi-tab .feat-card:nth-child(n+4),
.panel.doi-tab .pcard:nth-child(n+4),
.panel.doi-tab .the-cd:nth-child(n+4){animation-delay:.08s}
.panel.doi-tab .feat-card:nth-child(n+7),
.panel.doi-tab .pcard:nth-child(n+7){animation-delay:.12s}
.tab-btn{transition:background .18s,color .18s}

/* Ai bật "giảm chuyển động" trong hệ điều hành thì tắt hết, đừng làm họ chóng mặt. */
@media (prefers-reduced-motion:reduce){
  .panel.doi-tab,.panel.doi-tab *{animation:none !important}
}

/* ---------------------------------------------------------- toast, chân trang */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:100px;font-size:13px;z-index:200;transition:.25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{border-top:1px solid var(--line);margin-top:20px}
footer p{max-width:1180px;margin:0 auto;padding:22px 20px;font-size:12px;color:var(--ink-soft);line-height:1.6}

/* Dưới 1150px thì bỏ dòng chữ nhỏ cạnh logo, nhường chỗ cho 7 tab. */
@media (max-width:1150px){
  .logo .tag{display:none}
}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:36px;gap:32px}
  .hero h1{font-size:33px}
  .feat-grid,.card-grid,.trip-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .budget-grid,.pc-grid,.tk-grid{grid-template-columns:1fr}
  .chat-shell{grid-template-columns:1fr;height:auto}
  .chat-quick{order:2}
  .chat-log{min-height:380px}
  .topbar-inner{flex-wrap:wrap;gap:10px}
  .tabs{order:3;width:100%;flex:none}
  .dem-kq{margin-left:0;width:100%}
}
@media (max-width:560px){
  .logo .tag{display:none}
  .feat-grid,.card-grid,.trip-grid{grid-template-columns:1fr}
  .hero h1{font-size:27px}
  .day-body{padding:6px 14px 14px}
  .budget-row{grid-template-columns:90px 1fr;row-gap:4px}
  .budget-row .val{grid-column:2;text-align:left}
}

/* Nhắc khi số tiền gõ vào lớn bất thường. Không chặn gõ, chỉ đổi màu chữ. */
.doc-tien.qua-tay,
#goiY.qua-tay { color: var(--do-dam); font-weight: 600; }

/* quán đã ăn (30/09) */
.o-da-an{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;border:1px solid var(--line);border-radius:100px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;user-select:none;transition:.15s}
.o-da-an:hover{border-color:var(--la)}
.o-da-an input{width:16px;height:16px;margin:0;accent-color:var(--la);cursor:pointer}
.o-da-an.on{background:#E8F2EC;border-color:var(--la);color:var(--la);font-weight:600}
.hoi-an-lai{margin-top:20px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--la);border-radius:10px;background:var(--do-rat-nhat)}
.hoi-an-lai h3{margin:0 0 6px;font-size:16px}
.hoi-an-lai p{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.hoi-an-lai .chip{cursor:pointer}
.hoi-an-lai .chip.on{background:var(--la);border-color:var(--la)}

/* ============================================== đánh giá và bình luận (07/10) */

.pcard.co-the-bam{cursor:pointer;transition:border-color .15s,transform .1s}
.pcard.co-the-bam:hover{border-color:var(--do)}
.pcard.co-the-bam:active{transform:scale(.995)}
.pcard.co-the-bam:focus-visible{outline:2px solid var(--do);outline-offset:2px}
/* Sao do khách TravelMate chấm dùng màu khác sao Google, để nhìn là biết
   đang đọc điểm của ai mà không cần rê chuột xem chú thích. */
.stars.tm{color:var(--do-dam)}

/* ---- trang chi tiết */
.ct-quan{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;margin-bottom:28px}
.ct-anh{border-radius:14px;overflow:hidden;background:var(--do-nhat);aspect-ratio:16/9}
.ct-anh img{width:100%;height:100%;object-fit:cover;display:block}
.ct-anh.khong-anh{display:grid;place-items:center;font-size:54px}
.ct-than{min-width:0}
.ct-than h2{margin:0 0 6px;font-size:25px}
.ct-than .meta{color:var(--muc-nhe);font-size:13.5px;margin:0 0 4px}
.ct-mon{margin:12px 0 6px}
/* Thẻ ở trang chi tiết đọc ở cỡ bình thường, không nhỏ như trên thẻ quán. */
.ct-than .tags{margin:12px 0 0}
.ct-than .tags span{font-size:12px;padding:4px 10px}
.ct-nut{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}

/* ---- hai dòng điểm, cố ý tách nguồn */
.hai-dong-diem{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.dong-diem{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;
  border:1px solid var(--vien);font-size:13px;min-width:0}
.dong-diem b{font-size:17px;font-variant-numeric:tabular-nums}
.dong-diem span{color:var(--muc-nhe)}
.dong-diem.tm{background:var(--do-nhat);border-color:transparent}
.dong-diem.tm b{color:var(--do-dam)}
.dong-diem.chua{background:transparent;border-style:dashed}

/* ---- dãy sao bấm được */
.chon-sao{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.chon-sao legend{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muc-nhe);margin-bottom:6px;padding:0}
.chon-sao label{cursor:pointer;font-size:30px;line-height:1;color:var(--vien);
  transition:color .12s;padding:0 1px}
.chon-sao input{position:absolute;opacity:0;width:0;height:0}
.chon-sao .doc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Tô vàng từ sao 1 tới sao đang trỏ, tức là tô sang TRÁI của con trỏ.
   Sao trong HTML xếp xuôi 1→5, nên "label:hover ~ label" tô nhầm sang phải:
   rê vào sao 3 thì sáng 3, 4, 5 thay vì 1, 2, 3. Chọn ngược sibling bằng
   :has(~ label:hover) — khớp đúng những sao có sao đang-rê đứng sau nó. */
.chon-sao:has(input:checked) label{color:var(--vang)}
.chon-sao label:has(input:checked) ~ label{color:var(--vien)}
/* Đang rê thì xem trước đè lên lựa chọn cũ. Bọc trong :has(label:hover) để
   mấy dòng này đủ nặng, không bị dòng "sau sao đã chọn thì xám" ở trên đè lại
   khi rê lên sao nằm bên phải sao đang chọn. */
.chon-sao:has(label:hover) label{color:var(--vien)}
.chon-sao:has(label:hover) label:hover,
.chon-sao:has(label:hover) label:has(~ label:hover){color:var(--vang)}
.chon-sao label:focus-within{outline:2px solid var(--do);outline-offset:2px;border-radius:4px}

/* ---- ô viết nhận xét */
.form-dg{background:var(--do-nhat);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.form-dg textarea{width:100%;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:14px;background:var(--trang);color:var(--muc);resize:vertical}
.form-dg textarea:focus{outline:2px solid var(--do);outline-offset:1px;border-color:transparent}
.nhan-o{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muc-nhe);margin-bottom:6px}
.nhan-o span{text-transform:none;letter-spacing:0}
.form-dg-chan{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.dem-chu{font-size:12px;color:var(--muc-nhe);font-variant-numeric:tabular-nums}

/* ---- danh sách bình luận */
.khu-danhgia h3{margin:0 0 14px;font-size:19px}
.ds-bl{list-style:none;padding:0;margin:0}
.bl{padding:14px 0;border-bottom:1px solid var(--vien)}
.bl:last-child{border-bottom:0}
.bl.cua-toi{background:var(--do-nhat);border-radius:12px;padding:14px 16px;border-bottom:0;margin-bottom:8px}
.bl-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:5px}
.bl-dau b{font-size:14.5px}
.bl-sao{color:var(--vang);font-size:13px;letter-spacing:1px}
.bl-luc{color:var(--muc-nhe);font-size:12px;margin-left:auto}
.nhan-toi{font-size:11px;background:var(--do);color:#fff;border-radius:999px;padding:1px 8px}
.bl p{margin:0;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}
.bl .khong-chu{color:var(--muc-nhe);font-style:italic;font-size:13.5px}
.bl-chan{margin-top:7px}
.lien-ket{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--muc-nhe);cursor:pointer;text-decoration:underline}
.lien-ket:hover{color:var(--do-dam)}

@media (max-width:760px){
  .ct-quan{grid-template-columns:1fr;gap:16px}
  .bl-luc{margin-left:0;width:100%}
}