{"id":3856,"date":"2026-02-24T14:54:34","date_gmt":"2026-02-24T07:54:34","guid":{"rendered":"https:\/\/backpacker.com.vn\/?page_id=3856"},"modified":"2026-02-24T15:31:44","modified_gmt":"2026-02-24T08:31:44","slug":"trai-nghiem-cua-khach-hang","status":"publish","type":"page","link":"https:\/\/backpacker.com.vn\/trai-nghiem-cua-khach-hang\/","title":{"rendered":"Tr\u1ea3i nghi\u1ec7m c\u1ee7a kh\u00e1ch h\u00e0ng"},"content":{"rendered":"\n<div class=\"wp-block-cover\" style=\"margin-top:-20px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;min-height:250px;aspect-ratio:unset;\"><img decoding=\"async\" width=\"960\" height=\"719\" class=\"wp-block-cover__image-background wp-image-1353 size-full\" alt=\"\" src=\"https:\/\/backpacker.com.vn\/wp-content\/uploads\/2025\/07\/89c13f360cfaa8a4f1eb.jpg\" style=\"object-position:49% 75%\" data-object-fit=\"cover\" data-object-position=\"49% 75%\" srcset=\"https:\/\/backpacker.com.vn\/wp-content\/uploads\/2025\/07\/89c13f360cfaa8a4f1eb.jpg 960w, https:\/\/backpacker.com.vn\/wp-content\/uploads\/2025\/07\/89c13f360cfaa8a4f1eb-534x400.jpg 534w, https:\/\/backpacker.com.vn\/wp-content\/uploads\/2025\/07\/89c13f360cfaa8a4f1eb-768x575.jpg 768w, https:\/\/backpacker.com.vn\/wp-content\/uploads\/2025\/07\/89c13f360cfaa8a4f1eb-510x382.jpg 510w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#7a816f\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-cover alignwide is-light has-custom-content-position is-position-bottom-center\" style=\"min-height:186px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-contrast-background-color has-background-dim-0 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull has-custom-content-position is-position-bottom-center\" style=\"padding-top:0px;padding-right:0;padding-bottom:10px;padding-left:0;min-height:50px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-90 has-background-dim has-background-gradient\" style=\"background:linear-gradient(0deg,rgb(0,0,0) 40%,rgba(255,255,255,0) 100%)\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-container-core-cover-is-layout-5e88ef3c wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-cf52bc41 wp-block-group-is-layout-constrained\" style=\"background-color:#ffffff00;padding-right:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-82aceafb\"><h2 class=\"uagb-heading-text\">Tr\u1ea3i nghi\u1ec7m c\u1ee7a kh\u00e1ch h\u00e0ng<\/h2><\/div>\n\n\n\n<p class=\"has-text-align-left has-contrast-3-color has-text-color has-link-color wp-elements-9dd9e5bbbec08bd133d7c7baee6d8535\" style=\"font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.204), 16px);\">Du l\u1ecbch mang \u0111\u1ebfn m\u00f4i tr\u01b0\u1eddng l\u00fd t\u01b0\u1edfng \u0111\u1ec3 g\u1eb7p g\u1ee1 nh\u1eefng ng\u01b0\u1eddi b\u1ea1n m\u1edbi, chia s\u1ebb tr\u1ea3i nghi\u1ec7m v\u00e0 t\u1ea1o n\u00ean nh\u1eefng k\u1ef7 ni\u1ec7m \u0111\u00e1ng nh\u1edb c\u00f9ng nh\u1eefng ng\u01b0\u1eddi \u0111\u1ed3ng h\u00e0nh c\u00f3 chung \u0111am m\u00ea kh\u00e1m ph\u00e1.<\/p>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Tr\u1ea3i Nghi\u1ec7m Kh\u00e1ch H\u00e0ng &#8211; Luxury Edition<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <style>\n        :root {\n            --accent-color: #99FF99;\n            --accent-dark: #7be07b;\n            --bg-pure: #ffffff;\n            --text-main: #1a1a1a;\n            --text-light: #555555;\n            --border-light: rgba(0, 0, 0, 0.06);\n            --glass-bg: rgba(255, 255, 255, 0.85);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Plus Jakarta Sans', sans-serif;\n        }\n\n        body {\n            background-color: var(--bg-pure);\n            color: var(--text-main);\n            -webkit-font-smoothing: antialiased;\n        }\n\n        \/* Container & Typography *\/\n        .luxury-section {\n            padding: 100px 40px;\n            max-width: 1600px;\n            margin: 0 auto;\n        }\n\n        .section-heading {\n            text-align: center;\n            margin-bottom: 80px;\n            max-width: 700px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .section-heading h2 {\n            font-size: 3.5rem;\n            font-weight: 300;\n            letter-spacing: -1.5px;\n            line-height: 1.2;\n            margin-bottom: 20px;\n        }\n\n        .section-heading h2 strong {\n            font-weight: 600;\n            position: relative;\n        }\n\n        .section-heading h2 strong::after {\n            content: '';\n            position: absolute;\n            bottom: 10%;\n            left: 0;\n            width: 100%;\n            height: 30%;\n            background-color: var(--accent-color);\n            z-index: -1;\n            opacity: 0.5;\n            transition: opacity 0.3s ease;\n        }\n\n        .section-heading p {\n            color: var(--text-light);\n            font-size: 1.15rem;\n            font-weight: 300;\n            line-height: 1.8;\n        }\n\n        \/* Refined Bento Grid *\/\n        .bento-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            grid-auto-rows: 340px;\n            gap: 30px;\n            grid-auto-flow: dense;\n        }\n\n        @media (max-width: 1200px) {\n            .bento-grid { grid-template-columns: repeat(3, 1fr); }\n        }\n        @media (max-width: 900px) {\n            .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 20px;}\n        }\n        @media (max-width: 600px) {\n            .bento-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(300px, auto); }\n            .luxury-section { padding: 60px 20px; }\n            .section-heading h2 { font-size: 2.5rem; }\n        }\n\n        \/* Spans *\/\n        .col-2 { grid-column: span 2; }\n        .row-2 { grid-row: span 2; }\n        @media (max-width: 600px) {\n            .col-2, .row-2 { grid-column: span 1; grid-row: span 1; }\n        }\n\n        \/* Base Card Styling *\/\n        .card {\n            border-radius: 24px;\n            overflow: hidden;\n            position: relative;\n            background: var(--bg-pure);\n            border: 1px solid var(--border-light);\n            display: flex;\n            flex-direction: column;\n            opacity: 0;\n            transform: translateY(40px);\n            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .card.is-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .card:hover {\n            border-color: rgba(153, 255, 153, 0.6);\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03), 0 0 40px rgba(153, 255, 153, 0.1);\n            transform: translateY(-5px);\n        }\n\n        \/* Media Card *\/\n        .card-media {\n            border: none;\n            cursor: pointer; \/* Th\u00eam con tr\u1ecf click *\/\n        }\n\n        .media-bg {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            object-fit: cover;\n            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .card:hover .media-bg {\n            transform: scale(1.04);\n        }\n\n        \/* Glassmorphism Panel *\/\n        .glass-panel {\n            position: absolute;\n            bottom: 20px;\n            left: 20px;\n            right: 20px;\n            background: var(--glass-bg);\n            backdrop-filter: blur(16px);\n            -webkit-backdrop-filter: blur(16px);\n            border: 1px solid rgba(255, 255, 255, 0.5);\n            border-radius: 16px;\n            padding: 24px;\n            z-index: 2;\n            transition: opacity 0.3s ease;\n        }\n\n        \/* \u1ea8n ch\u1eef \u0111i khi hover (t\u00f9y ch\u1ecdn) \u0111\u1ec3 nh\u00ecn \u1ea3nh r\u00f5 h\u01a1n m\u1ed9t ch\u00fat tr\u01b0\u1edbc khi click *\/\n        .card-media:hover .glass-panel {\n            opacity: 0.9;\n        }\n\n        \/* Text Card *\/\n        .card-text {\n            padding: 40px 30px;\n            justify-content: space-between;\n        }\n\n        .quote-mark {\n            font-size: 1.5rem;\n            color: var(--accent-dark);\n            margin-bottom: 20px;\n            opacity: 0.6;\n        }\n\n        .review-text {\n            font-size: 1.05rem;\n            line-height: 1.7;\n            font-weight: 400;\n            color: var(--text-main);\n            margin-bottom: 20px;\n            display: -webkit-box;\n            -webkit-line-clamp: 5;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        .glass-panel .review-text {\n            font-size: 0.95rem;\n            -webkit-line-clamp: 3;\n            margin-bottom: 15px;\n        }\n\n        .col-2.row-2 .glass-panel .review-text {\n            font-size: 1.1rem;\n            -webkit-line-clamp: 4;\n        }\n\n        \/* Customer Info *\/\n        .customer {\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            margin-top: auto;\n        }\n\n        .customer img {\n            width: 48px;\n            height: 48px;\n            border-radius: 50%;\n            object-fit: cover;\n            border: 2px solid var(--accent-color); \n            padding: 2px;\n            background: #fff;\n        }\n\n        .customer-info h4 {\n            font-size: 0.95rem;\n            font-weight: 600;\n            color: var(--text-main);\n        }\n\n        .stars {\n            color: #d4af37; \n            font-size: 0.75rem;\n            margin-top: 4px;\n            letter-spacing: 2px;\n        }\n\n        \/* =============== MODAL (LIGHTBOX) CSS =============== *\/\n        .media-modal {\n            display: flex;\n            position: fixed;\n            top: 0; left: 0;\n            width: 100vw; height: 100vh;\n            background: rgba(0, 0, 0, 0.9);\n            z-index: 9999;\n            justify-content: center;\n            align-items: center;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.4s ease;\n            backdrop-filter: blur(8px);\n        }\n\n        .media-modal.active {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        .modal-content {\n            position: relative;\n            max-width: 90vw;\n            max-height: 90vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .modal-content img, \n        .modal-content video {\n            max-width: 100%;\n            max-height: 90vh;\n            border-radius: 12px;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n            object-fit: contain;\n        }\n\n        .close-btn {\n            position: absolute;\n            top: 20px;\n            right: 30px;\n            color: #fff;\n            font-size: 2.5rem;\n            cursor: pointer;\n            z-index: 10000;\n            transition: color 0.3s ease;\n        }\n\n        .close-btn:hover {\n            color: var(--accent-color);\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <section class=\"luxury-section\">\n        <div class=\"bento-grid\" id=\"grid-container\">\n            <\/div>\n    <\/section>\n\n    <div class=\"media-modal\" id=\"mediaModal\">\n        <span class=\"close-btn\" id=\"closeModal\">&times;<\/span>\n        <div class=\"modal-content\" id=\"modalContent\">\n            <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", () => {\n            const reviews = [\n                \"H\u01b0\u1edbng d\u1eabn vi\u00ean c\u1ee7a ch\u00fang t\u00f4i r\u1ea5t vui v\u1ebb v\u00e0 hi\u1ec3u bi\u1ebft, khi\u1ebfn tr\u1ea3i nghi\u1ec7m tr\u1edf n\u00ean v\u00f4 c\u00f9ng th\u00fa v\u1ecb. Ch\u1eafc ch\u1eafn s\u1ebd gi\u1edbi thi\u1ec7u cho b\u1ea1n b\u00e8 v\u00e0 gia \u0111\u00ecnh.\",\n                \"Chuy\u1ebfn \u0111i th\u1eadt tuy\u1ec7t v\u1eddi! T\u00f4i \u0111\u00e3 kh\u00e1m ph\u00e1 \u0111\u01b0\u1ee3c r\u1ea5t nhi\u1ec1u \u0111i\u1ec1u m\u1edbi v\u00e0 th\u01b0\u1edfng th\u1ee9c nh\u1eefng m\u00f3n \u0103n ngon. C\u1ea3m \u01a1n r\u1ea5t nhi\u1ec1u!\",\n                \"Chuy\u1ebfn \u0111i n\u00e0y \u0111\u00e3 kh\u01a1i d\u1eady ni\u1ec1m \u0111am m\u00ea kh\u00e1m ph\u00e1 nh\u1eefng v\u00f9ng \u0111\u1ea5t m\u1edbi c\u1ee7a t\u00f4i. T\u00f4i \u0111\u00e3 b\u1eaft \u0111\u1ea7u l\u00ean k\u1ebf ho\u1ea1ch cho chuy\u1ebfn phi\u00eau l\u01b0u ti\u1ebfp theo v\u00e0 kh\u00f4ng th\u1ec3 ch\u1edd \u0111\u1ee3i \u0111\u1ec3 tr\u1ea3i nghi\u1ec7m th\u00eam nhi\u1ec1u \u0111i\u1ec1u m\u1edbi m\u1ebb.\",\n                \"M\u1ed9t chuy\u1ebfn \u0111i tuy\u1ec7t v\u1eddi! Phong c\u1ea3nh \u0111\u1eb9p, d\u1ecbch v\u1ee5 tuy\u1ec7t v\u1eddi v\u00e0 h\u01b0\u1edbng d\u1eabn vi\u00ean \u0111\u1ea7y nhi\u1ec7t huy\u1ebft. \u0110\u00e3 t\u1ea1o n\u00ean nh\u1eefng k\u1ef7 ni\u1ec7m kh\u00f4ng th\u1ec3 qu\u00ean.\",\n                \"R\u1ea5t h\u00e0i l\u00f2ng v\u1edbi chuy\u1ebfn tour n\u00e0y. M\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c t\u1ed5 ch\u1ee9c r\u1ea5t t\u1ed1t, t\u1eeb l\u1ecbch tr\u00ecnh \u0111\u1ebfn ch\u1ed7 \u1edf. C\u1ea3m \u01a1n v\u00ec m\u1ed9t chuy\u1ebfn \u0111i \u0111\u00e1ng nh\u1edb.\",\n                \"T\u00f4i ch\u1eafc ch\u1eafn s\u1ebd gi\u1edbi thi\u1ec7u chuy\u1ebfn \u0111i n\u00e0y cho b\u1ea1n b\u00e8 v\u00e0 gia \u0111\u00ecnh. \u0110\u00e2y l\u00e0 m\u1ed9t tr\u1ea3i nghi\u1ec7m r\u1ea5t \u0111\u00e1ng \u0111\u1ec3 chia s\u1ebb v\u1edbi nh\u1eefng ng\u01b0\u1eddi th\u00e2n y\u00eau.\",\n                \"M\u1ecdi th\u1ee9 \u0111\u1ec1u ho\u00e0n h\u1ea3o! T\u1eeb kh\u00e2u l\u00ean k\u1ebf ho\u1ea1ch \u0111\u1ebfn khi k\u1ebft th\u00fac chuy\u1ebfn \u0111i. T\u00f4i r\u1ea5t h\u00e0i l\u00f2ng v\u00e0 s\u1ebd ti\u1ebfp t\u1ee5c \u1ee7ng h\u1ed9 c\u00f4ng ty trong nh\u1eefng l\u1ea7n t\u1edbi.\",\n                \"Chuy\u1ebfn \u0111i th\u1ef1c s\u1ef1 x\u1ee9ng \u0111\u00e1ng v\u1edbi t\u1eebng \u0111\u1ed3ng ti\u1ec1n b\u1ecf ra. T\u00f4i \u0111\u00e3 c\u00f3 nh\u1eefng tr\u1ea3i nghi\u1ec7m kh\u00f4ng th\u1ec3 qu\u00ean. C\u1ea3m \u01a1n v\u00ec \u0111\u00e3 t\u1ed5 ch\u1ee9c m\u1ed9t tour tuy\u1ec7t v\u1eddi nh\u01b0 v\u1eady.\",\n                \"T\u00f4i r\u1ea5t h\u00e0i l\u00f2ng v\u1edbi gi\u00e1 tr\u1ecb nh\u1eadn \u0111\u01b0\u1ee3c so v\u1edbi chi ph\u00ed. So v\u1edbi ch\u1ea5t l\u01b0\u1ee3ng d\u1ecbch v\u1ee5 v\u00e0 tr\u1ea3i nghi\u1ec7m, t\u00f4i th\u1ea5y m\u1ee9c gi\u00e1 r\u1ea5t h\u1ee3p l\u00fd.\",\n                \"T\u00f4i \u0111\u00e3 h\u1ecdc \u0111\u01b0\u1ee3c r\u1ea5t nhi\u1ec1u t\u1eeb chuy\u1ebfn \u0111i n\u00e0y. Kh\u00f4ng ch\u1ec9 v\u1ec1 \u0111\u1ecba l\u00fd v\u00e0 v\u0103n h\u00f3a, m\u00e0 c\u00f2n v\u1ec1 ch\u00ednh b\u1ea3n th\u00e2n m\u00ecnh. T\u00f4i c\u1ea3m th\u1ea5y m\u00ecnh \u0111\u00e3 tr\u01b0\u1edfng th\u00e0nh h\u01a1n sau chuy\u1ebfn \u0111i.\",\n                \"Chuy\u1ebfn \u0111i n\u00e0y gi\u00fap t\u00f4i th\u01b0 gi\u00e3n v\u00e0 gi\u1ea3i t\u1ecfa c\u0103ng th\u1eb3ng. T\u00f4i c\u00f3 c\u01a1 h\u1ed9i t\u1eadn h\u01b0\u1edfng nh\u1eefng kho\u1ea3nh kh\u1eafc y\u00ean b\u00ecnh, tham gia c\u00e1c ho\u1ea1t \u0111\u1ed9ng ngo\u00e0i tr\u1eddi v\u00e0 th\u01b0\u1edfng th\u1ee9c \u1ea9m th\u1ef1c \u0111\u1ecba ph\u01b0\u01a1ng.\",\n                \"T\u1ea5t c\u1ea3 nh\u1eefng b\u1ee9c \u1ea3nh t\u00f4i ch\u1ee5p trong chuy\u1ebfn \u0111i n\u00e0y \u0111\u1ec1u r\u1ea5t \u0111\u1eb9p. C\u1ea3nh thi\u00ean nhi\u00ean h\u00f9ng v\u0129, ki\u1ebfn tr\u00fac \u0111\u1ed9c \u0111\u00e1o v\u00e0 nh\u1eefng kho\u1ea3nh kh\u1eafc \u0111\u00e1ng nh\u1edb c\u00f9ng b\u1ea1n b\u00e8 \u0111\u00e3 t\u1ea1o n\u00ean nh\u1eefng k\u1ef7 ni\u1ec7m tuy\u1ec7t v\u1eddi.\",\n                \"T\u00f4i \u0111\u1eb7c bi\u1ec7t \u1ea5n t\u01b0\u1ee3ng v\u1edbi d\u1ecbch v\u1ee5 ch\u0103m s\u00f3c kh\u00e1ch h\u00e0ng c\u1ee7a c\u00f4ng ty. H\u1ecd lu\u00f4n s\u1eb5n s\u00e0ng h\u1ed7 tr\u1ee3 v\u00e0 tr\u1ea3 l\u1eddi m\u1ecdi th\u1eafc m\u1eafc. Nh\u1edd h\u1ecd m\u00e0 chuy\u1ebfn \u0111i c\u1ee7a t\u00f4i di\u1ec5n ra su\u00f4n s\u1ebb v\u00e0 ho\u00e0n h\u1ea3o.\",\n                \"Chuy\u1ebfn \u0111i n\u00e0y th\u1ef1c s\u1ef1 m\u1edf mang t\u1ea7m m\u1eaft cho t\u00f4i. T\u00f4i \u0111\u01b0\u1ee3c kh\u00e1m ph\u00e1 nh\u1eefng n\u1ec1n v\u0103n h\u00f3a kh\u00e1c nhau, th\u01b0\u1edfng th\u1ee9c \u1ea9m th\u1ef1c \u0111\u1ed9c \u0111\u00e1o v\u00e0 g\u1eb7p g\u1ee1 nh\u1eefng con ng\u01b0\u1eddi m\u1edbi. \u0110\u00e2y th\u1ef1c s\u1ef1 l\u00e0 m\u1ed9t h\u00e0nh tr\u00ecnh \u0111\u00e1ng gi\u00e1.\",\n                \"C\u00f4ng ty du l\u1ecbch \u0111\u00e3 l\u00ean k\u1ebf ho\u1ea1ch m\u1ecdi th\u1ee9 r\u1ea5t ho\u00e0n h\u1ea3o, t\u1eeb \u0111\u1eb7t kh\u00e1ch s\u1ea1n \u0111\u1ebfn s\u1eafp x\u1ebfp c\u00e1c ho\u1ea1t \u0111\u1ed9ng. \u0110\u1ed3 \u0103n ngon v\u00e0 \u0111a d\u1ea1ng, ph\u00f9 h\u1ee3p v\u1edbi kh\u1ea9u v\u1ecb c\u1ee7a m\u1ecdi ng\u01b0\u1eddi.\"\n            ];\n\n            const gridStructure = [\n                { type: 'video', class: 'col-2 row-2', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/7460716052114.mp4' },\n                { type: 'text', class: '' },\n                { type: 'image', class: 'row-2', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/Screenshot-2025-04-25-at-11.04.37.png' },\n                { type: 'text', class: '' },\n                { type: 'text', class: '' },\n                { type: 'image', class: 'col-2', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/gen-h-z6881554056620_a672e7df3eb96e101de9fe6042836800-scaled.jpg' },\n                { type: 'text', class: '' },\n                { type: 'image', class: '', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/IMG_9438.jpg' },\n                { type: 'text', class: 'row-2' },\n                { type: 'text', class: '' },\n                { type: 'video', class: 'col-2 row-2', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/Ban-sao-cua-z5534349838137_f487d1f11fc6bf3905ff6bd58a78ee09.jpg' }, \/\/ L\u01b0u \u00fd: file n\u00e0y \u0111u\u00f4i .jpg, n\u1ebfu l\u00e0 \u1ea3nh th\u00ec b\u1ea1n \u0111\u1ed5i type th\u00e0nh 'image' nh\u00e9\n                { type: 'text', class: '' },\n                { type: 'image', class: 'col-2', src: 'https:\/\/backpacker.com.vn\/wp-content\/uploads\/2026\/02\/gen-h-1.3-scaled.jpg' },\n                { type: 'text', class: '' },\n                { type: 'text', class: '' }\n            ];\n\n            const container = document.getElementById('grid-container');\n\n            gridStructure.forEach((item, index) => {\n                const text = reviews[index];\n                const avatar = `https:\/\/i.pravatar.cc\/150?img=${index + 30}`;\n                const starsHTML = '<i class=\"fas fa-star\"><\/i>'.repeat(5);\n                \n                const customerHTML = `\n                    <div class=\"customer\">\n                        <img decoding=\"async\" src=\"${avatar}\" alt=\"Avatar\" loading=\"lazy\">\n                        <div class=\"customer-info\">\n                            <h4>Kh\u00e1ch H\u00e0ng ${index + 1}<\/h4>\n                            <div class=\"stars\">${starsHTML}<\/div>\n                        <\/div>\n                    <\/div>\n                `;\n\n                let innerHTML = '';\n\n                if (item.type === 'video' || item.type === 'image') {\n                    const mediaTag = item.type === 'video' \n                        ? `<video class=\"media-bg\" src=\"${item.src}\" autoplay muted loop playsinline><\/video>`\n                        : `<img decoding=\"async\" class=\"media-bg\" src=\"${item.src}\" alt=\"Travel\" loading=\"lazy\">`;\n                    \n                    innerHTML = `\n                        ${mediaTag}\n                        <div class=\"glass-panel\">\n                            <p class=\"review-text\">\"${text}\"<\/p>\n                            ${customerHTML}\n                        <\/div>\n                    `;\n                    \/\/ Th\u00eam thu\u1ed9c t\u00ednh data-type v\u00e0 data-src \u0111\u1ec3 js l\u1ea5y th\u00f4ng tin ph\u00f3ng to\n                    container.innerHTML += `<div class=\"card card-media ${item.class}\" data-type=\"${item.type}\" data-src=\"${item.src}\">${innerHTML}<\/div>`;\n                } else {\n                    innerHTML = `\n                        <i class=\"fas fa-quote-left quote-mark\"><\/i>\n                        <p class=\"review-text\">\"${text}\"<\/p>\n                        ${customerHTML}\n                    `;\n                    container.innerHTML += `<div class=\"card card-text ${item.class}\">${innerHTML}<\/div>`;\n                }\n            });\n\n            \/\/ G\u1eafn hi\u1ec7u \u1ee9ng xu\u1ea5t hi\u1ec7n l\u01b0\u1ee3n s\u00f3ng\n            const cards = document.querySelectorAll('.card');\n            const observer = new IntersectionObserver((entries) => {\n                entries.forEach((entry, idx) => {\n                    if (entry.isIntersecting) {\n                        setTimeout(() => {\n                            entry.target.classList.add('is-visible');\n                        }, (idx % 4) * 100);\n                        observer.unobserve(entry.target);\n                    }\n                });\n            }, {\n                threshold: 0.1,\n                rootMargin: \"0px 0px -50px 0px\"\n            });\n\n            cards.forEach(card => observer.observe(card));\n\n            \/\/ =============== X\u1eec L\u00dd S\u1ef0 KI\u1ec6N MODAL (PH\u00d3NG TO) ===============\n            const mediaCards = document.querySelectorAll('.card-media');\n            const modal = document.getElementById('mediaModal');\n            const modalContent = document.getElementById('modalContent');\n            const closeModalBtn = document.getElementById('closeModal');\n\n            \/\/ M\u1edf Modal\n            mediaCards.forEach(card => {\n                card.addEventListener('click', function() {\n                    const type = this.getAttribute('data-type');\n                    const src = this.getAttribute('data-src');\n                    \n                    modalContent.innerHTML = ''; \/\/ X\u00f3a n\u1ed9i dung c\u0169\n\n                    if (type === 'video') {\n                        \/\/ Th\u00eam 'controls' \u0111\u1ec3 kh\u00e1ch h\u00e0ng c\u00f3 th\u1ec3 b\u1eadt t\u1eaft ti\u1ebfng, tua video\n                        modalContent.innerHTML = `<video src=\"${src}\" controls autoplay playsinline><\/video>`;\n                    } else {\n                        modalContent.innerHTML = `<img decoding=\"async\" src=\"${src}\" alt=\"H\u00ecnh \u1ea3nh ph\u00f3ng to\">`;\n                    }\n\n                    modal.classList.add('active');\n                });\n            });\n\n            \/\/ H\u00e0m \u0111\u00f3ng Modal\n            const closeModal = () => {\n                modal.classList.remove('active');\n                \/\/ X\u00f3a n\u1ed9i dung b\u00ean trong \u0111\u1ec3 t\u1eaft nh\u1ea1c\/video \u0111ang ch\u1ea1y \u1ea9n\n                setTimeout(() => {\n                    modalContent.innerHTML = ''; \n                }, 300); \/\/ \u0110\u1ee3i CSS transition ch\u1ea1y xong\n            };\n\n            \/\/ \u0110\u00f3ng b\u1eb1ng n\u00fat X\n            closeModalBtn.addEventListener('click', closeModal);\n\n            \/\/ \u0110\u00f3ng khi click ra ngo\u00e0i v\u00f9ng \u1ea3nh\n            modal.addEventListener('click', (e) => {\n                if(e.target === modal) {\n                    closeModal();\n                }\n            });\n\n            \/\/ \u0110\u00f3ng b\u1eb1ng n\u00fat ESC tr\u00ean b\u00e0n ph\u00edm\n            document.addEventListener('keydown', (e) => {\n                if (e.key === 'Escape' && modal.classList.contains('active')) {\n                    closeModal();\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tr\u1ea3i Nghi\u1ec7m Kh\u00e1ch H\u00e0ng &#8211; Luxury Edition &times;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-3856","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false,"wcpr-photo-reviews":false,"variation_swatches_image_size":false,"variation_swatches_tooltip_size":false},"uagb_author_info":{"display_name":"Tony Tran","author_link":"https:\/\/backpacker.com.vn\/author\/tony-tran\/"},"uagb_comment_info":0,"uagb_excerpt":"Tr\u1ea3i Nghi\u1ec7m Kh\u00e1ch H\u00e0ng &#8211; Luxury Edition &times;","_links":{"self":[{"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/pages\/3856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/comments?post=3856"}],"version-history":[{"count":11,"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/pages\/3856\/revisions"}],"predecessor-version":[{"id":3884,"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/pages\/3856\/revisions\/3884"}],"wp:attachment":[{"href":"https:\/\/backpacker.com.vn\/api\/wp\/v2\/media?parent=3856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}