</noscript > <!-- End Google Tag Manager (noscript) --> <div id="api-error" class="fixed top-24 left-1/2 -translate-x-1/2 z-[100] px-4 py-2 rounded-lg bg-error/90 text-white font-body-md text-body-md shadow-lg hidden" role="alert" > API lỗi. Vui lòng quay lại sau. </div> <header class="fixed top-0 left-0 right-0 z-50 bg-surface/85 backdrop-blur-md shadow-[0_1px_8px_rgba(0,0,0,0.03)]" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin h-20 flex items-center justify-between gap-gutter" > <div class="flex items-center gap-space-lg"> <a class="flex flex-col" data-path="trang-chu" href="#" ><img alt="Everon Logo" class="h-8 w-auto object-contain" src="assets/logo/everon-logo.png" /></a> </div> <nav class="hidden lg:flex items-center gap-space-xl" data-active-classes="text-primary-container font-label-lg" > <a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-path="chan-ga" href="#bedding-collection" >Bộ chăn ga</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-path="dem-phu-kien" href="#mattress-accessories" >Đệm & Phụ kiện</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-path="combo-tron-ven" href="#wedding-combos-showcase" >Combo</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-path="tin-tuc" href="#wedding-guides" >Tin tức</a > </nav> <div class="flex items-center gap-space-md"> <button aria-label="Tư vấn showroom" class="hidden sm:flex items-center gap-space-xs px-space-md py-space-xs rounded bg-surface-container hover:bg-surface-container-high transition-colors duration-300 text-primary-container" data-consult-open type="button" > <span class="material-symbols-outlined text-[18px]" ></span ><span class="font-label-md text-label-md uppercase tracking-wider" >Tư vấn</span ></button ><button aria-label="Giỏ hàng" class="relative p-space-xs rounded text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-cart-open type="button" > <span class="material-symbols-outlined text-[22px]" ></span ><span class="absolute top-0 right-0 w-4 h-4 rounded-full bg-secondary text-on-secondary font-label-md text-[10px] flex items-center justify-center leading-none" id="cart-badge" >0</span > </button> <button aria-label="Mở menu" class="lg:hidden p-space-xs rounded text-on-surface-variant hover:text-primary-container transition-colors duration-300" data-menu-toggle type="button" > <span class="material-symbols-outlined text-[22px]"></span> </button> </div> </div> <div class="lg:hidden hidden border-t border-outline-variant/20 bg-surface/95 backdrop-blur-md" data-mobile-menu > <nav class="max-w-[1440px] mx-auto px-margin-mobile py-4 flex flex-col gap-1" > <a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300 py-2" data-menu-link href="#bedding-collection" >Bộ chăn ga</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300 py-2" data-menu-link href="#mattress-accessories" >Đệm & Phụ kiện</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300 py-2" data-menu-link href="#wedding-combos-showcase" >Combo</a ><a class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant hover:text-primary-container transition-colors duration-300 py-2" data-menu-link href="#wedding-guides" >Tin tức</a ><button class="font-label-lg text-label-lg uppercase tracking-wider text-primary-container py-2 flex items-center gap-2" data-consult-open type="button" > <span class="material-symbols-outlined text-[18px]" ></span > <span>Tư vấn</span> </button> </nav> </div> </header> <main class="w-full pt-20 bg-surface min-h-screen"> <!-- HERO SECTION --> <section class="relative w-full min-h-[870px] lg:min-h-[942px] flex items-center -mt-20 overflow-hidden bg-tertiary" > <div class="absolute inset-0 w-full h-full" id="hero-carousel-container" > <!-- Slide 0 --> <div class="hero-slide absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out opacity-100" data-slide-index="0" > <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform hidden md:block" style=" background-image: url("assets/anh-1-1.png"); " ></div> <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform md:hidden" style=" background-image: url("assets/anh-1-2.png"); " ></div> <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 backdrop-blur-[1px]" ></div> <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" ></div> </div> <!-- Slide 1 --> <div class="hero-slide absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out opacity-0 pointer-events-none" data-slide-index="1" > <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform hidden md:block" style=" background-image: url("assets/anh-2-1.png"); " ></div> <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform md:hidden" style=" background-image: url("assets/anh-2-2.png"); " ></div> <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 backdrop-blur-[1px]" ></div> <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" ></div> </div> <!-- Slide 2 --> <div class="hero-slide absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out opacity-0 pointer-events-none" data-slide-index="2" > <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform hidden md:block" style=" background-image: url("assets/anh-3-1.png"); " ></div> <div class="w-full h-full bg-cover bg-center scale-105 transition-transform duration-1000 ease-out transform md:hidden" style=" background-image: url("assets/anh-3-3.png"); " ></div> <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 backdrop-blur-[1px]" ></div> <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" ></div> </div> </div> <div class="relative z-10 max-w-[1440px] w-full mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin pt-28 pb-space-2xl" > <div class="max-w-3xl space-y-space-lg"> <!-- <div class="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface/10 backdrop-blur-md border border-outline-variant/30 text-surface-bright" > <span class="w-1.5 h-1.5 rounded-full bg-secondary-fixed"></span> </div> --> <h1 class="font-display-lg text-display-lg-mobile md:text-display-lg text-surface-container-lowest tracking-tight leading-[1.12]" > Một khởi đầu mới, <br class="hidden sm:inline" /> <span class="italic font-normal text-secondary-fixed" >ngàn khoảnh khắc êm ái</span > </h1> <p class="font-subhead-lg text-body-lg md:text-subhead-lg text-surface-container-high/90 max-w-xl font-light leading-relaxed" > Khám phá những thiết kế chăn ga, gối đệm Everon dành cho phòng cưới, cùng hai bạn tạo nên không gian nghỉ ngơi ấm áp và thoải mái trong hành trình chung đôi. </p> <div class="pt-space-md flex flex-wrap items-center gap-space-md"> <a class="inline-flex items-center justify-center px-space-xl h-12 rounded bg-surface-container-lowest text-primary hover:bg-surface-container-low transition-all duration-300 font-label-lg text-label-lg uppercase tracking-wider shadow-sm" href="#bedding-collection" > Khám phá bộ sưu tập </a> <a class="inline-flex items-center justify-center px-space-xl h-12 rounded border border-surface-container-lowest/70 text-surface-container-lowest hover:bg-surface-container-lowest hover:text-primary transition-all duration-300 font-label-lg text-label-lg uppercase tracking-wider backdrop-blur-sm" href="#wedding-combos-showcase" > Xem combo cưới </a> </div> </div> </div> <!-- 3 Dots Indicator at Bottom Right --> <div class="absolute bottom-8 right-6 md:right-12 z-20 flex items-center gap-2" id="hero-carousel-dots" > <button aria-label="Slide 1" class="hero-dot h-1.5 rounded-full transition-all duration-300 w-8 bg-surface-container-lowest" data-hero-slide="0" type="button" ></button> <button aria-label="Slide 2" class="hero-dot h-1.5 rounded-full hover:bg-surface-container-lowest/70 transition-all duration-300 w-2 bg-surface-container-lowest/40" data-hero-slide="1" type="button" ></button> <button aria-label="Slide 3" class="hero-dot h-1.5 rounded-full hover:bg-surface-container-lowest/70 transition-all duration-300 w-2 bg-surface-container-lowest/40" data-hero-slide="2" type="button" ></button> </div> <!-- Animated Scroll-Down Indicator at Bottom Center --> <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-1.5 cursor-pointer text-surface-container-lowest/80 hover:text-surface-container-lowest transition-colors" data-scroll-to="bedding-collection" role="button" tabindex="0" > <span class="font-label-md text-[11px] uppercase tracking-widest" >Cuộn xuống khám phá</span > <span class="material-symbols-outlined text-[20px] transition-transform animate-bounce" ></span > </div> </section> <!-- COUNTDOWN SECTION (dữ liệu: data/countdown.json qua /api/countdown) --> <section class="countdown-section relative w-full py-space-xl lg:py-space-2xl bg-primary-container overflow-hidden" id="wedding-countdown" aria-labelledby="countdown-title" data-countdown-end="2026-11-30T23:59:59+07:00" > <!-- Hoạ tiết nền: quầng sáng champagne + khung viền mảnh --> <div class="countdown-glow absolute inset-0 pointer-events-none" aria-hidden="true"></div> <div class="absolute inset-3 md:inset-5 border border-[#CDBFA9]/25 rounded-xl pointer-events-none" aria-hidden="true" ></div> <div class="relative max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg lg:gap-gutter items-center"> <!-- Nội dung --> <div class="lg:col-span-6 text-center lg:text-left space-y-space-sm"> <h2 id="countdown-title" class="font-display-lg text-[24px] leading-[32px] md:text-headline-md text-surface-bright tracking-tight" > <span data-countdown-field="title">Đếm ngược</span> <span class="italic font-normal text-secondary-fixed" data-countdown-field="title_highlight" >ngày chung đôi</span > </h2> <p class="font-body-md text-body-md md:text-body-lg text-surface-container-high/85 leading-relaxed max-w-xl mx-auto lg:mx-0" data-countdown-field="description" data-countdown-live > Quà cưới đặc biệt và ưu đãi combo phòng cưới chỉ dành cho bạn đến hết ngày 30/11/2026. Chọn quà yêu thích, vun đắp tổ ấm trọn vẹn ngay hôm nay. </p> </div> <!-- Đồng hồ đếm ngược --> <div class="lg:col-span-6"> <div class="countdown-timer grid grid-cols-4 gap-2 sm:gap-3 max-w-[440px] mx-auto lg:ml-auto lg:mr-0" role="timer" aria-live="off" aria-atomic="true" data-countdown-timer > <div class="countdown-unit"> <span class="countdown-value" data-countdown-unit="days">00</span> <span class="countdown-label">Ngày</span> </div> <div class="countdown-unit"> <span class="countdown-value" data-countdown-unit="hours">00</span> <span class="countdown-label">Giờ</span> </div> <div class="countdown-unit"> <span class="countdown-value" data-countdown-unit="minutes">00</span> <span class="countdown-label">Phút</span> </div> <div class="countdown-unit"> <span class="countdown-value" data-countdown-unit="seconds">00</span> <span class="countdown-label">Giây</span> </div> </div> <!-- Trạng thái đã kết thúc --> <div class="hidden max-w-[440px] mx-auto lg:ml-auto lg:mr-0 text-center rounded-lg border border-[#CDBFA9]/30 bg-surface/5 px-space-lg py-space-lg" data-countdown-ended > <p class="font-display-lg text-headline-sm md:text-[24px] text-surface-bright" data-countdown-field="ended_title" > Chương trình đã kết thúc </p> <p class="mt-space-sm font-body-md text-body-md text-surface-container-high/80" data-countdown-field="ended_description" > Cảm ơn hai bạn đã đồng hành cùng Everon. </p> </div> <div class="mt-space-md flex flex-col sm:flex-row items-center justify-center lg:justify-end gap-space-md" > <p class="inline-flex items-center gap-2 font-body-md text-body-md text-surface-container-high/80" > <svg class="w-[18px] h-[18px] text-secondary-fixed-dim shrink-0" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /> </svg> <span><span data-countdown-end-prefix>Kết thúc</span> <strong class="font-semibold text-surface-bright" data-countdown-end-label>23:59 · 30/11/2026</strong></span> </p> <a class="inline-flex items-center justify-center gap-2 px-space-lg h-11 rounded bg-surface-container-lowest text-primary-container hover:bg-surface-container-low focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-fixed transition-colors duration-300 font-label-lg text-label-lg uppercase tracking-wider cursor-pointer" href="#bedding-collection" data-countdown-cta > <span data-countdown-field="cta_label">Khám phá ưu đãi</span> <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /> </svg> </a> </div> </div> </div> </div> </section> <!-- BEDDING COLLECTION SECTION --> <section class="w-full py-space-2xl bg-surface-container-low border-b border-outline-variant/20 overflow-hidden" id="wedding-story-intro" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center" > <div class="lg:col-span-6 space-y-space-md"> <div class="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container border border-outline-variant/30" > <span class="w-1.5 h-1.5 rounded-full bg-secondary"></span ><span class="font-label-md text-label-md uppercase tracking-[0.2em] text-secondary" >Chuẩn bị tổ ấm hạnh phúc</span > </div> <h2 class="font-display-lg text-headline-lg-mobile md:text-headline-lg text-primary-container tracking-tight leading-snug" > Ngày về chung một nhà <br /><span class="italic font-normal text-secondary" >Nơi yêu thương trở thành tổ ấm</span > </h2> <p class="font-body-lg text-on-surface-variant leading-relaxed"> Hôn lễ là dấu mốc thiêng liêng của tình yêu, khi hai người cùng trao lời hẹn ước và bắt đầu hành trình xây dựng tổ ấm. Không chỉ là ngày vui ngập tràn lời chúc phúc, đó còn là khởi đầu cho những tháng năm sẻ chia, nơi mỗi khoảnh khắc bên nhau đều trở thành một phần của hạnh phúc. </p> <p class="font-body-md text-on-surface-variant/80 leading-relaxed" > Everon tin rằng, hạnh phúc được vun đắp từ những điều giản dị: một lời quan tâm, một cái ôm ấm áp hay những phút giây bình yên bên nhau. Cùng Everon chăm chút cho không gian phòng cưới với những bộ chăn ga, gối đệm được lựa chọn tinh tế, mang đến sự êm ái và thoải mái để mỗi ngày chung đôi thêm trọn vẹn. </p> <div class="pt-space-sm grid grid-cols-2 gap-space-md border-t border-outline-variant/20" > <div class="flex items-start gap-space-xs"> <span class="material-symbols-outlined text-[24px] text-secondary mt-0.5" ></span > <div> <h4 class="font-headline-sm text-[16px] text-primary-container font-semibold" > Tổ ấm uyên ương </h4> <p class="text-body-sm text-on-surface-variant mt-0.5"> Nâng niu từng phút giây bên nhau </p> </div> </div> <div class="flex items-start gap-space-xs"> <span class="material-symbols-outlined text-[24px] text-secondary mt-0.5" ></span > <div> <h4 class="font-headline-sm text-[16px] text-primary-container font-semibold" > Hạnh phúc bền lâu </h4> <p class="text-body-sm text-on-surface-variant mt-0.5"> Khởi đầu cho ước nguyện trăm năm </p> </div> </div> </div> </div> <div class="lg:col-span-6 relative hidden lg:block"> <div class="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-md bg-surface-container" > <img loading="lazy" decoding="async" alt="Không gian phòng tân hôn ấm áp cùng bộ chăn ga Everon" class="w-full h-full object-cover" src="assets/anh-4.jpg" /> </div> </div> </div> </div> </section> <section class="w-full py-space-2xl bg-surface" id="bedding-collection"> <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <!-- Section Header --> <div class="flex flex-col md:flex-row md:items-end justify-between mb-space-2xl gap-space-lg" > <div class="max-w-2xl"> <span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary block mb-space-xs" >Bộ sưu tập tân hôn Everon</span > <h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary-container tracking-tight" > Chọn CHĂN GA cho ngày chung nhà </h2> <p class="mt-space-sm font-body-lg text-on-surface-variant max-w-xl" > Từ sắc đỏ nồng nàn, gam be thanh lịch đến những sắc hồng dịu dàng hay họa tiết hoa lá đầy sức sống — chọn một căn phòng mang dấu ấn riêng của hai người. </p> </div> <!-- 4 Color Tabs --> <div class="grid grid-cols-4 p-1.5 bg-surface-container rounded-xl border border-outline-variant/30 w-full sm:w-auto md:min-w-[420px] lg:min-w-[480px] gap-1 shadow-sm" id="bedding-tabs" ></div> </div> <!-- 2-column Mobile / 5-column Desktop Bedding Grid --> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4 md:gap-5" id="bedding-grid" > <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="b_red_1" data-product-source="bedding" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Hy Tuoc Do Nong bedding flat angle in vibrant crimson embroidered silk with traditional auspicious birds" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Close angle of Hy Tuoc Do Nong bedding showing silky soft texture and gold border seams" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đỏ</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Everon Hỷ Tước Đỏ Nồng </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >9.250.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="b_red_2" data-product-source="bedding" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Song Hy Phu Quy red bridal quilt draped on king size bed in luxurious sunlit room" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Detailed corner of Song Hy Phu Quy pillow with refined gold embroidery ligature" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đỏ</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Everon Song Hỷ Phú Quý </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >8.450.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="b_red_3" data-product-source="bedding" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Uyen Uong Cat Tuong crimson bedding set with mandarin ducks motif against clean ivory headboard" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Tender close up of pillowcase edge with hand-guided satin stitches" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đỏ</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Everon Uyên Ương Cát Tường </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >7.990.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="b_red_4" data-product-source="bedding" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Kim Hoa Do Ruou deep wine red bedding with minimal metallic thread embroidery" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Fabric fold detail showcasing shimmer of Modal Jacquard textile under gentle lamp light" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đỏ</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Everon Kim Hoa Đỏ Rượu </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >10.150.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="b_red_5" data-product-source="bedding" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Chu Sa Tan Hon bright scarlet bedding set displayed with ivory throw blankets" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Overhead top view of Chu Sa bedding styling with soft wedding bouquet" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đỏ</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Everon Chu Sa Tân Hôn </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >6.850.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> </div> </div> </section> <!-- SECTION 05: MATTRESS & ACCESSORIES SECTION --> <section class="w-full py-space-2xl bg-[#5B1318] text-[#F9F6EF]" id="mattress-accessories" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="flex flex-col md:flex-row md:items-end justify-between mb-space-2xl gap-space-lg" > <div> <span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary-fixed block mb-space-xs" >CHO KHỞI ĐẦU HẠNH PHÚC</span > <h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg font-display-lg tracking-tight mb-space-xs leading-snug" > Chăm chút từng tiện nghi,<br class="hidden sm:inline" /><span class="italic font-normal text-secondary-fixed sm:ml-2" > vun đầy tổ ấm</span > </h2> <p class="font-body-lg text-surface-variant/90 max-w-xl leading-relaxed mt-space-xs" > Từ tấm đệm êm ái đến những chiếc gối và phụ kiện tinh tế, Everon cùng bạn hoàn thiện không gian tân hôn, để mỗi khoảnh khắc bên nhau thêm trọn vẹn. </p> </div> <!-- 2 Category Tabs --> <div class="grid grid-cols-2 p-1.5 bg-[#430B12] rounded-xl border border-[#8D786F]/40 w-full sm:w-auto md:min-w-[280px] lg:min-w-[320px] gap-1 shadow-sm shrink-0" > <button class="acc-tab w-full text-center py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg font-label-lg text-[13px] sm:text-[14px] md:text-[15px] tracking-wider transition-all duration-300 bg-surface-container-lowest text-[#5B1318] font-bold shadow-sm cursor-pointer whitespace-nowrap" data-acc-filter="mattress" type="button" > ĐỆM</button ><button class="acc-tab w-full text-center py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg font-label-lg text-[13px] sm:text-[14px] md:text-[15px] tracking-wider text-surface-container-lowest/80 hover:text-white hover:bg-[#701D26] transition-all duration-300 cursor-pointer whitespace-nowrap" data-acc-filter="accessories" type="button" > PHỤ KIỆN </button> </div> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4 md:gap-5" id="mattress-accessories-grid" > <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="m_1" data-product-source="mattressAcc" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Master Pocket independent pocket spring mattress showcased with plush quilted top layer" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Cross section view of pocket springs and natural latex comfort layer inside mattress" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đệm Cưới Cao Cấp</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Đệm Lò Xo Túi Master Pocket </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >12.800.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="m_2" data-product-source="mattressAcc" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon King Luxury Pocket 32cm extra deep mattress with pillow top layer in luxury suite" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Close shot of Euro-top Belgian damask fabric cover with anti-bacterial finish" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đệm Cưới Cao Cấp</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Đệm King Luxury Pocket 32cm </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >18.500.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="m_3" data-product-source="mattressAcc" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Royal Latex natural rubber mattress with hexagonal pin-core air holes for ventilation" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Extreme close up of latex bounce and soft organic cotton zipper cover" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đệm Cưới Cao Cấp</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Đệm Cao Su Thiên Nhiên Royal Latex </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >15.900.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="m_4" data-product-source="mattressAcc" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Biosoft firm fiber mattress with triple fold design and quilted jacquard casing" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Side profile of Biosoft mattress core revealing dense thermal bonded polyester fibers" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đệm Cưới Cao Cấp</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Đệm Bông Ép Kháng Khuẩn Biosoft </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >6.400.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> <div class="group cursor-pointer bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant/30 flex flex-col justify-between transition-all duration-300 hover:shadow-md" data-product-id="m_5" data-product-source="mattressAcc" > <div class="relative aspect-[4/5] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Everon Hybrid Imperial Cool Gel mattress featuring modern ice blue piping and dual core support" class="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:opacity-0" /> <img loading="lazy" decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgcng9IjgiIGZpbGw9IiNlOGVhZWQiLz48cGF0aCBkPSJNMTcwIDEzMCBsMzAgNDAgbDIwLTE1IGw0MCA1NSBIMTQweiIgZmlsbD0iI2JkYzFjNiIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjEyMCIgcj0iMTgiIGZpbGw9IiNiZGMxYzYiLz48L3N2Zz4=" alt="Texture of cooling phase change gel memory foam layer on mattress top" class="w-full h-full object-cover absolute inset-0 opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100" /> <div class="absolute bottom-3 left-3 right-3"> <span class="w-full py-2 px-3 rounded bg-surface/90 backdrop-blur-sm text-primary font-label-md text-label-md uppercase tracking-wider text-center block opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-sm" > Xem chi tiết </span> </div> </div> <div class="p-3.5 flex flex-col flex-1 justify-between space-y-2"> <div> <span class="font-label-md text-[11px] text-secondary tracking-widest uppercase block" >Đệm Cưới Cao Cấp</span > <h3 class="font-headline-sm text-[17px] leading-snug text-primary-container group-hover:text-secondary transition-colors line-clamp-2 mt-0.5" > Đệm Hybrid Imperial Cool Gel </h3> </div> <div class="pt-1 border-t border-outline-variant/20 flex items-center justify-between" > <span class="font-price-md text-price-md text-primary-container font-semibold" >21.900.000 đ</span > <span class="material-symbols-outlined text-[18px] text-outline group-hover:text-primary-container transition-colors" ></span > </div> </div> </div> </div> </div> </section> <!-- SECTION 08: EDITORIAL STORY SECTION --> <section class="w-full py-space-2xl bg-surface-container-low border-t border-outline-variant/30" id="wedding-combos-showcase" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="text-center max-w-3xl mx-auto mb-space-2xl"> <div class="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container border border-outline-variant/30 mb-space-xs" > <span class="w-1.5 h-1.5 rounded-full bg-secondary"></span ><span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary font-semibold" > COMBO trọn vẹn</span > </div> <h2 class="font-sans text-2xl sm:text-3xl md:text-4xl font-bold text-primary-container tracking-tight leading-snug mt-2" > Trọn Gói Hạnh Phúc, Chu Toàn Ngày Chung Đôi </h2> <p class="mt-space-sm font-body-lg text-on-surface-variant max-w-2xl mx-auto" > Giải pháp trọn gói phòng cưới được thiết kế cho đêm tân hôn — tối ưu chi phí, đủ đầy và an tâm trọn vẹn. </p> </div> <div class="relative"> <div class="flex gap-2 lg:gap-8 overflow-x-auto snap-x snap-mandatory items-stretch pb-2" id="combo-slider" > <!-- Combo items loaded dynamically from API --> </div> <button aria-label="Xem combo trước" class="flex md:hidden absolute left-1 top-1/2 -translate-y-1/2 items-center justify-center text-white bg-transparent border-0 p-1 active:scale-90 transition-transform z-10" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.65)) drop-shadow(0 0 1.5px rgba(0,0,0,0.75));" data-combo-prev type="button" > <span class="material-symbols-outlined text-[38px] leading-none select-none" ></span > </button> <button aria-label="Xem combo kế tiếp" class="flex md:hidden absolute right-1 top-1/2 -translate-y-1/2 items-center justify-center text-white bg-transparent border-0 p-1 active:scale-90 transition-transform z-10" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.65)) drop-shadow(0 0 1.5px rgba(0,0,0,0.75));" data-combo-next type="button" > <span class="material-symbols-outlined text-[38px] leading-none select-none" ></span > </button> </div> </div> </section> <section class="w-full py-space-2xl bg-surface-container-lowest overflow-hidden" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center" > <!-- Asymmetric visual showcase --> <div class="lg:col-span-7 relative"> <div class="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-sm" > <img loading="lazy" decoding="async" class="w-full h-full object-cover" alt="Không gian phòng cưới ấm cúng được chuẩn bị chỉn chu với bộ chăn ga Everon trang nhã" src="assets/anh-5.png" /> </div> <!-- Overlapping secondary detail image --> <div class="hidden sm:block absolute -bottom-8 -right-8 w-3/5 aspect-[4/3] rounded-xl overflow-hidden shadow-xl border-4 border-surface-container-lowest" > <img loading="lazy" decoding="async" class="w-full h-full object-cover" alt="Chi tiết chất liệu vải chăn ga Everon mềm mại, sang trọng với đường may tỉ mỉ" src="assets/anh-6.png" /> </div> </div> <!-- Narrative Block --> <div class="lg:col-span-5 space-y-space-md lg:pl-space-lg"> <span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary" >Dấu ấn Everon</span > <h2 class="font-display-lg text-headline-lg md:text-display-lg text-primary-container tracking-tight leading-tight" > <span class="whitespace-nowrap inline-block text-[32px] sm:text-[36px] md:text-[40px]">Chăm chút tổ ấm mới</span> <br /> <span class="italic font-normal text-secondary text-[24px] sm:text-[28px] md:text-[32px] leading-snug inline-block" >Cho "Một đời" trọn vẹn, hạnh phúc</span > </h2> <p class="text-[13.5px] sm:text-body-md text-on-surface-variant leading-relaxed"> Phòng cưới là nơi những câu chuyện hạnh phúc bắt đầu. Một không gian được chuẩn bị chỉn chu, một bộ chăn ga yêu thích và cảm giác êm ái mỗi khi nghỉ ngơi đều góp phần tạo nên những trải nghiệm đáng nhớ trong cuộc sống lứa đôi. </p> <p class="text-[12.5px] sm:text-body-sm text-on-surface-variant/80 leading-relaxed" > Thấu hiểu những mong đợi ấy, Everon mang đến các bộ sưu tập chăn ga với thiết kế trang nhã, chất liệu được tuyển chọn và nhiều lựa chọn phù hợp với phong cách phòng cưới. Từng sản phẩm góp phần hoàn thiện không gian nghỉ ngơi, để mỗi ngày bên nhau thêm hạnh phúc và vui vẻ. </p> <div class="pt-space-sm w-full grid grid-cols-3 divide-x divide-outline-variant/30 text-center md:text-left"> <div class="px-1.5 sm:px-3 md:pl-0"> <span class="font-body-md text-xl md:text-2xl font-bold text-primary-container block whitespace-nowrap tracking-tight" >27+ Năm</span > <span class="font-label-md text-[10px] sm:text-label-md uppercase text-on-surface-variant tracking-wider block mt-1" >Đồng hành<br />cùng gia đình Việt</span > </div> <div class="px-1.5 sm:px-3"> <span class="font-body-md text-xl md:text-2xl font-bold text-primary-container block whitespace-nowrap tracking-tight" >10 triệu +</span > <span class="font-label-md text-[10px] sm:text-label-md uppercase text-on-surface-variant tracking-wider block mt-1" >Khách hàng<br />trung thành</span > </div> <div class="px-1.5 sm:px-3 md:pr-0"> <span class="font-body-md text-xl md:text-2xl font-bold text-primary-container block whitespace-nowrap tracking-tight" >500+</span > <span class="font-label-md text-[10px] sm:text-label-md uppercase text-on-surface-variant tracking-wider block mt-1" >Showroom<br />toàn quốc</span > </div> </div> </div> </div> </div> </section> <!-- SECTION 09: FINAL CTA BANNER --> <section class="w-full py-16 md:py-20 bg-[#f5efe6] text-on-surface border-t border-outline-variant/30" id="customer-reviews" > <div class="max-w-6xl mx-auto px-4 md:px-8"> <div class="text-center mb-12"> <div class="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container border border-outline-variant/30 mb-space-xs" > <span class="w-1.5 h-1.5 rounded-full bg-secondary"></span ><span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary font-semibold" >ĐÁNH GIÁ TỪ</span > </div> <h2 class="font-display-lg text-3xl md:text-5xl font-bold tracking-tight text-primary-container uppercase mt-1" > KHÁCH HÀNG CỦA EVERON </h2> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="bg-surface-container-lowest text-on-surface rounded-2xl p-6 shadow-sm border border-outline-variant/30 flex items-center gap-5 transition-transform duration-300 hover:shadow-md" > <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden shrink-0 bg-surface-container" > <img loading="lazy" decoding="async" alt="Anh Huy đánh giá bộ chăn ga cưới Everon" class="w-full h-full object-cover" src="assets/anh-7.png" /> </div> <div class="flex-1 min-w-0 flex flex-col justify-between h-full"> <div class="flex items-center gap-1 text-[#528935] mb-1.5"> <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span > </div> <h4 class="font-bold text-[16px] md:text-[17px] text-[#1c1c18] uppercase tracking-wide leading-snug line-clamp-1" > SET CHĂN GA ĐẸP, ĐÚNG Ý </h4> <p class="text-body-sm text-on-surface-variant my-1.5 leading-relaxed" > Vợ chồng mình chọn bộ chăn ga Everon cho phòng cưới, màu sắc và họa tiết làm khá tinh tế. Chất vải mềm mịn, đường may chỉn chu, trải lên giường nhìn đẹp và đúng sở thích của vợ mình. </p> <div class="text-body-sm text-outline font-medium"> <span class="font-bold text-on-surface">Anh Huy</span> • 2 tuần trước </div> </div> </div> <div class="bg-surface-container-lowest text-on-surface rounded-2xl p-6 shadow-sm border border-outline-variant/30 flex items-center gap-5 transition-transform duration-300 hover:shadow-md" > <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden shrink-0 bg-surface-container" > <img loading="lazy" decoding="async" alt="Chị Huyền Anh đánh giá bộ chăn ga gối Everon" class="w-full h-full object-cover" src="assets/anh-8.png" /> </div> <div class="flex-1 min-w-0 flex flex-col justify-between h-full"> <div class="flex items-center gap-1 text-[#528935] mb-1.5"> <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span > </div> <h4 class="font-bold text-[16px] md:text-[17px] text-[#1c1c18] uppercase tracking-wide leading-snug line-clamp-1" > HÀI LÒNG VỚI SẢN PHẨM </h4> <p class="text-body-sm text-on-surface-variant my-1.5 leading-relaxed" > Bộ chăn ga có màu sắc đúng như hình, chất liệu mềm mại và dễ chịu. Mình đặc biệt thích những chi tiết lá thêu trên chăn ga, nhìn đường may chi tiết và rất nét. </p> <div class="text-body-sm text-outline font-medium"> <span class="font-bold text-on-surface">Chị Huyền Anh</span> • 4 tuần trước </div> </div> </div> <div class="bg-surface-container-lowest text-on-surface rounded-2xl p-6 shadow-sm border border-outline-variant/30 flex items-center gap-5 transition-transform duration-300 hover:shadow-md" > <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden shrink-0 bg-surface-container" > <img loading="lazy" decoding="async" alt="Anh Sơn Lâm đánh giá chất lượng chăn ga Everon" class="w-full h-full object-cover" src="assets/anh-9.png" /> </div> <div class="flex-1 min-w-0 flex flex-col justify-between h-full"> <div class="flex items-center gap-1 text-[#528935] mb-1.5"> <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span > </div> <h4 class="font-bold text-[16px] md:text-[17px] text-[#1c1c18] uppercase tracking-wide leading-snug line-clamp-1" > CHẤT LƯỢNG XỨNG ĐÁNG </h4> <p class="text-body-sm text-on-surface-variant my-1.5 leading-relaxed" > Nhà mình đã sử dụng chăn ga Everon nhiều năm. Chất vải mềm, nằm thoải mái, sau nhiều lần giặt vẫn giữ được màu sắc và độ mềm. Rất hài lòng với chất lượng sản phẩm. </p> <div class="text-body-sm text-outline font-medium"> <span class="font-bold text-on-surface">Anh Sơn Lâm</span> • 6 tuần trước </div> </div> </div> <div class="bg-surface-container-lowest text-on-surface rounded-2xl p-6 shadow-sm border border-outline-variant/30 flex items-center gap-5 transition-transform duration-300 hover:shadow-md" > <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl overflow-hidden shrink-0 bg-surface-container" > <img loading="lazy" decoding="async" alt="Chị Dương đánh giá đệm và gối Everon" class="w-full h-full object-cover" src="assets/anh-10.png" /> </div> <div class="flex-1 min-w-0 flex flex-col justify-between h-full"> <div class="flex items-center gap-1 text-[#528935] mb-1.5"> <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span ><span class="material-symbols-outlined text-[18px]" style="font-variation-settings: "FILL" 1" ></span > </div> <h4 class="font-bold text-[16px] md:text-[17px] text-[#1c1c18] uppercase tracking-wide leading-snug line-clamp-1" > HÀNG CHUẨN ĐẢM BẢO CHẤT LƯỢNG </h4> <p class="text-body-sm text-on-surface-variant my-1.5 leading-relaxed" > Mình đã mua cả đệm và gối Everon, mua của hãng nên yên tâm về chất lượng. Đệm nằm êm, có độ nâng đỡ tốt, gối mình mua điều chỉnh được độ cao tùy ý nên rất tiện. </p> <div class="text-body-sm text-outline font-medium"> <span class="font-bold text-on-surface">Chị Dương</span> • 12 tuần trước </div> </div> </div> </div> </div> </section> </main> <section class="w-full py-space-2xl bg-surface-container-low border-t border-outline-variant/30" id="wedding-guides" > <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin" > <div class="flex flex-col md:flex-row md:items-end justify-between mb-space-2xl gap-space-lg" > <div class="max-w-2xl"> <div class="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container border border-outline-variant/30 mb-space-xs" > <span class="w-1.5 h-1.5 rounded-full bg-secondary"></span ><span class="font-label-md text-label-md uppercase tracking-[0.25em] text-secondary font-semibold" >CẨM NANG & GÓC NHÌN CƯỚI</span > </div> <h2 class="font-headline-lg text-headline-lg-mobile md:text-headline-lg font-display-lg text-primary-container tracking-tight leading-snug" > Kinh nghiệm chuẩn bị tổ ấm trọn vẹn </h2> <p class="mt-space-sm font-body-lg text-on-surface-variant max-w-xl" > Những chia sẻ, bí quyết và góc nhìn từ chuyên gia giấc ngủ Everon giúp hai bạn thảnh thơi chuẩn bị cho ngày chung đôi. </p> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" > <a href="https://everon.com/phong-tan-hon-can-chuan-bi-nhung-gi-checklist-day-du-cho-cac-cap-doi-truoc-ngay-cuoi" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="Phòng tân hôn cần chuẩn bị những gì? Checklist đầy đủ cho các cặp đôi trước ngày cưới" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 1 (Small).jpg" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">18 Th10, 2026</span><span class="">•</span ><span class="">5 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > Phòng tân hôn cần chuẩn bị những gì? Checklist đầy đủ cho các cặp đôi trước ngày cưới </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Từ chăn ga gối đệm đến đồ trang trí và vật dụng cần thiết — checklist đầy đủ giúp phòng tân hôn hoàn hảo trong ngày cưới. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> <a href="https://everon.com/chon-dem-cho-phong-cuoi-so-sanh-cac-tieu-chi-quan-trong-truoc-khi-mua" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="Chọn đệm cho phòng cưới: So sánh các tiêu chí quan trọng trước khi mua" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 2 (Small).png" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">12 Th10, 2026</span><span class="">•</span ><span class="">6 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > Chọn đệm cho phòng cưới: So sánh các tiêu chí quan trọng trước khi mua </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Độ êm, độ nâng đỡ, kích thước, chất liệu và giá cả — cùng so sánh từng tiêu chí để chọn chiếc đệm ưng ý cho phòng cưới. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> <a href="https://everon.com/5-tone-mau-trang-tri-phong-cuoi-dep-goi-y-phoi-mau-theo-tung-phong-cach" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="5 tone màu trang trí phòng cưới đẹp: Gợi ý phối màu theo từng phong cách" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 3 (Small).jpg" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">05 Th10, 2026</span><span class="">•</span ><span class="">4 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > 5 tone màu trang trí phòng cưới đẹp: Gợi ý phối màu theo từng phong cách </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Từ hiện đại tối giản đến cổ điển lãng mạn — khám phá 5 tone màu đẹp và cách phối hợp hài hòa cho không gian phòng cưới. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> <a href="https://everon.com/tencel-modal-va-cotton-dau-la-chat-lieu-chan-ga-phu-hop-cho-phong-cuoi" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="Tencel, Modal và Cotton: Đâu là chất liệu chăn ga phù hợp cho phòng cưới?" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 4 (Small).png" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">28 Th09, 2026</span><span class="">•</span ><span class="">5 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > Tencel, Modal và Cotton: Đâu là chất liệu chăn ga phù hợp cho phòng cưới? </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Cùng tìm hiểu ưu nhược điểm của ba chất liệu phổ biến để chọn bộ chăn ga vừa êm ái, bền đẹp vừa phù hợp với túi tiền. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> <a href="https://everon.com/chon-mau-chan-ga-cuoi-theo-ngu-hanh-giup-vo-chong-hoa-thuan-may-man" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="Chọn màu chăn ga cưới theo Ngũ hành giúp vợ chồng hòa thuận, may mắn" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 5 (Small).jpg" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">20 Th09, 2026</span><span class="">•</span ><span class="">7 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > Chọn màu chăn ga cưới theo Ngũ hành giúp vợ chồng hòa thuận, may mắn </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Hướng dẫn chọn màu chăn ga hợp mệnh Kim, Mộc, Thủy, Hỏa, Thổ — mang lại sự hòa thuận và vượng khí cho đôi uyên ương. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> <a href="https://everon.com/5-dieu-kieng-ky-va-nen-tranh-khi-chuan-bi-phong-cuoi-dau-re-nen-biet" target="_blank" rel="noopener noreferrer"> <article class="group bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/30 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between" data-analytics-intent="read_article" data-analytics-label="guide_card" > <div class="relative aspect-[16/10] overflow-hidden bg-surface-container" > <img loading="lazy" decoding="async" alt="5 điều kiêng kỵ và nên tránh khi chuẩn bị phòng cưới dâu rể nên biết" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="assets/Bài 6 (Small).png" /> <div class="absolute top-3 left-3"></div> </div> <div class="p-5 flex-1 flex flex-col justify-between space-y-3"> <div> <div class="flex items-center gap-2 text-[12px] text-outline mb-2" > <span class="">15 Th09, 2026</span><span class="">•</span ><span class="">4 phút đọc</span> </div> <h3 class="font-sans text-[18px] font-bold text-primary-container group-hover:text-secondary transition-colors leading-snug line-clamp-2" > 5 điều kiêng kỵ và nên tránh khi chuẩn bị phòng cưới dâu rể nên biết </h3> <p class="mt-2 text-body-sm text-on-surface-variant line-clamp-2 leading-relaxed" > Những điều cần tránh khi sắm sửa và trang trí phòng cưới theo quan niệm dân gian, giúp đôi trẻ đón hỷ khí trọn vẹn. </p> </div> <div class="pt-3 border-t border-outline-variant/20 flex items-center justify-between text-body-sm" > <span class="font-medium text-secondary group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" >Đọc tiếp <span class="material-symbols-outlined text-[16px]" ></span ></span ><span class="material-symbols-outlined text-outline text-[18px]" ></span > </div> </div> </article> </a> </div> </div> </section> <!-- CONSULTATION REQUEST MODAL --> <div aria-hidden="true" class="fixed inset-0 z-[70] hidden opacity-0 transition-opacity duration-300 flex items-center justify-center p-4 sm:p-6 overflow-y-auto" id="consult-modal" > <div class="fixed inset-0 bg-black/50 backdrop-blur-sm consult-modal-backdrop"></div> <div class="relative z-10 max-w-lg md:max-w-2xl w-full mx-auto my-auto bg-surface-container-lowest rounded-2xl border border-outline-variant/30 shadow-2xl overflow-hidden transition-all duration-300" > <div class="flex items-start justify-between gap-4 px-6 sm:px-8 py-5 border-b border-outline-variant/20 bg-surface-container-low" > <div> <span class="font-label-md text-label-md uppercase tracking-widest text-secondary block mb-1"> Hỗ trợ chuyên gia </span> <h3 class="font-headline-sm sm:font-headline-md text-[20px] sm:text-[22px] text-primary-container font-semibold" > Đặt lịch tư vấn tận tâm </h3> <p class="text-body-sm text-on-surface-variant mt-0.5"> Chuyên gia Everon sẽ liên hệ giải đáp thắc mắc và tư vấn bộ sản phẩm phù hợp nhất cho bạn. </p> </div> <button aria-label="Đóng" class="w-9 h-9 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface transition-colors" data-modal-close type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> </div> <form class="p-6 sm:p-8 space-y-4" id="consult-form" novalidate=""> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="consult-name" >Họ và tên</label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="consult-name" name="name" placeholder="VD: Nguyễn Văn A" type="text" /> <p class="text-body-sm text-secondary mt-1 hidden" data-error="name" ></p> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="consult-phone" >Số điện thoại <span class="text-secondary">*</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="consult-phone" name="phone" placeholder="VD: 0901 234 567" type="tel" /> <p class="text-body-sm text-secondary mt-1 hidden" data-error="phone" ></p> </div> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="consult-email" >Email <span class="text-on-surface-variant/60 font-normal lowercase">(nhận báo giá qua email)</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="consult-email" name="email" placeholder="VD: ban@email.com" type="email" /> <p class="text-body-sm text-secondary mt-1 hidden" data-error="email" ></p> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="consult-message" >Nội dung cần tư vấn <span class="text-secondary">*</span></label > <textarea class="w-full px-4 py-3 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors leading-relaxed" id="consult-message" name="message" placeholder="Bạn đang quan tâm sản phẩm, màu sắc, kích thước hay combo cưới nào?" rows="4" ></textarea> <p class="text-body-sm text-secondary mt-1 hidden" data-error="message" ></p> </div> <div class="pt-2"> <button class="w-full h-12 rounded-lg bg-primary-container text-on-primary font-label-lg text-label-lg uppercase tracking-wider transition-all duration-300 hover:bg-primary shadow-md flex items-center justify-center gap-2" id="consult-submit" type="submit" > <span class="material-symbols-outlined text-[20px]"></span> <span id="consult-submit-label">Gửi yêu cầu tư vấn</span> </button> </div> </form> <div class="hidden p-8 sm:p-12 text-center space-y-4" id="consult-success"> <div class="w-16 h-16 mx-auto rounded-full bg-primary-container/10 flex items-center justify-center"> <span class="material-symbols-outlined text-[36px] text-primary-container"></span> </div> <h4 class="font-headline-md text-primary-container font-semibold"> Đã nhận yêu cầu tư vấn </h4> <p class="text-body-md text-on-surface-variant max-w-md mx-auto"> Chuyên viên tư vấn Everon sẽ liên hệ với bạn trong thời gian sớm nhất qua số điện thoại/email đã cung cấp. </p> <button class="mt-3 px-8 h-11 rounded-lg bg-primary-container text-on-primary font-label-lg text-label-lg uppercase tracking-wider hover:bg-primary transition-colors duration-300" data-consult-close type="button" > Hoàn tất </button> </div> </div> </div> <!-- LEAD POPUP MODAL --> <div aria-hidden="true" class="fixed inset-0 z-[75] hidden opacity-0 transition-opacity duration-300 flex items-center justify-center p-4 sm:p-6 overflow-y-auto" id="lead-popup" > <div class="fixed inset-0 bg-black/60 backdrop-blur-sm lead-popup-backdrop"></div> <div class="relative z-10 max-w-md sm:max-w-lg w-full mx-auto my-auto bg-surface-container-lowest rounded-2xl border border-outline-variant/30 shadow-2xl overflow-hidden transition-all duration-300 transform scale-95" > <!-- Close button --> <button aria-label="Đóng popup" class="absolute top-3 right-3 z-20 w-8 h-8 rounded-full bg-black/45 hover:bg-black/75 text-white flex items-center justify-center transition-colors shadow-md cursor-pointer" data-lead-popup-close type="button" > <span class="material-symbols-outlined text-[18px] leading-none"></span> </button> <!-- Banner image --> <div class="relative w-full aspect-[1000/523] bg-surface-container overflow-hidden"> <img src="assets/Banner popup.png" alt="Ưu đãi cưới Everon" class="w-full h-full object-cover" loading="lazy" /> </div> <!-- Body content --> <div class="p-5 sm:p-6"> <div id="lead-popup-content" class="space-y-4"> <div> <span class="font-label-md text-label-md uppercase tracking-widest text-secondary block font-semibold mb-1"> Ưu đãi tân hôn đặc quyền </span> <h3 class="font-headline-sm sm:font-headline-md text-[18px] sm:text-[20px] text-primary-container font-semibold leading-snug"> Nhận tư vấn & Quà tặng ngày cưới </h3> <p class="text-body-sm text-on-surface-variant mt-1 text-[13px] sm:text-[14px] leading-relaxed"> Để lại số điện thoại hoặc email, chuyên gia Everon sẽ liên hệ hỗ trợ bạn chọn bộ chăn ga gối đệm ưng ý nhất. </p> </div> <form id="lead-popup-form" class="space-y-3" novalidate> <div> <div class="relative"> <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-on-surface-variant/60 pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true" > <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /> </svg> <input type="text" id="lead-popup-contact" name="contact" placeholder="Nhập số điện thoại hoặc email của bạn..." class="w-full h-11 sm:h-12 pl-11 pr-4 rounded-xl border border-outline-variant/40 bg-surface-container-lowest text-on-surface placeholder:text-on-surface-variant/50 focus:border-primary-container focus:ring-1 focus:ring-primary-container focus:outline-none transition-colors text-[14px]" autocomplete="on" /> </div> <p id="lead-popup-error" class="text-body-sm text-secondary mt-1.5 text-[12px] sm:text-[13px] hidden"></p> </div> <button id="lead-popup-submit" type="submit" class="w-full h-11 sm:h-12 rounded-xl bg-primary-container hover:bg-secondary text-on-primary font-label-lg font-semibold uppercase tracking-wider text-[13px] sm:text-[14px] transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2 cursor-pointer" > <span id="lead-popup-submit-spinner" class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin hidden"></span> <span id="lead-popup-submit-icon" class="material-symbols-outlined text-[18px]"></span> <span id="lead-popup-submit-label">Gửi thông tin nhận ưu đãi</span> </button> </form> </div> <!-- Success message --> <div id="lead-popup-success" class="hidden text-center py-4 sm:py-6 space-y-2.5"> <span class="material-symbols-outlined text-[44px] text-[#426833] mx-auto block leading-none">  </span> <h4 class="font-headline-sm text-[18px] text-primary-container font-semibold"> Đăng ký thành công! </h4> <p class="text-body-sm text-on-surface-variant text-[13px] sm:text-[14px] leading-relaxed max-w-xs mx-auto"> Cảm ơn bạn đã quan tâm. Chuyên viên Everon sẽ liên hệ với bạn trong thời gian sớm nhất. </p> </div> </div> </div> </div> <!-- FOOTER SECTION --> <footer class="w-full bg-[#133008] text-[#F9F6EF] border-t border-[#346b1f]/40 pt-14 pb-8"> <div class="max-w-[1440px] mx-auto px-margin-mobile md:px-margin-tablet lg:px-margin"> <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12 pb-12 border-b border-[#346b1f]/30"> <!-- Brand & Social Column --> <div class="md:col-span-4 space-y-4"> <a href="#" class="inline-block" data-path="trang-chu"> <img loading="lazy" decoding="async" alt="Everon Logo" class="h-9 w-auto object-contain" src="assets/logo/everon-white.png" /> </a> <h3 class="font-sans text-[18px] font-bold text-white tracking-wide"> CÔNG TY CỔ PHẦN EVERPIA </h3> <p class="font-body-sm text-[#F9F6EF]/80 leading-relaxed"> Thương hiệu chăn ga gối đệm cao cấp chính hãng từ Hàn Quốc, đồng hành cùng hạnh phúc trọn vẹn của hàng triệu tổ ấm Việt. </p> <!-- Social Icons --> <div class="pt-2 flex items-center gap-3"> <a href="https://www.facebook.com/everononlinepage" target="_blank" rel="noopener noreferrer" aria-label="Facebook Everon" class="w-10 h-10 rounded-full bg-[#1e460e] hover:bg-[#2e6817] border border-[#a8d292]/30 flex items-center justify-center text-[#F9F6EF] transition-all duration-300 hover:scale-110 shadow-sm" > <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/> </svg> </a> <a href="https://vt.tiktok.com/ZSbxV4uU1/?page=TikTokShop" target="_blank" rel="noopener noreferrer" aria-label="TikTok Everon" class="w-10 h-10 rounded-full bg-[#1e460e] hover:bg-[#2e6817] border border-[#a8d292]/30 flex items-center justify-center text-[#F9F6EF] transition-all duration-300 hover:scale-110 shadow-sm" > <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"> <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.24 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/> </svg> </a> <a href="https://s.shopee.vn/9fLQDkcZds" target="_blank" rel="noopener noreferrer" aria-label="Shopee Everon" class="w-10 h-10 rounded-full bg-[#1e460e] hover:bg-[#2e6817] border border-[#a8d292]/30 flex items-center justify-center text-[#F9F6EF] transition-all duration-300 hover:scale-110 shadow-sm" > <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"> <path d="M19.5 7.05h-2.58C16.59 4.19 14.51 2 12 2S7.41 4.19 7.08 7.05H4.5c-.83 0-1.5.67-1.5 1.5l1.2 11.4c.08.77.73 1.35 1.5 1.35h12.6c.77 0 1.42-.58 1.5-1.35l1.2-11.4c0-.83-.67-1.5-1.5-1.5zM12 3.8c1.47 0 2.71 1.37 2.93 3.25H9.07C9.29 5.17 10.53 3.8 12 3.8zm0 12.4c-2.31 0-3.65-1.25-3.65-2.61 0-1.89 2.05-2.02 3.27-2.3 1.17-.27 1.74-.53 1.74-1.08 0-.61-.63-.97-1.46-.97-1.04 0-1.63.48-1.74 1.25h-1.64c.12-1.59 1.43-2.5 3.38-2.5 1.94 0 3.3 1.04 3.3 2.47 0 1.63-1.63 1.98-3.09 2.31-1.29.29-1.91.56-1.91 1.11 0 .68.74 1.07 1.66 1.07 1.26 0 1.89-.58 2-1.46h1.66c-.14 1.74-1.55 2.71-3.16 2.71z"/> </svg> </a> <a href="https://www.instagram.com/everonofficial/" target="_blank" rel="noopener noreferrer" aria-label="Instagram Everon" class="w-10 h-10 rounded-full bg-[#1e460e] hover:bg-[#2e6817] border border-[#a8d292]/30 flex items-center justify-center text-[#F9F6EF] transition-all duration-300 hover:scale-110 shadow-sm" > <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </a> </div> </div> <!-- VP Miền Bắc --> <div class="md:col-span-4 space-y-3.5"> <div class="flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-[#c3efac]"></span> <h4 class="font-label-lg text-label-lg font-bold uppercase tracking-wider text-[#c3efac]"> VP Miền Bắc </h4> </div> <div class="space-y-2.5 font-body-sm text-[#F9F6EF]/85"> <p class="flex items-start gap-2.5"> <span class="material-symbols-outlined text-[18px] text-[#c3efac] shrink-0 mt-0.5"></span> <span>Cụm dân cư Nội Thương, Xã Gia Lâm, Thành Phố Hà Nội, Việt Nam</span> </p> <p class="flex items-center gap-2.5"> <span class="material-symbols-outlined text-[18px] text-[#c3efac] shrink-0"></span> <a href="tel:18001215" class="hover:text-white hover:underline transition-colors font-medium"> 1800 1215 ( phím 1 ) </a> </p> <p class="flex items-center gap-2.5"> <span class="material-symbols-outlined text-[18px] text-[#c3efac] shrink-0"></span> <a href="mailto:info@everon.com" class="hover:text-white hover:underline transition-colors font-medium"> info@everon.com </a> </p> </div> </div> <!-- VP Miền Nam --> <div class="md:col-span-4 space-y-3.5"> <div class="flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-[#c3efac]"></span> <h4 class="font-label-lg text-label-lg font-bold uppercase tracking-wider text-[#c3efac]"> VP Miền Nam </h4> </div> <div class="space-y-2.5 font-body-sm text-[#F9F6EF]/85"> <p class="flex items-start gap-2.5"> <span class="material-symbols-outlined text-[18px] text-[#c3efac] shrink-0 mt-0.5"></span> <span>Lô số 16, đường 10,12, khu công nghiệp Giang Điền, Phường Tam phước, Tỉnh Đồng Nai, Việt Nam</span> </p> <p class="flex items-center gap-2.5"> <span class="material-symbols-outlined text-[18px] text-[#c3efac] shrink-0"></span> <a href="tel:02513835009" class="hover:text-white hover:underline transition-colors font-medium"> 0251.3835.009 </a> </p> </div> </div> </div> <!-- Bottom Copyright Bar --> <div class="pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-center sm:text-left text-body-sm text-[#F9F6EF]/60"> <p>© 2026 CÔNG TY CỔ PHẦN EVERPIA. All rights reserved.</p> <div class="flex items-center gap-4 text-[13px]"> <a href="#bedding-collection" class="hover:text-[#F9F6EF] transition-colors">Bộ chăn ga</a> <span>•</span> <a href="#mattress-accessories" class="hover:text-[#F9F6EF] transition-colors">Đệm & Phụ kiện</a> <span>•</span> <a href="#wedding-combos-showcase" class="hover:text-[#F9F6EF] transition-colors">Combo tân hôn</a> </div> </div> </div> </footer> <!-- QUICK-VIEW PRODUCT MODAL --> <div class="fixed inset-0 z-[80] transition-opacity duration-300 flex items-center justify-center p-3 sm:p-5 md:p-8 opacity-0 hidden" id="product-modal" > <div class="modal-backdrop fixed inset-0 bg-on-surface/50 backdrop-blur-sm" ></div> <div class="relative bg-surface-container-lowest rounded-2xl max-w-4xl w-full max-h-[86vh] sm:max-h-[88vh] overflow-y-auto shadow-2xl border border-outline-variant/40 z-10 transition-transform duration-300 my-auto" > <button aria-label="Đóng cửa sổ" class="absolute top-3 right-3 sm:top-4 sm:right-4 z-20 w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface transition-colors shadow-sm" data-modal-close type="button" > <span class="material-symbols-outlined text-[18px] sm:text-[20px]"></span> </button> <div class="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8 p-4 sm:p-6 md:p-8"> <!-- Gallery Switcher / Slideshow --> <div class="md:col-span-6 space-y-2.5 sm:space-y-3"> <div class="aspect-square rounded-xl overflow-hidden bg-surface-container relative group modal-gallery-box select-none" > <img class="w-full h-full object-cover transition-opacity duration-300 pointer-events-none" alt="Everon Product" id="modal-main-img" src="placeholder" /> <!-- Prev / Next Slideshow Buttons --> <button aria-label="Ảnh trước" class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-surface/90 hover:bg-surface text-on-surface flex items-center justify-center backdrop-blur-sm shadow-md transition-all duration-200 opacity-90 sm:opacity-0 group-hover:opacity-100 z-10" data-modal-prev type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> <button aria-label="Ảnh kế tiếp" class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-surface/90 hover:bg-surface text-on-surface flex items-center justify-center backdrop-blur-sm shadow-md transition-all duration-200 opacity-90 sm:opacity-0 group-hover:opacity-100 z-10" data-modal-next type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> <!-- Image Counter Badge --> <div class="absolute bottom-2 right-2 px-2 py-0.5 rounded-full bg-black/60 text-white font-label-md text-[10px] tracking-wider backdrop-blur-sm pointer-events-none shadow-sm" id="modal-img-counter" > 1 / 1 </div> </div> <div class="grid grid-cols-4 gap-1.5 sm:gap-2" id="modal-thumbs"></div> </div> <!-- Product Meta & Choices --> <div class="md:col-span-6 flex flex-col justify-between space-y-3.5 sm:space-y-4"> <div class="space-y-2.5 sm:space-y-3"> <div class="flex items-center gap-1.5 sm:gap-2"> <span class="font-label-md text-[10px] sm:text-label-md uppercase tracking-wider text-secondary font-semibold" id="modal-cat" >Đệm Cưới Cao Cấp</span > </div> <h3 class="font-headline-sm sm:font-headline-md text-[17px] sm:text-[21px] md:text-headline-md text-primary-container leading-tight font-semibold" id="modal-title" > Đệm Lò Xo Túi Master Pocket </h3> <div class="flex flex-wrap items-center gap-2" id="modal-links"></div> <div class="font-price-md sm:font-price-lg text-[16px] sm:text-price-lg text-secondary font-semibold" id="modal-price" > 12.800.000 đ </div> <p class="font-body-sm sm:font-body-md text-[12px] sm:text-body-md text-on-surface-variant leading-relaxed" id="modal-desc" > Hệ thống lò xo túi độc lập nâng đỡ 7 vùng cột sống, chuyển động êm ái cách ly tuyệt đối không làm phiền người bên cạnh. </p> <div class="pt-1.5 sm:pt-2 space-y-2.5 sm:space-y-3"> <div> <span class="font-label-md text-[10.5px] sm:text-label-md uppercase tracking-wider text-on-surface-variant block mb-1" >Chất liệu cao cấp</span > <span class="inline-block px-2.5 sm:px-3 py-1 bg-surface-container rounded font-body-sm text-[11px] sm:text-body-sm text-primary-container font-medium" id="modal-material" >Lò Xo Túi Độc Lập 7 Vùng + Mủ Cao Su</span > </div> <div id="modal-variant"></div> <div id="modal-includes-section" class="hidden"> <span class="font-label-md text-[10.5px] sm:text-label-md uppercase tracking-wider text-on-surface-variant block mb-1" id="modal-includes-title" >Bộ tiêu chuẩn bao gồm:</span > <ul class="space-y-1 text-[11.5px] sm:text-body-sm text-on-surface-variant" id="modal-includes" ></ul> </div> </div> </div> <div class="pt-3.5 sm:pt-4 border-t border-outline-variant/30 flex flex-col sm:flex-row gap-3 mt-auto" > <button class="flex-1 h-14 sm:h-auto sm:py-3 rounded-xl bg-primary-container text-on-primary hover:bg-primary transition-all text-[14px] sm:text-[12px] font-bold leading-[2.5] sm:leading-normal uppercase tracking-wider flex items-center justify-center shadow-md active:scale-[0.99] gap-2" data-modal-add-cart type="button" > <span class="material-symbols-outlined text-[22px]"></span> Thêm vào giỏ hàng </button> <button class="flex-1 h-14 sm:h-auto sm:py-3 rounded-xl border-2 border-primary-container text-primary-container hover:bg-surface-container transition-all text-[14px] sm:text-[12px] font-bold leading-[2.5] sm:leading-normal uppercase tracking-wider flex items-center justify-center active:scale-[0.99] gap-2" data-modal-consult type="button" > <span class="material-symbols-outlined text-[22px]"></span> Tư vấn thêm </button> </div> </div> </div> </div> </div> <!-- COMBO DETAIL MODAL --> <div class="fixed inset-0 z-[80] transition-opacity duration-300 flex items-center justify-center p-4 md:p-8 opacity-0 hidden" id="combo-modal" > <div class="combo-modal-backdrop fixed inset-0 bg-on-surface/50 backdrop-blur-sm" ></div> <div class="relative bg-surface-container-lowest rounded-xl max-w-xl w-full max-h-[86vh] sm:max-h-[88vh] overflow-y-auto shadow-2xl border border-outline-variant/40 z-10 transition-transform duration-300 my-auto" > <button aria-label="Đóng combo" class="absolute top-4 right-4 z-20 w-9 h-9 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface transition-colors" data-modal-close type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> <div class="p-4 md:p-6 space-y-4"> <!-- Header --> <div class="border-b border-outline-variant/30 pb-4"> <span class="font-label-md text-label-md uppercase tracking-[0.2em] text-secondary" >Chi tiết gói tân hôn Everon</span > <h2 class="font-sans text-xl sm:text-2xl md:text-3xl font-bold text-primary-container mt-1" id="combo-modal-title" ></h2> <p class="mt-1 font-body-md text-on-surface-variant max-w-2xl" id="combo-modal-desc" ></p> </div> <!-- Section Trong Combo Co --> <div class="p-4 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-2.5" > <div class="flex items-center justify-between"> <label class="font-label-lg text-label-lg uppercase tracking-wider text-primary-container flex items-center gap-1.5" ><span class="material-symbols-outlined text-[18px] text-secondary" ></span > Kích thước giường / gói tân hôn</label ><span class="text-[12px] text-on-surface-variant/80 font-medium" id="combo-size-hint" ></span> </div> <div class="grid grid-cols-3 gap-2" id="combo-size-selector"></div> </div> <div> <h4 class="font-label-lg text-label-lg uppercase tracking-wider text-primary-container mb-4" > Trong Combo Có: </h4> <div class="space-y-2.5" id="combo-items-container"></div> </div> <!-- Reference Summary --> <div class="p-3.5 sm:p-4 rounded-xl bg-surface-container-low border border-outline-variant/30 space-y-3" > <div id="combo-modal-total"></div> <div class="pt-2 border-t border-outline-variant/20 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3"> <p class="font-body-sm text-[12px] text-on-surface-variant/80 flex items-center gap-1.5"> <span class="material-symbols-outlined text-[16px] text-secondary shrink-0"></span> <span>Đã bao gồm phí dịch vụ vận chuyển.</span> </p> <div class="grid grid-cols-2 sm:flex sm:items-center gap-2.5 shrink-0"> <button class="px-4 py-2.5 rounded border border-primary-container text-primary-container hover:bg-surface-container font-label-md text-[12px] uppercase tracking-wider transition-colors text-center whitespace-nowrap" data-analytics-intent="buy_now" type="button" > Đặt hàng </button> <button class="px-5 py-2.5 rounded bg-primary-container text-on-primary hover:bg-primary font-label-md text-[12px] uppercase tracking-wider transition-colors shadow-sm text-center whitespace-nowrap" data-analytics-intent="consult" type="button" > Tư vấn </button> </div> </div> </div> </div> </div> </div> <!-- CART DRAWER --> <div class="fixed inset-0 z-[75] transition-opacity duration-300 opacity-0 hidden" id="cart-drawer" > <div class="cart-backdrop absolute inset-0 bg-on-surface/50 backdrop-blur-sm" ></div> <aside class="absolute right-0 top-0 h-full w-full max-w-md bg-surface-container-lowest shadow-2xl border-l border-outline-variant/40 flex flex-col" > <div class="flex items-center justify-between px-5 py-4 border-b border-outline-variant/20" > <h3 class="font-headline-md text-headline-md text-primary-container leading-tight" > Giỏ hàng </h3> <button aria-label="Đóng giỏ hàng" class="w-9 h-9 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface transition-colors" data-cart-close type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> </div> <div class="flex-1 overflow-y-auto px-5 py-4 space-y-4" id="cart-items"> <p class="font-body-md text-on-surface-variant text-center py-10"> Giỏ hàng đang trống. </p> </div> <!-- GIFT SECTION --> <div id="cart-gifts" class="hidden border-t border-outline-variant/20 px-5 py-3.5 bg-secondary-container/10"></div> <div class="border-t border-outline-variant/20 px-5 py-4 space-y-3" id="cart-footer" > <div class="flex items-center justify-between"> <span class="font-label-lg text-label-lg uppercase tracking-wider text-on-surface-variant" >Tổng cộng</span > <span class="font-price-lg text-price-lg text-primary-container font-semibold" id="cart-total" >0 đ</span > </div> <button class="w-full h-12 rounded bg-primary-container text-on-primary hover:bg-primary transition-colors font-label-lg text-label-lg uppercase tracking-wider" data-cart-checkout type="button" > Đặt hàng </button> <button class="w-full h-12 rounded border border-outline-variant/40 text-on-surface-variant hover:bg-surface-container transition-colors font-label-md text-label-md uppercase tracking-wider" data-cart-clear type="button" > Xóa toàn bộ </button> </div> </aside> </div> <!-- ORDER MODAL --> <div aria-hidden="true" class="fixed inset-0 z-[85] hidden opacity-0 transition-opacity duration-300 flex items-center justify-center p-4 sm:p-6 overflow-y-auto" id="order-modal" > <div class="fixed inset-0 bg-black/50 backdrop-blur-sm order-modal-backdrop"></div> <div class="relative z-10 max-w-lg md:max-w-2xl w-full mx-auto my-auto bg-surface-container-lowest rounded-2xl border border-outline-variant/30 shadow-2xl overflow-hidden transition-all duration-300" > <div class="flex items-start justify-between gap-4 px-6 sm:px-8 py-5 border-b border-outline-variant/20 bg-surface-container-low" > <div> <span class="font-label-md text-label-md uppercase tracking-widest text-secondary block mb-1"> Xác nhận đặt hàng </span> <h3 class="font-headline-sm sm:font-headline-md text-[20px] sm:text-[22px] text-primary-container font-semibold" > Thông tin liên hệ </h3> <p class="text-body-sm text-on-surface-variant mt-0.5"> Nhân viên Everon sẽ gọi xác nhận đơn hàng và hướng dẫn thanh toán. </p> </div> <button aria-label="Đóng" class="w-9 h-9 rounded-full bg-surface-container hover:bg-surface-container-high flex items-center justify-center text-on-surface transition-colors" data-modal-close type="button" > <span class="material-symbols-outlined text-[20px]"></span> </button> </div> <form class="p-6 sm:p-8 space-y-4" id="order-form" novalidate=""> <div class="bg-surface-container rounded-xl px-4 py-3 space-y-1.5 max-h-40 overflow-y-auto" id="order-summary" ></div> <div class="flex items-center justify-between"> <span class="font-label-md text-label-md uppercase tracking-wider text-on-surface-variant" >Tổng cộng</span > <span class="font-price-lg text-price-lg text-primary-container font-semibold" id="order-total" >0 đ</span > </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="order-name" >Họ và tên <span class="text-secondary">*</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="order-name" name="name" placeholder="VD: Nguyễn Văn A" type="text" /> <p class="text-body-sm text-secondary mt-1 hidden" data-order-error="name"></p> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="order-phone" >Số điện thoại <span class="text-secondary">*</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="order-phone" name="phone" placeholder="VD: 0901 234 567" type="tel" /> <p class="text-body-sm text-secondary mt-1 hidden" data-order-error="phone"></p> </div> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="order-email" >Email <span class="text-on-surface-variant/60 font-normal lowercase">(nhận xác nhận qua email)</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="order-email" name="email" placeholder="VD: ban@email.com" type="email" /> <p class="text-body-sm text-secondary mt-1 hidden" data-order-error="email"></p> </div> <div> <label class="block font-label-md text-label-md uppercase tracking-wider text-on-surface-variant mb-1.5" for="order-note" >Ghi chú <span class="text-on-surface-variant/60 font-normal lowercase">(tùy chọn)</span></label > <input class="w-full h-12 px-4 rounded-lg border border-outline-variant/40 bg-surface-container-lowest text-on-surface focus:border-primary-container focus:outline-none transition-colors" id="order-note" name="note" placeholder="VD: địa chỉ giao hàng, yêu cầu riêng..." type="text" /> </div> <div class="pt-2"> <button class="w-full h-12 rounded-lg bg-primary-container text-on-primary font-label-lg text-label-lg uppercase tracking-wider transition-all duration-300 hover:bg-primary shadow-md flex items-center justify-center gap-2" id="order-submit" type="submit" > <span class="material-symbols-outlined text-[20px]"></span> <span id="order-submit-label">Gửi đơn hàng</span> </button> </div> </form> <div class="hidden p-8 sm:p-12 text-center space-y-4" id="order-success"> <div class="w-16 h-16 mx-auto rounded-full bg-primary-container/10 flex items-center justify-center"> <span class="material-symbols-outlined text-[36px] text-primary-container"></span> </div> <h4 class="font-headline-md text-primary-container font-semibold"> Đã nhận đơn hàng </h4> <p class="text-body-md text-on-surface-variant max-w-md mx-auto"> Cảm ơn bạn đã đặt hàng tại Everon. Nhân viên sẽ liên hệ xác nhận đơn hàng trong thời gian sớm nhất. </p> <button class="mt-3 px-8 h-11 rounded-lg bg-primary-container text-on-primary font-label-lg text-label-lg uppercase tracking-wider hover:bg-primary transition-colors duration-300" data-order-close type="button" > Hoàn tất </button> </div> </div> </div> <!-- ADD-TO-CART TOAST --> <div class="fixed bottom-5 inset-x-0 z-[80] flex justify-center px-4 transition-all duration-300 translate-y-4 opacity-0 pointer-events-none" id="cart-toast" > <div class="bg-primary-container text-on-primary rounded-lg shadow-xl px-4 py-3 flex items-center gap-3 max-w-sm w-full pointer-events-auto" > <span class="material-symbols-outlined text-[22px] shrink-0" ></span ><span class="font-body-md font-medium flex-1" id="cart-toast-msg" >Đã thêm vào giỏ hàng</span > <button class="shrink-0 font-label-md text-label-md uppercase tracking-wider text-on-primary underline underline-offset-2" data-cart-open type="button" > Mở giỏ </button> </div> </div> <!-- PAGE LOADING OVERLAY --> <div aria-hidden="true" class="fixed inset-0 z-[90] hidden opacity-0 transition-opacity duration-300 flex items-center justify-center bg-surface-container-lowest/95 backdrop-blur-sm" id="page-loader" > <div class="flex flex-col items-center gap-3"> <div class="w-10 h-10 rounded-full border-[3px] border-primary-container/20 border-t-primary-container animate-spin" ></div> <span class="font-body-md text-on-surface-variant" id="page-loader-msg" >Đang tải dữ liệu...</span > </div> </div> <!-- FLOATING SOCIALS BUTTON (Nút mạng xã hội xổ 4 kênh) --> <div id="floating-socials" class="fixed right-[20px] bottom-[90px] z-[75] flex flex-col items-center select-none font-sans" aria-label="Kênh mạng xã hội Everon" > <!-- Danh sách 4 icon mạng xã hội (xổ lên trên) --> <div id="floating-socials-menu" class="flex flex-col items-center gap-3 mb-3 transition-all duration-300 origin-bottom pointer-events-none opacity-0 translate-y-3 invisible" role="menu" aria-hidden="true" > <!-- Instagram --> <a href="https://www.instagram.com/everonofficial/" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Instagram Everon" class="group relative flex items-center justify-center focus:outline-none" > <span class="hidden sm:inline-block absolute right-full mr-2.5 px-2.5 py-1 text-xs font-medium text-white bg-slate-900/85 backdrop-blur-sm rounded-md shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap" > Instagram </span> <div class="w-[48px] h-[48px] bg-white shadow-lg shadow-black/15 flex items-center justify-center p-2.5 border border-slate-100 ring-2 ring-transparent group-hover:ring-[#E1306C]/30 text-[#E1306C]" style="border-radius: 9999px;" > <svg class="w-full h-full fill-current pointer-events-none" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </div> </a> <!-- Shopee --> <a href="https://s.shopee.vn/9fLQDkcZds" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Ghé thăm Shopee Mall" class="group relative flex items-center justify-center focus:outline-none" > <span class="hidden sm:inline-block absolute right-full mr-2.5 px-2.5 py-1 text-xs font-medium text-white bg-slate-900/85 backdrop-blur-sm rounded-md shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap" > Shopee </span> <div class="w-[48px] h-[48px] bg-white shadow-lg shadow-black/15 flex items-center justify-center p-2 border border-slate-100 ring-2 ring-transparent group-hover:ring-[#EE4D2D]/30" style="border-radius: 9999px;" > <img src="assets/shopee-icon.webp" alt="Shopee" class="w-full h-full object-contain pointer-events-none" loading="lazy" width="40" height="40" /> </div> </a> <!-- TikTok --> <a href="https://vt.tiktok.com/ZSbxV4uU1/?page=TikTokShop" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Kênh TikTok Everon" class="group relative flex items-center justify-center focus:outline-none" > <span class="hidden sm:inline-block absolute right-full mr-2.5 px-2.5 py-1 text-xs font-medium text-white bg-slate-900/85 backdrop-blur-sm rounded-md shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap" > TikTok </span> <div class="w-[48px] h-[48px] bg-white shadow-lg shadow-black/15 flex items-center justify-center p-2 border border-slate-100 ring-2 ring-transparent group-hover:ring-black/20" style="border-radius: 9999px;" > <img src="assets/tiktok.png" alt="TikTok" class="w-full h-full object-contain pointer-events-none" loading="lazy" width="40" height="40" /> </div> </a> <!-- Facebook --> <a href="https://www.facebook.com/everononlinepage" target="_blank" rel="noopener noreferrer" role="menuitem" aria-label="Fanpage Facebook Everon" class="group relative flex items-center justify-center focus:outline-none" > <span class="hidden sm:inline-block absolute right-full mr-2.5 px-2.5 py-1 text-xs font-medium text-white bg-slate-900/85 backdrop-blur-sm rounded-md shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap" > Facebook </span> <div class="w-[48px] h-[48px] bg-white shadow-lg shadow-black/15 flex items-center justify-center p-2 border border-slate-100 ring-2 ring-transparent group-hover:ring-[#1877F2]/30" style="border-radius: 9999px;" > <img src="assets/2023_Facebook_icon.svg.webp" alt="Facebook" class="w-full h-full object-contain pointer-events-none" loading="lazy" width="40" height="40" /> </div> </a> </div> <!-- Nút tròn kích hoạt chính: hình tròn 100%, màu xanh lá đậm Everon (#173a0a), icon trắng, thẳng hàng với ô chat --> <button id="floating-socials-toggle" type="button" aria-expanded="false" aria-haspopup="true" aria-label="Mở kết nối mạng xã hội" class="relative w-[54px] h-[54px] text-white shadow-lg flex items-center justify-center focus:outline-none transition-colors duration-200 cursor-pointer" style="border-radius: 9999px; background-color: #173a0a;" onmouseover="this.style.backgroundColor='#2b4f1d'" onmouseout="this.style.backgroundColor='#173a0a'" > <!-- Mũi tên ^ (chevron up) --> <span id="floating-socials-icon-open" class="text-white text-[24px] font-bold leading-none select-none flex items-center justify-center" style="transform: translateY(-1px);" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" > <polyline points="18 15 12 9 6 15"></polyline> </svg> </span> <!-- Nút x (close) --> <span id="floating-socials-icon-close" class="text-white text-[24px] font-bold leading-none select-none absolute inset-auto hidden flex items-center justify-center" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" > <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </span> </button> </div> <div id="mini-music-player" class="fixed bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 z-40 inline-flex items-center gap-1.5 bg-white/45 backdrop-blur-xl backdrop-saturate-150 border border-white/70 rounded-full shadow-[0_8px_32px_0_rgba(0,0,0,0.12),inset_0_1px_1px_rgba(255,255,255,0.85)] py-1.5 pl-1.5 pr-2 transition-all opacity-0 pointer-events-none select-none" style="min-width: fit-content; max-width: 80%;" > <!-- Đĩa DVD bên trái --> <div class="relative w-10 h-10 shrink-0"> <img src="assets/dvd.png" alt="Music Disc" id="music-dvd-img" class="w-full h-full object-cover rounded-full music-spin paused drop-shadow-sm select-none" /> </div> <!-- Nút điều khiển không khung viền bên phải (vùng bấm tối ưu ~44px chuẩn mobile) --> <button id="music-btn-toggle" class="shrink-0 flex items-center justify-center text-primary-container hover:text-primary active:text-primary transition-all duration-200 active:scale-90 focus:outline-none p-2.5 drop-shadow-sm" aria-label="Toggle Music" > <svg id="music-icon-play" class="w-6 h-6 fill-current" viewBox="0 0 24 24"> <path d="M8 5v14l11-7z" /> </svg> <svg id="music-icon-pause" class="w-6 h-6 fill-current hidden" viewBox="0 0 24 24"> <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /> </svg> </button> <audio id="background-music" src="assets/music/Ngay_dau_tien.mp3" preload="none" loop></audio> </div> <!-- PANCAKE LIVE CHAT PLUGIN --> <script src="https://chat-plugin.pancake.vn/main/auto?page_id=web_everononline" async defer></script> </body> </html>