{"id":22,"date":"2026-05-16T22:14:44","date_gmt":"2026-05-16T22:14:44","guid":{"rendered":"https:\/\/karon.id.vn\/?p=22"},"modified":"2026-05-16T22:14:44","modified_gmt":"2026-05-16T22:14:44","slug":"22","status":"publish","type":"post","link":"https:\/\/karon.id.vn\/?p=22","title":{"rendered":""},"content":{"rendered":"\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        \/* \u00c9P BU\u1ed8C WORDPRESS PH\u1ea2I D\u00d9NG C\u1ea4U TR\u00daC N\u00c0Y (Ch\u1ed1ng v\u1ee1 giao di\u1ec7n) *\/\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: 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 {\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 v\u1edbi Flatsome *\/\n        #cem-wrapper .cem-desktop-menu { display: flex !important; align-items: center; }\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%; }\n        #cem-wrapper .slide { min-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            \/* Ch\u1eef lu\u00f4n lu\u00f4n hi\u1ec3n th\u1ecb (B\u1ecf opacity: 0) *\/\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    <!-- B\u1eaeT \u0110\u1ea6U KHUNG GIAO DI\u1ec6N CEM STUDIO -->\n    <div id=\"cem-wrapper\">\n\n        <!-- HEADER (Menu) -->\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-4 flex justify-between items-center\">\n                <!-- Logo -->\n                <a href=\"#\" onclick=\"cemApp.navigateTo('home'); return false;\" class=\"font-serif text-2xl md:text-3xl font-bold text-cem-brown-dark tracking-widest uppercase hover:text-cem-brown transition\" style=\"text-decoration: none;\">\n                    CEM STUDIO\n                <\/a>\n\n                <!-- Menu M\u00e1y t\u00ednh (\u0110\u00e3 fix l\u1ed7i s\u00e1t nhau b\u1eb1ng margin-right) -->\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 mr-6 md:mr-8\" 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 mr-6 md:mr-8\" 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 mr-6 md:mr-8\" 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 mr-6 md:mr-8\" style=\"text-decoration: none;\">Li\u00ean H\u1ec7<\/a>\n                    <button onclick=\"cemApp.navigateTo('contact')\" class=\"bg-cem-brown text-white px-6 py-2 rounded-sm hover:bg-cem-brown-dark transition duration-300 border-none cursor-pointer font-medium uppercase text-sm tracking-wider\">\n                        \u0110\u1eb7t L\u1ecbch Ngay\n                    <\/button>\n                <\/nav>\n\n                <!-- N\u00fat b\u1ea5m Menu \u0110i\u1ec7n tho\u1ea1i -->\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            <!-- Menu x\u1ed5 xu\u1ed1ng tr\u00ean \u0110i\u1ec7n tho\u1ea1i -->\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\">\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            <!-- Slider 3 \u1ea3nh ngang -->\n            <div class=\"slider-container\">\n                <div class=\"slider-track\" id=\"hero-slider\">\n                    <!-- \u1ea2nh 1: B\u1ee9c \u1ea3nh ch\u00ednh di\u1ec7n (M\u1edd \u1ea3o, ngh\u1ec7 thu\u1eadt) -->\n                    <div class=\"slide\">\n                        <!-- THAY LINK \u1ea2NH C\u1ee6A B\u1ea0N V\u00c0O \u0110\u00c2Y (\u1ea2NH 1) -->\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 Concept\">\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 Beauty ngh\u1ec7 thu\u1eadt.<\/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\">Kh\u00e1m Ph\u00e1 Concept<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- \u1ea2nh 2 -->\n                    <div class=\"slide\">\n                        <!-- THAY LINK \u1ea2NH C\u1ee6A B\u1ea0N V\u00c0O \u0110\u00c2Y (\u1ea2NH 2) -->\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 kho\u1ea3nh kh\u1eafc 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\">\u0110\u1eb7t l\u1ecbch ngay<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <!-- \u1ea2nh 3 -->\n                    <div class=\"slide\">\n                        <!-- THAY LINK \u1ea2NH C\u1ee6A B\u1ea0N V\u00c0O \u0110\u00c2Y (\u1ea2NH 3) -->\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;\">Kh\u00f4ng ch\u1ec9 l\u00e0 nhi\u1ebfp \u1ea3nh, ch\u00fang t\u00f4i 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                <!-- N\u00fat tr\u01b0\u1ee3t slider -->\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            <!-- C\u00e1c con s\u1ed1 uy t\u00edn (Stats) -->\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\">5,000+<\/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\">98%<\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">Kh\u00e1ch H\u00e0ng 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\">\u0110\u00e1nh Gi\u00e1 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\">50+<\/h3>\n                        <p class=\"text-sm uppercase tracking-wider font-medium m-0\">Concept Th\u1ef1c Hi\u1ec7n<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 16 Concept N\u1ed5i B\u1eadt -->\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 Nh\u1ea5t<\/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 m\u00e0 Cem Studio mu\u1ed1n g\u1eedi g\u1eafm.<\/p>\n                <\/div>\n                <!-- V\u00f9ng ch\u1ee9a \u1ea3nh sinh ra b\u1eb1ng JS -->\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                <!-- \u0110\u1ed9i ng\u0169 & Th\u00e0nh t\u00edch -->\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 (MUA) v\u00e0 Stylist c\u00f3 nhi\u1ec1u n\u0103m kinh nghi\u1ec7m, ch\u00fang t\u00f4i th\u1ea5u hi\u1ec3u m\u1ecdi \u0111\u01b0\u1eddng n\u00e9t v\u00e0 g\u00f3c m\u1eb7t 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 5,000 kh\u00e1ch h\u00e0ng \u0111\u00e3 ph\u1ee5c v\u1ee5 v\u00e0 t\u1ef7 l\u1ec7 quay l\u1ea1i \u0111\u1ea1t 98%, CEM t\u1ef1 h\u00e0o mang \u0111\u1ebfn tr\u1ea3i nghi\u1ec7m d\u1ecbch v\u1ee5 5 sao. T\u1eeb kh\u00e2u t\u01b0 v\u1ea5n concept, l\u00ean \u0111\u1ed3, makeup cho \u0111\u1ebfn l\u00fac tr\u1ea3 nh\u1eefng file \u1ea3nh h\u1eadu k\u1ef3 ho\u00e0n h\u1ea3o nh\u1ea5t.<\/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 nh\u1ecf nh\u1ea5t.<\/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                <!-- V\u00f9ng ch\u1ee9a \u1ea3nh sinh ra b\u1eb1ng JS -->\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\">\n                    <!-- Chi ti\u1ebft \u0111\u01b0\u1ee3c sinh ra t\u1ef1 \u0111\u1ed9ng b\u1eb1ng JS -->\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- ==================== TRANG LI\u00caN H\u1ec6 & \u0110\u1eb6T L\u1ecaCH ==================== -->\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 trong th\u1eddi gian s\u1edbm nh\u1ea5t.<\/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                    <!-- Th\u00f4ng b\u00e1o Th\u00e0nh C\u00f4ng -->\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 ghi nh\u1eadn y\u00eau c\u1ea7u \u0111\u1eb7t l\u1ecbch c\u1ee7a b\u1ea1n.<\/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 tho\u1ea1i ho\u1eb7c li\u00ean h\u1ec7 qua Zalo cho b\u1ea1n s\u1edbm nh\u1ea5t \u0111\u1ec3 ch\u1ed1t l\u1ecbch v\u00e0 t\u01b0 v\u1ea5n chi ti\u1ebft!<\/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\u00f3ng th\u00f4ng b\u00e1o\n                        <\/button>\n                    <\/div>\n\n                    <!-- Form \u0110\u1eb7t L\u1ecbch -->\n                    <form id=\"booking-form\" class=\"space-y-6\">\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\" 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\" 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\" 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                                    <!-- Options sinh ra b\u1eb1ng JS -->\n                                <\/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\" 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 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=\"https:\/\/facebook.com\/cemstudio\" target=\"_blank\" 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                        <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-tiktok\"><\/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;\">Th\u00f4ng Tin 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                        <li style=\"color: #F4EFEA !important;\"><i class=\"fas fa-clock w-6 text-cem-brown-light\"><\/i> 08:30 &#8211; 21:00 (Th\u1ee9 2 &#8211; CN)<\/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 C\u1ee7a Ch\u00fang T\u00f4i<\/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> 123 \u0110\u01b0\u1eddng N\u00e0o \u0110\u00f3, Qu\u1eadn XYZ, TP. H\u00e0 N\u1ed9i, Vi\u1ec7t Nam\n                    <\/p>\n                    <a href=\"https:\/\/maps.google.com\" target=\"_blank\" class=\"inline-block text-sm border border-cem-surface px-6 py-2 hover:bg-cem-surface hover:text-cem-brown-dark transition uppercase tracking-wider\" style=\"text-decoration:none; color: #F4EFEA !important;\">\n                        Xem B\u1ea3n \u0110\u1ed3 <i class=\"fas fa-external-link-alt ml-1\"><\/i>\n                    <\/a>\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. M\u1ecdi b\u1ea3n quy\u1ec1n h\u00ecnh \u1ea3nh thu\u1ed9c v\u1ec1 Cem Studio.\n            <\/div>\n        <\/footer>\n\n    <\/div> \n    <!-- K\u1ebeT TH\u00daC KHUNG GIAO DI\u1ec6N CEM STUDIO -->\n\n    <!-- ==================== JAVASCRIPT ==================== -->\n    <script>\n        const cemApp = {\n            \/\/ \ud83d\udc47 THAY LINK \u1ea2NH WORDPRESS C\u1ee6A B\u1ea0N V\u00c0O CH\u1ed6 https:\/\/images.pexels.com\/... \ud83d\udc47\n            concepts: [\n                { id: 'beauty', name: 'Beauty', img: 'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Concept t\u1eadp trung t\u1ed1i \u0111a v\u00e0o khu\u00f4n m\u1eb7t. T\u00f4n vinh \u0111\u01b0\u1eddng n\u00e9t, l\u00e0n da v\u00e0 l\u1edbp makeup ngh\u1ec7 thu\u1eadt t\u1ec9 m\u1ec9. Ph\u00f9 h\u1ee3p \u0111\u1ec3 l\u00e0m \u1ea3nh profile, l\u01b0u gi\u1eef n\u00e9t \u0111\u1eb9p c\u1eadn c\u1ea3nh.' },\n                { id: 'ca-tinh', name: 'C\u00e1 T\u00ednh', img: 'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'D\u00e0nh cho nh\u1eefng c\u00f4 n\u00e0ng mang \u0111\u1eadm c\u00e1 t\u00ednh m\u1ea1nh m\u1ebd, cool ng\u1ea7u. Tone m\u00e0u phim, \u00e1nh s\u00e1ng g\u1eaft (hard light) t\u1ea1o s\u1ef1 gai g\u00f3c, n\u1ed5i lo\u1ea1n nh\u01b0ng kh\u00f4ng k\u00e9m ph\u1ea7n cu\u1ed1n h\u00fat.' },\n                { id: 'chan-dung', name: 'Ch\u00e2n Dung', img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'B\u1eaft tr\u1ecdn th\u1ea7n th\u00e1i v\u00e0 chi\u1ec1u s\u00e2u \u00e1nh m\u1eaft. M\u1ed9t b\u1ee9c \u1ea3nh ch\u00e2n dung chu\u1ea9n m\u1ef1c s\u1ebd n\u00f3i l\u00ean b\u1ea1n l\u00e0 ai m\u00e0 kh\u00f4ng c\u1ea7n b\u1ea5t k\u1ef3 l\u1eddi gi\u1ea3i th\u00edch n\u00e0o.' },\n                { id: 'giai-nhan', name: 'Giai Nh\u00e2n', img: 'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600', 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 ho\u1eb7c s\u01b0\u1eddn x\u00e1m mang l\u1ea1i kh\u00ed ch\u1ea5t v\u01b0\u01a1ng gi\u1ea3.' },\n                { id: 'kim-y', name: 'Kim Y', img: 'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Concept truy\u1ec1n th\u1ed1ng c\u00e1ch t\u00e2n, s\u1ef1 pha tr\u1ed9n ho\u00e0n h\u1ea3o gi\u1eefa n\u00e9t ho\u00e0i c\u1ed5 v\u00e0 ng\u00f4n ng\u1eef th\u1eddi trang hi\u1ec7n \u0111\u1ea1i.' },\n                { id: 'lolita', name: 'Lolita', img: 'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600', 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. Trang ph\u1ee5c b\u1ed3ng b\u1ec1nh, makeup k\u1eb9o ng\u1ecdt.' },\n                { id: 'mua-he', name: 'M\u00f9a H\u00e8', img: 'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'R\u1ef1c r\u1ee1, t\u01b0\u01a1i tr\u1ebb v\u00e0 tr\u00e0n \u0111\u1ea7y s\u1ee9c s\u1ed1ng. Concept ch\u1ee5p ngo\u1ea1i c\u1ea3nh v\u1edbi \u00e1nh n\u1eafng r\u1ef1c r\u1ee1, hoa l\u00e1 v\u00e0 n\u1ee5 c\u01b0\u1eddi r\u1ea1ng r\u1ee1.' },\n                { id: 'nang-tho', name: 'N\u00e0ng Th\u01a1', img: 'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Trong veo, d\u1ecbu d\u00e0ng v\u00e0 bay b\u1ed5ng. Concept \"best-seller\" t\u1ea1i Cem Studio, 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                { id: 'co-phuc', name: 'C\u1ed5 Ph\u1ee5c', img: 'https:\/\/images.pexels.com\/photos\/1382731\/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'M\u1eb7c l\u00ean m\u00ecnh Vi\u1ec7t Ph\u1ee5c (Nh\u1eadt B\u00ecnh, \u00c1o T\u1ea5c...), mang \u0111\u1eadm gi\u00e1 tr\u1ecb v\u0103n h\u00f3a, l\u1ecbch s\u1eed v\u00e0 s\u1ef1 t\u1ef1 h\u00e0o d\u00e2n t\u1ed9c.' },\n                { id: 'da-hoi', name: 'D\u1ea1 H\u1ed9i', img: 'https:\/\/images.pexels.com\/photos\/1055691\/pexels-photo-1055691.jpeg?auto=compress&cs=tinysrgb&w=600', 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                { id: 'co-dau-don', name: 'C\u00f4 D\u00e2u \u0110\u01a1n', img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Chi\u1ebfc v\u00e1y c\u01b0\u1edbi tr\u1eafng tinh kh\u00f4i d\u00e0nh cho ng\u00e0y b\u1ea1n quy\u1ebft \u0111\u1ecbnh y\u00eau th\u01b0\u01a1ng v\u00e0 tr\u00e2n tr\u1ecdng ch\u00ednh b\u1ea3n th\u00e2n m\u00ecnh.' },\n                { id: 'hoa-trang', name: 'H\u00f3a Trang', img: 'https:\/\/images.pexels.com\/photos\/3387565\/pexels-photo-3387565.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'Th\u1ecfa s\u1ee9c s\u00e1ng t\u1ea1o, h\u00f3a th\u00e2n th\u00e0nh nh\u00e2n v\u1eadt \u0111i\u1ec7n \u1ea3nh, anime, ho\u1eb7c b\u1ea5t k\u1ef3 h\u00ecnh t\u01b0\u1ee3ng n\u00e0o b\u1ea1n \u0111am m\u00ea.' },\n                { id: 'nu-sinh', name: 'N\u1eef Sinh', img: 'https:\/\/images.pexels.com\/photos\/1468379\/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'G\u1ee3i nh\u1edb tu\u1ed5i h\u1ecdc tr\u00f2 ng\u00e2y ng\u00f4, thanh xu\u00e2n r\u1ef1c r\u1ee1 v\u1edbi t\u00e0 \u00e1o d\u00e0i tr\u1eafng ho\u1eb7c \u0111\u1ed3ng ph\u1ee5c n\u1eef sinh trong veo.' },\n                { id: 'trong-treo', name: 'Trong Tr\u1ebbo', img: 'https:\/\/images.pexels.com\/photos\/1758144\/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'M\u1ed9c m\u1ea1c, t\u1ef1 nhi\u00ean, s\u1eed d\u1ee5ng tone makeup \"no makeup\" \u0111\u1ec3 gi\u1eef l\u1ea1i nh\u1eefng n\u00e9t thanh t\u00fa, nguy\u00ean b\u1ea3n nh\u1ea5t c\u1ee7a b\u1ea1n.' },\n                { id: 'quyen-ru', name: 'Quy\u1ebfn R\u0169', img: 'https:\/\/images.pexels.com\/photos\/1858175\/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'G\u1ee3i c\u1ea3m m\u1ed9t c\u00e1ch tinh t\u1ebf v\u00e0 ngh\u1ec7 thu\u1eadt. T\u00f4n vinh \u0111\u01b0\u1eddng cong ph\u00e1i \u0111\u1eb9p qua ng\u00f4n ng\u1eef c\u1ee7a \u00e1nh s\u00e1ng v\u00e0 b\u00f3ng t\u1ed1i.' },\n                { id: 'nghe-thuat', name: 'Ngh\u1ec7 Thu\u1eadt', img: 'https:\/\/images.pexels.com\/photos\/1926769\/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600', desc: 'V\u01b0\u1ee3t ra kh\u1ecfi nh\u1eefng gi\u1edbi h\u1ea1n th\u00f4ng th\u01b0\u1eddng, s\u1eed d\u1ee5ng body painting, v\u1ea3i v\u00f3c ho\u1eb7c \u0111\u1ea1o c\u1ee5 \u0111\u1ed9c l\u1ea1 \u0111\u1ec3 t\u1ea1o ra t\u00e1c ph\u1ea9m nhi\u1ebfp \u1ea3nh th\u1ef1c th\u1ee5.' }\n            ],\n            \n            currentSlide: 0,\n            \n            init: function() {\n                this.renderConcepts();\n                this.setupEvents();\n                \/\/ T\u1ef1 \u0111\u1ed9ng ch\u1ea1y Slider sau m\u1ed7i 5 gi\u00e2y\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                    \/\/ \u0110\u00e3 thay \u0111\u1ed5i th\u1ebb span \u0111\u1ec3 ch\u1eef v\u1eeba v\u1eb7n h\u01a1n tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb\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.id}\">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                \/\/ \u1ea8n t\u1ea5t c\u1ea3 c\u00e1c trang\n                document.querySelectorAll('#cem-wrapper .view-section').forEach(view => {\n                    view.classList.remove('active');\n                });\n                \n                \/\/ Hi\u1ec3n th\u1ecb trang \u0111\u01b0\u1ee3c g\u1ecdi\n                const target = document.getElementById('view-' + viewId);\n                if (target) target.classList.add('active');\n\n                \/\/ \u0110\u00f3ng menu tr\u00ean \u0111i\u1ec7n tho\u1ea1i (n\u1ebfu \u0111ang m\u1edf)\n                const mobileMenu = document.getElementById('mobile-menu');\n                if (mobileMenu && mobileMenu.classList.contains('active')) {\n                    mobileMenu.classList.remove('active');\n                }\n\n                \/\/ Cu\u1ed9n l\u00ean \u0111\u1ea7u trang\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\u1ea1o giao di\u1ec7n chi ti\u1ebft cho Concept (\u0110\u00e3 thu nh\u1ecf k\u00edch th\u01b0\u1edbc \u1ea3nh v\u00e0 c\u0103n gi\u1eefa)\n                const detailHtml = `\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-start mb-16\">\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.id}')\" 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                \n                document.getElementById('concept-dynamic-content').innerHTML = detailHtml;\n                this.navigateTo('concept-detail');\n            },\n\n            bookConcept: function(id) {\n                this.navigateTo('contact');\n                const selectBox = document.getElementById('form-concept-select');\n                if (selectBox) selectBox.value = id;\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; \/\/ C\u00f3 3 slides (0, 1, 2)\n                if (this.currentSlide > 2) this.currentSlide = 0;\n                track.style.transform = `translateX(-${this.currentSlide * 100}%)`;\n            },\n\n            setupEvents: function() {\n                \/\/ S\u1ef1 ki\u1ec7n cho n\u00fat Menu \u0111i\u1ec7n tho\u1ea1i\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                \/\/ S\u1ef1 ki\u1ec7n g\u1eedi Form \u0110\u1eb7t l\u1ecbch\n                const bookingForm = document.getElementById('booking-form');\n                if (bookingForm) {\n                    bookingForm.addEventListener('submit', (e) => {\n                        e.preventDefault(); \/\/ Ng\u0103n kh\u00f4ng cho load l\u1ea1i trang\n                        document.getElementById('booking-success').classList.remove('hidden'); \/\/ Hi\u1ec7n b\u1ea3ng c\u1ea3m \u01a1n\n                    });\n                }\n            }\n        };\n\n        \/\/ Kh\u1edfi ch\u1ea1y h\u1ec7 th\u1ed1ng ngay khi trang load xong\n        document.addEventListener('DOMContentLoaded', () => {\n            cemApp.init();\n        });\n    <\/script>\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 Beauty ngh\u1ec7 thu\u1eadt. Kh\u00e1m Ph\u00e1 Concept N\u00e0ng Th\u01a1 Thanh L\u1ecbch D\u1ecbu d\u00e0ng, [&#8230;]\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=22"}],"version-history":[{"count":1,"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/karon.id.vn\/index.php?rest_route=\/wp\/v2\/posts\/22\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/karon.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/karon.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/karon.id.vn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}