/* ============================================================
   Á CHÂU HOTEL — CSS NỀN (tokens + header + footer + thành phần dùng chung)
   File: wp-content/themes/thammyvientsnhan/assets/css/ach-base.css
   Tiền tố: .ach-   ·   Biến: --ach-*
   Nạp qua wp_enqueue_style + filemtime() → sửa file là trình duyệt tự lấy bản mới.
   KHÔNG sửa CSS của Flatsome. Mọi selector đều bắt đầu bằng .ach-
   ============================================================ */

/* ---------- 1. TOKENS — đổi màu toàn site thì sửa ở đây ---------- */
:root{
  /* Màu thương hiệu (giữ đúng bộ màu ksachau.azpos.vn đang dùng) */
  --ach-gold:        #E2A608;   /* vàng thương hiệu: tiêu đề, viền, logo */
  --ach-gold-dk:     #A9760A;   /* vàng đậm: chữ trên nền sáng, hover */
  --ach-gold-soft:   #F5E6BC;   /* vàng nhạt: chữ phụ trên nền tối */
  --ach-cta:         #ED6600;   /* cam: nút chính, giá tiền */
  --ach-cta-dk:      #C25200;
  --ach-teal:        #34A8A4;   /* xanh ngọc: dùng rất ít */

  /* Nền + chữ */
  --ach-ink:         #23252A;
  --ach-muted:       #6E6A63;
  --ach-line:        #E7E1D6;
  --ach-paper:       #FFFFFF;
  --ach-paper-2:     #FAF7F0;   /* dải section xen kẽ */
  --ach-slate:       #2E343A;   /* nền tối: topbar, footer, dải tiện nghi */
  --ach-slate-2:     #232A2F;
  --ach-slate-3:     #1B2126;

  /* Bóng đổ */
  --ach-shadow:      0 1px 3px rgba(35,37,42,.10);
  --ach-shadow-up:   0 10px 26px rgba(35,37,42,.14);

  /* Kích thước */
  --ach-header-h:    88px;      /* chiều cao header — mục menu cao đúng bằng đây */
  --ach-art-col:     100%;      /* bề rộng cột đọc trang bài viết (§15) — chiếm trọn .ach-wrap */

  /* Font */
  --ach-f-head: "Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --ach-f-body: "Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
  --ach-f-disp: "Playfair Display",Georgia,"Times New Roman",serif;
}

/* ---------- 2. PHẠM VI ÁP DỤNG ----------
   QUAN TRỌNG: từ 2026-09-05 header + topbar dùng cho TOÀN BỘ site (qua header.php),
   nên phần reset dưới đây CHỈ được phép chạm vào khối của mình
   (.ach-topbar / .ach-header / .ach-footer) và trang chủ (body.ach-home-page).
   TUYỆT ĐỐI không đặt reset lên `body.ach-page` — class đó nay có ở mọi trang,
   đặt lên đó là đổi luôn phông chữ/màu của trang cửa hàng, giỏ hàng, bài viết…
   box-sizing đã được flatsome.css đặt toàn cục nên không khai lại.
   ------------------------------------------------------------------ */
body.ach-home-page{
  margin:0; background:var(--ach-paper); color:var(--ach-ink);
  font:400 15px/1.75 var(--ach-f-body); -webkit-font-smoothing:antialiased;
}
.ach-topbar,.ach-header,.ach-footer{font-family:var(--ach-f-body);font-size:15px;line-height:1.75}
.ach-topbar img,.ach-header img,.ach-footer img,.ach-home-page img{display:block;max-width:100%}
.ach-topbar a,.ach-header a,.ach-footer a,.ach-home-page a{color:inherit;text-decoration:none}
.ach-topbar ul,.ach-header ul,.ach-footer ul,.ach-home-page ul{margin:0;padding:0;list-style:none}
.ach-topbar li,.ach-header li,.ach-footer li{margin:0}
.ach-topbar h1,.ach-topbar h2,.ach-topbar h3,.ach-topbar h4,
.ach-header h1,.ach-header h2,.ach-header h3,.ach-header h4,
.ach-footer h1,.ach-footer h2,.ach-footer h3,.ach-footer h4,
.ach-home-page h1,.ach-home-page h2,.ach-home-page h3,.ach-home-page h4{
  margin:0;font-family:var(--ach-f-head);text-wrap:balance}
.ach-topbar p,.ach-header p,.ach-footer p,.ach-home-page .ach-sec p{margin:0}
.ach-page :focus-visible{outline:2px solid var(--ach-cta);outline-offset:2px}
/* Nền trang trắng.
   Flatsome in ra `.absolute-footer, html --- background-color: #ff6600` vì tuỳ chọn
   `footer_bottom_color` đang là cam (xem flatsome/inc/functions/function-custom-css.php dòng 535).
   CSS đó nội tuyến, NẰM SAU file này, nên `html` cùng độ ưu tiên (0,0,1) sẽ thua.
   Dùng `html:root` (0,1,1) để thắng — không cần !important, không phải đổi cấu hình site
   (đổi `footer_bottom_color` sẽ làm trắng luôn thanh chân trang Flatsome ở các trang khác). */
