/* Biến giao diện dùng chung cho theme + vo-core. Màu gốc, cỡ chữ, khoảng cách: sửa theme.json (số trong var() ở đây chỉ là dự phòng; riêng --vo-fs-2xs, -xs-plus, -base chỉ có ở file này). Màu nhạt tự pha từ --vo-primary. CSS component chỉ dùng var(--vo-*), không ghi cứng số. Breakpoint (CSS không cho dùng biến trong @media), chỉ dùng 5 mốc: 400 / 600 / 768 / 981 / 1120px (mobile nhỏ <400, mobile to, tablet nhỏ 600–767, tablet to 768–980, desktop nhỏ 981–1119, desktop to ≥1120) (cặp ngược max 599 / 767 / 980). Ngoại lệ: max-width 600px cho thanh admin WP. */ /* Font Inter tự host, nạp latin + tiếng Việt + Kirin (tiếng Nga; file inter-cyrillic từ gói npm @fontsource-variable/inter 5.1.1, giấy phép OFL). Chữ Hàn / Trung / Nhật / Thái / Ả Rập dùng font hệ thống. Đổi font: thay file trong assets/fonts/ + "fontFamily" trong theme.json. Màn dưới 2x điểm ảnh (Windows, laptop thường): Chrome làm tròn thô nên chữ Inter lệch lên ~1px trong nút / ô cao cố định; descent-override 20% (gốc 24,1%) hạ chữ ~0,5px. Điện thoại / Retina (từ 2x) làm tròn mịn, giữ số đo gốc. "Inter Fallback" = Arial chỉnh số đo cho khớp Inter (cùng độ hạ chữ): trang không nhảy khi Inter tải xong. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-vietnamese-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.4%; line-gap-override: 0%; } @media (max-resolution: 1.99dppx) { @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; descent-override: 20%; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; descent-override: 20%; src: url("../fonts/inter-vietnamese-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; descent-override: 20%; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 18.6%; line-gap-override: 0%; } } :root { /* Màu gốc */ --vo-primary: var(--wp--preset--color--primary, #002b11); /* Màu chủ đạo: chữ, link, nút, icon, pin bản đồ */ --vo-ink: var(--vo-primary); /* Chữ chính */ --vo-ink-soft: color-mix(in srgb, var(--vo-primary) 18%, #000); /* Gốc pha chữ mờ / bóng */ --vo-muted: var(--wp--preset--color--muted, #353a37); /* Chữ phụ: mô tả, nhãn, meta */ --vo-heading: var(--vo-primary); /* Tiêu đề */ --vo-on-primary: #fff; /* Chữ / icon trên nền primary */ --vo-primary-hover: color-mix(in srgb, var(--vo-primary) 85%, #fff); /* Nút primary khi hover (sáng lên vì primary rất đậm) */ --vo-heart: var(--wp--preset--color--heart, #ff0033); /* Tim đã lưu, pin đang chọn */ --vo-skeleton: color-mix(in srgb, var(--vo-divider) 60%, var(--vo-surface)); /* nền xám của ô ảnh khi ảnh chưa về (card, hero) */ --vo-skeleton-sweep: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--vo-surface) 70%, transparent) 50%, transparent 75%); /* dải sáng quét qua ô ảnh đang chờ (card.css, hero.css) */ --vo-hot: #e8590c; /* Icon lửa điểm đến đang hot (menu). Không dùng vàng: vàng chỉ dành cho nút CTA affiliate */ --vo-accent: var(--wp--preset--color--accent, #ffc56f); /* Màu nhấn: nút .vo-button--accent (Get eSIM) */ --vo-on-accent: var(--vo-primary); /* Chữ trên nền nhấn */ --vo-accent-hover: color-mix(in srgb, var(--vo-accent) 90%, #000); /* Nút nhấn khi hover */ /* Nền */ --vo-surface: var(--wp--preset--color--surface, #fff); /* Nền card, panel */ --vo-bg: var(--wp--preset--color--subtle, #f6f7f6); /* Nền xám nhạt: section xen kẽ, ô nhập chat */ --vo-hover: color-mix(in srgb, #000 5%, var(--vo-surface)); /* Nền hover: menu, dòng, chip, nút icon */ --vo-hover-active: color-mix(in srgb, #000 10%, var(--vo-surface)); /* Nền khi đang nhấn */ --vo-selection: color-mix(in srgb, #000 14%, var(--vo-surface)); /* Nền chữ bôi đen */ --vo-user-bg: color-mix(in srgb, var(--vo-primary) 10%, #fff); /* Bong bóng tin nhắn của khách (Chat) */ --vo-overlay: rgba(0, 0, 0, .5); /* Lớp tối sau panel / modal */ /* Viền, trạng thái */ --vo-line: color-mix(in srgb, var(--vo-primary) 22%, #fff); /* Viền sắc xanh: ô search hero, outline hover */ --vo-divider: var(--wp--preset--color--border, #dbdcdc); /* Đường kẻ trung tính: viền card, divider */ --vo-focus-ring: color-mix(in srgb, var(--vo-primary) 16%, transparent); /* Vầng sáng ô nhập khi focus */ --vo-online: #34c38f; /* Chấm "online" của Chat */ --vo-warn-bg: #fdf1e0; /* Nền hộp lưu ý */ --vo-warn-ink: #8a4b08; /* Chữ hộp lưu ý */ --vo-danger: #c62828; /* Nút / link xoá (không hoàn tác được): đỏ để khách nhận ra ngay */ --vo-danger-bg: #fdecec; /* Nền khi rê chuột / nhấn vào nút xoá */ /* Chữ trên ảnh */ --vo-on-image: #fff; /* Chữ / icon trên ảnh */ --vo-on-image-soft: rgb(255 255 255 / .88); /* Chữ phụ trên ảnh */ --vo-glass: rgb(255 255 255 / .92); /* Nền trắng mờ (badge, tim trên ảnh) */ --vo-shade: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .3) 18%, rgb(0 0 0 / 0) 35%); /* Lớp tối chân ảnh cho chữ trắng dễ đọc */ --vo-scrim: rgb(0 0 0 / .45); /* Nền tối nhỏ (nhãn trên ảnh) */ --vo-black: #000; /* Đen thuần: nền lightbox, lớp phủ khi panel bị đẩy lùi (độ mờ chỉnh bằng opacity) */ --vo-viewer-cap: linear-gradient(transparent, rgb(0 0 0 / .65)); /* Nền mờ dần sau chú thích ảnh trong lightbox */ /* Cỡ chữ (từ 17px trở lên tự co trên mobile) */ --vo-fs-2xs: 11px; /* Rất nhỏ: ghi nguồn ảnh */ --vo-fs-xs: var(--wp--preset--font-size--x-small, 13px); /* Meta, chú thích */ --vo-fs-xs-plus: 14px; /* Chữ menu ngang header */ --vo-fs-sm: var(--wp--preset--font-size--small, 15px); /* Chữ phụ, nút */ --vo-fs-base: var(--wp--preset--font-size--base, 16px); /* Menu, ô nhập (dưới 16px iPhone tự phóng to ô nhập) */ --vo-fs-md: var(--wp--preset--font-size--medium, 17px); /* Thân bài, tiêu đề card */ --vo-fs-lg: var(--wp--preset--font-size--large, 20px); /* Tiêu đề nhỏ */ --vo-fs-xl: var(--wp--preset--font-size--x-large, 26px); /* H3 */ --vo-fs-2xl: var(--wp--preset--font-size--xx-large, 36px); /* H2 */ --vo-fs-hero: var(--wp--preset--font-size--huge, 56px); /* H1 trên hero */ /* Khoảng cách */ --vo-space-1: var(--wp--preset--spacing--10, 4px); --vo-space-2: var(--wp--preset--spacing--20, 8px); --vo-space-3: var(--wp--preset--spacing--30, 12px); --vo-space-4: var(--wp--preset--spacing--40, 16px); --vo-space-5: var(--wp--preset--spacing--50, 24px); --vo-space-6: var(--wp--preset--spacing--60, clamp(32px, 4vw, 48px)); /* Giữa các khối nhỏ */ --vo-space-7: var(--wp--preset--spacing--70, clamp(48px, 6vw, 72px)); /* Giữa các section */ /* Khung trang */ --vo-container: var(--wp--style--global--wide-size, 1140px); /* Rộng tối đa nội dung (theme.json > layout.wideSize) */ /* Nút chuẩn */ --vo-button-h: var(--vo-btn); /* Cao mọi .vo-button, Get eSIM, Search hero */ --vo-text-drop: 1px; /* Hạ số / chữ hoa trong vòng tròn (số thứ tự, đếm tim) cho đúng tâm. KHÔNG dùng cho nút: chữ thường tự đã đủ thấp */ --vo-button-px: var(--vo-space-4); /* Đệm ngang nút chuẩn */ /* Menu header */ --vo-nav-top-fs: var(--vo-fs-base); /* Chữ menu header (North...) + tiêu đề panel */ --vo-nav-fs: var(--vo-fs-sm); /* Chữ trong bảng menu xổ xuống */ --vo-nav-link-fs: var(--vo-fs-xs-plus); /* Chữ mục menu ngang trên header: cỡ nhỏ nhất; từ 1200px tự to dần, tối đa +1px */ --vo-nav-fw: 600; /* Độ đậm mục menu */ --vo-nav-sub-fw: 500; /* Độ đậm tên điểm đến trong bảng menu */ --vo-nav-item-h: var(--vo-button-h); /* Cao mục menu header */ --vo-nav-item-px: var(--vo-button-px); /* Đệm ngang mục menu header */ /* Ô tìm kiếm (hero = panel header) */ --vo-search-field-h: 58px; /* Cao ô search hero + thanh nhập panel */ --vo-search-field-fs: var(--vo-fs-base); /* Cỡ chữ gợi ý "Places to go..." */ --vo-search-field-fw: 400; /* Độ đậm chữ gợi ý */ --vo-search-field-ink: color-mix(in srgb, var(--vo-muted) 78%, #fff); /* Màu chữ gợi ý (giữ ≥ 70% cho tương phản 4.5:1) */ /* Tên mục trong danh sách (Search, Saved, card bản đồ) */ --vo-item-title-fs: var(--vo-fs-sm); /* Cỡ tên mục (Hanoi...) */ --vo-item-sub-fs: var(--vo-fs-xs); /* Cỡ dòng phụ dưới tên */ --vo-item-title-fw: 600; /* Độ đậm tên mục */ --vo-overlay-sub-fw: 350; /* Độ đậm chữ phụ ở card chữ trên ảnh */ --vo-overlay-title-fw: 750; /* Độ đậm tên ở card chữ trên ảnh */ /* Tiêu đề section */ --vo-sec-title-fs: var(--vo-fs-lg); /* Cỡ tiêu đề section */ /* Hero trang chủ */ --vo-label-fs: var(--vo-fs-xs-plus); /* Chữ nhãn ô nhập, mọi form của site (.vo-label, base.css) */ --vo-field-h: 48px; /* Cao ô nhập (đăng nhập, My trips, viết đánh giá) */ --vo-input-fs: var(--vo-fs-sm); /* Chữ trong ô nhập (đăng nhập, My trips, viết đánh giá). Màn cảm ứng tự lên 16px ở cuối file: iPhone phóng to trang khi ô nhập nhỏ hơn 16px */ --vo-title-sm-fs: 30px; /* Cỡ H1 trang attraction (tên dài): giữa H2 36px và H3 26px; điện thoại dùng H3 (hero.css) */ --vo-title-sm-fw: 800; /* Độ đậm H1 trang attraction + bài viết (tên dài, cỡ nhỏ hơn hero) */ --vo-hero-block-gap: var(--vo-space-3); /* Khoảng đều giữa các khối dưới ảnh hero: tag, tên (+ Share / Save), chip meta, hộp số liệu (.vo-stats) */ --vo-hero-title-fw: 800; /* Độ đậm H1 hero (font biến thiên: mọi mức 100-900) */ /* Kích thước */ --vo-icon: 20px; /* Icon header (search, saved, map) */ --vo-icon-back: 20px; /* Nút back của panel (Map, Saved); = icon nút back / X các panel khác */ --vo-icon-row: 18px; /* Icon đầu dòng trong danh sách */ --vo-list-pad: var(--vo-space-4); /* Đệm ngang ô danh sách có icon (checklist, Getting there): icon + chữ các khối này thẳng cột nhau */ --vo-list-gap: var(--vo-space-3); /* Icon -> chữ trong danh sách */ --vo-secnav-h: 48px; /* Cao thanh In-page nav dính */ --vo-btn: 44px; /* Vùng bấm nút icon tròn (chuẩn Apple 44px) */ --vo-gap: 12px; /* Khoảng icon <-> chữ */ --vo-drawer-w: min(480px, 100vw); /* Rộng panel trượt từ phải (từ 600px; điện thoại: toàn màn hình) */ --vo-panel-dur: 200ms; /* Thời gian panel trượt vào / ra (Menu, Map, Saved, My trips, đăng nhập) */ --vo-panel-ease: ease-out; /* Đường cong panel: không lao gấp rồi bò cái đuôi như --vo-ease, nên đóng xong là hết, không còn mẩu nhích ở mép */ --vo-panel-push: .3; /* Panel dưới bị kéo sang trái bấy nhiêu bề ngang khi panel mới đè lên (kiểu iOS) */ --vo-panel-dim: .1; /* Độ tối phủ lên panel dưới khi bị panel mới đè (0–1) */ --vo-stickycta-h: 82px;/* Chỗ banner affiliate đáy mobile chiếm tính từ mép màn hình (banner 70px + cách đáy 12px); chat + nút lên đầu trang nâng lên theo số này */ --vo-panel-bar-h: calc(var(--vo-header-h) + 1px); /* Thanh tiêu đề panel = header + 1px kẻ, trùng mép dưới header */ --vo-panel-top: var(--wp-admin--admin-bar--height, 0px); /* Panel bắt đầu dưới thanh admin (khi đăng nhập) */ --vo-header-h: 52px; /* Cao header mobile/tablet */ /* Bo góc */ --vo-radius-xs: 4px; /* Nhãn rất nhỏ, góc nhọn bong bóng chat */ --vo-radius-sm: 8px; /* Thumbnail nhỏ, ô input */ --vo-radius-md: 12px; /* Ô menu mobile, menu tài khoản, popup My trips */ --vo-radius-card: var(--vo-radius-sm); /* Mọi card */ --vo-radius-panel: 16px; /* Panel nổi, dialog, khung chat */ --vo-radius-pill: 999px; /* Nút, badge viên thuốc */ /* Bóng, icon đo */ --vo-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 4px rgba(0, 0, 0, .12)); --vo-shadow-card: var(--wp--preset--shadow--md, 0 6px 20px rgba(0, 0, 0, .12)); /* Card khi hover */ --vo-shadow-pop: var(--wp--preset--shadow--pop, 0 10px 40px rgba(0, 0, 0, .28)); /* Popup, dialog, khung chat */ --vo-gauge-cool: #2f8fe0; /* Icon đo: màu dự phòng (mốc thật ở vo_gauge_* trong inc/ui-cards.php) */ --vo-crowd-1: var(--vo-primary); /* Thanh độ đông: Quiet */ --vo-crowd-2: var(--vo-primary); /* Moderate */ --vo-crowd-3: var(--vo-primary); /* Busy */ --vo-gauge-bg: #dbe3de; /* Phần trống của icon đo */ --vo-shadow-soft: 0 0 12px rgba(0, 0, 0, .12); /* Viền bóng nhẹ quanh khối nổi (thanh thông số) */ --vo-shadow-mega: 0 5px 10px -5px rgba(0, 0, 0, .08); /* Bảng menu xổ xuống: dải mờ ngắn dưới đáy */ --vo-shadow-drawer: -8px 0 32px rgba(0, 0, 0, .18); /* Panel trượt từ phải */ /* Chuyển động */ --vo-dur: 280ms; /* Mở/đóng panel, menu, carousel */ --vo-dur-fast: 150ms; /* Hover, fade nhỏ */ --vo-ease: cubic-bezier(.32, .72, 0, 1); /* Đường cong chuyển động chung */ --vo-ease-exit: cubic-bezier(.4, 0, 1, 1); /* Lúc đóng hộp thoại: chậm đầu, nhanh cuối, mờ về 0 đúng khung cuối (không đuôi kéo dài) */ /* z-index */ --vo-z-card: 2; /* Nút trong card nằm trên link phủ card */ --vo-z-sticky: 100; /* In-page nav dính */ --vo-z-header: 1000; /* Header sticky */ --vo-z-chat: 99990; /* Chat: nút = số này, lớp chắn +1, khung +2 */ --vo-z-overlay: 100001; /* Search / Saved / Map / menu: trên Chat */ --vo-chat-fab-size: 58px; /* Nút chat tròn (chat.css); khai ở đây vì nút Back to top (totop.css) phải né nó trên desktop */ --vo-chat-fab-right: 45px; /* Cách mép phải (desktop) */ --vo-chat-fab-bottom: 45px; /* Cách mép dưới (desktop) */ } /* Máy cảm ứng: Inter đã đúng tâm, không hạ chữ */ @media (pointer: coarse) { :root { --vo-text-drop: 0px; --vo-input-fs: var(--vo-fs-base); } } @media (min-width: 981px) { :root { --vo-header-h: 60px; } /* Cao header desktop */ } /* Lề + khung trang: phải đặt ở body vì biến lề của WP (--wp--style--root--padding-left) chỉ có từ body trở xuống; đặt ở :root thì luôn rơi về 16px, lệch với lề thật của nội dung (16–32px). */ body { --vo-gutter: var(--wp--style--root--padding-left, 16px); /* Lề trái/phải (theme.json > styles.spacing.padding) */ --vo-wrap: calc(var(--vo-container) + 2 * var(--vo-gutter)); /* Rộng khung kể cả lề: header, footer (nội dung bên trong = đúng bề ngang nội dung trang) */ } /* Icon thay ảnh khi card / dòng không có ảnh (xem card.css) */ :root { --vo-ph-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='360' fill='%23eaf0ea'/%3E%3Cpath d='M-20 90C200 70 330 140 560 120S900 60 1220 110' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M-20 250C150 280 380 210 600 250S1000 300 1220 230' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M120 -20C160 120 90 220 150 380' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M420 -20C470 100 380 230 430 380' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M760 -20C700 110 820 240 740 380' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M1040 -20C1000 130 1100 250 1040 380' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M-20 170L1220 190' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M900 -30C850 80 960 160 900 250S930 340 910 400' fill='none' stroke='%23cfe1ea' stroke-width='54' stroke-linecap='round'/%3E%3Cellipse cx='280' cy='300' rx='84' ry='40' fill='%23cfe1ea'/%3E%3Cellipse cx='560' cy='60' rx='46' ry='22' fill='%23cfe1ea'/%3E%3Cg transform='translate(190 130)'%3E%3Cpath d='M0 0L-10 -19A12 12 0 1 1 10 -19Z' fill='%23002b11'/%3E%3Ccircle cx='0' cy='-26' r='4.5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(380 72)'%3E%3Cpath d='M0 0L-10 -19A12 12 0 1 1 10 -19Z' fill='%23002b11'/%3E%3Ccircle cx='0' cy='-26' r='4.5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(1040 120)'%3E%3Cpath d='M0 0L-10 -19A12 12 0 1 1 10 -19Z' fill='%23002b11'/%3E%3Ccircle cx='0' cy='-26' r='4.5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(1090 290)'%3E%3Cpath d='M0 0L-10 -19A12 12 0 1 1 10 -19Z' fill='%23002b11'/%3E%3Ccircle cx='0' cy='-26' r='4.5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(640 322)'%3E%3Cpath d='M0 0L-10 -19A12 12 0 1 1 10 -19Z' fill='%23002b11'/%3E%3Ccircle cx='0' cy='-26' r='4.5' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); /* hình bản đồ trang trí cho khung "Show map" (điểm đến + attraction) trước khi bản đồ thật tải */ --vo-ph-img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20400%20300%27%20preserveAspectRatio=%27xMidYMax%20slice%27%3E%3Crect%20width=%27400%27%20height=%27300%27%20fill=%27%23f1f1f1%27/%3E%3Ccircle%20cx=%27285%27%20cy=%2795%27%20r=%2734%27%20fill=%27%23c9c9c9%27%20opacity=%27.75%27/%3E%3Cpath%20d=%27M0%20210Q70%20140%20140%20190T290%20175T400%20190V300H0Z%27%20fill=%27%23353a37%27%20opacity=%27.1%27/%3E%3Cpath%20d=%27M0%20245Q90%20190%20180%20232T400%20220V300H0Z%27%20fill=%27%23353a37%27%20opacity=%27.16%27/%3E%3C/svg%3E"); /* Ảnh thay thế khi bài không có ảnh (đồi + mặt trời); màu viết cứng vì SVG data-URI không đọc được biến CSS */ --vo-ph-attraction: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Crect%20width='400'%20height='300'%20fill='%23f1f1f1'/%3E%3Ccircle%20cx='305'%20cy='85'%20r='30'%20fill='%23c9c9c9'%20opacity='.75'/%3E%3Cpath%20d='M0%20225%20L45%20170%20Q65%20140%2088%20172%20L115%20210%20L155%20135%20Q175%20105%20200%20140%20L245%20215%20L285%20165%20Q305%20145%20325%20170%20L370%20220%20L400%20205%20V300%20H0Z'%20fill='%23353a37'%20opacity='.1'/%3E%3Cpath%20d='M0%20255%20L75%20195%20Q100%20165%20125%20200%20L175%20255%20L255%20190%20Q280%20165%20305%20195%20L355%20255%20L400%20240%20V300%20H0Z'%20fill='%23353a37'%20opacity='.16'/%3E%3Cpath%20d='M0%20272%20Q100%20262%20200%20272%20T400%20268%20V300%20H0Z'%20fill='%23353a37'%20opacity='.22'/%3E%3Cpath%20d='M168%20282%20H226%20L216%20292%20H178Z'%20fill='%23353a37'%20opacity='.3'/%3E%3C/svg%3E"); /* Điểm tham quan chưa có ảnh: núi đá vôi + sông; màu viết cứng vì SVG data-URI không đọc được biến CSS */ --vo-ph-dish: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Crect%20width='300'%20height='300'%20fill='%23f1f1f1'/%3E%3Cg%20fill='none'%20stroke='%23c9c9c9'%20stroke-width='7'%20stroke-linecap='round'%20opacity='.85'%3E%3Cpath%20d='M115%20118%20Q103%20100%20115%2082%20Q127%2064%20115%2046'/%3E%3Cpath%20d='M150%20112%20Q138%2092%20150%2072%20Q162%2052%20150%2032'/%3E%3Cpath%20d='M185%20118%20Q173%20100%20185%2082%20Q197%2064%20185%2046'/%3E%3C/g%3E%3Cpath%20d='M215%2070%20L262%20170'%20stroke='%23353a37'%20stroke-width='7'%20stroke-linecap='round'%20opacity='.25'/%3E%3Cpath%20d='M232%2062%20L279%20162'%20stroke='%23353a37'%20stroke-width='7'%20stroke-linecap='round'%20opacity='.25'/%3E%3Cpath%20d='M55%20160%20H245%20Q245%20240%20150%20246%20Q55%20240%2055%20160Z'%20fill='%23353a37'%20opacity='.16'/%3E%3Cellipse%20cx='150'%20cy='160'%20rx='95'%20ry='15'%20fill='%23353a37'%20opacity='.1'/%3E%3Cpath%20d='M112%20246%20H188%20V260%20H112Z'%20fill='%23353a37'%20opacity='.2'/%3E%3C/svg%3E"); /* Món ăn chưa có ảnh: bát có khói + đũa */ }