{"id":14,"date":"2026-05-16T20:32:21","date_gmt":"2026-05-16T20:32:21","guid":{"rendered":"https:\/\/karon.id.vn\/?page_id=14"},"modified":"2026-05-17T18:23:49","modified_gmt":"2026-05-17T18:23:49","slug":"trang-chu","status":"publish","type":"page","link":"https:\/\/karon.id.vn\/","title":{"rendered":"TRANG CH\u1ee6"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        'cem-bg': '#FDFBF7',\n                        'cem-surface': '#F4EFEA',\n                        'cem-brown-light': '#D4C3B3',\n                        'cem-brown': '#8B5A2B',\n                        'cem-brown-dark': '#4A3B32',\n                        'cem-text': '#5C5249'\n                    },\n                    fontFamily: {\n                        sans: ['Inter', 'sans-serif'],\n                        serif: ['Playfair Display', 'serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n    \n    <style>\n        \/* T\u1ea3i Font ch\u1eef *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');\n        @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\n\n        \/* =========================================================\n           \u0110\u1eb6C TR\u1eca X\u00d3A HEADER & FOOTER M\u1eb6C \u0110\u1ecaNH C\u1ee6A WORDPRESS\/FLATSOME \n           ========================================================= *\/\n        #header, .header-wrapper, #masthead, \n        #footer, .footer-wrapper, .site-footer {\n            display: none !important;\n        }\n        #main, #content { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }\n\n        \/* \u00c9P BU\u1ed8C WORDPRESS PH\u1ea2I D\u00d9NG C\u1ea4U TR\u00daC N\u00c0Y *\/\n        #cem-wrapper {\n            background-color: #FDFBF7 !important;\n            font-family: 'Inter', sans-serif !important;\n            color: #5C5249 !important;\n            line-height: 1.6 !important;\n            position: relative;\n            width: 100vw;\n            margin-left: calc(-50vw + 50%); \/* \u00c9p tr\u00e0n vi\u1ec1n 100% *\/\n            overflow-x: hidden;\n            box-sizing: border-box;\n        }\n        \n        #cem-wrapper * { box-sizing: border-box; }\n        \n        #cem-wrapper h1, #cem-wrapper h2, #cem-wrapper h3, #cem-wrapper h4, #cem-wrapper h5, #cem-wrapper h6, #cem-wrapper .font-serif {\n            font-family: 'Playfair Display', serif !important;\n            margin-top: 0;\n        }\n        \n        #cem-wrapper p, #cem-wrapper a, #cem-wrapper span, #cem-wrapper div, #cem-wrapper li, #cem-wrapper label, #cem-wrapper button {\n            font-family: 'Inter', sans-serif !important;\n        }\n\n        #cem-wrapper img {\n            margin: 0 !important; padding: 0 !important; max-width: 100%; display: block;\n        }\n\n        \/* Ch\u1ed1ng xung \u0111\u1ed9t Menu *\/\n        #cem-wrapper .cem-desktop-menu { display: flex !important; align-items: center; justify-content: flex-end; gap: 2rem; }\n        #cem-wrapper .cem-mobile-btn { display: none !important; }\n        #cem-wrapper .cem-mobile-menu { display: none !important; flex-direction: column; }\n        #cem-wrapper .cem-mobile-menu.active { display: flex !important; }\n\n        @media (max-width: 768px) {\n            #cem-wrapper .cem-desktop-menu { display: none !important; }\n            #cem-wrapper .cem-mobile-btn { display: block !important; }\n        }\n\n        \/* Logic chuy\u1ec3n trang *\/\n        #cem-wrapper .view-section { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; }\n        #cem-wrapper .view-section.active { display: block; opacity: 1; }\n        \n        \/* C\u1ea5u tr\u00fac Slider *\/\n        #cem-wrapper .slider-container { overflow: hidden; position: relative; width: 100%; height: 75vh; min-height: 500px; background-color: #4A3B32; }\n        #cem-wrapper .slider-track { display: flex; transition: transform 0.5s ease-in-out; height: 100%; width: 100%; }\n        #cem-wrapper .slide { min-width: 100%; width: 100%; position: relative; height: 100%; background-color: #4A3B32; }\n        #cem-wrapper .slide img { width: 100%; height: 100%; object-fit: cover; }\n        #cem-wrapper .slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10%; text-align: center; }\n\n        \/* C\u1ea5u tr\u00fac th\u1ebb Concept *\/\n        #cem-wrapper .concept-card { position: relative; overflow: hidden; cursor: pointer; border-radius: 4px; background-color: #D4C3B3; aspect-ratio: 4\/5; }\n        #cem-wrapper .concept-card img { transition: transform 0.6s ease; width: 100%; height: 100%; object-fit: cover; }\n        #cem-wrapper .concept-card:hover img { transform: scale(1.08); }\n        #cem-wrapper .concept-overlay { \n            position: absolute; \n            inset: 0; \n            background: rgba(74, 59, 50, 0.2); \n            transition: background 0.4s ease; \n            display: flex; \n            align-items: center; \n            justify-content: center; \n            opacity: 1; \n        }\n        #cem-wrapper .concept-card:hover .concept-overlay { \n            background: rgba(74, 59, 50, 0.5); \n        }\n    <\/style>\n\n    <div id=\"cem-wrapper\">\n\n        <!-- ==================== HEADER (C\u00d3 LOGO TR\u00d2N) ==================== -->\n        <header class=\"bg-cem-bg\/95 backdrop-blur-md sticky top-0 z-50 border-b border-cem-brown-light\/30 shadow-sm w-full\">\n            <div class=\"max-w-7xl mx-auto px-4 md:px-8 py-3 flex justify-between items-center\">\n                \n                <!-- Khu v\u1ef1c Logo -->\n                <a href=\"#\" onclick=\"cemApp.navigateTo('home'); return false;\" class=\"flex items-center gap-3 hover:opacity-80 transition\" style=\"text-decoration: none;\">\n                    <img decoding=\"async\" src=\"https:\/\/karon.id.vn\/wp-content\/uploads\/2026\/05\/z7835729560646_826a3cba81e9394d5bd3ae7cdcd1c030.jpg?auto=compress&#038;cs=tinysrgb&#038;w=150\" alt=\"Logo\" class=\"w-12 h-12 md:w-14 md:h-14 rounded-full object-cover border-2 border-cem-brown\/50\">\n                    <span class=\"font-serif text-2xl md:text-3xl font-bold text-cem-brown-dark tracking-widest uppercase mt-1\">CEM STUDIO<\/span>\n                <\/a>\n\n                <!-- Khu v\u1ef1c Menu -->\n                <nav class=\"cem-desktop-menu font-medium tracking-wide\">\n                    <a href=\"#\" onclick=\"cemApp.navigateTo('home'); return false;\" class=\"text-cem-text hover:text-cem-brown transition\" style=\"text-decoration: none;\">Trang Ch\u1ee7<\/a>\n                    <a href=\"#\" onclick=\"cemApp.navigateTo('about'); return false;\" class=\"text-cem-text hover:text-cem-brown transition\" style=\"text-decoration: none;\">Gi\u1edbi Thi\u1ec7u<\/a>\n                    <a href=\"#\" onclick=\"cemApp.navigateTo('portfolio'); return false;\" class=\"text-cem-text hover:text-cem-brown transition\" style=\"text-decoration: none;\">S\u1ea3n Ph\u1ea9m<\/a>\n                    <a href=\"#\" onclick=\"cemApp.navigateTo('contact'); return false;\" class=\"text-cem-text hover:text-cem-brown transition\" style=\"text-decoration: none;\">Li\u00ean H\u1ec7<\/a>\n                    <button onclick=\"cemApp.navigateTo('contact')\" class=\"ml-4 bg-cem-brown text-white px-6 py-2.5 rounded-sm hover:bg-cem-brown-dark transition duration-300 border-none cursor-pointer font-medium uppercase text-sm tracking-wider shadow-md\">\n                        \u0110\u1eb7t L\u1ecbch Ngay\n                    <\/button>\n                <\/nav>\n\n                <button id=\"mobile-menu-btn\" class=\"cem-mobile-btn text-2xl text-cem-brown-dark focus:outline-none border-none bg-transparent cursor-pointer\">\n                    <i class=\"fas fa-bars\"><\/i>\n                <\/button>\n            <\/div>\n\n            <!-- Mobile Menu -->\n            <div id=\"mobile-menu\" class=\"cem-mobile-menu bg-cem-bg border-t border-cem-brown-light\/30 absolute w-full left-0 px-4 py-4 space-y-4 shadow-lg z-50\">\n                <a href=\"#\" onclick=\"cemApp.navigateTo('home'); return false;\" class=\"block py-2 border-b border-cem-brown-light\/20 text-center font-medium\" style=\"text-decoration: none;\">Trang Ch\u1ee7<\/a>\n                <a href=\"#\" onclick=\"cemApp.navigateTo('about'); return false;\" class=\"block py-2 border-b border-cem-brown-light\/20 text-center font-medium\" style=\"text-decoration: none;\">Gi\u1edbi Thi\u1ec7u<\/a>\n                <a href=\"#\" onclick=\"cemApp.navigateTo('portfolio'); return false;\" class=\"block py-2 border-b border-cem-brown-light\/20 text-center font-medium\" style=\"text-decoration: none;\">S\u1ea3n Ph\u1ea9m<\/a>\n                <a href=\"#\" onclick=\"cemApp.navigateTo('contact'); return false;\" class=\"block py-2 border-b border-cem-brown-light\/20 text-center font-medium\" style=\"text-decoration: none;\">Li\u00ean H\u1ec7<\/a>\n                <button onclick=\"cemApp.navigateTo('contact')\" class=\"bg-cem-brown text-white w-full py-3 rounded-sm font-medium border-none cursor-pointer uppercase tracking-widest mt-4 shadow-md\">\u0110\u1eb7t L\u1ecbch Ngay<\/button>\n            <\/div>\n        <\/header>\n\n        <!-- TRANG CH\u1ee6 -->\n        <section id=\"view-home\" class=\"view-section active\">\n            \n            <div class=\"slider-container\">\n                <div class=\"slider-track\" id=\"hero-slider\">\n                    <!-- \u1ea2nh Slider 1 -->\n                    <div class=\"slide\">\n                        <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1600\" alt=\"Beauty\">\n                        <div class=\"slide-overlay\">\n                            <div>\n                                <h2 class=\"font-serif text-4xl md:text-6xl text-white mb-4 uppercase tracking-widest leading-tight\" style=\"color: white !important;\">N\u00e9t \u0110\u1eb9p V\u01b0\u1ee3t Th\u1eddi Gian<\/h2>\n                                <p class=\"text-white\/90 text-lg md:text-xl font-light mb-8 max-w-2xl mx-auto px-4\" style=\"color: white !important;\">T\u00f4n vinh v\u1ebb \u0111\u1eb9p \u0111\u1ed9c b\u1ea3n c\u1ee7a ng\u01b0\u1eddi ph\u1ee5 n\u1eef qua t\u1eebng khung h\u00ecnh.<\/p>\n                                <button onclick=\"cemApp.navigateTo('portfolio')\" class=\"bg-white text-cem-brown-dark px-8 py-3 rounded-sm font-medium hover:bg-cem-surface transition cursor-pointer border-none uppercase tracking-wider text-sm shadow-lg\">Kh\u00e1m Ph\u00e1 Concept<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- \u1ea2nh Slider 2 -->\n                    <div class=\"slide\">\n                        <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1600\" alt=\"N\u00e0ng Th\u01a1\">\n                        <div class=\"slide-overlay\">\n                            <div>\n                                <h2 class=\"font-serif text-4xl md:text-6xl text-white mb-4 uppercase tracking-widest leading-tight\" style=\"color: white !important;\">N\u00e0ng Th\u01a1 Thanh L\u1ecbch<\/h2>\n                                <p class=\"text-white\/90 text-lg md:text-xl font-light mb-8 max-w-2xl mx-auto px-4\" style=\"color: white !important;\">D\u1ecbu d\u00e0ng, bay b\u1ed5ng v\u00e0 ng\u1eadp tr\u00e0n c\u1ea3m x\u00fac. L\u01b0u gi\u1eef thanh xu\u00e2n r\u1ef1c r\u1ee1 nh\u1ea5t.<\/p>\n                                <button onclick=\"cemApp.navigateTo('contact')\" class=\"bg-cem-brown text-white px-8 py-3 rounded-sm font-medium hover:bg-cem-brown-dark transition cursor-pointer border-none uppercase tracking-wider text-sm mt-4 shadow-lg\">\u0110\u1eb7t l\u1ecbch ngay<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- \u1ea2nh Slider 3 -->\n                    <div class=\"slide\">\n                        <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1600\" alt=\"C\u00e1 T\u00ednh\">\n                        <div class=\"slide-overlay\">\n                            <div>\n                                <h2 class=\"font-serif text-4xl md:text-6xl text-white mb-4 uppercase tracking-widest leading-tight\" style=\"color: white !important;\">B\u1ea3n S\u1eafc \u0110\u1ed9c B\u1ea3n<\/h2>\n                                <p class=\"text-white\/90 text-lg md:text-xl font-light mb-8 max-w-2xl mx-auto px-4\" style=\"color: white !important;\">Khai ph\u00e1 b\u1ea3n ng\u00e3 ngh\u1ec7 thu\u1eadt v\u00e0 c\u00e1 t\u00ednh m\u1ea1nh m\u1ebd b\u00ean trong b\u1ea1n.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <button onclick=\"cemApp.moveSlide(-1)\" class=\"absolute left-4 top-1\/2 -translate-y-1\/2 w-12 h-12 bg-black\/30 text-white rounded-full hover:bg-cem-brown transition flex items-center justify-center cursor-pointer border-none\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n                <button onclick=\"cemApp.moveSlide(1)\" class=\"absolute right-4 top-1\/2 -translate-y-1\/2 w-12 h-12 bg-black\/30 text-white rounded-full hover:bg-cem-brown transition flex items-center justify-center cursor-pointer border-none\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n            <\/div>\n\n            <div class=\"bg-cem-surface py-12 border-y border-cem-brown-light\/40\">\n                <div class=\"max-w-7xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8 text-center\">\n                    <div>\n                        <h3 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-2\">500+<\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">Kh\u00e1ch H\u00e0ng \u0110\u00e3 Ch\u1ee5p<\/p>\n                    <\/div>\n                    <div>\n                        <h3 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-2\">62%<\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">Kh\u00e1ch Quay L\u1ea1i<\/p>\n                    <\/div>\n                    <div>\n                        <h3 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-2\">4.9\/5 <i class=\"fas fa-star text-2xl text-yellow-500\"><\/i><\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">H\u00e0i L\u00f2ng<\/p>\n                    <\/div>\n                    <div>\n                        <h3 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-2\">16+<\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">Concept N\u1ed5i B\u1eadt<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"max-w-7xl mx-auto px-4 py-20\">\n                <div class=\"text-center mb-16\">\n                    <h4 class=\"text-cem-brown font-medium tracking-widest uppercase mb-2\">B\u1ed9 S\u01b0u T\u1eadp<\/h4>\n                    <h2 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark\">16 Concept N\u1ed5i B\u1eadt<\/h2>\n                    <div class=\"w-24 h-1 bg-cem-brown mx-auto mt-6\"><\/div>\n                    <p class=\"mt-6 text-cem-text max-w-2xl mx-auto\">Click v\u00e0o t\u1eebng concept \u0111\u1ec3 kh\u00e1m ph\u00e1 v\u1ebb \u0111\u1eb9p v\u00e0 tinh th\u1ea7n ngh\u1ec7 thu\u1eadt.<\/p>\n                <\/div>\n                <div id=\"home-concept-grid\" class=\"grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6\"><\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TRANG GI\u1edaI THI\u1ec6U -->\n        <section id=\"view-about\" class=\"view-section py-20\">\n            <div class=\"max-w-6xl mx-auto px-4\">\n                <div class=\"text-center mb-16\">\n                    <h4 class=\"text-cem-brown font-medium tracking-widest uppercase mb-2\">C\u00e2u chuy\u1ec7n c\u1ee7a ch\u00fang t\u00f4i<\/h4>\n                    <h2 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-4\">V\u1ec1 Cem Studio<\/h2>\n                    <div class=\"w-24 h-1 bg-cem-brown mx-auto mt-6\"><\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20\">\n                    <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=800\" class=\"w-full h-[500px] object-cover rounded-sm shadow-xl\" alt=\"\u0110\u1ed9i ng\u0169 nh\u00e2n vi\u00ean\">\n                    <div>\n                        <h3 class=\"font-serif text-3xl text-cem-brown-dark mb-6\">\u0110\u1ed9i Ng\u0169 Nhi\u1ebfp \u1ea2nh Gia &#038; Makeup Chuy\u00ean Nghi\u1ec7p<\/h3>\n                        <p class=\"mb-4 text-cem-text text-lg leading-relaxed\">T\u1ea1i CEM Studio, ch\u00fang t\u00f4i kh\u00f4ng ch\u1ec9 b\u1ea5m m\u00e1y, ch\u00fang t\u00f4i ki\u1ebfn t\u1ea1o ngh\u1ec7 thu\u1eadt. S\u1edf h\u1eefu \u0111\u1ed9i ng\u0169 Nhi\u1ebfp \u1ea3nh gia, Chuy\u00ean vi\u00ean trang \u0111i\u1ec3m v\u00e0 Stylist nhi\u1ec1u n\u0103m kinh nghi\u1ec7m, ch\u00fang t\u00f4i th\u1ea5u hi\u1ec3u m\u1ecdi \u0111\u01b0\u1eddng n\u00e9t c\u1ee7a ph\u00e1i n\u1eef.<\/p>\n                        \n                        <div class=\"bg-cem-surface p-6 rounded-sm mt-8 border-l-4 border-cem-brown\">\n                            <h4 class=\"font-bold text-cem-brown-dark uppercase mb-2 tracking-wider\">S\u1ef1 H\u00e0i L\u00f2ng C\u1ee7a B\u1ea1n L\u00e0 \u01afu Ti\u00ean S\u1ed1 1<\/h4>\n                            <p class=\"text-sm m-0\">V\u1edbi h\u01a1n 500 kh\u00e1ch h\u00e0ng \u0111\u00e3 ph\u1ee5c v\u1ee5 v\u00e0 t\u1ef7 l\u1ec7 quay l\u1ea1i \u0111\u1ea1t 62%, CEM t\u1ef1 h\u00e0o mang \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m d\u1ecbch v\u1ee5 5 sao.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 text-center mt-20\">\n                    <div class=\"p-8 border border-cem-brown-light\/40 hover:bg-cem-surface transition\">\n                        <i class=\"fas fa-camera-retro text-4xl text-cem-brown mb-4\"><\/i>\n                        <h4 class=\"font-serif text-2xl text-cem-brown-dark mb-3\">Thi\u1ebft B\u1ecb T\u1ed1i T\u00e2n<\/h4>\n                        <p class=\"text-sm\">S\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng m\u00e1y \u1ea3nh v\u00e0 \u0111\u00e8n chi\u1ebfu s\u00e1ng Studio ti\u00eau chu\u1ea9n qu\u1ed1c t\u1ebf.<\/p>\n                    <\/div>\n                    <div class=\"p-8 border border-cem-brown-light\/40 hover:bg-cem-surface transition\">\n                        <i class=\"fas fa-magic text-4xl text-cem-brown mb-4\"><\/i>\n                        <h4 class=\"font-serif text-2xl text-cem-brown-dark mb-3\">H\u1ed7 Tr\u1ee3 T\u1ea1o D\u00e1ng<\/h4>\n                        <p class=\"text-sm\">\u0110\u1eebng lo n\u1ebfu b\u1ea1n kh\u00f4ng bi\u1ebft di\u1ec5n, ekip s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n t\u1eebng c\u1eed ch\u1ec9.<\/p>\n                    <\/div>\n                    <div class=\"p-8 border border-cem-brown-light\/40 hover:bg-cem-surface transition\">\n                        <i class=\"fas fa-heart text-4xl text-cem-brown mb-4\"><\/i>\n                        <h4 class=\"font-serif text-2xl text-cem-brown-dark mb-3\">H\u1eadu K\u1ef3 T\u1eadn T\u00e2m<\/h4>\n                        <p class=\"text-sm\">Ch\u1ec9nh s\u1eeda h\u00ecnh \u1ea3nh t\u1ec9 m\u1ec9, gi\u1eef l\u1ea1i n\u00e9t ch\u00e2n th\u1ef1c t\u1ef1 nhi\u00ean c\u1ee7a l\u00e0n da.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TRANG S\u1ea2N PH\u1ea8M -->\n        <section id=\"view-portfolio\" class=\"view-section py-20 bg-white\">\n            <div class=\"max-w-7xl mx-auto px-4\">\n                <div class=\"text-center mb-16\">\n                    <h4 class=\"text-cem-brown font-medium tracking-widest uppercase mb-2\">Th\u01b0 Vi\u1ec7n H\u00ecnh \u1ea2nh<\/h4>\n                    <h2 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark\">T\u1ea5t C\u1ea3 Concept T\u1ea1i Cem<\/h2>\n                    <div class=\"w-24 h-1 bg-cem-brown mx-auto mt-6\"><\/div>\n                <\/div>\n                <div id=\"products-concept-grid\" class=\"grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6\"><\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TRANG CHI TI\u1ebeT 1 CONCEPT -->\n        <section id=\"view-concept-detail\" class=\"view-section py-20 bg-cem-bg\">\n            <div class=\"max-w-6xl mx-auto px-4\">\n                <button onclick=\"cemApp.navigateTo('portfolio')\" class=\"mb-8 text-cem-text hover:text-cem-brown flex items-center gap-2 font-medium cursor-pointer bg-transparent border-none\">\n                    <i class=\"fas fa-arrow-left\"><\/i> Xem Concept Kh\u00e1c\n                <\/button>\n                <div id=\"concept-dynamic-content\"><\/div>\n            <\/div>\n        <\/section>\n\n        <!-- ==================== TRANG LI\u00caN H\u1ec6 ==================== -->\n        <section id=\"view-contact\" class=\"view-section py-20 bg-cem-surface\/50\">\n            <div class=\"max-w-4xl mx-auto px-4\">\n                <div class=\"text-center mb-12\">\n                    <h4 class=\"text-cem-brown font-medium tracking-widest uppercase mb-2\">Booking<\/h4>\n                    <h2 class=\"font-serif text-4xl md:text-5xl text-cem-brown-dark mb-4\">\u0110\u1eb7t L\u1ecbch Ch\u1ee5p<\/h2>\n                    <div class=\"w-24 h-1 bg-cem-brown mx-auto mt-6 mb-6\"><\/div>\n                    <p class=\"text-lg text-cem-text\">Vui l\u00f2ng \u0111i\u1ec1n th\u00f4ng tin, chuy\u00ean vi\u00ean c\u1ee7a Cem Studio s\u1ebd li\u00ean h\u1ec7 l\u1ea1i v\u1edbi b\u1ea1n.<\/p>\n                <\/div>\n\n                <div class=\"bg-white p-8 md:p-12 shadow-xl border border-cem-brown-light\/30 rounded-sm relative overflow-hidden\">\n\n                    <!-- M\u00e0n h\u00ecnh Load m\u01b0\u1ee3t m\u00e0 -->\n                    <div id=\"booking-loading\" class=\"hidden absolute inset-0 bg-white\/90 backdrop-blur-sm z-20 flex flex-col items-center justify-center text-center p-8\">\n                        <i class=\"fas fa-spinner fa-spin text-5xl text-cem-brown mb-4\"><\/i>\n                        <p class=\"text-lg font-bold text-cem-brown-dark mt-4\">\u0110ang g\u1eedi y\u00eau c\u1ea7u&#8230;<\/p>\n                    <\/div>\n\n                    <!-- M\u00e0n h\u00ecnh Th\u00e0nh c\u00f4ng chuy\u00ean nghi\u1ec7p -->\n                    <div id=\"booking-success\" class=\"hidden absolute inset-0 bg-white z-10 flex flex-col items-center justify-center text-center p-8\">\n                        <div class=\"w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6\">\n                            <i class=\"fas fa-check text-4xl text-green-600\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-serif text-3xl text-cem-brown-dark mb-4\">C\u1ea3m \u01a0n B\u1ea1n \u0110\u00e3 Tin T\u01b0\u1edfng!<\/h3>\n                        <p class=\"text-lg mb-2 text-cem-text\">H\u1ec7 th\u1ed1ng \u0111\u00e3 nh\u1eadn y\u00eau c\u1ea7u \u0111\u1eb7t l\u1ecbch c\u1ee7a b\u1ea1n th\u00e0nh c\u00f4ng.<\/p>\n                        <p class=\"text-md mb-8 text-cem-text font-medium text-cem-brown\">Ch\u00fang t\u00f4i s\u1ebd g\u1ecdi \u0111i\u1ec7n ho\u1eb7c nh\u1eafn tin Zalo cho b\u1ea1n s\u1edbm nh\u1ea5t \u0111\u1ec3 ch\u1ed1t l\u1ecbch nh\u00e9!<\/p>\n                        <button onclick=\"document.getElementById('booking-success').classList.add('hidden'); document.getElementById('booking-form').reset();\" class=\"bg-cem-brown text-white px-8 py-3 rounded-sm hover:bg-cem-brown-dark cursor-pointer border-none uppercase tracking-widest font-bold\">\n                            \u0110\u1eb7t l\u1ecbch kh\u00e1c\n                        <\/button>\n                    <\/div>\n\n                    <!-- Form \u0110\u1eb7t L\u1ecbch -->\n                    <form id=\"booking-form\" class=\"space-y-6\">\n                        \n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                            <div>\n                                <label class=\"block text-sm font-bold text-cem-brown-dark mb-2 uppercase tracking-wider\">H\u1ecd v\u00e0 T\u00ean *<\/label>\n                                <input type=\"text\" name=\"Ho_Ten\" required placeholder=\"V\u00ed d\u1ee5: Nguy\u1ec5n V\u0103n A\" class=\"w-full border border-gray-300 px-4 py-3 rounded-sm focus:border-cem-brown outline-none bg-white\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-sm font-bold text-cem-brown-dark mb-2 uppercase tracking-wider\">S\u1ed1 \u0110i\u1ec7n Tho\u1ea1i *<\/label>\n                                <input type=\"tel\" name=\"So_Dien_Thoai\" required placeholder=\"09xx xxx xxx\" class=\"w-full border border-gray-300 px-4 py-3 rounded-sm focus:border-cem-brown outline-none bg-white\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                            <div>\n                                <label class=\"block text-sm font-bold text-cem-brown-dark mb-2 uppercase tracking-wider\">Concept Mu\u1ed1n Ch\u1ee5p<\/label>\n                                <select id=\"form-concept-select\" name=\"Goi_Chup\" class=\"w-full border border-gray-300 px-4 py-3 rounded-sm focus:border-cem-brown outline-none bg-white text-cem-text\"><\/select>\n                            <\/div>\n                            <div>\n                                <label class=\"block text-sm font-bold text-cem-brown-dark mb-2 uppercase tracking-wider\">Ng\u00e0y Mu\u1ed1n Ch\u1ee5p<\/label>\n                                <input type=\"date\" name=\"Ngay_Chup\" required class=\"w-full border border-gray-300 px-4 py-3 rounded-sm focus:border-cem-brown outline-none bg-white text-cem-text\">\n                            <\/div>\n                        <\/div>\n                        <div>\n                            <label class=\"block text-sm font-bold text-cem-brown-dark mb-2 uppercase tracking-wider\">Ghi ch\u00fa th\u00eam (T\u00f9y ch\u1ecdn)<\/label>\n                            <textarea name=\"Ghi_Chu\" rows=\"3\" placeholder=\"B\u1ea1n mu\u1ed1n \u0111i bao nhi\u00eau ng\u01b0\u1eddi, c\u00f3 c\u1ea7n h\u1ed7 tr\u1ee3 trang ph\u1ee5c \u0111\u1eb7c bi\u1ec7t kh\u00f4ng...\" class=\"w-full border border-gray-300 px-4 py-3 rounded-sm focus:border-cem-brown outline-none bg-white\"><\/textarea>\n                        <\/div>\n                        <button type=\"submit\" class=\"w-full bg-cem-brown text-white font-bold tracking-widest uppercase py-4 rounded-sm hover:bg-cem-brown-dark transition duration-300 mt-4 cursor-pointer border-none text-lg shadow-md\">\n                            X\u00e1c Nh\u1eadn \u0110\u1eb7t L\u1ecbch\n                        <\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- FOOTER -->\n        <footer class=\"bg-cem-brown-dark text-cem-surface py-16\">\n            <div class=\"max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12\">\n                <div>\n                    <h3 class=\"font-serif text-3xl font-bold mb-4 tracking-widest uppercase\" style=\"color: #F4EFEA !important;\">CEM STUDIO<\/h3>\n                    <p class=\"text-sm opacity-80 leading-relaxed mb-6\" style=\"color: #F4EFEA !important;\">N\u01a1i l\u01b0u gi\u1eef thanh xu\u00e2n v\u00e0 t\u00f4n vinh v\u1ebb \u0111\u1eb9p \u0111\u1ed9c b\u1ea3n c\u1ee7a ph\u00e1i n\u1eef qua nh\u1eefng khung h\u00ecnh mang t\u00ednh ngh\u1ec7 thu\u1eadt cao.<\/p>\n                    <div class=\"flex gap-4\">\n                        <a href=\"#\" class=\"w-10 h-10 rounded-full bg-cem-brown flex items-center justify-center hover:bg-white hover:text-cem-brown transition\" style=\"text-decoration:none; color: white !important;\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                        <a href=\"#\" class=\"w-10 h-10 rounded-full bg-cem-brown flex items-center justify-center hover:bg-white hover:text-cem-brown transition\" style=\"text-decoration:none; color: white !important;\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                    <\/div>\n                <\/div>\n                <div>\n                    <h4 class=\"font-bold uppercase tracking-wider mb-6 border-b border-cem-brown inline-block pb-2\" style=\"color: #F4EFEA !important;\">Li\u00ean H\u1ec7<\/h4>\n                    <ul class=\"space-y-4 text-sm opacity-90 list-none pl-0\">\n                        <li style=\"color: #F4EFEA !important;\"><i class=\"fas fa-phone w-6 text-cem-brown-light\"><\/i> 0912 345 678<\/li>\n                        <li style=\"color: #F4EFEA !important;\"><i class=\"fas fa-envelope w-6 text-cem-brown-light\"><\/i> booking@cemstudio.vn<\/li>\n                    <\/ul>\n                <\/div>\n                <div>\n                    <h4 class=\"font-bold uppercase tracking-wider mb-6 border-b border-cem-brown inline-block pb-2\" style=\"color: #F4EFEA !important;\">\u0110\u1ecba Ch\u1ec9<\/h4>\n                    <p class=\"text-sm opacity-90 mb-4 leading-relaxed\" style=\"color: #F4EFEA !important;\">\n                        <i class=\"fas fa-map-marker-alt w-6 text-cem-brown-light\"><\/i> Qu\u1eadn \u0110\u1ed1ng \u0110a, H\u00e0 N\u1ed9i, Vi\u1ec7t Nam\n                    <\/p>\n                <\/div>\n            <\/div>\n            <div class=\"text-center text-sm opacity-60 mt-12 pt-6 border-t border-cem-brown\/30\" style=\"color: #F4EFEA !important;\">\n                &copy; 2026 Cem Studio.\n            <\/div>\n        <\/footer>\n\n    <\/div> \n    \n    <!-- JAVASCRIPT -->\n    <script>\n        const cemApp = {\n            \/\/ =========================================================================\n            \/\/ CH\u1ec8NH S\u1eecA TO\u00c0N B\u1ed8 16 CONCEPT \u1ede \u0110\u00c2Y\n            \/\/ D\u01b0\u1edbi \u0111\u00e2y \u0111\u00e3 \u0111\u01b0\u1ee3c chia t\u00e1ch th\u00e0nh t\u1eebng Concept r\u00f5 r\u00e0ng \u0111\u1ec3 b\u1ea1n d\u1ec5 thay \u1ea3nh\n            \/\/ B\u1ea1n c\u00f3 th\u1ec3 th\u00eam bao nhi\u00eau \u1ea3nh v\u00e0o ph\u1ea7n \"gallery: [ ... ]\" c\u0169ng \u0111\u01b0\u1ee3c\n            \/\/ =========================================================================\n            concepts: [\n                \/\/ 1. CONCEPT C\u00c1 T\u00cdNH\n                { \n                    id: 'ca-tinh', \n                    name: 'C\u00e1 T\u00ednh', \n                    img: 'https:\/\/karon.id.vn\/wp-content\/uploads\/2026\/05\/IMG_4263.jpg?auto=compress&cs=tinysrgb&w=600', \/\/ \u1ea2nh \u0111\u1ea1i di\u1ec7n b\u00ean ngo\u00e0i\n                    desc: 'D\u00e0nh cho nh\u1eefng c\u00f4 n\u00e0ng mang \u0111\u1eadm c\u00e1 t\u00ednh m\u1ea1nh m\u1ebd, cool ng\u1ea7u. T\u00f4n vinh s\u1ef1 gai g\u00f3c, n\u1ed5i lo\u1ea1n nh\u01b0ng kh\u00f4ng k\u00e9m ph\u1ea7n cu\u1ed1n h\u00fat.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', \/\/ Link \u1ea3nh tham kh\u1ea3o 1\n                        'https:\/\/karon.id.vn\/wp-content\/uploads\/2026\/05\/IMG_4265.jpg?auto=compress&cs=tinysrgb&w=600', \/\/ Link \u1ea3nh tham kh\u1ea3o 2\n                        'https:\/\/karon.id.vn\/wp-content\/uploads\/2026\/05\/IMG_4266.jpg?auto=compress&cs=tinysrgb&w=600', \/\/ Link \u1ea3nh tham kh\u1ea3o 3\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600'  \/\/ Link \u1ea3nh tham kh\u1ea3o 4\n                    ]\n                },\n                \/\/ 2. CONCEPT CHI\u1ec0U T\u00c0\n                { \n                    id: 'chieu-ta', \n                    name: 'Chi\u1ec1u T\u00e0', \n                    img: 'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Concept ngo\u1ea1i c\u1ea3nh mang s\u1eafc cam \u1ea5m \u00e1p c\u1ee7a ho\u00e0ng h\u00f4n. L\u01b0u gi\u1eef nh\u1eefng kho\u1ea3nh kh\u1eafc m\u01a1 m\u00e0ng, s\u00e2u l\u1eafng d\u01b0\u1edbi \u00e1nh chi\u1ec1u.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 3. CONCEPT C\u00d4 D\u00c2U\n                { \n                    id: 'co-dau', \n                    name: 'C\u00f4 D\u00e2u', \n                    img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'L\u01b0u gi\u1eef v\u1ebb \u0111\u1eb9p tinh kh\u00f4i, h\u1ea1nh ph\u00fac v\u00e0 thi\u00eang li\u00eang nh\u1ea5t trong chi\u1ebfc v\u00e1y c\u01b0\u1edbi l\u1ed9ng l\u1eaby.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 4. CONCEPT D\u1ea0 H\u1ed8I\n                { \n                    id: 'da-hoi', \n                    name: 'D\u1ea1 H\u1ed9i', \n                    img: 'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Sang tr\u1ecdng, l\u1ed9ng l\u1eaby v\u00e0 ki\u00eau k\u1ef3. Trang ph\u1ee5c v\u00e1y d\u1ea1 h\u1ed9i c\u1ea7u k\u1ef3 gi\u00fap b\u1ea1n tr\u1edf th\u00e0nh t\u00e2m \u0111i\u1ec3m c\u1ee7a m\u1ecdi \u00e1nh nh\u00ecn.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 5. CONCEPT \u0110EN TR\u1eaeNG\n                { \n                    id: 'den-trang', \n                    name: '\u0110en Tr\u1eafng', \n                    img: 'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Lo\u1ea1i b\u1ecf m\u00e0u s\u1eafc \u0111\u1ec3 t\u1eadp trung ho\u00e0n to\u00e0n v\u00e0o chi\u1ec1u s\u00e2u c\u1ea3m x\u00fac, \u00e1nh m\u1eaft v\u00e0 ng\u00f4n ng\u1eef h\u00ecnh th\u1ec3.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 6. CONCEPT GIAI NH\u00c2N\n                { \n                    id: 'giai-nhan', \n                    name: 'Giai Nh\u00e2n', \n                    img: 'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'L\u1ea5y c\u1ea3m h\u1ee9ng t\u1eeb n\u00e9t \u0111\u1eb9p \u00c1 \u0110\u00f4ng \u0111\u00e0i c\u00e1c, ki\u00eau sa. K\u1ebft h\u1ee3p c\u00f9ng trang ph\u1ee5c truy\u1ec1n th\u1ed1ng mang l\u1ea1i kh\u00ed ch\u1ea5t v\u01b0\u01a1ng gi\u1ea3.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 7. CONCEPT H\u00d3A TRANG\n                { \n                    id: 'hoa-trang', \n                    name: 'H\u00f3a Trang', \n                    img: 'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Th\u1ecfa s\u1ee9c s\u00e1ng t\u1ea1o, h\u00f3a th\u00e2n th\u00e0nh c\u00e1c nh\u00e2n v\u1eadt c\u1ed5 t\u00edch, \u0111i\u1ec7n \u1ea3nh ho\u1eb7c b\u1ea5t k\u1ef3 h\u00ecnh t\u01b0\u1ee3ng n\u00e0o b\u1ea1n \u0111am m\u00ea.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 8. CONCEPT KIM Y\n                { \n                    id: 'kim-y', \n                    name: 'Kim Y', \n                    img: 'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'S\u1ef1 k\u1ebft h\u1ee3p ho\u00e0n h\u1ea3o gi\u1eefa n\u00e9t quy\u1ec1n qu\u00fd c\u1ee7a ch\u1ea5t li\u1ec7u g\u1ea5m l\u1ee5a v\u00e0 ng\u00f4n ng\u1eef th\u1eddi trang hi\u1ec7n \u0111\u1ea1i.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 9. CONCEPT LOLITA\n                { \n                    id: 'lolita', \n                    name: 'Lolita', \n                    img: 'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Ng\u1ecdt ng\u00e0o, \u0111\u00e1ng y\u00eau t\u1ef1a nh\u01b0 n\u00e0ng b\u00fap b\u00ea trong khu v\u01b0\u1eddn c\u1ed5 t\u00edch v\u1edbi trang ph\u1ee5c b\u1ed3ng b\u1ec1nh, nhi\u1ec1u ren.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 10. CONCEPT N\u00c0NG TH\u01a0\n                { \n                    id: 'nang-tho', \n                    name: 'N\u00e0ng Th\u01a1', \n                    img: 'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Trong veo, d\u1ecbu d\u00e0ng v\u00e0 bay b\u1ed5ng. Bi\u1ebfn b\u1ea1n th\u00e0nh n\u00e0ng th\u01a1 b\u01b0\u1edbc ra t\u1eeb nh\u1eefng th\u01b0\u1edbc phim l\u00e3ng m\u1ea1n.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 11. CONCEPT NGH\u1ec6 THU\u1eacT\n                { \n                    id: 'nghe-thuat', \n                    name: 'Ngh\u1ec7 Thu\u1eadt', \n                    img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'V\u01b0\u1ee3t ra kh\u1ecfi nh\u1eefng gi\u1edbi h\u1ea1n th\u00f4ng th\u01b0\u1eddng, s\u1eed d\u1ee5ng \u00e1nh s\u00e1ng, hoa c\u1ecf \u0111\u1ec3 t\u1ea1o ra t\u00e1c ph\u1ea9m nhi\u1ebfp \u1ea3nh th\u1ef1c th\u1ee5.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 12. CONCEPT N\u1eee SINH\n                { \n                    id: 'nu-sinh', \n                    name: 'N\u1eef Sinh', \n                    img: 'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'G\u1ee3i nh\u1edb tu\u1ed5i h\u1ecdc tr\u00f2 ng\u00e2y ng\u00f4, thanh xu\u00e2n r\u1ef1c r\u1ee1 v\u1edbi \u0111\u1ed3ng ph\u1ee5c n\u1eef sinh trong veo.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 13. CONCEPT QUY\u1ebeN R\u0168\n                { \n                    id: 'quyen-ru', \n                    name: 'Quy\u1ebfn R\u0169', \n                    img: 'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'G\u1ee3i c\u1ea3m m\u1ed9t c\u00e1ch tinh t\u1ebf v\u00e0 ngh\u1ec7 thu\u1eadt. T\u00f4n vinh v\u1ebb \u0111\u1eb9p h\u00ecnh th\u1ec3 qua ng\u00f4n ng\u1eef c\u1ee7a \u00e1nh s\u00e1ng v\u00e0 b\u00f3ng t\u1ed1i.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 14. CONCEPT RETRO\n                { \n                    id: 'retro', \n                    name: 'Retro', \n                    img: 'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'Mang \u0111\u1eadm phong c\u00e1ch th\u1eadp ni\u00ean 80s-90s, m\u00e0u \u1ea3nh ho\u00e0i c\u1ed5, trang ph\u1ee5c vintage \u0111\u1ea7y ch\u1ea5t th\u01a1.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 15. CONCEPT SINH NH\u1eacT\n                { \n                    id: 'sinh-nhat', \n                    name: 'Sinh Nh\u1eadt', \n                    img: 'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: '\u0110\u00e1nh d\u1ea5u c\u1ed9t m\u1ed1c tu\u1ed5i m\u1edbi r\u1ef1c r\u1ee1 v\u1edbi concept b\u00f3ng bay, b\u00e1nh kem v\u00e0 n\u1ee5 c\u01b0\u1eddi t\u01b0\u01a1i t\u1eafn nh\u1ea5t.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                },\n                \/\/ 16. CONCEPT TRONG TR\u1ebaO\n                { \n                    id: 'trong-treo', \n                    name: 'Trong Tr\u1ebbo', \n                    img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', \n                    desc: 'M\u1ed9c m\u1ea1c, t\u1ef1 nhi\u00ean, s\u1eed d\u1ee5ng tone makeup trong su\u1ed1t \u0111\u1ec3 gi\u1eef l\u1ea1i nh\u1eefng n\u00e9t thanh t\u00fa, nguy\u00ean b\u1ea3n nh\u1ea5t c\u1ee7a b\u1ea1n.',\n                    gallery: [\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600',\n                        'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600'\n                    ]\n                }\n            ],\n            \/\/ =========================================================================\n            \/\/ K\u1ebeT TH\u00daC KHU V\u1ef0C CH\u1ec8NH S\u1eecA CONCEPT\n            \/\/ =========================================================================\n            \n            currentSlide: 0,\n            \n            init: function() {\n                this.renderConcepts();\n                this.setupEvents();\n                setInterval(() => {\n                    if(document.getElementById('view-home')?.classList.contains('active')) {\n                        this.moveSlide(1);\n                    }\n                }, 5000);\n            },\n\n            renderConcepts: function() {\n                let html = '';\n                let selectHtml = '<option value=\"\">-- Vui l\u00f2ng ch\u1ecdn Concept (Kh\u00f4ng b\u1eaft bu\u1ed9c) --<\/option>';\n\n                this.concepts.forEach(concept => {\n                    html += `\n                        <div class=\"concept-card\" onclick=\"cemApp.openConcept('${concept.id}')\">\n                            <img decoding=\"async\" src=\"${concept.img}\" alt=\"${concept.name}\">\n                            <div class=\"concept-overlay\">\n                                <span class=\"text-white font-serif text-sm md:text-lg border border-white\/50 px-3 md:px-6 py-2 bg-black\/40 backdrop-blur-sm uppercase tracking-widest text-center leading-snug\">${concept.name}<\/span>\n                            <\/div>\n                        <\/div>\n                    `;\n                    selectHtml += `<option value=\"${concept.name}\">G\u00f3i ch\u1ee5p: ${concept.name}<\/option>`;\n                });\n\n                document.getElementById('home-concept-grid').innerHTML = html;\n                document.getElementById('products-concept-grid').innerHTML = html;\n                document.getElementById('form-concept-select').innerHTML = selectHtml;\n            },\n\n            navigateTo: function(viewId) {\n                document.querySelectorAll('#cem-wrapper .view-section').forEach(view => {\n                    view.classList.remove('active');\n                });\n                \n                const target = document.getElementById('view-' + viewId);\n                if (target) target.classList.add('active');\n\n                const mobileMenu = document.getElementById('mobile-menu');\n                if (mobileMenu && mobileMenu.classList.contains('active')) {\n                    mobileMenu.classList.remove('active');\n                }\n\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            },\n\n            openConcept: function(id) {\n                const concept = this.concepts.find(c => c.id === id);\n                if (!concept) return;\n\n                \/\/ T\u1ea0O PH\u1ea6N KHUNG \u1ea2NH THAM KH\u1ea2O (ALBUM) \u1ede D\u01af\u1edaI C\u00d9NG\n                let galleryHtml = '';\n                if (concept.gallery && concept.gallery.length > 0) {\n                    let imagesHtml = concept.gallery.map(imgUrl => `\n                        <div class=\"overflow-hidden rounded-sm shadow-md aspect-[3\/4]\">\n                            <img decoding=\"async\" src=\"${imgUrl}\" class=\"w-full h-full object-cover hover:scale-105 transition duration-500 cursor-pointer\" alt=\"\u1ea2nh tham kh\u1ea3o\">\n                        <\/div>\n                    `).join('');\n\n                    galleryHtml = `\n                        <div class=\"mt-20 pt-16 border-t border-cem-brown-light\/30\">\n                            <div class=\"text-center mb-12\">\n                                <h3 class=\"font-serif text-3xl md:text-4xl text-cem-brown-dark mb-4 uppercase tracking-widest\">Album Tham Kh\u1ea3o<\/h3>\n                                <div class=\"w-16 h-1 bg-cem-brown mx-auto\"><\/div>\n                            <\/div>\n                            <!-- L\u01b0\u1edbi \u1ea3nh Album -->\n                            <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6\">\n                                ${imagesHtml}\n                            <\/div>\n                        <\/div>\n                    `;\n                }\n\n                const detailHtml = `\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-start\">\n                        <div class=\"flex justify-center\">\n                            <img decoding=\"async\" src=\"${concept.img}\" class=\"w-full max-w-[380px] aspect-[4\/5] object-cover shadow-2xl rounded-sm border-8 border-white\">\n                        <\/div>\n                        <div class=\"bg-white p-8 md:p-12 shadow-sm border border-cem-surface\">\n                            <h4 class=\"text-cem-brown uppercase tracking-widest font-bold mb-3\">Th\u00f4ng Tin G\u00f3i Ch\u1ee5p<\/h4>\n                            <h2 class=\"font-serif text-4xl md:text-5xl mb-6 text-cem-brown-dark\">${concept.name}<\/h2>\n                            <div class=\"w-16 h-[2px] bg-cem-brown mb-8\"><\/div>\n                            <p class=\"text-lg leading-relaxed mb-8 text-cem-text\">${concept.desc}<\/p>\n                            \n                            <h4 class=\"font-bold text-cem-brown-dark uppercase mb-4 tracking-wider text-sm\">G\u00f3i ch\u1ee5p bao g\u1ed3m:<\/h4>\n                            <ul class=\"space-y-3 mb-10 text-cem-text\">\n                                <li><i class=\"fas fa-check text-cem-brown mr-2\"><\/i> Make up & L\u00e0m t\u00f3c chuy\u00ean nghi\u1ec7p<\/li>\n                                <li><i class=\"fas fa-check text-cem-brown mr-2\"><\/i> H\u1ed7 tr\u1ee3 trang ph\u1ee5c, ph\u1ee5 ki\u1ec7n theo Concept<\/li>\n                                <li><i class=\"fas fa-check text-cem-brown mr-2\"><\/i> Nh\u1eadn to\u00e0n b\u1ed9 file g\u1ed1c sau bu\u1ed5i ch\u1ee5p<\/li>\n                                <li><i class=\"fas fa-check text-cem-brown mr-2\"><\/i> Ch\u1ec9nh s\u1eeda photoshop k\u1ef9 l\u01b0\u1ee1ng 15-20 file<\/li>\n                            <\/ul>\n\n                            <button onclick=\"cemApp.bookConcept('${concept.name}')\" class=\"w-full bg-cem-brown text-white px-8 py-4 uppercase tracking-widest font-bold hover:bg-cem-brown-dark transition shadow-md rounded-sm cursor-pointer border-none\">\n                                \u0110\u1eb7t L\u1ecbch Concept N\u00e0y\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- Hi\u1ec3n th\u1ecb Album \u1ea3nh n\u1ebfu c\u00f3 -->\n                    ${galleryHtml}\n                `;\n                \n                document.getElementById('concept-dynamic-content').innerHTML = detailHtml;\n                this.navigateTo('concept-detail');\n            },\n\n            bookConcept: function(name) {\n                this.navigateTo('contact');\n                const selectBox = document.getElementById('form-concept-select');\n                if (selectBox) selectBox.value = name;\n            },\n\n            moveSlide: function(direction) {\n                const track = document.getElementById('hero-slider');\n                if (!track) return;\n                this.currentSlide += direction;\n                if (this.currentSlide < 0) this.currentSlide = 2;\n                if (this.currentSlide > 2) this.currentSlide = 0;\n                track.style.transform = `translateX(-${this.currentSlide * 100}%)`;\n            },\n\n            setupEvents: function() {\n                const mobileBtn = document.getElementById('mobile-menu-btn');\n                const mobileMenu = document.getElementById('mobile-menu');\n                if (mobileBtn && mobileMenu) {\n                    mobileBtn.addEventListener('click', () => {\n                        mobileMenu.classList.toggle('active');\n                    });\n                }\n\n                \/\/ ==========================================\n                \/\/ L\u1eacP TR\u00ccNH G\u1eecI EMAIL B\u1eb0NG FORMSPREE\n                \/\/ ==========================================\n                const bookingForm = document.getElementById('booking-form');\n                if (bookingForm) {\n                    bookingForm.addEventListener('submit', function(e) {\n                        e.preventDefault(); \n                        \n                        document.getElementById('booking-loading').classList.remove('hidden');\n\n                        const formData = new FormData(bookingForm);\n                        \n                        \/\/ \ud83d\udc47 B\u01af\u1edaC QUAN TR\u1eccNG: D\u00c1N \u0110\u01af\u1edcNG LINK FORMSPREE C\u1ee6A B\u1ea0N V\u00c0O \u0110\u00c2Y \ud83d\udc47\n                        const formspreeURL = \"https:\/\/formspree.io\/f\/xqejznej\"; \n\n                        fetch(formspreeURL, {\n                            method: \"POST\",\n                            body: formData,\n                            headers: {\n                                'Accept': 'application\/json'\n                            }\n                        })\n                        .then(response => {\n                            if (response.ok) {\n                                \/\/ G\u1eedi th\u00e0nh c\u00f4ng!\n                                document.getElementById('booking-loading').classList.add('hidden');\n                                document.getElementById('booking-success').classList.remove('hidden');\n                                bookingForm.reset();\n                            } else {\n                                response.json().then(data => {\n                                    document.getElementById('booking-loading').classList.add('hidden');\n                                    if (Object.hasOwn(data, 'errors')) {\n                                        alert(\"C\u00f3 l\u1ed7i x\u1ea3y ra: \" + data[\"errors\"].map(error => error[\"message\"]).join(\", \"));\n                                    } else {\n                                        alert(\"\u0110\u00e3 x\u1ea3y ra l\u1ed7i, vui l\u00f2ng th\u1eed l\u1ea1i ho\u1eb7c b\u1ea1n qu\u00ean thay link Formspree?\");\n                                    }\n                                })\n                            }\n                        })\n                        .catch(error => {\n                            document.getElementById('booking-loading').classList.add('hidden');\n                            alert(\"\u0110\u01b0\u1eddng truy\u1ec1n b\u1ecb l\u1ed7i. Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i m\u1ea1ng!\");\n                        });\n                    });\n                }\n            }\n        };\n\n        window.addEventListener('load', function() {\n            setTimeout(() => {\n                cemApp.init();\n            }, 100);\n        });\n    <\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CEM STUDIO Trang Ch\u1ee7 Gi\u1edbi Thi\u1ec7u S\u1ea3n Ph\u1ea9m Li\u00ean H\u1ec7 \u0110\u1eb7t L\u1ecbch Ngay Trang Ch\u1ee7 Gi\u1edbi Thi\u1ec7u S\u1ea3n Ph\u1ea9m Li\u00ean H\u1ec7 \u0110\u1eb7t L\u1ecbch Ngay N\u00e9t \u0110\u1eb9p V\u01b0\u1ee3t Th\u1eddi Gian T\u00f4n vinh v\u1ebb \u0111\u1eb9p \u0111\u1ed9c b\u1ea3n c\u1ee7a ng\u01b0\u1eddi ph\u1ee5 n\u1eef qua t\u1eebng khung h\u00ecnh. Kh\u00e1m Ph\u00e1 Concept N\u00e0ng Th\u01a1 Thanh L\u1ecbch D\u1ecbu d\u00e0ng, bay b\u1ed5ng v\u00e0 [&#8230;]\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karon.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":27,"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/264"}],"wp:attachment":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}