html:root{background:#fff}

.ach-wrap{width:min(1200px,calc(100% - 32px));margin-inline:auto}

/* ---------- 3. TOPBAR ---------- */
.ach-topbar{background:var(--ach-slate);color:#D7D1C7;font-size:13px}
.ach-topbar .ach-wrap{display:flex;align-items:center;gap:18px;min-height:44px;flex-wrap:wrap}
.ach-hello{display:flex;align-items:center;gap:8px}
.ach-hello svg{width:15px;height:15px;fill:var(--ach-gold);flex:none}
.ach-toplinks{display:flex;align-items:center;gap:12px;margin-left:auto}
.ach-toplinks a{color:#D7D1C7;transition:color .2s}
.ach-toplinks a:hover{color:var(--ach-gold)}
.ach-toplinks .ach-sep{color:#5B626A}
.ach-toplinks .ach-ic{display:inline-flex;align-items:center;gap:6px}
.ach-toplinks .ach-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
/* Giỏ hàng trên topbar (chỉ hiện khi có WooCommerce) */
.ach-topbar .ach-cart{position:relative}
.ach-topbar .ach-cart-n{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--ach-cta);color:#fff;font:700 11px/18px var(--ach-f-body);text-align:center}

/* Nút "Đặt phòng ngay" — vàng ánh kim, rê chuột chuyển sang cam
   Phải viết `.ach-topbar .ach-btn-top` chứ không phải `.ach-btn-top`:
   luật `.ach-toplinks a{color:#D7D1C7}` (0,1,1) đè mất màu chữ của nút. */
.ach-topbar .ach-btn-top{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,#F2BA24 0%,#E2A608 52%,#C08B05 100%);
  color:#1E1608;
  font:700 12px/1 var(--ach-f-head);letter-spacing:.11em;text-transform:uppercase;
  padding:12px 20px;border-radius:3px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.42);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .18s ease;
}
.ach-topbar .ach-btn-top svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ach-topbar .ach-btn-top:hover,.ach-topbar .ach-btn-top:focus-visible{
  background:linear-gradient(180deg,#FF8524 0%,#ED6600 52%,#C25200 100%);
  color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(237,102,0,.45), inset 0 1px 0 rgba(255,255,255,.30);
}
.ach-topbar .ach-btn-top:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 2px 5px rgba(0,0,0,.22);
}

/* ---------- 4. HEADER + MENU ----------
   LƯU Ý ĐỘ ƯU TIÊN: flatsome.css có luật `ul.menu > li > a { padding:6px 0; flex:1 1 0% }`
   (độ ưu tiên 0,1,3) đè lên menu của mình. Vì vậy mọi luật menu dưới đây đều bắt đầu bằng
   `.ach-page` để có độ ưu tiên cao hơn. ĐỪNG bỏ tiền tố đó — bỏ là menu vỡ khoảng cách.
   flatsome.js còn tự chèn thêm <button class="toggle"> vào mục có menu con lúc chạy
   → phải ẩn đi, nếu không sẽ thấy HAI mũi tên.
   ------------------------------------------------------------------ */
.ach-header{position:sticky;top:0;z-index:50;background:var(--ach-paper);
  border-bottom:1px solid var(--ach-line);box-shadow:var(--ach-shadow)}
.ach-header .ach-wrap{display:flex;align-items:center;gap:24px;min-height:var(--ach-header-h);position:relative}
.ach-logo{flex:none;display:flex;align-items:center}
.ach-logo img{width:168px;height:auto}
.ach-logo .ach-logo-text{font:700 22px/1 var(--ach-f-head);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ach-gold-dk)}

.ach-nav{margin-left:auto}

/* Gỡ mặc định của Flatsome */
.ach-page .ach-nav ul{margin:0;padding:0;list-style:none}
.ach-page .ach-nav li{margin:0;padding:0;position:relative;list-style:none}
.ach-page .ach-nav button.toggle,
.ach-page .ach-nav .toggle{display:none !important}   /* mũi tên thừa do flatsome.js chèn */

.ach-page .ach-nav > ul{display:flex;align-items:stretch;gap:0}
.ach-page .ach-nav > ul > li{display:block}   /* Flatsome đặt ul.menu>li thành display flex */

/* Mục cấp 1 */
.ach-page .ach-nav > ul > li > a{
  display:flex;align-items:center;flex:none;
  height:var(--ach-header-h);padding:0 15px;
  font:700 14px/1 var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ach-ink);white-space:nowrap;position:relative;transition:color .22s ease;
}
.ach-page .ach-nav > ul > li:hover > a,
.ach-page .ach-nav > ul > li.current-menu-item > a,
.ach-page .ach-nav > ul > li.current-menu-parent > a,
.ach-page .ach-nav > ul > li.current-menu-ancestor > a{color:var(--ach-gold-dk)}

/* Gạch chân vàng mọc từ giữa ra */
.ach-page .ach-nav > ul > li > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:29px;height:2px;
  background:var(--ach-gold);transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.ach-page .ach-nav > ul > li:hover > a::after,
.ach-page .ach-nav > ul > li.current-menu-item > a::after,
.ach-page .ach-nav > ul > li.current-menu-parent > a::after,
.ach-page .ach-nav > ul > li.current-menu-ancestor > a::after{transform:scaleX(1)}

/* Mũi tên DUY NHẤT cho mục có menu con */
.ach-page .ach-nav > ul > li.menu-item-has-children > a{padding-right:31px}
.ach-page .ach-nav > ul > li.menu-item-has-children > a::before{
  content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.5;
  transition:transform .25s ease,opacity .25s ease;
}
.ach-page .ach-nav > ul > li.menu-item-has-children:hover > a::before{
  transform:translateY(-25%) rotate(225deg);opacity:1;
}

/* Menu con
   BẮT BUỘC khai `display:block`: Flatsome đặt menu con thành display:none.
   Luật của mình tuy ưu tiên cao hơn nhưng nếu KHÔNG khai display thì không đè được
   → dropdown im lìm khi rê chuột. Đây chính là lỗi đã gặp 2026-09-05. */
.ach-page .ach-nav .sub-menu{
  display:block;
  position:absolute;left:0;top:100%;min-width:238px;
  background:var(--ach-paper);border:1px solid var(--ach-line);border-top:3px solid var(--ach-gold);
  box-shadow:0 14px 34px rgba(35,37,42,.16);
  margin:0;padding:8px 0;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.ach-page .ach-nav > ul > li:hover > .sub-menu,
.ach-page .ach-nav > ul > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ach-page .ach-nav .sub-menu a{
  display:block;padding:10px 20px;
  font:400 14px/1.45 var(--ach-f-body);letter-spacing:0;text-transform:none;
  color:#4A4640;border-left:2px solid transparent;
  transition:background .2s ease,color .2s ease,padding-left .2s ease,border-color .2s ease;
}
.ach-page .ach-nav .sub-menu a::after,
.ach-page .ach-nav .sub-menu a::before{display:none}
.ach-page .ach-nav .sub-menu a:hover{
  background:var(--ach-paper-2);color:var(--ach-gold-dk);
  border-left-color:var(--ach-gold);padding-left:25px;
}

/* Nút hamburger */
.ach-burger{display:none;margin-left:auto;background:none;border:1px solid var(--ach-line);
  width:46px;height:42px;border-radius:2px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.ach-burger:hover{border-color:var(--ach-gold)}
.ach-burger span{display:block;width:20px;height:2px;background:var(--ach-ink);position:relative}
.ach-burger span::before,.ach-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ach-ink)}
.ach-burger span::before{top:-6px}
.ach-burger span::after{top:6px}

/* ---------- 5. TIÊU ĐỀ SECTION (gạch đôi đặc trưng của mẫu) ---------- */
.ach-sec{padding:clamp(46px,5.6vw,74px) 0}
.ach-sec-alt{background:var(--ach-paper-2)}
.ach-sec-title{text-align:center;margin-bottom:38px}
.ach-sec-title .ach-eyebrow{display:block;font-family:var(--ach-f-disp);font-style:italic;
  font-size:16px;color:var(--ach-gold-dk);margin-bottom:6px}
.ach-sec-title h2{display:inline-block;position:relative;font-size:clamp(23px,2.7vw,31px);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:14px}
.ach-sec-title h2::after{content:"";position:absolute;left:0;right:0;bottom:0;margin:0 auto;
  width:76px;height:3px;border-bottom:3px double var(--ach-gold)}
.ach-sec-note{text-align:center;color:var(--ach-muted);font-size:13px;margin-top:24px;font-style:italic}

/* ---------- 6. NÚT ---------- */
.ach-btn{display:inline-block;font:700 12.5px/1 var(--ach-f-head);letter-spacing:.1em;
  text-transform:uppercase;padding:14px 24px;border-radius:2px;transition:.25s;
  border:1px solid transparent;cursor:pointer}
.ach-btn-solid{background:var(--ach-cta);border-color:var(--ach-cta);color:#fff}
.ach-btn-solid:hover{background:var(--ach-cta-dk);border-color:var(--ach-cta-dk);color:#fff}
.ach-btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.ach-btn-ghost:hover{background:var(--ach-gold);border-color:var(--ach-gold);color:#1B2126}
.ach-more{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font:700 12.5px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ach-gold-dk)}
.ach-more::after{content:"";width:34px;height:1px;background:var(--ach-gold);transition:width .25s}
.ach-more:hover::after{width:52px}

/* ---------- 7. THẺ PHÒNG (dùng lại ở nhiều trang) ---------- */
/* Lưới phòng dùng flex chứ không grid: số phòng lấy động từ WooCommerce có thể lẻ
   (5 phòng đơn), flex + justify-content:center cho hàng cuối tự căn giữa, không bị mồ côi. */
.ach-grid-4{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.ach-grid-3{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.ach-grid-4 > *{flex:0 1 calc(25% - 18px);min-width:0}
.ach-grid-3 > *{flex:0 1 calc(33.333% - 16px);min-width:0}
/* Bấm chỗ nào trên thẻ cũng vào trang phòng (anh Vinh yêu cầu 2026-09-06).
   Dùng kiểu "link phủ": link sẵn có ở tên phòng nở ra che kín thẻ.
   ⚠ KHÔNG bọc cả thẻ bằng một thẻ a: bên trong đã có nút Đặt phòng cũng là thẻ a,
   lồng a trong a là HTML sai và trình duyệt sẽ tự tách ra, vỡ luôn nút.
   Hàng giá + nút được nâng lên z-index 2 nên vẫn bấm thêm-vào-giỏ như thường. */
.ach-room{position:relative;background:var(--ach-paper);box-shadow:var(--ach-shadow);
  display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.ach-room-name a::after{content:"";position:absolute;inset:0;z-index:1}
.ach-room:hover{box-shadow:var(--ach-shadow-up);transform:translateY(-3px)}
.ach-room-img{position:relative;overflow:hidden;aspect-ratio:7/5;background:var(--ach-paper-2)}
.ach-room-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ach-room:hover .ach-room-img img{transform:scale(1.08)}   /* đúng bản demo anh Vinh đã duyệt */

/* Nhãn góc ảnh — kiểu "ngôi sao 8 cánh" của mẫu:
   1 ô vuông + 2 ô vuông xoay 30° và 60° nằm dưới, bo góc 4px. */
.ach-badge{position:absolute;top:12px;right:12px;z-index:3;
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 4px;
  background:var(--ach-cta);color:#fff;border-radius:4px;
  font:700 11px/1 var(--ach-f-head);letter-spacing:.04em}
.ach-badge::before,.ach-badge::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ach-cta);border-radius:4px}
.ach-badge::before{transform:rotate(30deg)}
.ach-badge::after{transform:rotate(60deg)}
/* Bản demo KHÔNG ẩn nhãn khi rê chuột → bỏ luật ẩn nhãn (2026-09-05). */
.ach-room-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.ach-room-name{font-size:17px;font-weight:700;margin-bottom:12px}
.ach-room-name a:hover{color:var(--ach-gold-dk)}
.ach-amen{display:flex;gap:11px;margin-bottom:14px}
.ach-amen svg{width:23px;height:23px;stroke:var(--ach-gold-dk);fill:none;stroke-width:1.5}
.ach-meta{border-top:3px double var(--ach-line);padding-top:11px;display:flex;gap:18px;
  color:var(--ach-muted);font-size:13px;margin-bottom:16px}
.ach-meta span{display:inline-flex;align-items:center;gap:6px}
.ach-meta svg{width:15px;height:15px;stroke:var(--ach-muted);fill:none;stroke-width:1.6}
/* Gạch đôi ngăn cách nằm ngay trên hàng giá. Trước đây nó ở viền trên của
   .ach-meta, nhưng dải đó nay thường không in ra nữa (không còn bịa số khách),
   nên chuyển xuống đây để thẻ phòng vẫn có đường ngăn. Khi .ach-meta CÓ xuất
   hiện thì tắt viền ở đây, tránh vẽ hai đường. */
.ach-room-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;border-top:3px double var(--ach-line);padding-top:13px}
.ach-meta + .ach-room-foot{border-top:0;padding-top:0}
.ach-price{color:var(--ach-cta);font:700 20px/1 var(--ach-f-head)}
.ach-price small{font:400 12.5px/1 var(--ach-f-body);color:var(--ach-muted)}
/* CHỈ nâng cái nút lên trên lớp link phủ, đừng nâng cả hàng chân thẻ:
   nâng cả hàng thì vùng GIÁ TIỀN cũng nằm trên lớp phủ mà bản thân nó không phải
   liên kết, bấm vào không đi đâu cả. Nâng riêng nút thì giá vẫn rơi xuống lớp phủ
   và dẫn sang trang phòng, còn nút giữ nguyên việc thêm vào giỏ. */
.ach-btn-book{position:relative;z-index:2;
  background:var(--ach-cta);border:1px solid var(--ach-cta);color:#fff;
  font:700 11.5px/1 var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  padding:11px 13px;border-radius:2px;transition:.25s;white-space:nowrap}
.ach-btn-book:hover{background:var(--ach-paper);color:var(--ach-cta)}

/* ---------- 8. FOOTER ---------- */
.ach-footer{background:var(--ach-slate);color:#C6C0B6;font-size:14px}
.ach-foot-top{border-bottom:1px solid rgba(255,255,255,.09);padding:34px 0}
.ach-foot-top .ach-wrap{display:grid;grid-template-columns:1.1fr 1.3fr 1.8fr 1.1fr;gap:32px;align-items:start}
.ach-fcol h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ach-gold);margin-bottom:11px}
.ach-fbig{font:700 22px/1.2 var(--ach-f-head);color:#fff}
.ach-fbig-sm{font-size:17px}
.ach-fbig a:hover{color:var(--ach-gold)}

/* --- 8b. FORM "ĐẶT PHÒNG NHANH" (Contact Form 7) ---
   Thay cho .ach-subform cũ. Form cũ có onsubmit="return false" nên bấm Đăng ký
   KHÔNG gửi đi đâu cả — nó chưa bao giờ hoạt động.

   ⚠ CF7 in ra markup CỐ ĐỊNH, PHP không đổi được: mỗi ô bị bọc trong
     span.wpcf7-form-control-wrap (span này CF7 đặt position:relative và để inline).

   ⚠ ĐỪNG nhắm #wpcf7-f1472-p<số>-o1: phần p<số> là ID trang chứa form, mà form này
     nằm ở chân trang nên MỖI TRANG một id khác nhau. Chỉ nhắm .ach-fbook.

   ⚠ ĐỪNG thêm class "form-flat" hay "dark" vào khối này: post 180 có luật cho
     .form-flat input ép bo góc 5px và ép color về currentColor kèm !important — phá sạch.

   ĐỘ ƯU TIÊN — vì sao mọi luật đều mở đầu bằng .ach-footer:
     · post 180 (in NỘI TUYẾN sau file này) ép bo góc 5px lên mọi thẻ
       input type text/tel/email/number/url và textarea — độ ưu tiên (0,1,1)
     · custom-css của Flatsome tô nền nút bằng --primary-color qua
       input type submit kèm :not(.is-form) — độ ưu tiên (0,2,1)
     Nằm sau nên hoà là chúng thắng → phải hơn hẳn. .ach-footer .ach-fbook input[…] = (0,3,1).
     Không cần !important vì hai luật trên đều KHÔNG có !important. */
.ach-fbook{max-width:380px}
.ach-fbook-sub{margin:-4px 0 12px;font-size:13px;line-height:1.55;color:#9A938A}
.ach-fbook-fallback{margin:0;font-size:14px}
.ach-fbook-fallback a{color:var(--ach-gold);font-weight:700}

/* Bỏ lề mặc định + dọn <p>/<br> do autop của CF7 sinh ra.
   (inc/cf7-ach.php đã tắt autop cho riêng form này; hai luật dưới là lớp phòng hờ
   phòng khi không đọc được form hiện tại — xem ghi chú trong file đó.) */
.ach-fbook .wpcf7{margin:0}
.ach-fbook .wpcf7-form{margin:0}
.ach-fbook .wpcf7-form p{margin:0}
.ach-fbook .wpcf7-form br{display:none}

/* span bọc ô nhập: CF7 để inline → không ép block thì 2 ô nằm chung một hàng */
.ach-fbook .wpcf7-form-control-wrap{display:block;margin-bottom:9px}

/* Ô nhập — nền sáng mờ trên nền tối, giữ đúng dáng .ach-subform cũ.
   Phải khai đủ background + color + border + box-shadow: Flatsome đặt
   box-shadow inset và bo góc lên thẻ input trần. Cao 44px cho vừa ngón tay. */
.ach-footer .ach-fbook input[type="text"],
.ach-footer .ach-fbook input[type="tel"]{
  display:block;width:100%;box-sizing:border-box;height:44px;margin:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:0;box-shadow:none;
  color:#fff;font:400 14px/1 var(--ach-f-body);padding:0 14px;
  transition:border-color .2s ease,background .2s ease}
.ach-fbook input::placeholder{color:#8E877C;opacity:1}
.ach-footer .ach-fbook input[type="text"]:focus,
.ach-footer .ach-fbook input[type="tel"]:focus{
  outline:none;border-color:var(--ach-gold);background:rgba(255,255,255,.11);
  box-shadow:0 0 0 2px rgba(226,166,8,.22)}

/* Nút gửi. CF7 in ra <input type="submit">, KHÔNG phải <button>,
   nên không gắn được icon bằng ::before. */
.ach-footer .ach-fbook input[type="submit"]{
  display:block;width:100%;height:44px;margin:0;
  background:var(--ach-gold);border:1px solid var(--ach-gold);border-radius:0;box-shadow:none;
  color:#1B2126;font:700 12.5px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:.25s;-webkit-appearance:none;appearance:none}
.ach-footer .ach-fbook input[type="submit"]:hover{
  background:var(--ach-cta);border-color:var(--ach-cta);color:#fff}
.ach-footer .ach-fbook input[type="submit"]:disabled{opacity:.6;cursor:not-allowed}

/* Vòng xoay lúc đang gửi — mặc định CF7 để margin:0 24px, đẩy lệch hẳn bố cục */
.ach-fbook .wpcf7-spinner{margin:0 0 0 10px;vertical-align:middle}

/* Ô mồi chặn bot (inc/cf7-ach.php).
   ⚠ CỐ Ý không dùng display:none — bot đọc DOM phải vẫn thấy ô và vẫn điền,
     điền là bị chặn. display:none thì bot bỏ qua, bẫy mất tác dụng. */
.ach-fbook .ach-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Dòng thông báo sau khi gửi. CF7 mặc định viền xanh 2px #00a0d2 + margin 2em 0.5em 1em,
   trên nền tối trông như báo lỗi → viết lại toàn bộ. */
.ach-fbook .wpcf7-response-output{
  margin:11px 0 0;padding:9px 12px;border:0;border-left:3px solid var(--ach-gold);
  background:rgba(255,255,255,.06);color:#E4DFD6;font-size:13px;line-height:1.5}
.ach-fbook form.sent .wpcf7-response-output{border-left-color:#4FB06A;color:#CFEAD6}
.ach-fbook form.failed .wpcf7-response-output,
.ach-fbook form.aborted .wpcf7-response-output{border-left-color:#E0574B;color:#F3CFCB}
.ach-fbook form.invalid .wpcf7-response-output,
.ach-fbook form.unaccepted .wpcf7-response-output,
.ach-fbook form.spam .wpcf7-response-output{border-left-color:var(--ach-cta);color:#F5DCC6}

/* Lỗi từng ô */
.ach-fbook .wpcf7-not-valid-tip{display:block;margin-top:5px;color:#F0A9A1;font-size:12.5px;line-height:1.4}
.ach-footer .ach-fbook input.wpcf7-not-valid{border-color:#E0574B}

/* Cuộn từ nút "Đặt phòng ngay" xuống thì chừa chỗ cho header dính ở trên */
#dat-phong-nhanh{scroll-margin-top:calc(var(--ach-header-h) + 20px)}
.ach-socials{display:flex;gap:9px}
.ach-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;transition:.25s}
.ach-socials a:hover{background:var(--ach-gold);border-color:var(--ach-gold);color:#1B2126}
.ach-socials svg{width:17px;height:17px;fill:currentColor}

.ach-foot-contact{background:var(--ach-slate-2);padding:30px 0}
.ach-contact-head{text-align:center;margin-bottom:22px}
.ach-contact-head span{display:inline-flex;align-items:center;gap:10px;
  font:700 14px/1 var(--ach-f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--ach-gold)}
.ach-contact-head svg{width:19px;height:19px;stroke:var(--ach-gold);fill:none;stroke-width:1.5}
.ach-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ach-cbox{display:flex;gap:14px;align-items:flex-start}
.ach-cbox .ach-cic{flex:none;width:42px;height:42px;border:1px solid rgba(226,166,8,.45);
  display:grid;place-items:center}
.ach-cbox svg{width:19px;height:19px;stroke:var(--ach-gold);fill:none;stroke-width:1.5}
.ach-cbox h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ach-gold-soft);margin-bottom:3px}
.ach-cbox p{color:#D5CFC5;font-size:14px;line-height:1.6}

.ach-foot-mid{background:var(--ach-slate-3);padding:44px 0 36px}
.ach-foot-mid .ach-wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:34px}
.ach-foot-mid h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.ach-flogo{width:172px;margin-bottom:16px}
.ach-foot-mid p{font-size:13.5px;color:#9E988D;line-height:1.8}
.ach-fmenu li + li{margin-top:9px}
.ach-fmenu a{font-size:13.5px;color:#B5AFA4;transition:color .2s;display:inline-flex;gap:8px}
.ach-fmenu a::before{content:"\203A";color:var(--ach-gold)}
.ach-fmenu a:hover{color:var(--ach-gold)}
.ach-pay{display:flex;gap:8px;flex-wrap:wrap}
.ach-pay span{border:1px solid rgba(255,255,255,.18);padding:8px 11px;font-size:11.5px;
  letter-spacing:.06em;color:#B5AFA4;border-radius:2px}
.ach-copy{background:#141A1E;padding:16px 0;text-align:center;font-size:12.5px;color:#7E7871}

/* ---------- 9. NÚT NỔI ---------- */
.ach-float-hot{position:fixed;left:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:10px;
  background:var(--ach-slate);border:1px solid var(--ach-gold);padding:8px 16px 8px 8px;
  border-radius:40px;box-shadow:var(--ach-shadow-up)}
.ach-float-hot .ach-ring{width:38px;height:38px;border-radius:50%;background:var(--ach-gold);
  display:grid;place-items:center;flex:none}
.ach-float-hot svg{width:19px;height:19px;stroke:#1B2126;fill:none;stroke-width:1.8}
.ach-float-hot .ach-t{line-height:1.2}
.ach-float-hot .ach-t small{display:block;color:#A9A398;font-size:11px}
.ach-float-hot .ach-t b{color:#fff;font:700 15px/1.2 var(--ach-f-head);letter-spacing:.03em}
/* Nút về đầu trang.
   Flatsome đặt cho thẻ button: padding 0 16.3px, line-height 32.6px, min-height 33.95px
   — lòng trong chỉ còn ~11px nên mũi tên bị đẩy lệch sang phải. Phải khử cả ba.
   Khoá thêm min-width/min-height và dùng flex để kích thước không phụ thuộc luật ngoài. */
.ach-totop{position:fixed;right:16px;bottom:88px;z-index:40;
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0;line-height:0;
  background:var(--ach-slate);border:1px solid var(--ach-gold);color:var(--ach-gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;opacity:0;pointer-events:none;
  transition:opacity .3s ease,background-color .3s ease,color .3s ease}
.ach-totop.ach-on{opacity:1;pointer-events:auto}
.ach-totop:hover{background:var(--ach-gold);color:#1B2126}
.ach-totop svg{width:17px;height:17px;flex:none;display:block;position:static;stroke:currentColor;fill:none;stroke-width:2}
/* Ẩn nút "lên đầu trang" trên điện thoại.
   Màn hình hẹp đã có nút gọi nổi ở góc trái dưới và bong bóng chat Tawk.to ở góc
   phải dưới — thêm nút này là ba thứ chen nhau che mất nội dung. Trên điện thoại
   khách cũng có sẵn cách lên đầu trang nhanh (chạm thanh trạng thái trên iPhone,
   vuốt nhanh trên Android) nên bỏ đi không mất gì.
   JS trong ach-menu.js vẫn chạy nhưng không hại: nó chỉ gắn/gỡ class ach-on.
   HOÀN TÁC: xoá đúng luật dưới đây. */
@media (max-width:767px){
  .ach-totop{display:none}
}

/* ---------- 10. RESPONSIVE ---------- */
/* Màn hình vừa: bóp khoảng cách menu lại cho vừa một hàng */
@media (max-width:1240px) and (min-width:1025px){
  .ach-page .ach-nav > ul > li > a{padding:0 11px;font-size:13px;letter-spacing:.05em}
  .ach-page .ach-nav > ul > li > a::after{left:11px;right:11px}
  .ach-page .ach-nav > ul > li.menu-item-has-children > a{padding-right:26px}
  .ach-page .ach-nav > ul > li.menu-item-has-children > a::before{right:11px}
  .ach-logo img{width:146px}
  .ach-header .ach-wrap{gap:14px}
}

@media (max-width:1024px){
  :root{--ach-header-h:76px}
  .ach-grid-4 > *{flex-basis:calc(50% - 12px)}
  .ach-foot-top .ach-wrap{grid-template-columns:1fr 1fr;gap:26px}
  .ach-foot-mid .ach-wrap{grid-template-columns:1fr 1fr}

  .ach-burger{display:flex}
  /* Drawer trượt từ trái như mẫu: 300px, translateX(-100%) → 0, .5s cubic-bezier */
  .ach-page .ach-nav{
    display:block;position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;z-index:70;
    background:var(--ach-paper);box-shadow:0 0 40px rgba(20,24,28,.28);
    transform:translateX(-100%);transition:transform .5s cubic-bezier(.645,.045,.355,1);
    overflow-y:auto;overscroll-behavior:contain;padding:14px 0;margin-left:0;
  }
  .ach-page .ach-nav.ach-open{transform:translateX(0)}
  .ach-page .ach-nav > ul{flex-direction:column;align-items:stretch}
  .ach-page .ach-nav > ul > li > a{
    height:auto;padding:14px 22px;border-bottom:1px solid var(--ach-line);font-size:14px}
  .ach-page .ach-nav > ul > li > a::after{display:none}
  .ach-page .ach-nav > ul > li.menu-item-has-children > a::before{right:24px;opacity:.45}
  .ach-page .ach-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    border:0;box-shadow:none;background:var(--ach-paper-2);padding:4px 0}
  .ach-page .ach-nav .sub-menu a{padding:11px 22px 11px 40px;border-left:0}
  .ach-page .ach-nav .sub-menu a:hover{padding-left:40px;background:transparent}
}
@media (max-width:820px){
  .ach-grid-3 > *{flex-basis:calc(50% - 12px)}
  .ach-contact-grid{grid-template-columns:1fr}
}
/* Topbar trên điện thoại: KHÔNG cho xuống dòng, nếu không số điện thoại
   sẽ vỡ 2 dòng và nút "Đặt phòng ngay" phình thành khối 3 dòng. */
@media (max-width:640px){
  .ach-topbar .ach-wrap{flex-wrap:nowrap;gap:10px;min-height:42px}
  .ach-hello{display:none}
  .ach-toplinks{margin-left:0;width:100%;justify-content:space-between;gap:9px}
  .ach-toplinks .ach-sep{display:none}
  .ach-toplinks a{white-space:nowrap;font-size:12.5px}
  .ach-topbar .ach-btn-top{padding:9px 13px;font-size:11px;letter-spacing:.06em;gap:5px;white-space:nowrap}
  .ach-topbar .ach-btn-top svg{width:12px;height:12px}
}
@media (max-width:400px){
  .ach-toplinks .ach-lienhe{display:none}          /* quá chật thì bỏ chữ "Liên hệ" */
  .ach-topbar .ach-btn-top{padding:9px 10px;letter-spacing:.04em}
  .ach-toplinks a{font-size:12px}
}

@media (max-width:560px){
  .ach-grid-4 > *,.ach-grid-3 > *{flex-basis:100%}
  .ach-foot-top .ach-wrap,.ach-foot-mid .ach-wrap{grid-template-columns:1fr}
  .ach-float-hot .ach-t{display:none}
  .ach-float-hot{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .ach-page *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   11. HIỆU ỨNG DỰNG LẠI THEO MẪU BEAN HOTEL
   Nguồn: phan-tich-giao-dien/01-mau-trang-chu.md — mục 4 "DANH MỤC HIỆU ỨNG"
   và 09-mau-js-tuong-tac.md — mục 3.
   ============================================================ */

/* --- (1) RÈM TRẮNG ĐÔI — ĐÃ GỠ (anh Vinh yêu cầu 2026-09-05) ---
   Mẫu Bean Hotel có 2 tấm màn rgba(255,255,255,.5) quét ngang + quét dọc qua ảnh khi rê chuột.
   Anh Vinh thấy loá nên bỏ hẳn. ĐỪNG thêm lại nếu không có yêu cầu mới.
   Vẫn giữ .ach-ph vì đó là khung bọc/cắt ảnh của VIP thẻ nhỏ, Khám phá và Giới thiệu. */
.ach-ph{position:relative;overflow:hidden}

/* --- (4) NÚT TRÒN "NỞ" — ĐÃ GỠ (anh Vinh yêu cầu 2026-09-05) ---
   Mẫu có nút tròn hiện ra giữa ảnh khi rê chuột; anh thấy không cần con mắt nên bỏ. */

/* --- (11) LAZYLOAD: ảnh mờ .2 rồi hiện dần khi tải xong --- */
/* --- (11) ẢNH MỜ RỒI HIỆN DẦN — ĐÃ GỠ 2026-09-05 ---
   Mẫu Bean Hotel làm ảnh mờ 20% rồi hiện dần khi tải xong, và bản dựng cũ làm theo.
   Nhưng cách đó ĐẶT ẢNH Ở ĐỘ MỜ 20% BẰNG CSS rồi chờ JavaScript gán class để hiện:
   JS hỏng / chặn / chạy chậm là toàn bộ ảnh mờ tịt. Bản demo anh Vinh duyệt cũng
   KHÔNG có hiệu ứng này. Đã bỏ hẳn — ảnh luôn hiện rõ, không phụ thuộc JS.
   Đừng thêm lại kiểu "CSS làm mờ, JS làm hiện". */

/* --- (14) DRAWER MENU MOBILE: trượt từ trái, 300px, .5s cubic-bezier --- */
/* Lớp phủ khi mở menu điện thoại. HAI giá trị dưới đây đều có lý do, đừng đổi bừa:
   z-index 45 — PHẢI thấp hơn .ach-header (50). Header là position sticky kèm z-index
     nên nó tạo ngữ cảnh xếp lớp riêng: con số z-index 70 của .ach-nav bên trong chỉ có
     giá trị TRONG header, ra ngoài chỉ còn 50. Để lớp phủ 65 thì nó đè lên cả header,
     nuốt hết cú chạm và menu bấm không được (lỗi anh Vinh báo 2026-09-06).
   background trong suốt — anh Vinh muốn màn hình sáng bình thường, không tối đi.
   Vẫn giữ lớp phủ chứ không xoá: nó lo việc chạm ra ngoài là đóng menu. */
.ach-nav-backdrop{position:fixed;inset:0;z-index:45;background:transparent;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.ach-nav-backdrop.ach-on{opacity:1;visibility:visible}
body.ach-nav-locked{overflow:hidden}

/* --- (16) CUỘN NGANG THẺ ≤767px + (15) ACCORDION CHÂN TRANG --- */
@media (max-width:767px){
  /* XẾP 2 CỘT, KHÔNG cuộn ngang.
     Mẫu Bean Hotel dùng băng chuyền cuộn ngang ở đây (mục 16), nhưng trên site thật
     khung chỉ 343px mà mỗi thẻ 274px nên khách chỉ thấy ĐÚNG MỘT thẻ, lại không có
     dấu hiệu nào báo còn thẻ phía sau — anh Vinh báo khó dùng ngày 2026-09-06.
     Đây là chỗ đi lệch mẫu CÓ CHỦ Ý, đừng khôi phục lại cuộn ngang.
     Dùng đúng cách trang danh mục đang làm (.ach-cat-grid §14) cho nhất quán. */
  .ach-grid-4,.ach-grid-3{
    display:flex;flex-wrap:wrap;overflow:visible;gap:16px;padding-bottom:0}
  .ach-grid-4 > *,.ach-grid-3 > *{flex:0 1 calc(50% - 8px);min-width:0}

  /* Lòng thẻ ở 2 cột hẹp — dùng lại đúng bộ giá trị của .ach-cat-grid §14 */
  .ach-grid-4 .ach-room-body,.ach-grid-3 .ach-room-body{padding:14px 14px 16px}
  .ach-grid-4 .ach-room-name,.ach-grid-3 .ach-room-name{font-size:15px}
  .ach-grid-4 .ach-price,.ach-grid-3 .ach-price{font-size:17px}
  .ach-grid-4 .ach-room-foot,.ach-grid-3 .ach-room-foot{
    flex-direction:column;align-items:stretch;gap:9px}
  .ach-grid-4 .ach-btn-book,.ach-grid-3 .ach-btn-book{text-align:center}

  .ach-foot-mid h3{position:relative;cursor:pointer;margin-bottom:0;padding-right:30px;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .ach-foot-mid h3::before,.ach-foot-mid h3::after{content:"";position:absolute;right:4px;
    background:var(--ach-gold);transition:transform .25s ease}
  .ach-foot-mid h3::before{top:50%;width:13px;height:2px;margin-top:-6px}
  .ach-foot-mid h3::after{top:50%;right:9px;width:2px;height:13px;margin-top:-11px}
  .ach-foot-mid h3.ach-open::after{transform:scaleY(0)}
  .ach-foot-mid .ach-fmenu,.ach-foot-mid .ach-pay{display:none;padding-top:14px}
  .ach-foot-mid h3.ach-open + .ach-fmenu{display:block}
  .ach-foot-mid h3.ach-open + .ach-pay{display:flex}
}
/* KHÔNG thêm mốc 1 cột cho máy hẹp: trang danh mục (.ach-cat-grid §14) giữ 2 cột
   xuống mọi bề rộng và anh Vinh đã duyệt. Ba trang dùng chung thẻ phòng thì phải
   trông giống nhau, nếu không cùng một thẻ lại hiện hai kiểu ở cùng một cỡ máy. */

/* ============================================================
   12. TRANG CHI TIẾT PHÒNG  (single-product.php)
   ------------------------------------------------------------
   ĐỘ ƯU TIÊN — đọc trước khi sửa:
   Custom CSS cũ (post 180, 27 KB) in NỘI TUYẾN trong head, NẰM SAU file này.
   Cùng độ ưu tiên thì nó thắng. Vì vậy mọi luật đè lên markup của WooCommerce
   đều phải mở đầu bằng "body.ach-product-page" để cộng thêm một class.

   KHÔNG gắn reset rộng vào "body.ach-product-page" (kiểu a, ul, p) — trang này
   dùng chung markup với WooCommerce, reset rộng sẽ phá form, tab, thông báo giỏ.
   Chỉ đặt phông chữ ở body; mọi reset khác bọc trong khối .ach-pd của mình.
   ============================================================ */
body.ach-product-page{font-family:var(--ach-f-body);color:var(--ach-ink)}
body.ach-product-page .ach-pd img{display:block;max-width:100%}
body.ach-product-page .ach-pd h1,
body.ach-product-page .ach-pd h2,
body.ach-product-page .ach-pd h3{margin:0;font-family:var(--ach-f-head);text-wrap:balance}

/* --- Đường dẫn phân cấp --- */
.ach-pd-crumb{background:var(--ach-paper-2);border-bottom:1px solid var(--ach-line)}
.ach-pd-crumb .ach-wrap{padding:15px 0;font-size:14px;line-height:24px;color:var(--ach-muted)}
.ach-pd-crumb a{color:var(--ach-muted);text-decoration:none;transition:color .2s ease}
.ach-pd-crumb a:hover{color:var(--ach-gold-dk)}
.ach-pd-crumb .ach-sep{padding:0 8px;color:#C9C2B6}
.ach-pd-crumb strong{color:var(--ach-gold-dk);font-weight:500}

/* --- Bộ ảnh phòng --- */
.ach-pd-gal{position:relative;margin-top:22px;border-radius:10px;overflow:hidden;
  background:var(--ach-slate-3);box-shadow:var(--ach-shadow)}
.ach-pd-slides{position:relative;aspect-ratio:16/9}
.ach-pd-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.ach-pd-slide.ach-on{opacity:1}
.ach-pd-slide img{width:100%;height:100%;object-fit:cover}
.ach-pd-nav{position:absolute;z-index:3;top:50%;margin-top:-22px;
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0;line-height:0;
  background:rgba(20,24,28,.42);border:1px solid rgba(255,255,255,.34);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:0;
  transition:left .25s ease,right .25s ease,opacity .25s ease,background-color .25s ease}
.ach-pd-nav:hover{background:var(--ach-gold);border-color:var(--ach-gold);color:#1B2126}
.ach-pd-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none;display:block}
.ach-pd-prev{left:-56px}
.ach-pd-next{right:-56px}
.ach-pd-gal:hover .ach-pd-prev,.ach-pd-gal:focus-within .ach-pd-prev{left:16px;opacity:1}
.ach-pd-gal:hover .ach-pd-next,.ach-pd-gal:focus-within .ach-pd-next{right:16px;opacity:1}
.ach-pd-dots{position:absolute;z-index:3;left:0;right:0;bottom:14px;
  display:flex;justify-content:center;gap:6px}
.ach-pd-dots button{width:18px;height:3px;box-sizing:content-box;padding:9px 5px;border:0;cursor:pointer;
  min-height:0;line-height:0;background:rgba(255,255,255,.5);background-clip:content-box;
  transition:width .25s ease,background-color .25s ease}
.ach-pd-dots button[aria-current="true"]{width:28px;background:var(--ach-gold);background-clip:content-box}

/* --- Hàng 8/4 --- */
.ach-pd-main{display:grid;grid-template-columns:8fr 4fr;gap:28px;padding:26px 0 8px;align-items:start}

/* Tên phòng — phải thắng luật cũ h1.product-title.entry-title cỡ chữ 18px */
body.ach-product-page h1.ach-pd-title,
body.ach-product-page h1.product-title{font-size:clamp(22px,2.4vw,28px);line-height:1.25;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin:0 0 18px;
  font-family:var(--ach-f-head);color:var(--ach-ink)}

/* Mô-típ nhận diện của mẫu: nhãn vàng nhô lên + hộp viền vàng bo góc */
.ach-panel{margin-bottom:22px}
.ach-panel-tab{display:inline-block;margin-left:12px;height:40px;padding:0 18px;
  font:700 14px/40px var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  color:#1E1608;background:var(--ach-gold);border-radius:10px 10px 0 0}
a.ach-panel-tab{text-decoration:none;transition:background-color .25s ease,color .25s ease}
a.ach-panel-tab:hover{background:var(--ach-gold-dk);color:#fff}
.ach-panel-box{border:1px solid var(--ach-gold);border-radius:10px;padding:18px 20px;background:#fff}
.ach-panel-box p{margin:0 0 10px;color:#4E4A44}
.ach-panel-box p:last-child{margin-bottom:0}
.ach-panel-box ul{margin:10px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.ach-panel-box ul li{position:relative;padding-left:26px;font-size:14.5px;color:#4E4A44}
.ach-panel-box ul li::before{content:"";position:absolute;left:2px;top:9px;width:12px;height:7px;
  border-left:2px solid var(--ach-gold);border-bottom:2px solid var(--ach-gold);transform:rotate(-45deg)}
/* Mô tả ngắn do người nhập gõ tay trong WP Admin nên chữ nghiêng rải rác không đều:
   có mục bọc em hoặc i, mục cuối lại không. Bỏ nghiêng cho cả danh sách đọc đều nhau. */
.ach-panel-box ul li em,
.ach-panel-box ul li i{font-style:normal}

/* --- Hộp giá + form thêm vào giỏ --- */
.ach-pd-buy{background:var(--ach-paper-2);border:1px solid var(--ach-line);border-radius:10px;
  padding:20px;position:sticky;top:16px}
.ach-pd-price{font:700 30px/1 var(--ach-f-head);color:var(--ach-cta);
  padding-bottom:14px;border-bottom:2px solid var(--ach-gold);margin-bottom:16px}
.ach-pd-price small{font:400 14px/1 var(--ach-f-body);color:var(--ach-muted)}
.ach-pd-note{font-size:13px;color:var(--ach-muted);padding-top:14px;
  border-top:1px solid var(--ach-line);margin-top:16px}
.ach-pd-hot{display:flex;align-items:center;gap:10px;margin-top:12px;text-decoration:none}
.ach-pd-hot .ach-ring{width:38px;height:38px;border-radius:50%;background:var(--ach-gold);
  display:grid;place-items:center;flex:none}
.ach-pd-hot svg{width:18px;height:18px;stroke:#1B2126;fill:none;stroke-width:1.8}
.ach-pd-hot b{display:block;font:700 17px/1.2 var(--ach-f-head);color:var(--ach-ink);letter-spacing:.02em}
.ach-pd-hot small{color:var(--ach-muted);font-size:12px}

/* --- ĐÈ LÊN CUSTOM CSS CŨ (post 180) ---
   Luật cũ ép nút 293x69px và lấy ảnh nền từ CDN bên thứ ba bizweb.dktcdn.net.
   Phải khai rõ background-image none, nếu không ảnh đó vẫn còn. */
body.ach-product-page form.cart{display:flex;gap:10px;align-items:stretch;margin:0}
body.ach-product-page .product-summary .quantity,
body.ach-product-page form.cart .quantity{display:flex;align-items:center;margin:0;
  border:1px solid var(--ach-line);border-radius:3px;background:#fff}
/* WooCommerce + Flatsome dựng sẵn 2 nút - / + trong ô số lượng (.minus / .plus),
   nên KHÔNG cần JS chèn thêm. Chỉ thay áo cho khớp mẫu. */
body.ach-product-page form.cart .quantity input.minus,
body.ach-product-page form.cart .quantity input.plus{
  width:38px;min-width:38px;height:48px;min-height:0;padding:0;margin:0;
  border:0;border-radius:0;background:none;background-image:none;box-shadow:none;
  font:400 20px/1 var(--ach-f-body);color:var(--ach-muted);cursor:pointer;
  transition:color .2s ease}
body.ach-product-page form.cart .quantity input.minus:hover,
body.ach-product-page form.cart .quantity input.plus:hover{color:var(--ach-cta);background:none}
body.ach-product-page form.cart .quantity input.qty{width:46px;height:48px;min-height:0;
  border:0;background:none;text-align:center;padding:0;box-shadow:none;
  font:600 16px/1 var(--ach-f-body);color:var(--ach-ink);-moz-appearance:textfield}
body.ach-product-page form.cart .quantity input.qty::-webkit-outer-spin-button,
body.ach-product-page form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* !important ở background-color là BẮT BUỘC, không phải cẩu thả:
   wp-custom-css cũ có luật đặt background-color #FBDA00 kèm !important cho
   selector .single_add_to_cart_button.
   Chỉ !important mới thắng được !important — nâng độ ưu tiên bao nhiêu cũng vô ích.
   Đây là thuộc tính DUY NHẤT bị luật cũ khoá, các thuộc tính khác đè bình thường. */
body.ach-product-page button.single_add_to_cart_button.button.alt{
  flex:1;width:auto;height:48px;min-height:0;line-height:1;padding:0 18px;margin:0;
  background-color:var(--ach-cta) !important;background-image:none;
  border:1px solid var(--ach-cta);border-radius:3px;color:#fff;
  font:700 13.5px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  text-align:center;text-shadow:none;box-shadow:none;
  transition:background-color .25s ease,color .25s ease}
body.ach-product-page button.single_add_to_cart_button.button.alt:hover{
  background-color:#fff !important;color:var(--ach-cta)}

/* Thông báo giỏ hàng của WooCommerce */
body.ach-product-page .woocommerce-message,
body.ach-product-page .woocommerce-info,
body.ach-product-page .woocommerce-error{border-radius:6px;font-size:14.5px}

/* --- Khối phòng tương tự --- */
.ach-pd-rel{padding:clamp(36px,4.5vw,56px) 0}
.ach-pd-rel .ach-panel-box{padding:22px}

@media (max-width:991px){
  .ach-pd-main{grid-template-columns:1fr;gap:22px}
  .ach-pd-buy{position:static}
}
@media (max-width:767px){
  /* Điện thoại: ẨN hai nút mũi tên, thay bằng VUỐT NGANG (xử lý ở ach-product.js).
     Anh Vinh chọn cách này ngày 2026-09-06 — vuốt là thao tác tự nhiên trên cảm ứng,
     và bỏ nút thì ảnh phòng không bị hai khối tròn che mất.
     Hàng chấm tròn PHẢI giữ lại: đó là thứ duy nhất cho khách biết có nhiều ảnh và
     đang xem ảnh thứ mấy. Bỏ nốt là khách không biết vuốt được. */
  .ach-pd-nav{display:none}
  /* Báo trình duyệt: trong khung này chỉ cuộn DỌC, còn cử chỉ ngang để JS lo.
     Thiếu dòng này thì một số trình duyệt tự xử lý vuốt ngang trước, JS không nhận được. */
  .ach-pd-gal{touch-action:pan-y}
  /* Chấm to hơn một chút cho ngón tay bấm trúng */
  .ach-pd-dots{bottom:12px;gap:8px}
  .ach-pd-dots button{padding:11px 6px}

  .ach-panel-box ul{grid-template-columns:1fr}
  .ach-pd-rel .ach-panel-box{border:0;border-radius:0;padding:16px 0 0}
}

/* ============================================================
   13. DẢI TIỆN NGHI KHÁCH SẠN  (dùng chung)
   ------------------------------------------------------------
   Trước 2026-09-06 khối này nằm trong thẻ style của page-trang-chu-2026.php
   nên chỉ trang chủ dùng được. Chuyển ra đây để trang chi tiết phòng
   dùng lại ĐÚNG dải tiện nghi đó, không phải chép lại luật.
   Nội dung vẫn lấy từ cùng bộ field ACF home_amen_* — một nguồn duy nhất.
   ============================================================ */
.ach-amen-band{background:var(--ach-slate);color:#E3DED5}
.ach-amen-band .ach-sec-title h2{color:#fff}
.ach-amen-band .ach-sec-title .ach-eyebrow{color:var(--ach-gold-soft)}
.ach-amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.09)}
.ach-amen-cell{background:var(--ach-slate);padding:28px 18px;text-align:center;transition:background .25s ease}
.ach-amen-cell:hover{background:var(--ach-slate-2)}
.ach-amen-cell svg{width:34px;height:34px;stroke:var(--ach-gold);fill:none;stroke-width:1.4;margin:0 auto 12px}
.ach-amen-cell h3{font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.ach-amen-cell p{font-size:12.5px;color:#A9A398}
@media (max-width:1024px){ .ach-amen-grid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   14. TRANG DANH MỤC PHÒNG + TRANG CỬA HÀNG  (woocommerce/archive-product.php)
   ------------------------------------------------------------
   ĐỘ ƯU TIÊN — đọc trước khi sửa, giống §12:
   Custom CSS cũ (post 180) in NỘI TUYẾN trong head, NẰM SAU file này.
   Luật nào phải đè lên markup hoặc thẻ trần thì mở đầu bằng body.ach-cat-page.

   ⚠ BẪY ĐÃ BIẾT: post 180 có luật ép mọi h3 trong .container về xám 16px kèm
   !important. Tên phòng .ach-room-name LÀ thẻ h3. Vì vậy template BẮT BUỘC bọc
   bằng .ach-wrap, KHÔNG được dùng .container của Flatsome.
   ============================================================ */
body.ach-cat-page{font-family:var(--ach-f-body);color:var(--ach-ink)}

/* --- Đường dẫn phân cấp — dùng chung với trang chi tiết phòng --- */
.ach-crumb{background:var(--ach-paper-2);border-bottom:1px solid var(--ach-line)}
.ach-crumb .ach-wrap{padding:15px 0;font-size:14px;line-height:24px;color:var(--ach-muted)}
.ach-crumb a{color:var(--ach-muted);text-decoration:none;transition:color .2s ease}
.ach-crumb a:hover{color:var(--ach-gold-dk)}
.ach-crumb .ach-sep{padding:0 8px;color:#C9C2B6}
.ach-crumb strong{color:var(--ach-gold-dk);font-weight:500}

/* --- Hàng tiêu đề: nhãn vàng bên trái, thanh sắp xếp bên phải ---
   Mẫu Bean Hotel dùng hộp xám bo 5px; ta dùng nhãn vàng cho khớp trang chi tiết phòng. */
.ach-cat{padding:26px 0 clamp(36px,4.5vw,54px)}
.ach-cat-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ach-gold);margin-bottom:26px}
/* width:auto là BẮT BUỘC: flatsome.css có luật h1..h6 width 100%.
   Khai display thôi không đủ — không khai width thì nhãn giãn hết chiều ngang
   và đẩy ô sắp xếp xuống dòng dưới. */
body.ach-cat-page h1.ach-cat-tab{display:inline-block;width:auto;height:44px;padding:0 20px;margin:0;
  font:700 16px/44px var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  color:#1E1608;background:var(--ach-gold);border-radius:8px 8px 0 0}
.ach-cat-count{color:var(--ach-muted);font-size:13.5px;padding-bottom:10px}
.ach-cat-desc{color:var(--ach-muted);font-size:14.5px;margin:-10px 0 22px}

/* --- Thanh sắp xếp --- */
.ach-sort{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin:0}
.ach-sort label{font:600 13px/1 var(--ach-f-body);color:var(--ach-muted);white-space:nowrap}
body.ach-cat-page .ach-sort select{appearance:none;-webkit-appearance:none;
  width:auto;height:38px;min-height:0;margin:0;padding:0 34px 0 13px;
  border:1px solid var(--ach-line);border-radius:3px;background-color:var(--ach-paper-2);
  color:var(--ach-gold-dk);font:600 13.5px/38px var(--ach-f-body);cursor:pointer;box-shadow:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9760A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
  transition:border-color .2s ease}
body.ach-cat-page .ach-sort select:hover{border-color:var(--ach-gold)}

/* --- Lưới danh mục ---
   ⚠ KHÔNG dùng lại .ach-grid-4: §11 biến lớp đó thành băng chuyền cuộn ngang ở ≤767px,
   đúng cho một dải phòng gợi ý nhưng SAI cho trang danh mục.
   Căn trái (anh Vinh chốt 2026-09-06): thẻ lẻ ở hàng cuối nằm thẳng cột đầu tiên. */
.ach-cat-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:24px}
.ach-cat-grid > *{flex:0 1 calc(25% - 18px);min-width:0}

/* --- Không có phòng nào --- */
.ach-cat-empty{border:1px solid var(--ach-line);border-radius:10px;padding:32px 20px;
  text-align:center;color:var(--ach-muted);background:var(--ach-paper-2)}

/* --- Phân trang — ô vuông viền vàng, đang chọn thì đảo màu.
   36px thay vì 30px của mẫu để bấm được bằng ngón tay. --- */
.ach-pagenav{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  margin-top:30px;flex-wrap:wrap}
.ach-pagenav .ach-lb{font:700 13px/1 var(--ach-f-head);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ach-muted)}
.ach-pagenav ul{display:flex;align-items:center;gap:5px;margin:0;padding:0;list-style:none}
body.ach-cat-page .ach-pagenav a,
body.ach-cat-page .ach-pagenav span.current{display:grid;place-items:center;
  width:36px;height:36px;padding:0;margin:0;text-decoration:none;
  border:1px solid var(--ach-gold);border-radius:5px;
  font:600 14px/1 var(--ach-f-body);color:var(--ach-gold-dk);background:none;
  transition:background-color .2s ease,color .2s ease}
body.ach-cat-page .ach-pagenav a:hover{background:var(--ach-gold);color:#1E1608}
body.ach-cat-page .ach-pagenav span.current{background:var(--ach-gold);color:#1E1608}
body.ach-cat-page .ach-pagenav span.dots{border:0;color:var(--ach-muted)}

@media (max-width:991px){
  .ach-cat-grid > *{flex-basis:calc(33.333% - 16px)}
}
@media (max-width:767px){
  /* §11 ép .ach-grid-4 cuộn ngang ở đây; lưới danh mục phải xếp lưới bình thường */
  .ach-cat-grid{display:flex;flex-wrap:wrap;overflow:visible;gap:16px}
  .ach-cat-grid > *{flex:0 1 calc(50% - 8px)}
  .ach-cat-head{align-items:stretch}
  .ach-sort{width:100%;padding-bottom:12px}
  .ach-sort select{flex:1}
  .ach-pagenav{justify-content:center}
  body.ach-cat-page .ach-room-body{padding:14px 14px 16px}
  body.ach-cat-page .ach-room-name{font-size:15px}
  body.ach-cat-page .ach-price{font-size:17px}
  body.ach-cat-page .ach-room-foot{flex-direction:column;align-items:stretch;gap:9px}
  body.ach-cat-page .ach-btn-book{text-align:center}
}

/* ============================================================
   15. TRANG BÀI VIẾT  (page-bai-viet.php — mẫu "Bài viết Á Châu")
   ------------------------------------------------------------
   MỤC TIÊU: bài viết cũ hiển thị ĐẸP mà anh Vinh vẫn SỬA ĐƯỢC bằng trình
   soạn thảo WP Admin như bình thường. Vì vậy toàn bộ chữ ở lại trong
   post_content, template chỉ gọi the_content() — mọi thứ dưới đây là CSS
   tác động lên markup CÓ SẴN, không đòi anh Vinh thêm class hay sửa chữ.

   ĐỘ ƯU TIÊN: Custom CSS cũ (post 180) và custom-css của Flatsome in NỘI TUYẾN
   SAU file này, nên luật nào đè lên thẻ trần phải mở đầu bằng body.ach-article-page.

   ⚠ Bọc bằng .ach-wrap, KHÔNG dùng .container của Flatsome — post 180 có luật
   ép mọi h3 trong .container về xám 16px kèm !important.
   ============================================================ */
body.ach-article-page{font-family:var(--ach-f-body);color:var(--ach-ink)}

/* --- Tên trang ---
   Dùng CHUNG max-width với .ach-article để tiêu đề thẳng cột với bài viết.
   Thiếu dòng này thì tiêu đề dạt sát mép trái còn bài viết căn giữa, lệch 259px. */
.ach-article-head{max-width:var(--ach-art-col);margin-inline:auto;padding:clamp(28px,3.5vw,44px) 0 0}
body.ach-article-page h1.ach-article-title{
  width:auto;                                  /* flatsome.css có h1..h6 width 100% */
  max-width:22ch;margin:0 0 10px;
  font:700 clamp(24px,3vw,34px)/1.2 var(--ach-f-head);
  letter-spacing:.01em;color:var(--ach-ink);text-wrap:balance}
.ach-article-head .ach-line{display:block;width:76px;height:3px;
  border-bottom:3px double var(--ach-gold);margin-bottom:6px}

/* --- Cột đọc ---
   Bề rộng gom vào MỘT biến --ach-art-col ở §1: đổi ở đó là đổi cả tiêu đề lẫn thân
   bài, không phải sửa hai chỗ.
   Anh Vinh chốt 100%, tức chiếm trọn .ach-wrap (tối đa 1200px).
   Ở bề rộng đó mỗi dòng khoảng 140 ký tự — dài hơn mức sách báo hay dùng, nên
   cỡ chữ và giãn dòng bên dưới được nới ra để mắt đỡ lạc dòng khi xuống hàng.
   ĐỪNG hạ line-height xuống 1.75 như trang thường: dòng càng dài càng phải thoáng. */
.ach-article{max-width:var(--ach-art-col);margin-inline:auto;padding:clamp(22px,3vw,34px) 0 clamp(40px,5vw,64px)}

/* Cỡ chữ khai THẲNG trên thẻ p nên thắng body font-size 14px kèm !important
   của post 180 — luật kia đặt lên body, thẻ con có luật riêng thì không thừa kế nữa. */
body.ach-article-page .ach-article p{
  font-size:17px;line-height:1.95;color:#4A463F;margin:0 0 19px}
body.ach-article-page .ach-article p:last-child{margin-bottom:0}

/* Đoạn mở đầu — to hơn một chút cho ra dáng bài viết.
   Chọn bằng vị trí (đoạn ngay sau dòng tiêu đề) nên anh Vinh không phải gán class. */
body.ach-article-page .ach-article > p:first-child + p{
  font-size:19px;line-height:1.9;color:#3C3934}

/* --- Ba dòng đóng vai tiêu đề mục ---
   Trong bài chúng có dạng  p > span[style] > strong  ("Tổng quan về Khách Sạn",
   "Link fanpage", "LIÊN HỆ ĐẶT PHÒNG").
   Chữ đậm GIỮA CÂU lại có dạng  p > strong  (không có span bọc) — nhờ vậy phân
   biệt được bằng CSS thuần, không phải sửa nội dung.
   ⚠ ĐỪNG đổi thành ".ach-article p strong" — làm vậy là biến luôn dòng
   "Điện thoại đặt phòng" giữa câu thành tiêu đề. */
body.ach-article-page .ach-article p > span > strong{
  display:block;width:auto;margin:34px 0 4px;padding-bottom:9px;
  font:700 clamp(18px,2.1vw,22px)/1.3 var(--ach-f-head);
  letter-spacing:.02em;color:var(--ach-ink);
  border-bottom:3px double var(--ach-line)}
body.ach-article-page .ach-article > p:first-child > span > strong{margin-top:0}
body.ach-article-page .ach-article p > span > strong a{color:var(--ach-gold-dk)}

/* --- Ảnh trong bài ---
   Bài có 4 ảnh, mỗi ảnh nằm trong một thẻ p riêng, class aligncenter. */
/* Chốt bề ngang ảnh ở 1000px, KHÔNG để width:auto.
   Trình duyệt nhận 4 ảnh ở cỡ 1000/1000/1000/1440px (khác cỡ file trên đĩa vì
   Cloudflare phục vụ bản riêng — đo lại trên trình duyệt trước khi kết luận).
   Để width:auto thì ba ảnh đầu ra 1000px còn ảnh thứ tư ra 1200px, lệch mép 200px.
   Chốt 1000px thì cả bốn bằng nhau, ba ảnh đầu đúng cỡ thật không phóng to một chút nào,
   ảnh 1440px thu nhỏ lại nên càng nét.
   Đừng nâng lên 1200px: làm vậy là phóng ba ảnh kia lên 20%, mờ đi.
   Màn hình hẹp hơn 1000px thì max-width không có tác dụng, ảnh lấp đầy cột như thường. */
body.ach-article-page .ach-article p > img{
  display:block;width:100%;max-width:1000px;height:auto;margin-inline:auto;
  border-radius:10px;box-shadow:var(--ach-shadow)}

/* LƯỚI AN TOÀN, bình thường KHÔNG chạy.
   functions.php đã tắt lazy-load của Flatsome cho mẫu này nên ảnh giữ src thật
   và không mang class lazy-load nữa. Giữ luật này phòng khi ai đó gỡ đoạn tắt kia:
   Flatsome đặt .lazy-load height 0 kèm padding-top 100% tức ô chờ hình VUÔNG,
   mà 4 ảnh trong bài đều nằm ngang ~3:2 — đo được trang phình 4752px lên 6404px
   rồi tụt xuống, nhảy layout rất khó chịu.
   Ghi rõ 3/2 chứ không để auto: để auto thì trình duyệt lấy tỉ lệ 1:1 của ảnh chờ
   tải và lại vuông như cũ. */
body.ach-article-page .ach-article p > img.lazy-load{
  height:auto;padding-top:0;aspect-ratio:3/2;background:var(--ach-paper-2)}

/* --- Liên kết --- */
body.ach-article-page .ach-article a{color:var(--ach-gold-dk);text-decoration:none;
  border-bottom:1px solid rgba(169,118,10,.35);transition:color .2s ease,border-color .2s ease}
body.ach-article-page .ach-article a:hover{color:var(--ach-cta);border-bottom-color:var(--ach-cta)}

/* Chữ đậm giữa câu — giữ nguyên là chữ đậm, chỉ đậm màu hơn chút cho rõ */
body.ach-article-page .ach-article p > strong{color:var(--ach-ink)}

/* Máy tính bảng và màn hình hẹp: dòng đã ngắn lại nên hạ cỡ chữ về mức thường. */
@media (max-width:1024px){
  body.ach-article-page .ach-article p{font-size:16.5px;line-height:1.85;margin-bottom:17px}
  body.ach-article-page .ach-article > p:first-child + p{font-size:17.5px;line-height:1.8}
}
@media (max-width:767px){
  body.ach-article-page .ach-article p{font-size:16px;line-height:1.8}
  body.ach-article-page .ach-article > p:first-child + p{font-size:16.5px}
  /* Tiêu đề mục: gạch chân đôi kéo hết bề ngang trên điện thoại nhìn nặng nề */
  body.ach-article-page .ach-article p > span > strong{margin-top:26px;font-size:18px}
  .ach-article-head{padding-top:20px}
}

/* ============================================================
   16. BẢN ĐỒ NHÚNG
   ------------------------------------------------------------
   Trang Liên hệ trước dùng shortcode [map] của Flatsome, chạy bằng Maps JavaScript API.
   API đó bắt buộc dự án Google Cloud phải BẬT THANH TOÁN; dự án chứa khoá cũ chưa bật
   nên Google trả 403 và khung bản đồ trắng trơn 1265x400 (anh Vinh báo 2026-09-06).
   Đã thử đổi Referer sang tên miền cũ — vẫn 403, nên KHÔNG phải lỗi giới hạn tên miền.

   Nay dùng Maps Embed API (google.com/maps/embed) — không cần khoá, không cần thanh toán.
   ⚠ Mã Google cho sẵn ghi cứng width 600 height 450; để nguyên là tràn ngang trên điện
   thoại, nên phải ép lại bằng CSS dưới đây. */
.ach-map{margin:0}
.ach-map iframe{display:block;width:100%;height:clamp(260px,42vw,420px);border:0}


/* ============================================================
   17. GIỎ PHÒNG · 18. THANH TOÁN · 19. TRANG CẢM ƠN
   ------------------------------------------------------------
   Ba trang WooCommerce. Toàn bộ luật dưới đây nhắm vào tên class mà
   WooCommerce IN RA THẬT (shop_table cart, cart_totals, order_review,
   wc_payment_methods…), nên thêm hay bớt phòng, thêm hay bớt hình thức
   thanh toán đều KHÔNG phải sửa lại CSS.

   Bố cục 2 cột 7/5 vẫn để Flatsome lo (row-divided + col large-7 +
   cart-collaterals large-5) — không đụng vào.

   ⚠ Bảng giỏ trên điện thoại: WooCommerce in sẵn thuộc tính data-title ở
   mỗi ô, nhưng Flatsome GỠ MẤT file woocommerce-smallscreen.css của
   WooCommerce (flatsome/inc/woocommerce/structure-wc-global.php dòng 71-79
   gọi wp_dequeue_style). Đó chính là lý do bảng đang cuộn ngang và mất hẳn
   hai cột giá với thành tiền. Phải tự viết lại, không có sẵn để bật.

   ⚠ Ô "Quốc gia" ở trang thanh toán chỉ được ẩn, KHÔNG được bỏ khỏi form.
   Lý do đầy đủ ghi trong inc/woo-checkout.php mục [4].
   ============================================================ */
/* Băng "Phòng … đã được thêm vào giỏ hàng".
   Phòng vừa thêm đã nằm ngay trong bảng bên dưới, báo thêm một lần nữa là thừa và
   đẩy nội dung xuống. Kèm theo nó còn một nút "Tiếp tục xem sản phẩm" trùng chức
   năng với liên kết "Chọn thêm phòng" đã có.

   ⚠ CHỈ ẩn thông báo THÀNH CÔNG (.woocommerce-message).
   TUYỆT ĐỐI KHÔNG ẩn cả .woocommerce-notices-wrapper: khối đó còn chứa
   .woocommerce-error — chỗ WooCommerce báo "Vui lòng điền Họ và tên" hay
   "Số điện thoại là bắt buộc" khi khách bấm Đặt phòng mà thiếu thông tin.
   Ẩn nhầm là khách bấm nút xong không thấy gì xảy ra, không hiểu vì sao. */
body.ach-cart-page .woocommerce-message,
body.ach-checkout-page .woocommerce-message{display:none}

.ach-pg{padding:26px 0 56px}
.ach-pg-head{margin-bottom:20px}
/* margin-top 15px: dải đường dẫn ở trên là một dải nền liền mạch, không có
   khoảng đệm dưới, nên nếu để 0 thì chữ tiêu đề dính sát mép dải (đo được khe = 0px).
   Phải khai ở đây chứ không dựa vào mặc định: Flatsome đặt h1 margin-top 0. */
.ach-pg-head h1{margin-top:15px;font-size:clamp(22px,2.4vw,30px);line-height:1.2;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.ach-pg-head .line{display:block;width:76px;height:3px;border-bottom:3px double var(--ach-gold);margin-top:9px}

/* Ba bước — cho khách biết đang ở đâu trong luồng đặt phòng */
.ach-steps{display:flex;margin:0 0 26px;border:1px solid var(--ach-line);border-radius:10px;overflow:hidden}
.ach-steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 10px;font:700 12.5px/1 var(--ach-f-head);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ach-muted);background:var(--ach-paper);border-left:1px solid var(--ach-line)}
.ach-steps li:first-child{border-left:0}
.ach-steps li .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--ach-line);color:#8A8378;font:700 12px/1 var(--ach-f-body);flex:none}
.ach-steps li.on{color:#1E1608;background:var(--ach-gold)}
.ach-steps li.on .n{background:#1E1608;color:var(--ach-gold)}
.ach-steps li.done{color:var(--ach-gold-dk);background:#FDF6E4}
.ach-steps li.done .n{background:var(--ach-gold-dk);color:#fff}

/* Lưới 7/5 — đúng tỉ lệ Flatsome đang dùng ở cả 3 trang */
.ach-cols{display:grid;grid-template-columns:7fr 5fr;gap:34px;align-items:start}

/* ============ §17 — GIỎ HÀNG ============ */

/* Bảng. Tỉ lệ cột lấy từ mẫu Bean Hotel: 52 / 16 / 16 / 16.
   Cột 1 gộp 3 ô của WooCommerce (nút xoá + ảnh + tên) đúng như colspan 3 ở thead. */
.woocommerce table.shop_table.cart{width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--ach-line);border-radius:10px;overflow:hidden;background:var(--ach-paper)}
.woocommerce table.shop_table.cart thead th{
  padding:13px 10px;background:var(--ach-paper-2);border-bottom:1px solid var(--ach-line);
  font:700 12.5px/1.2 var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ach-ink);text-align:center}
.woocommerce table.shop_table.cart thead th.product-name{text-align:left;padding-left:18px}
.woocommerce table.shop_table.cart tbody td{padding:16px 10px;border-bottom:1px solid var(--ach-line);
  vertical-align:middle;text-align:center}
.woocommerce table.shop_table.cart tbody tr:last-child td{border-bottom:0}

.woocommerce td.product-remove{width:44px;padding-left:14px;padding-right:0}
.woocommerce td.product-remove a{display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--ach-line);border-radius:50%;color:#A79E90;font:400 17px/1 var(--ach-f-body);
  transition:.2s}
.woocommerce td.product-remove a:hover{background:#E0574B;border-color:#E0574B;color:#fff}

/* ⚠ PHẢI có min-width. Chỉ khai width thì trình duyệt vẫn co ô xuống 90px khi
   chia lại cột bảng, còn ảnh giữ 110px nên TRÀN RA ĐÈ LÊN TÊN PHÒNG (đo được ảnh
   105→215 trong khi ô chỉ 95→185, tên bắt đầu ở 229 — chồng 14px). */
.woocommerce td.product-thumbnail{width:126px;min-width:126px;padding-left:10px;padding-right:6px}
.woocommerce td.product-thumbnail img{width:110px;min-width:110px;height:110px;object-fit:cover;
  border-radius:8px;box-shadow:var(--ach-shadow)}

.woocommerce td.product-name{text-align:left;padding-left:6px}
.woocommerce td.product-name a{font:700 16px/1.35 var(--ach-f-head);color:var(--ach-ink);transition:color .2s}
.woocommerce td.product-name a:hover{color:var(--ach-gold-dk)}
.ach-cart-sub{display:block;margin-top:5px;font-size:13px;color:var(--ach-muted)}

.woocommerce td.product-price,
.woocommerce td.product-subtotal{width:16%;white-space:nowrap}
.woocommerce td.product-price{color:var(--ach-muted);font-size:14.5px}
.woocommerce td.product-subtotal{color:var(--ach-cta);font:700 17px/1 var(--ach-f-head)}

/* Ô số đêm — trừ / số / cộng dính liền, cao 40px cho dễ bấm */
.woocommerce td.product-quantity{width:16%}
.woocommerce .quantity{display:inline-flex;border:1px solid var(--ach-line);border-radius:4px;overflow:hidden}
.woocommerce .quantity button{width:34px;height:40px;border:0;background:var(--ach-paper-2);
  color:var(--ach-ink);font:400 18px/1 var(--ach-f-body);cursor:pointer;transition:.2s}
.woocommerce .quantity button:hover{background:var(--ach-gold);color:#1E1608}
.woocommerce .quantity input{width:44px;height:40px;border:0;border-left:1px solid var(--ach-line);
  border-right:1px solid var(--ach-line);text-align:center;font:700 15px/1 var(--ach-f-body);
  color:var(--ach-ink);background:var(--ach-paper);-moz-appearance:textfield}
.woocommerce .quantity input::-webkit-outer-spin-button,
.woocommerce .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Hàng dưới bảng — trên site thật WooCommerce in nó thành một ô td.actions
   nằm trong chính bảng giỏ, không phải một khối riêng như bản demo. */
body.ach-cart-page td.actions{padding:16px 10px !important;border-bottom:0;
  border-top:1px solid var(--ach-line);background:var(--ach-paper-2);text-align:left}
body.ach-cart-page td.actions .continue-shopping{float:none;display:inline-block;margin:0}
body.ach-cart-page td.actions button[name="update_cart"]{
  float:right;height:40px;min-height:40px;padding:0 20px;margin:0;
  background-color:var(--ach-paper) !important;background-image:none;
  border:1px solid var(--ach-line);border-radius:3px;box-shadow:none;
  color:var(--ach-ink);font:700 12px/1 var(--ach-f-head);letter-spacing:.08em;
  text-transform:uppercase;transition:.25s}
body.ach-cart-page td.actions button[name="update_cart"]:hover:not(:disabled){
  border-color:var(--ach-gold);color:var(--ach-gold-dk)}
body.ach-cart-page td.actions button[name="update_cart"]:disabled{opacity:.45;cursor:not-allowed}

/* Hàng dưới bảng (dùng ở bản demo) */
.ach-cart-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;flex-wrap:wrap}
.ach-back{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ach-gold-dk);
  transition:color .2s}
.ach-back:hover{color:var(--ach-cta)}
.ach-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ach-btn-update{height:40px;padding:0 20px;background:var(--ach-paper);border:1px solid var(--ach-line);
  color:var(--ach-ink);font:700 12px/1 var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;
  border-radius:3px;cursor:pointer;transition:.25s}
.ach-btn-update:hover{border-color:var(--ach-gold);color:var(--ach-gold-dk)}

/* Hộp tổng tiền — chỉ 2 dòng. KHÔNG vận chuyển, KHÔNG thuế, KHÔNG mã giảm giá */
.cart_totals,.ach-side{background:var(--ach-paper-2);border:1px solid var(--ach-line);border-radius:10px;
  padding:20px 22px 22px}
/* Tiêu đề hộp tổng tiền.
   ⚠ Flatsome ĐẶT thẻ h2 của cart-totals.php thành display:none rồi thay bằng
   MỘT BẢNG RIÊNG có thead > th, và nhét thẳng style="border-width:3px" lên thẻ đó
   → trông như một cái hộp có viền bao quanh chữ "Tổng cộng" (anh Vinh phát hiện
   qua ảnh chụp 2026-09-07).
   Inline style chỉ thua !important, nên bắt buộc phải dùng !important cho viền. */
body.ach-cart-page .cart_totals > table:first-of-type{margin:0;border:0}
body.ach-cart-page .cart_totals thead th{
  border:0 !important;border-bottom:3px double var(--ach-gold) !important;
  padding:0 0 12px !important;background:transparent;text-align:left;
  font:700 15px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ach-ink)}
/* h2 gốc vẫn ẩn — khai lại phòng khi bản Flatsome sau này không ẩn nữa */
body.ach-cart-page .cart_totals > h2{margin:0 0 15px;padding-bottom:12px;
  font:700 15px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ach-ink);border-bottom:3px double var(--ach-gold)}

.ach-side-h{margin:0 0 15px;padding-bottom:12px;
  font:700 15px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ach-ink);
  border-bottom:3px double var(--ach-gold)}
.cart_totals table{width:100%;border-collapse:collapse}
.cart_totals th{text-align:left;padding:9px 0;font-weight:400;font-size:14.5px;color:var(--ach-muted)}
.cart_totals td{text-align:right;padding:9px 0;font-size:14.5px;color:var(--ach-ink)}
.cart_totals tr.order-total th{padding-top:14px;border-top:1px solid var(--ach-line);
  font:700 15px/1.4 var(--ach-f-head);text-transform:uppercase;color:var(--ach-ink)}
.cart_totals tr.order-total td{padding-top:14px;border-top:1px solid var(--ach-line);
  font:700 24px/1 var(--ach-f-head);color:var(--ach-cta);white-space:nowrap}
.ach-side-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ach-muted)}

/* ⚠ TIỀN BỊ TÔ ĐỎ. WooCommerce bọc mọi số tiền trong span.woocommerce-Price-amount,
   mà Custom CSS cũ có luật span.amount màu #C20202 (0,1,1). Đặt màu cho ô td là vô
   ích — màu của span thắng. Phải nhắm thẳng vào span.
   Không cần !important: luật kia không có !important, và (0,3,1) đã hơn hẳn. */
body.ach-cart-page td.product-price .woocommerce-Price-amount{color:var(--ach-muted)}
body.ach-cart-page td.product-subtotal .woocommerce-Price-amount{color:var(--ach-cta)}
body.ach-cart-page .cart-subtotal td .woocommerce-Price-amount{color:var(--ach-ink)}
body.ach-cart-page .order-total td .woocommerce-Price-amount{color:var(--ach-cta)}
/* Viền dày 3px dưới dòng tổng là của flatsome-shop.css (.shop_table .order-total th) */
body.ach-cart-page .cart_totals .order-total th,
body.ach-cart-page .cart_totals .order-total td{border-bottom:0}

/* Nút chính — cao 48px, RỘNG HẾT KHUNG. Nút hiện tại chỉ 97x35px */
.wc-proceed-to-checkout{margin-top:16px}
/* ⚠ .checkout-button có class "button alt" nên dính luật ép nền #FBDA00 kèm
   !important của Custom CSS cũ. Chỉ !important mới thắng !important — xem
   luật riêng ngay dưới khối này. */
.checkout-button,.ach-btn-main{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;min-height:48px;background:var(--ach-cta);border:1px solid var(--ach-cta);border-radius:4px;
  color:#fff;font:700 14px/1 var(--ach-f-head);letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:.25s;text-align:center}
.checkout-button:hover,.ach-btn-main:hover{background:var(--ach-paper);color:var(--ach-cta)}
/* ⚠ Độ ưu tiên phải HƠN .button.alt:not(.is-outline) của Custom CSS cũ.
   Luật đó trông như 2 class nhưng thực ra là BA: đối số bên trong :not() vẫn được
   tính, chỉ bản thân :not() là không. Vậy nó là (0,3,0) — bản đầu của mình viết
   body.ach-cart-page .checkout-button chỉ (0,2,1) nên THUA, nút vẫn vàng.
   Viết đủ 4 class dưới đây thành (0,4,1), thắng chắc. */
/* Nền chuyển sắc + viền sáng mảnh + bóng đổ, rê chuột thì nhấc lên — đúng lối nút
   "Đặt phòng ngay" ở thanh đầu trang và nút "Xem danh sách phòng" ở giỏ rỗng.
   Đây là nút quan trọng nhất của trang giỏ hàng nên dùng lối nút đắt nhất của site.
   background-color vẫn phải có !important vì Custom CSS cũ ép #FBDA00 kèm !important;
   background-image thì không cần, luật kia không đặt. */
body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button{
  background-color:var(--ach-cta) !important;
  background-image:linear-gradient(180deg,#FF8524 0%,#ED6600 52%,#C25200 100%);
  border:1px solid rgba(255,255,255,.24);color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 8px 20px rgba(237,102,0,.26);
  transition:transform .25s,box-shadow .25s;
  /* ⚠ CĂN CHỮ VÀO GIỮA — đọc kỹ trước khi sửa.
     Luật .checkout-button{display:flex} ở trên KHÔNG ăn: Flatsome có luật display
     mạnh hơn nên nút thực tế là display:block. Mà đã là block thì justify-content
     và align-items VÔ NGHĨA. Hậu quả đo được: chữ lệch LÊN 15px (vì line-height
     14px trong nút cao 48px) và lệch TRÁI 13px (vì mũi tên 16px + khe 9px nằm cùng
     dòng, cả cụm được căn giữa nên riêng chữ bị đẩy sang trái).
     Cách chữa: giữ block, căn dọc bằng line-height đúng bằng chiều cao, căn ngang
     bằng padding ĐỐI XỨNG hai bên, và cho mũi tên ra khỏi dòng chữ (position:absolute)
     để nó không ăn chỗ của chữ nữa. */
  display:block;position:relative;box-sizing:border-box;
  height:48px;line-height:46px;padding:0 44px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button:hover{
  background-color:var(--ach-cta) !important;color:#fff;transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 13px 28px rgba(237,102,0,.4)}
body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button:active{transform:translateY(0)}
/* Mũi tên như bản demo. Vẽ bằng CSS vì template nút của WooCommerce chỉ in chữ trần,
   không có chỗ chèn thẻ svg mà không phải ghi đè cả file. */
body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button::after{
  content:"";position:absolute;right:20px;top:50%;margin-top:-8px;
  width:16px;height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
body.ach-checkout-page #place_order::after{
  content:"";position:absolute;right:20px;top:50%;margin-top:-8px;
  width:16px;height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.checkout-button svg,.ach-btn-main svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* Giỏ rỗng */
.ach-empty{text-align:center;padding:56px 24px 60px;background:var(--ach-paper);
  border:1px solid var(--ach-line);border-radius:10px}
.ach-empty-ic{width:96px;height:96px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--ach-paper-2);border:1px solid var(--ach-line)}
.ach-empty-ic svg{width:42px;height:42px;stroke:#C3BCAF;fill:none;stroke-width:1.4}
.ach-empty h2{font:700 21px/1.3 var(--ach-f-head);text-transform:uppercase;margin-bottom:10px}
.ach-empty p{max-width:420px;margin:0 auto 26px;color:var(--ach-muted);line-height:1.7}
.ach-empty-cta{display:flex;flex-direction:column;align-items:center;gap:16px}

/* Nút chính cỡ lớn — dùng đúng lối nút "Đặt phòng ngay" trên thanh đầu trang:
   nền chuyển sắc, viền sáng mảnh, bóng đổ, rê chuột thì nhấc lên.
   Đây là lối nút đắt tiền nhất của site, để dành cho những chỗ cần mời gọi. */
.ach-btn-hero{display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 34px;
  background:linear-gradient(180deg,#FF8524 0%,#ED6600 52%,#C25200 100%);color:#fff;
  border:1px solid rgba(255,255,255,.24);border-radius:4px;
  font:700 13.5px/1 var(--ach-f-head);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 8px 20px rgba(237,102,0,.26);
  transition:transform .25s,box-shadow .25s,background .25s}
.ach-btn-hero:hover{transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 13px 28px rgba(237,102,0,.4)}
.ach-btn-hero:active{transform:translateY(0)}
.ach-btn-hero svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}

/* Lối liên hệ phụ — chữ, không phải nút, để không tranh chỗ với nút chính */
.ach-empty-tel{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ach-muted);
  transition:color .2s}
.ach-empty-tel b{color:var(--ach-gold-dk);font-weight:700}
.ach-empty-tel:hover{color:var(--ach-gold-dk)}
.ach-empty-tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}

/* ============ §18 — THANH TOÁN ============
   ⚠ BẢN ĐẦU NHẮM SAI: viết theo class .ach-fbox tự đặt trong bản demo, mà trang
   thanh toán thật của WooCommerce KHÔNG có class đó — nên ô nhập vẫn 34px và nút
   vẫn vàng. Bản này nhắm đúng markup thật:

     div.row.pt-0
       div.large-7.col > div#customer_details
           div.woocommerce-billing-fields    > h3 + __field-wrapper > p.form-row
           div.woocommerce-additional-fields > h3 + __field-wrapper > p.form-row.notes
       div.large-5.col > div.col-inner.has-border > div.checkout-sidebar
           h3#order_review_heading
           div#order_review > table.woocommerce-checkout-review-order-table
                            + div#payment > ul.wc_payment_methods + button#place_order

   Bố cục 7/5 (large-7 / large-5) để Flatsome lo, không đụng. */

/* --- Hai hộp bên trái --- */
body.ach-checkout-page .woocommerce-billing-fields,
body.ach-checkout-page .woocommerce-additional-fields{
  background:var(--ach-paper);border:1px solid var(--ach-line);border-radius:10px;
  padding:20px 22px 22px;margin-bottom:18px}
body.ach-checkout-page .woocommerce-shipping-fields{display:none}

/* Gộp hai hộp thành MỘT như bản demo.
   WooCommerce tách ô ghi chú sang khối .woocommerce-additional-fields riêng, có
   tiêu đề h3 riêng — nên chữ "Ghi chú" hiện HAI LẦN (một ở tiêu đề hộp, một ở nhãn
   ô ngay dưới). Ẩn tiêu đề hộp, bỏ viền giữa hai khối, cho trông liền một mạch. */
body.ach-checkout-page .woocommerce-additional-fields > h3{display:none}
body.ach-checkout-page .woocommerce-billing-fields{
  border-bottom:0;border-radius:10px 10px 0 0;margin-bottom:0;padding-bottom:4px}
body.ach-checkout-page .woocommerce-additional-fields{
  border-top:0;border-radius:0 0 10px 10px;padding-top:0}

body.ach-checkout-page .woocommerce-billing-fields > h3,
body.ach-checkout-page .woocommerce-additional-fields > h3,
body.ach-checkout-page #order_review_heading{
  margin:0 0 15px;padding-bottom:12px;
  font:700 15px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ach-ink);border-bottom:3px double var(--ach-gold)}

/* --- Từng dòng nhập --- */
body.ach-checkout-page .form-row{margin:0 0 16px;padding:0;width:auto;float:none}
body.ach-checkout-page .form-row:last-child{margin-bottom:0}
body.ach-checkout-page .form-row label{
  display:block;margin:0 0 7px;font:700 12.5px/1 var(--ach-f-head);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ach-ink)}
body.ach-checkout-page .form-row label .required{color:var(--ach-cta);text-decoration:none;border:0}
body.ach-checkout-page .form-row label .optional{
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ach-muted)}
body.ach-checkout-page .woocommerce-input-wrapper{display:block;width:100%}

/* Ô nhập cao 48px. Trước là 34px, quá nhỏ để chạm trên điện thoại.
   Phải khai đủ nền + viền + bo góc + bóng: Custom CSS cũ ép bo góc 5px lên mọi
   thẻ input, Flatsome ép bóng đổ lõm. Không khai đủ là bị đè.
   Mở đầu bằng body.ach-checkout-page để thắng cả hai (chúng in ra SAU file này). */
body.ach-checkout-page .form-row input.input-text,
body.ach-checkout-page .form-row textarea.input-text{
  display:block;width:100%;box-sizing:border-box;height:48px;margin:0;padding:0 15px;
  background:var(--ach-paper);border:1px solid var(--ach-line);border-radius:4px;box-shadow:none;
  color:var(--ach-ink);font:400 15px/48px var(--ach-f-body);
  transition:border-color .2s ease,box-shadow .2s ease}
body.ach-checkout-page .form-row textarea.input-text{
  height:auto;min-height:96px;padding:12px 15px;line-height:1.6;resize:vertical}
body.ach-checkout-page .form-row input.input-text::placeholder,
body.ach-checkout-page .form-row textarea.input-text::placeholder{color:#A79E90;opacity:1}
body.ach-checkout-page .form-row input.input-text:focus,
body.ach-checkout-page .form-row textarea.input-text:focus{
  outline:none;border-color:var(--ach-gold);box-shadow:0 0 0 3px rgba(226,166,8,.18)}
body.ach-checkout-page .form-row.woocommerce-invalid input.input-text{border-color:#E0574B}

/* Ô "Quốc gia" vẫn nằm trong form nhưng ẩn đi — bỏ hẳn là WooCommerce chặn đặt
   hàng, xem inc/woo-checkout.php mục 4. */
body.ach-checkout-page .ach-checkout-hidden{display:none !important}

/* --- Cột phải: đơn hàng --- */
body.ach-checkout-page .large-5 .col-inner.has-border{border:0;padding:0}
body.ach-checkout-page .checkout-sidebar{
  background:var(--ach-paper-2);border:1px solid var(--ach-line);border-radius:10px;
  padding:20px 22px 22px;overflow:visible}

body.ach-checkout-page table.woocommerce-checkout-review-order-table{
  width:100%;border-collapse:collapse;margin:0}
body.ach-checkout-page .woocommerce-checkout-review-order-table thead{display:none}
body.ach-checkout-page .woocommerce-checkout-review-order-table td,
body.ach-checkout-page .woocommerce-checkout-review-order-table th{
  padding:11px 0;border:0;border-bottom:1px solid var(--ach-line);font-size:14.5px;
  vertical-align:top}
body.ach-checkout-page .woocommerce-checkout-review-order-table td.product-name{
  text-align:left;font:700 14.5px/1.4 var(--ach-f-head);color:var(--ach-ink)}
body.ach-checkout-page .woocommerce-checkout-review-order-table .product-quantity{
  display:block;margin-top:3px;font:400 13px/1 var(--ach-f-body);color:var(--ach-muted)}
body.ach-checkout-page .woocommerce-checkout-review-order-table td.product-total{
  text-align:right;white-space:nowrap;font-weight:700}
body.ach-checkout-page .woocommerce-checkout-review-order-table tfoot th{
  text-align:left;font-weight:400;color:var(--ach-muted)}
body.ach-checkout-page .woocommerce-checkout-review-order-table tfoot td{
  text-align:right;white-space:nowrap}
body.ach-checkout-page .woocommerce-checkout-review-order-table tfoot tr.order-total th{
  padding-top:15px;font:700 14px/1.4 var(--ach-f-head);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ach-ink);border-bottom:0}
body.ach-checkout-page .woocommerce-checkout-review-order-table tfoot tr.order-total td{
  padding-top:15px;border-bottom:0;font:700 24px/1 var(--ach-f-head);color:var(--ach-cta)}
/* Cùng lý do với trang giỏ: phải nhắm vào span chứa số tiền, không phải ô td */
body.ach-checkout-page .woocommerce-checkout-review-order-table .woocommerce-Price-amount{color:var(--ach-ink)}
body.ach-checkout-page .woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount{
  color:var(--ach-cta)}
body.ach-thankyou-page .ach-ty-card .ach-line-room .woocommerce-Price-amount{color:var(--ach-ink)}
body.ach-thankyou-page .ach-ty-card .ach-sum .woocommerce-Price-amount{color:var(--ach-cta)}

/* --- Hình thức thanh toán ---
   Dựng theo đúng markup WooCommerce in ra, nên bật thêm hình thức về sau
   (ví dụ chuyển khoản ngân hàng) KHÔNG phải sửa lại CSS. */
body.ach-checkout-page #payment{background:transparent;border:0;padding:0;margin-top:18px}
body.ach-checkout-page ul.wc_payment_methods{list-style:none;margin:0;padding:0;
  border:1px solid var(--ach-line);border-radius:8px;overflow:hidden;background:var(--ach-paper)}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method{border-top:1px solid var(--ach-line)}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method:first-child{border-top:0}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method > input.input-radio{
  position:absolute;opacity:0;width:0;height:0}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method > label{
  display:flex;align-items:center;gap:11px;margin:0;padding:14px 16px;cursor:pointer;
  font:700 14px/1.35 var(--ach-f-head);letter-spacing:0;text-transform:none;
  color:var(--ach-ink);transition:background .2s}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method > label::before{
  content:"";flex:none;width:19px;height:19px;border-radius:50%;
  border:2px solid #C9C2B6;background:var(--ach-paper);
  transition:border-color .2s,box-shadow .2s}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method > input:checked + label{background:#FDF8EC}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method > input:checked + label::before{
  border-color:var(--ach-cta);box-shadow:inset 0 0 0 4px var(--ach-cta)}
/* Chỉ có MỘT hình thức thì không vẽ vòng tròn chọn — không có gì để chọn.
   Bật thêm hình thức thứ hai là vòng tròn tự hiện lại. */
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method:only-child > label::before{display:none}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method:only-child > label{cursor:default}
body.ach-checkout-page ul.wc_payment_methods .payment_box{
  margin:0;padding:0 16px 15px 46px;background:transparent;border:0;font-size:13.5px;
  line-height:1.65;color:var(--ach-muted)}
body.ach-checkout-page ul.wc_payment_methods li.wc_payment_method:only-child .payment_box{padding-left:16px}
body.ach-checkout-page ul.wc_payment_methods .payment_box::before{display:none}
body.ach-checkout-page ul.wc_payment_methods .payment_box p{margin:0}

/* --- Nút "Xác nhận đặt phòng" ---
   ⚠ PHẢI CÓ !important cho background-color: Custom CSS cũ (post 180) đặt
   background-color #FBDA00 kèm !important cho .button.alt — mà nút này có đúng
   class "button alt". CHỈ !important mới thắng !important; nâng độ ưu tiên bao
   nhiêu cũng vô ích. Các thuộc tính còn lại đè bình thường, không cần !important. */
body.ach-checkout-page #payment .form-row.place-order{margin:18px 0 0;padding:0;float:none;width:auto}
/* Cùng cách căn với nút ở trang giỏ — xem ghi chú dài ở khối đó. */
body.ach-checkout-page #place_order{
  display:block;position:relative;box-sizing:border-box;
  width:100%;height:48px;min-height:48px;float:none;
  line-height:46px;padding:0 44px;text-align:center;white-space:nowrap;
  background-color:var(--ach-cta) !important;background-image:none;
  border:1px solid var(--ach-cta);border-radius:4px;box-shadow:none;
  color:#fff;font:700 14px/46px var(--ach-f-head);letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:.25s}
body.ach-checkout-page #place_order{
  background-image:linear-gradient(180deg,#FF8524 0%,#ED6600 52%,#C25200 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 8px 20px rgba(237,102,0,.26)}
body.ach-checkout-page #place_order:hover{
  background-color:var(--ach-cta) !important;color:#fff;transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.34),0 13px 28px rgba(237,102,0,.4)}
body.ach-checkout-page #place_order:active{transform:translateY(0)}

body.ach-checkout-page .woocommerce-terms-and-conditions-wrapper{margin-top:14px;font-size:13.5px}

/* ============ §19 — TRANG CẢM ƠN ============ */
.ach-ty{max-width:720px;margin-inline:auto;text-align:center;padding:44px 0 20px}
.ach-ty-ic{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:#EAF6EC;border:2px solid #4FB06A}
.ach-ty-ic svg{width:36px;height:36px;stroke:#3E9A57;fill:none;stroke-width:2.6}
.ach-ty h1{font:700 clamp(21px,2.6vw,30px)/1.25 var(--ach-f-head);text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:12px}
.ach-ty .lead{font-size:16.5px;line-height:1.75;color:#4A463F}
.ach-ty .lead strong{color:var(--ach-gold-dk)}
.ach-ty-card{margin-top:28px;text-align:left;background:var(--ach-paper-2);
  border:1px solid var(--ach-line);border-radius:10px;padding:22px 24px}
.ach-ty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:16px;
  border-bottom:1px solid var(--ach-line)}
.ach-ty-grid .k{font:700 11.5px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ach-muted);margin-bottom:6px}
.ach-ty-grid .v{font:700 16px/1.3 var(--ach-f-head);color:var(--ach-ink)}
.ach-ty-cta{display:flex;gap:12px;margin-top:26px}
.ach-ty-cta .ach-btn-main{flex:1}
/* ⚠ PHẢI khoanh vùng bằng body.ach-thankyou-page.
   Class .ach-btn-ghost ĐÃ CÓ SẴN từ §6, dùng cho nút "Gọi đặt phòng" nằm trên ảnh
   nền tối ở đầu trang chủ: nền trong suốt, viền trắng, chữ trắng.
   Bản đầu viết luật này KHÔNG khoanh vùng nên nó đặt background trắng cho cả nút
   kia — thành chữ trắng trên nền trắng, đọc không ra. Đã sửa 2026-09-07. */
body.ach-thankyou-page .ach-btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:48px;min-height:48px;
  background:var(--ach-paper);border:1px solid var(--ach-line);border-radius:4px;color:var(--ach-ink);
  font:700 13px/1 var(--ach-f-head);letter-spacing:.08em;text-transform:uppercase;transition:.25s}
body.ach-thankyou-page .ach-btn-ghost:hover{border-color:var(--ach-gold);color:var(--ach-gold-dk);
  background:var(--ach-paper)}
body.ach-thankyou-page .ach-btn-ghost svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;flex:none}

/* ============ ĐIỆN THOẠI ============ */
@media (max-width:991px){
  .ach-cols{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
  .ach-steps li{flex-direction:column;gap:6px;padding:11px 4px;font-size:10.5px;letter-spacing:.04em}

  /* Bảng giỏ chuyển thành THẺ. WooCommerce in sẵn thuộc tính data-title ở mỗi ô,
     nhưng Flatsome GỠ mất file woocommerce-smallscreen.css của WooCommerce nên
     phải tự viết lại — đó chính là lý do bảng hiện đang cuộn ngang và mất hẳn
     hai cột giá với thành tiền. */
  /* Khung bọc của Flatsome đặt overflow-x:auto (.sm-touch-scroll) để cuộn ngang.
     Dòng đã thành thẻ rồi nên không cần cuộn nữa — tắt đi, và cho chính thẻ table
     về display:block, nếu không nó vẫn giữ bề rộng theo lối bảng. */
  .woocommerce .cart-wrapper.sm-touch-scroll{overflow-x:visible}
  .woocommerce table.shop_table.cart{display:block;width:100%;border:0;background:transparent;overflow:visible}
  .woocommerce table.shop_table.cart tbody{display:block;width:100%}
  .woocommerce table.shop_table.cart thead{display:none}
  .woocommerce table.shop_table.cart tbody,
  .woocommerce table.shop_table.cart tbody tr,
  .woocommerce table.shop_table.cart tbody td{display:block;width:auto}
  .woocommerce table.shop_table.cart tbody tr{position:relative;margin-bottom:14px;padding:14px 14px 6px;
    background:var(--ach-paper);border:1px solid var(--ach-line);border-radius:10px}
  .woocommerce table.shop_table.cart tbody td{padding:9px 0;border-bottom:1px solid #F1EDE6;
    text-align:right !important}
  .woocommerce table.shop_table.cart tbody td:last-child{border-bottom:0}
  .woocommerce table.shop_table.cart tbody td::before{content:attr(data-title);float:left;
    font:700 12.5px/24px var(--ach-f-head);letter-spacing:.06em;text-transform:uppercase;
    color:var(--ach-muted)}

  /* Ảnh và tên nằm chung hàng trên cùng, không cần nhãn.
     ⚠ ĐỘ ƯU TIÊN: luật chung ở trên là
     ".woocommerce table.shop_table.cart tbody td" = (0,3,3). Viết tắt kiểu
     ".woocommerce td.product-name" chỉ (0,2,1) nên THUA, tên phòng vẫn bị căn phải
     và đè lên nút xoá. Mọi luật riêng cho từng ô phải viết ĐỦ CHUỖI như dưới đây. */
  .woocommerce table.shop_table.cart tbody td.product-thumbnail{
    width:auto;min-width:0;padding:0 0 10px;border-bottom:0 !important;
    text-align:left !important;float:left;margin-right:12px}
  .woocommerce table.shop_table.cart tbody td.product-thumbnail::before{display:none}
  .woocommerce table.shop_table.cart tbody td.product-thumbnail img{
    width:78px;min-width:78px;height:78px}

  .woocommerce table.shop_table.cart tbody td.product-name{
    padding:4px 34px 10px 0;border-bottom:0 !important;
    text-align:left !important;overflow:hidden}
  .woocommerce table.shop_table.cart tbody td.product-name::before{display:none}
  .woocommerce table.shop_table.cart tbody td.product-name a{font-size:15px;line-height:1.35}

  /* Xoá dòng để ba hàng Giá / Số đêm / Thành tiền nằm HẲN DƯỚI ảnh.
     Không có clear thì chúng chảy vòng quanh ảnh nổi và chồng lên nhau. */
  .woocommerce table.shop_table.cart tbody td.product-price{clear:both}

  /* Nút xoá lên góc phải thẻ.
     ⚠ Phải ép chính thẻ a về position:static và khai width cho ô: có luật khác đặt
     a.remove là position:absolute, khiến ô chứa co về 0px rồi nút tràn hẳn ra mép. */
  .woocommerce table.shop_table.cart tbody td.product-remove{
    position:absolute;top:10px;right:10px;width:26px;min-width:0;padding:0;
    border-bottom:0 !important}
  .woocommerce table.shop_table.cart tbody td.product-remove a{position:static}
  .woocommerce table.shop_table.cart tbody td.product-remove::before{display:none}

  /* ⚠ ĐỪNG dùng float:right cho ô số đêm. Ô đã căn phải sẵn (text-align:right ở
     luật chung) nên .quantity là inline-flex sẽ tự nằm bên phải. Thả nổi mà không
     xoá dòng thì hàng "Thành tiền" chảy vòng lên bên cạnh và ĐÈ LÊN NÓ. */
  .woocommerce table.shop_table.cart tbody td.product-quantity{line-height:40px}
  .woocommerce table.shop_table.cart tbody td.product-quantity::before{line-height:40px}
  .woocommerce table.shop_table.cart tbody td.product-subtotal{clear:both}

  .ach-btn-hero{width:100%;justify-content:center;padding:0 18px;letter-spacing:.08em}
  /* Nút hẹp hơn nên thu lề trong lại, chữ vẫn nằm giữa vì hai bên vẫn bằng nhau */
  body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button,
  body.ach-checkout-page #place_order{padding:0 36px;letter-spacing:.06em}
  body.ach-cart-page .wc-proceed-to-checkout a.checkout-button.button::after,
  body.ach-checkout-page #place_order::after{right:14px}
  /* Hàng dưới bảng trên điện thoại: xếp DỌC.
     Nút "Cập nhật" ở khổ máy tính là float:right — để nguyên trên màn hẹp thì nó
     đè lên chữ "Chọn thêm phòng". */
  .woocommerce table.shop_table.cart tbody td.actions{
    text-align:center !important;padding:16px 12px !important;clear:both}
  .woocommerce table.shop_table.cart tbody td.actions::before{display:none}
  .woocommerce table.shop_table.cart tbody td.actions .ach-back{
    display:flex;justify-content:center;margin-bottom:14px}
  .woocommerce table.shop_table.cart tbody td.actions button[name="update_cart"]{
    float:none;width:100%;margin:0}

  .ach-cart-actions{flex-direction:column;align-items:stretch}
  .ach-btn-update{width:100%}
  .ach-back{justify-content:center}

  .ach-ty-grid{grid-template-columns:1fr;gap:14px}
  /* Xếp dọc thì trục chính của flex là TRỤC DỌC — để nguyên flex:1 là hai nút
     bị co chiều cao xuống còn 18px. Phải tắt hẳn. */
  .ach-ty-cta{flex-direction:column}
  body.ach-thankyou-page .ach-ty-cta .ach-btn-main,
  body.ach-thankyou-page .ach-ty-cta .ach-btn-ghost{flex:none}
}

/* Dòng phòng trong thẻ tóm tắt ở trang cảm ơn */
.ach-ty-card .ach-line-room{display:flex;gap:12px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--ach-line)}
.ach-ty-card .ach-line-room img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.ach-ty-card .ach-line-room .nm{font:700 14.5px/1.35 var(--ach-f-head);color:var(--ach-ink)}
.ach-ty-card .ach-line-room .qt{font-size:13px;color:var(--ach-muted);margin-top:2px}
.ach-ty-card .ach-line-room .am{margin-left:auto;font:700 15px/1 var(--ach-f-head);
  color:var(--ach-ink);white-space:nowrap}
.ach-ty-card .ach-sum{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 0}
.ach-ty-card .ach-sum .lb{font:700 14px/1.4 var(--ach-f-head);text-transform:uppercase;letter-spacing:.06em}
.ach-ty-card .ach-sum .vl{font:700 24px/1 var(--ach-f-head);color:var(--ach-cta)}
.ach-ty-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--ach-line)}
.ach-ty-note .k{font:700 11.5px/1 var(--ach-f-head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ach-muted);margin-bottom:6px}
.ach-ty-note p{font-size:14.5px;line-height:1.65;color:var(--ach-ink)}
.ach-ty-ic-loi{background:#FBECEA;border-color:#E0574B}
.ach-ty-ic-loi svg{stroke:#D0453A}
.ach-ty .lead a{color:var(--ach-gold-dk);border-bottom:1px solid rgba(169,118,10,.35)}

/* Bố cục 2 cột vẫn để Flatsome chia (row-divided + large-7/large-5), chỉ chỉnh
   khe giữa hai cột.
   VÌ SAO: Flatsome cho mỗi cột padding 30px hai bên, nên bảng giỏ bắt đầu ở 63px
   trong khi khối tiêu đề (in ngay sau header, dùng .ach-wrap 1200px) bắt đầu ở 33px
   — lệch 30px, nhìn thấy rõ. Bỏ padding ở HAI MÉP NGOÀI và giảm padding trong còn
   17px thì hai cột ra 683/483 với khe 34px, đúng tỉ lệ bản demo (680/486, khe 34). */
/* ⚠ CHỈ áp từ 850px trở lên — đúng mốc Flatsome bắt đầu chia cột .large-*.
   Dưới mốc đó cột xếp chồng, mà lề âm -30px vẫn áp thì nội dung bị đẩy RA NGOÀI
   màn hình (đo được left = -15px trên máy 375px). Đã vấp một lần 2026-09-07. */
@media (min-width:850px){
  body.ach-cart-page .woocommerce.row.row-large > .col.large-7{padding-left:0;padding-right:17px}
  body.ach-cart-page .woocommerce.row.row-large > .cart-collaterals.large-5{padding-left:17px;padding-right:0}
  /* Trang thanh toán dùng .row thường (lề âm 15px) chứ không phải .row-large
     (lề âm 30px) như trang giỏ → hai trang lệch nhau 15px và cùng lệch so với
     khối tiêu đề. Ép về 30px cho hai trang bằng nhau. */
  /* Phải kèm max-width: Flatsome cho .row thường max-width 1170px (còn .row-large
     ở trang giỏ là 1200px). Không nới ra thì lề âm bên trái ăn, bên phải không,
     hộp đơn hàng ngắn hơn khối tiêu đề đúng 31px. */
  body.ach-checkout-page form.checkout > .row{margin-left:-30px;margin-right:-30px;max-width:1200px}
  body.ach-checkout-page form.checkout > .row > .col.large-7{padding-left:0;padding-right:17px}
  body.ach-checkout-page form.checkout > .row > .col.large-5{padding-left:17px;padding-right:0}
  /* Cột phải của trang thanh toán còn một lớp .col-inner có lề riêng — bỏ nốt,
     nếu không hộp đơn hàng ngắn hơn khối tiêu đề 31px ở mép phải. */
  body.ach-checkout-page .large-5 > .col-inner{padding:0;border:0}
}

body.ach-cart-page .cart-collaterals,
body.ach-checkout-page .checkout-sidebar{padding-top:0}