{"id":18,"date":"2022-06-07T07:35:21","date_gmt":"2022-06-07T07:35:21","guid":{"rendered":"https:\/\/nicktesting.kinsta.cloud\/shopdiko1\/?page_id=18"},"modified":"2026-02-13T18:21:25","modified_gmt":"2026-02-13T18:21:25","slug":"home","status":"publish","type":"page","link":"https:\/\/slabsport.com.vn\/vi\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18\" class=\"elementor elementor-18\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa53511 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"fa53511\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47f66a8 elementor-widget elementor-widget-heading\" data-id=\"47f66a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Shop Now<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39e50f8 elementor-widget elementor-widget-heading\" data-id=\"39e50f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/\" target=\"_blank\" rel=\"noopener\">NEW ARRIVALS<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30369de e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"30369de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5cf002 elementor-widget elementor-widget-heading\" data-id=\"c5cf002\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">New Arrivals<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f41edf7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f41edf7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5a1dc6 elementor-widget elementor-widget-shortcode\" data-id=\"b5a1dc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <section class=\"dalya-rail dalya-rail--simple\" data-dalya-rail>\n      <div class=\"dalya-rail__viewport\" data-dalya-rail-viewport>\n        <ul class=\"products dalya-rail__list\" data-dalya-rail-list>\n                  <\/ul>\n      <\/div>\n\n      <!-- Keep nav + progress (like on.com) -->\n      <div class=\"dalya-rail__controls\" aria-label=\"Slider controls\">\n        <button type=\"button\" class=\"dalya-rail__btn dalya-rail__btn--prev\" aria-label=\"Previous\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 5 L8 12 L15 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/button>\n        <button type=\"button\" class=\"dalya-rail__btn dalya-rail__btn--next\" aria-label=\"Next\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/button>\n        <div class=\"dalya-rail__progress\" aria-hidden=\"true\">\n          <span class=\"dalya-rail__track\"><\/span>\n          <span class=\"dalya-rail__thumb\" data-dalya-rail-thumb><\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f60e522 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f60e522\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d1b4f2 elementor-widget elementor-widget-html\" data-id=\"7d1b4f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"dalya-xrail\" aria-label=\"Featured models\">\r\n  <div class=\"dalya-xrail__wrap\">\r\n\r\n    <div class=\"dalya-xrail__viewport\" id=\"dalyaXViewport\">\r\n      <div class=\"dalya-xrail__track\" id=\"dalyaXTrack\">\r\n\r\n        <!-- 1 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUD\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/2529148\/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUD\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloud\" aria-label=\"Open CLOUD category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUD<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 2 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUDTILT\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/1456706\/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUDTILT\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloudtilt\" aria-label=\"Open CLOUDTILT category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUDTILT<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 3 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUDNOVA\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/19090\/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUDNOVA\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloudnova\" aria-label=\"Open CLOUDNOVA category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUDNOVA<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 4 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUDMONSTER\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/1334597\/pexels-photo-1334597.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUDMONSTER\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloudmonster\" aria-label=\"Open CLOUDMONSTER category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUDMONSTER<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 5 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"THE ROGER\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/1240892\/pexels-photo-1240892.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"THE ROGER\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/the-roger\" aria-label=\"Open THE ROGER category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">THE ROGER<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 6 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUDSURFER\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/13098763\/pexels-photo-13098763.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUDSURFER\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloudsurfer\" aria-label=\"Open CLOUDSURFER category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUDSURFER<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 7 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUD X\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/1456706\/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUD X\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloud-x\" aria-label=\"Open CLOUD X category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUD X<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 8 -->\r\n        <article class=\"dalya-xcard\" aria-label=\"CLOUDZONE\">\r\n          <div class=\"dalya-xcard__img\">\r\n            <img draggable=\"false\" loading=\"lazy\" decoding=\"async\"\r\n                 src=\"https:\/\/images.pexels.com\/photos\/2529148\/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=1600\"\r\n                 alt=\"CLOUDZONE\">\r\n          <\/div>\r\n          <div class=\"dalya-xcard__label\">\r\n            <a class=\"dalya-xcard__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/cloudzone\" aria-label=\"Open CLOUDZONE category\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-xcard__title\">CLOUDZONE<\/span>\r\n              <span class=\"dalya-xcard__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2705 controls + rail (icon nh\u1ecf nh\u01b0 ref) -->\r\n    <div class=\"dalya-xrail__controls\" aria-label=\"Slider controls\">\r\n      <button type=\"button\" class=\"dalya-xrail__btn dalya-xrail__btn--prev\" aria-label=\"Previous\" disabled>\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M15 5 L8 12 L15 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <button type=\"button\" class=\"dalya-xrail__btn dalya-xrail__btn--next\" aria-label=\"Next\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <div class=\"dalya-xrail__progress\" aria-hidden=\"true\">\r\n        <span class=\"dalya-xrail__progresstrack\"><\/span>\r\n        <span class=\"dalya-xrail__thumb\" data-xrail-thumb style=\"width:24px; transform:translateX(0px);\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .dalya-xrail{\r\n    padding: 8px 0 26px;\r\n    font-family: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n  }\r\n  .dalya-xrail__wrap{ max-width: 1920px; margin:0 auto; padding:0 24px; }\r\n  .dalya-xrail, .dalya-xrail *{ box-sizing:border-box; }\r\n\r\n  .dalya-xrail__viewport{\r\n    overflow:hidden;\r\n    position:relative;\r\n    user-select:none;\r\n    -webkit-user-select:none;\r\n    touch-action: pan-y;\r\n    cursor: grab;\r\n  }\r\n  .dalya-xrail__viewport.is-dragging{ cursor: grabbing; }\r\n\r\n  .dalya-xrail__track{\r\n    display:flex;\r\n    gap:14px;\r\n    will-change: transform;\r\n    transform: translate3d(0,0,0);\r\n    padding: 10px 0 0;\r\n  }\r\n\r\n  .dalya-xcard{\r\n    flex:0 0 auto;\r\n    width:min(360px, 84vw);\r\n    aspect-ratio:3\/4;\r\n    border-radius:4px;\r\n    overflow:hidden;\r\n    position:relative;\r\n    background:#efefef;\r\n  }\r\n  @media(min-width:1024px){ .dalya-xcard{ width:360px; } }\r\n\r\n  .dalya-xcard__img{\r\n    position:absolute; inset:0;\r\n    background: radial-gradient(circle at 50% 28%, #f7f7f7 0%, #eaeaea 55%, #cfcfcf 100%);\r\n  }\r\n  .dalya-xcard__img img{\r\n    width:100%; height:100%;\r\n    object-fit:contain;\r\n    display:block;\r\n    padding:28px 26px 64px;\r\n    pointer-events:none;\r\n    -webkit-user-drag:none;\r\n  }\r\n\r\n  .dalya-xcard__label{\r\n    position:absolute; left:0; right:0; bottom:0;\r\n    padding:18px;\r\n    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));\r\n  }\r\n  .dalya-xcard__link{\r\n    display:flex;\r\n    align-items:flex-end;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    text-decoration:none !important;\r\n    color:#fff !important;\r\n    outline:none !important;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n  .dalya-xcard__title{\r\n    font-weight:600;\r\n    font-size:22px;\r\n    letter-spacing:.02em;\r\n    text-transform:uppercase;\r\n    line-height:1;\r\n    color:#fff !important;\r\n    text-decoration:none !important;\r\n  }\r\n  .dalya-xcard__arrow{\r\n    width:34px; height:34px;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    opacity:0;\r\n    transform:translateX(-10px);\r\n    transition: transform .18s ease, opacity .18s ease;\r\n  }\r\n  .dalya-xcard__arrow svg{\r\n    width:22px; height:22px;\r\n    stroke:#fff;\r\n    stroke-width:1.9;\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n  }\r\n  @media(hover:hover){\r\n    .dalya-xcard__link:hover .dalya-xcard__arrow{ opacity:1; transform:translateX(0); }\r\n  }\r\n  @media(hover:none){ .dalya-xcard__arrow{ opacity:1; transform:none; } }\r\n\r\n  \/* controls y nh\u01b0 ref *\/\r\n  .dalya-xrail__controls{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-top:18px;\r\n  }\r\n  .dalya-xrail__btn{\r\n    width:34px; height:34px;           \/* \u2705 nh\u1ecf g\u1ecdn gi\u1ed1ng ref *\/\r\n    border:0;\r\n    background:transparent !important;\r\n    padding:0;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    cursor:pointer;\r\n    color:#111;\r\n    opacity:.55;\r\n    transition: opacity .15s ease, transform .15s ease;\r\n  }\r\n  .dalya-xrail__btn svg{ width:22px; height:22px; }\r\n  .dalya-xrail__btn:hover{ opacity:.9; transform:translateY(-1px); }\r\n  .dalya-xrail__btn:disabled{ opacity:.22; cursor:default; transform:none; }\r\n\r\n  .dalya-xrail__progress{\r\n    position:relative;\r\n    height:2px;\r\n    width:360px;\r\n    max-width:52vw;\r\n    cursor:pointer;\r\n  }\r\n  .dalya-xrail__progresstrack{\r\n    position:absolute; inset:0;\r\n    background:rgba(0,0,0,.18);\r\n    border-radius:999px;\r\n  }\r\n  .dalya-xrail__thumb{\r\n    position:absolute; top:50%; left:0;\r\n    height:2px; width:24px;\r\n    background:#111;\r\n    border-radius:999px;\r\n    transform:translateX(0px);\r\n    will-change:transform;\r\n  }\r\n\r\n  @media(max-width:768px){\r\n    .dalya-xrail__wrap{ padding:0 16px; }\r\n    .dalya-xcard__title{ font-size:20px; }\r\n    .dalya-xrail__progress{ width:280px; max-width:58vw; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const viewport = document.getElementById('dalyaXViewport');\r\n  const track = document.getElementById('dalyaXTrack');\r\n  const root = viewport?.closest('.dalya-xrail');\r\n  if(!viewport || !track || !root) return;\r\n\r\n  const btnPrev = root.querySelector('.dalya-xrail__btn--prev');\r\n  const btnNext = root.querySelector('.dalya-xrail__btn--next');\r\n  const progress = root.querySelector('.dalya-xrail__progress');\r\n  const thumb = root.querySelector('[data-xrail-thumb]');\r\n  const THUMB_W = 24;\r\n\r\n  let x = 0;\r\n  let down = false;\r\n  let startClientX = 0;\r\n  let startX = 0;\r\n  let movedAbs = 0;\r\n  let raf = 0;\r\n  let pendingX = 0;\r\n\r\n  function clamp(n,a,b){ return Math.max(a, Math.min(b,n)); }\r\n  function sizes(){\r\n    const vw = viewport.clientWidth;\r\n    const tw = track.scrollWidth;\r\n    const maxNeg = Math.min(0, vw - tw);\r\n    return { vw, tw, maxNeg };\r\n  }\r\n  function stepSize(){\r\n    const first = track.querySelector('.dalya-xcard');\r\n    if(!first) return 320;\r\n    const st = getComputedStyle(track);\r\n    const gap = parseFloat(st.gap || st.columnGap || 0) || 0;\r\n    return first.getBoundingClientRect().width + gap;\r\n  }\r\n\r\n  function requestSetX(nx){\r\n    const { maxNeg } = sizes();\r\n    pendingX = clamp(nx, maxNeg, 0);\r\n    if(raf) return;\r\n    raf = requestAnimationFrame(() => {\r\n      raf = 0;\r\n      x = pendingX;\r\n      track.style.transform = `translate3d(${x}px,0,0)`;\r\n      updateUI();\r\n    });\r\n  }\r\n\r\n  function updateUI(){\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n    const p = maxMove ? (-x \/ maxMove) : 0;\r\n\r\n    const railW = progress.clientWidth;\r\n    const travel = Math.max(0, railW - THUMB_W);\r\n    thumb.style.width = THUMB_W + 'px';\r\n    thumb.style.transform = `translateX(${travel * p}px)`;\r\n\r\n    btnPrev.disabled = x >= -1;\r\n    btnNext.disabled = x <= (maxNeg + 1);\r\n  }\r\n\r\n  function currentIndex(){\r\n    const s = stepSize();\r\n    return s ? Math.round((-x) \/ s) : 0;\r\n  }\r\n\r\n  function snapToIndex(idx){\r\n    const s = stepSize();\r\n    const { maxNeg } = sizes();\r\n    const target = clamp(-(idx * s), maxNeg, 0);\r\n\r\n    const start = x;\r\n    const dist = target - start;\r\n    const dur = 200;\r\n    const t0 = performance.now();\r\n    const easeOut = t => 1 - Math.pow(1 - t, 3);\r\n\r\n    function anim(now){\r\n      const tt = clamp((now - t0) \/ dur, 0, 1);\r\n      const v = start + dist * easeOut(tt);\r\n      track.style.transform = `translate3d(${v}px,0,0)`;\r\n      const saved = x; x = v; updateUI(); x = saved;\r\n\r\n      if(tt < 1) requestAnimationFrame(anim);\r\n      else { x = target; track.style.transform = `translate3d(${x}px,0,0)`; updateUI(); }\r\n    }\r\n    requestAnimationFrame(anim);\r\n  }\r\n\r\n  function snapNearest(){ snapToIndex(currentIndex()); }\r\n  function moveOne(dir){\r\n    const idx = Math.max(0, currentIndex() + dir);\r\n    snapToIndex(idx);\r\n  }\r\n\r\n  \/\/ \u2705 arrow buttons slide 1 card\r\n  btnPrev.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(-1); });\r\n  btnNext.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(+1); });\r\n\r\n  \/\/ Rail click -> go near then snap\r\n  progress.addEventListener('pointerdown', (e) => {\r\n    const rect = progress.getBoundingClientRect();\r\n    const travel = Math.max(0, rect.width - THUMB_W);\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n\r\n    const px = clamp(e.clientX - rect.left - (THUMB_W\/2), 0, travel);\r\n    const p = travel ? (px \/ travel) : 0;\r\n    requestSetX(clamp(-(p * maxMove), maxNeg, 0));\r\n    setTimeout(snapNearest, 0);\r\n  });\r\n\r\n  \/\/ prevent image drag\r\n  root.addEventListener('dragstart', (e) => e.preventDefault());\r\n\r\n  \/\/ Drag anywhere EXCEPT title link \/ controls\r\n  viewport.addEventListener('pointerdown', (e) => {\r\n    if(e.target.closest('.dalya-xcard__link')) return;\r\n    if(e.target.closest('.dalya-xrail__controls')) return;\r\n\r\n    down = true;\r\n    movedAbs = 0;\r\n    startClientX = e.clientX;\r\n    startX = x;\r\n\r\n    viewport.classList.add('is-dragging');\r\n    viewport.setPointerCapture?.(e.pointerId);\r\n\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointermove', (e) => {\r\n    if(!down) return;\r\n\r\n    const dx = e.clientX - startClientX;\r\n    movedAbs = Math.max(movedAbs, Math.abs(dx));\r\n\r\n    requestSetX(startX + dx);\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointerup', () => {\r\n    if(!down) return;\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n\r\n    const dx = x - startX;\r\n    const threshold = Math.min(120, stepSize() * 0.28);\r\n\r\n    if(movedAbs >= threshold){\r\n      moveOne(dx < 0 ? +1 : -1);\r\n    }else{\r\n      snapNearest();\r\n    }\r\n  });\r\n\r\n  viewport.addEventListener('pointercancel', () => {\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n    snapNearest();\r\n  });\r\n\r\n  \/\/ \u2705 block click anywhere except title link + controls buttons\r\n  root.addEventListener('click', (e) => {\r\n    if(e.target.closest('.dalya-xcard__link')) return;\r\n    if(e.target.closest('.dalya-xrail__btn')) return;\r\n    if(e.target.closest('.dalya-xrail__progress')) return;\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n  }, true);\r\n\r\n  \/\/ Wheel: slide then snap\r\n  let wheelTimer = 0;\r\n  viewport.addEventListener('wheel', (e) => {\r\n    const delta = (Math.abs(e.deltaY) > Math.abs(e.deltaX)) ? e.deltaY : e.deltaX;\r\n    requestSetX(x - delta);\r\n    clearTimeout(wheelTimer);\r\n    wheelTimer = setTimeout(snapNearest, 80);\r\n  }, { passive:true });\r\n\r\n  window.addEventListener('resize', () => {\r\n    const { maxNeg } = sizes();\r\n    x = clamp(x, maxNeg, 0);\r\n    track.style.transform = `translate3d(${x}px,0,0)`;\r\n    updateUI();\r\n  }, { passive:true });\r\n\r\n  updateUI();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a761624 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"a761624\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28c6efa elementor-widget elementor-widget-heading\" data-id=\"28c6efa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Shop by brands<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d0c6ebe e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"d0c6ebe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e6316c elementor-widget elementor-widget-html\" data-id=\"6e6316c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n  ON-STYLE BRAND CARDS (3:4) \u2014 5 brands\r\n  \u2705 Desktop: show 3 cards, Tablet: 2, Mobile: 1 (slide to see more)\r\n  \u2705 Drag anywhere to slide (grab\/grabbing) + release moves ONLY 1 card\r\n  \u2705 ONLY click title opens link\r\n  \u2705 Small rail (thumb 24px) + prev\/next buttons slide 1 card\r\n  \u2705 Brand list: ON RUNNING \/ NIKE \/ SKECHERS \/ ASICS \/ ADIDAS\r\n  \u2705 Link format: https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/{slug}\r\n========================================================= -->\r\n\r\n<section class=\"dalya-brandrail34\" aria-label=\"Brand rail\">\r\n  <div class=\"dalya-brandrail34__wrap\">\r\n\r\n    <div class=\"dalya-brandrail34__viewport\" id=\"dalyaBrandViewport\">\r\n      <div class=\"dalya-brandrail34__track\" id=\"dalyaBrandTrack\">\r\n\r\n        <!-- 1) ON RUNNING -->\r\n        <article class=\"dalya-brand34\" aria-label=\"ON RUNNING\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/2529148\/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-brand34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__label\">\r\n            <a class=\"dalya-brand34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/on-running\" aria-label=\"Open ON RUNNING\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-brand34__title\">ON RUNNING<\/span>\r\n              <span class=\"dalya-brand34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 2) NIKE -->\r\n        <article class=\"dalya-brand34\" aria-label=\"NIKE\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/1456706\/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-brand34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__label\">\r\n            <a class=\"dalya-brand34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/nike\" aria-label=\"Open NIKE\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-brand34__title\">NIKE<\/span>\r\n              <span class=\"dalya-brand34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 3) SKECHERS -->\r\n        <article class=\"dalya-brand34\" aria-label=\"SKECHERS\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/3802510\/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-brand34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__label\">\r\n            <a class=\"dalya-brand34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/skechers\" aria-label=\"Open SKECHERS\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-brand34__title\">SKECHERS<\/span>\r\n              <span class=\"dalya-brand34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 4) ASICS -->\r\n        <article class=\"dalya-brand34\" aria-label=\"ASICS\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/7149157\/pexels-photo-7149157.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-brand34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__label\">\r\n            <a class=\"dalya-brand34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/asics\" aria-label=\"Open ASICS\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-brand34__title\">ASICS<\/span>\r\n              <span class=\"dalya-brand34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 5) ADIDAS -->\r\n        <article class=\"dalya-brand34\" aria-label=\"ADIDAS\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/2041759\/pexels-photo-2041759.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-brand34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-brand34__label\">\r\n            <a class=\"dalya-brand34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/adidas\" aria-label=\"Open ADIDAS\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-brand34__title\">ADIDAS<\/span>\r\n              <span class=\"dalya-brand34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"dalya-brandrail34__controls\" aria-label=\"Slider controls\">\r\n      <button type=\"button\" class=\"dalya-brandrail34__btn dalya-brandrail34__btn--prev\" aria-label=\"Previous\" disabled>\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M15 5 L8 12 L15 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <button type=\"button\" class=\"dalya-brandrail34__btn dalya-brandrail34__btn--next\" aria-label=\"Next\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <div class=\"dalya-brandrail34__progress\" aria-hidden=\"true\">\r\n        <span class=\"dalya-brandrail34__progresstrack\"><\/span>\r\n        <span class=\"dalya-brandrail34__thumb\" data-brand-thumb style=\"width:24px; transform:translateX(0px);\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .dalya-brandrail34{\r\n    padding: 8px 0 22px;\r\n    font-family: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n  }\r\n  .dalya-brandrail34__wrap{ max-width: 1920px; margin:0 auto; padding:0 24px; }\r\n  .dalya-brandrail34, .dalya-brandrail34 *{ box-sizing:border-box; }\r\n\r\n  .dalya-brandrail34__viewport{\r\n    overflow:hidden;\r\n    position:relative;\r\n    user-select:none;\r\n    -webkit-user-select:none;\r\n    touch-action: pan-y;\r\n    cursor: grab;\r\n  }\r\n  .dalya-brandrail34__viewport.is-dragging{ cursor: grabbing; }\r\n\r\n  .dalya-brandrail34__track{\r\n    display:flex;\r\n    gap:14px;\r\n    will-change: transform;\r\n    transform: translate3d(0,0,0);\r\n    padding: 10px 0 0;\r\n  }\r\n\r\n  \/* 3 desktop \/ 2 tablet \/ 1 mobile *\/\r\n  .dalya-brand34{\r\n    flex:0 0 auto;\r\n    width: calc((100% - 28px) \/ 3);\r\n    aspect-ratio: 3 \/ 4;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background: #e9e9e9;\r\n  }\r\n  @media (max-width: 1024px){\r\n    .dalya-brand34{ width: calc((100% - 14px) \/ 2); }\r\n  }\r\n  @media (max-width: 640px){\r\n    .dalya-brand34{ width: 100%; }\r\n  }\r\n\r\n  .dalya-brand34__bg{\r\n    position:absolute; inset:0;\r\n    background-image: var(--img);\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: scale(1.02);\r\n  }\r\n  .dalya-brand34__shade{\r\n    position:absolute; inset:0;\r\n    background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 58%);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .dalya-brand34__label{\r\n    position:absolute; left:0; right:0; bottom:0;\r\n    padding: 18px 18px 16px;\r\n  }\r\n  .dalya-brand34__link{\r\n    display:flex;\r\n    align-items:flex-end;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    width:100%;\r\n    text-decoration:none !important;\r\n    color:#fff !important;\r\n    outline:none !important;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n  .dalya-brand34__title{\r\n    font-weight:700;\r\n    font-size:20px;\r\n    line-height:1;\r\n    letter-spacing:.02em;\r\n    text-transform:uppercase;\r\n    color:#fff !important;\r\n  }\r\n  .dalya-brand34__arrow{\r\n    width:30px; height:30px;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    opacity:0;\r\n    transform:translateX(-10px);\r\n    transition: transform .18s ease, opacity .18s ease;\r\n  }\r\n  .dalya-brand34__arrow svg{\r\n    width:20px; height:20px;\r\n    stroke:#fff;\r\n    stroke-width:1.6;\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n  }\r\n  @media(hover:hover){\r\n    .dalya-brand34__link:hover .dalya-brand34__arrow{ opacity:1; transform:translateX(0); }\r\n  }\r\n  @media(hover:none){\r\n    .dalya-brand34__arrow{ opacity:1; transform:none; }\r\n  }\r\n\r\n  \/* controls + rail *\/\r\n  .dalya-brandrail34__controls{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-top:16px;\r\n  }\r\n  .dalya-brandrail34__btn{\r\n    width:34px; height:34px;\r\n    border:0;\r\n    background:transparent !important;\r\n    padding:0;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    cursor:pointer;\r\n    color:#111;\r\n    opacity:.55;\r\n    transition: opacity .15s ease, transform .15s ease;\r\n  }\r\n  .dalya-brandrail34__btn svg{ width:22px; height:22px; }\r\n  .dalya-brandrail34__btn:hover{ opacity:.9; transform:translateY(-1px); }\r\n  .dalya-brandrail34__btn:disabled{ opacity:.22; cursor:default; transform:none; }\r\n\r\n  .dalya-brandrail34__progress{\r\n    position:relative;\r\n    height:2px;\r\n    width:360px;\r\n    max-width:52vw;\r\n    cursor:pointer;\r\n  }\r\n  .dalya-brandrail34__progresstrack{\r\n    position:absolute; inset:0;\r\n    background:rgba(0,0,0,.18);\r\n    border-radius:999px;\r\n  }\r\n  .dalya-brandrail34__thumb{\r\n    position:absolute; top:50%; left:0;\r\n    height:2px; width:24px;\r\n    background:#111;\r\n    border-radius:999px;\r\n    transform:translateX(0px);\r\n    will-change:transform;\r\n  }\r\n\r\n  @media(max-width:768px){\r\n    .dalya-brandrail34__wrap{ padding:0 16px; }\r\n    .dalya-brand34__title{ font-size:18px; }\r\n    .dalya-brandrail34__progress{ width:280px; max-width:58vw; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const viewport = document.getElementById('dalyaBrandViewport');\r\n  const track = document.getElementById('dalyaBrandTrack');\r\n  const root = viewport?.closest('.dalya-brandrail34');\r\n  if(!viewport || !track || !root) return;\r\n\r\n  const btnPrev = root.querySelector('.dalya-brandrail34__btn--prev');\r\n  const btnNext = root.querySelector('.dalya-brandrail34__btn--next');\r\n  const progress = root.querySelector('.dalya-brandrail34__progress');\r\n  const thumb = root.querySelector('[data-brand-thumb]');\r\n  const THUMB_W = 24;\r\n\r\n  let x = 0;\r\n  let down = false;\r\n  let startClientX = 0;\r\n  let startX = 0;\r\n  let movedAbs = 0;\r\n  let raf = 0;\r\n  let pendingX = 0;\r\n\r\n  function clamp(n,a,b){ return Math.max(a, Math.min(b,n)); }\r\n  function sizes(){\r\n    const vw = viewport.clientWidth;\r\n    const tw = track.scrollWidth;\r\n    const maxNeg = Math.min(0, vw - tw);\r\n    return { vw, tw, maxNeg };\r\n  }\r\n  function stepSize(){\r\n    const first = track.querySelector('.dalya-brand34');\r\n    if(!first) return 320;\r\n    const st = getComputedStyle(track);\r\n    const gap = parseFloat(st.gap || st.columnGap || 0) || 0;\r\n    return first.getBoundingClientRect().width + gap;\r\n  }\r\n  function requestSetX(nx){\r\n    const { maxNeg } = sizes();\r\n    pendingX = clamp(nx, maxNeg, 0);\r\n    if(raf) return;\r\n    raf = requestAnimationFrame(() => {\r\n      raf = 0;\r\n      x = pendingX;\r\n      track.style.transform = `translate3d(${x}px,0,0)`;\r\n      updateUI();\r\n    });\r\n  }\r\n  function updateUI(){\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n    const p = maxMove ? (-x \/ maxMove) : 0;\r\n\r\n    const railW = progress.clientWidth;\r\n    const travel = Math.max(0, railW - THUMB_W);\r\n    thumb.style.width = THUMB_W + 'px';\r\n    thumb.style.transform = `translateX(${travel * p}px)`;\r\n\r\n    btnPrev.disabled = x >= -1;\r\n    btnNext.disabled = x <= (maxNeg + 1);\r\n  }\r\n  function currentIndex(){\r\n    const s = stepSize();\r\n    return s ? Math.round((-x) \/ s) : 0;\r\n  }\r\n  function snapToIndex(idx){\r\n    const s = stepSize();\r\n    const { maxNeg } = sizes();\r\n    const target = clamp(-(idx * s), maxNeg, 0);\r\n\r\n    const start = x;\r\n    const dist = target - start;\r\n    const dur = 200;\r\n    const t0 = performance.now();\r\n    const easeOut = t => 1 - Math.pow(1 - t, 3);\r\n\r\n    function anim(now){\r\n      const tt = clamp((now - t0) \/ dur, 0, 1);\r\n      const v = start + dist * easeOut(tt);\r\n      track.style.transform = `translate3d(${v}px,0,0)`;\r\n      const saved = x; x = v; updateUI(); x = saved;\r\n\r\n      if(tt < 1) requestAnimationFrame(anim);\r\n      else { x = target; track.style.transform = `translate3d(${x}px,0,0)`; updateUI(); }\r\n    }\r\n    requestAnimationFrame(anim);\r\n  }\r\n\r\n  function snapNearest(){ snapToIndex(currentIndex()); }\r\n  function moveOne(dir){\r\n    const idx = Math.max(0, currentIndex() + dir);\r\n    snapToIndex(idx);\r\n  }\r\n\r\n  btnPrev.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(-1); });\r\n  btnNext.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(+1); });\r\n\r\n  progress.addEventListener('pointerdown', (e) => {\r\n    const rect = progress.getBoundingClientRect();\r\n    const travel = Math.max(0, rect.width - THUMB_W);\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n\r\n    const px = clamp(e.clientX - rect.left - (THUMB_W\/2), 0, travel);\r\n    const p = travel ? (px \/ travel) : 0;\r\n    requestSetX(clamp(-(p * maxMove), maxNeg, 0));\r\n    setTimeout(snapNearest, 0);\r\n  });\r\n\r\n  root.addEventListener('dragstart', (e) => e.preventDefault());\r\n\r\n  viewport.addEventListener('pointerdown', (e) => {\r\n    if(e.target.closest('.dalya-brand34__link')) return;\r\n    if(e.target.closest('.dalya-brandrail34__controls')) return;\r\n\r\n    down = true;\r\n    movedAbs = 0;\r\n    startClientX = e.clientX;\r\n    startX = x;\r\n\r\n    viewport.classList.add('is-dragging');\r\n    viewport.setPointerCapture?.(e.pointerId);\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointermove', (e) => {\r\n    if(!down) return;\r\n    const dx = e.clientX - startClientX;\r\n    movedAbs = Math.max(movedAbs, Math.abs(dx));\r\n    requestSetX(startX + dx);\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointerup', () => {\r\n    if(!down) return;\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n\r\n    const dx = x - startX;\r\n    const threshold = Math.min(120, stepSize() * 0.28);\r\n\r\n    if(movedAbs >= threshold){\r\n      moveOne(dx < 0 ? +1 : -1);\r\n    }else{\r\n      snapNearest();\r\n    }\r\n  });\r\n\r\n  viewport.addEventListener('pointercancel', () => {\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n    snapNearest();\r\n  });\r\n\r\n  root.addEventListener('click', (e) => {\r\n    if(e.target.closest('.dalya-brand34__link')) return;\r\n    if(e.target.closest('.dalya-brandrail34__btn')) return;\r\n    if(e.target.closest('.dalya-brandrail34__progress')) return;\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n  }, true);\r\n\r\n  let wheelTimer = 0;\r\n  viewport.addEventListener('wheel', (e) => {\r\n    const delta = (Math.abs(e.deltaY) > Math.abs(e.deltaX)) ? e.deltaY : e.deltaX;\r\n    requestSetX(x - delta);\r\n    clearTimeout(wheelTimer);\r\n    wheelTimer = setTimeout(snapNearest, 80);\r\n  }, { passive:true });\r\n\r\n  window.addEventListener('resize', () => {\r\n    const { maxNeg } = sizes();\r\n    x = clamp(x, maxNeg, 0);\r\n    track.style.transform = `translate3d(${x}px,0,0)`;\r\n    updateUI();\r\n  }, { passive:true });\r\n\r\n  updateUI();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0324bea e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"0324bea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-838a794 elementor-widget elementor-widget-html\" data-id=\"838a794\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ACTIVITIES (On-style) \u2014 Desktop c\u00f3 \u1ea3nh \/ Mobile ch\u1ec9 list -->\r\n<section class=\"on-activities\" aria-label=\"Activities\">\r\n  <div class=\"on-activities__inner\">\r\n\r\n    <div class=\"on-activities__left\">\r\n      <div class=\"on-activities__kicker\">ACTIVITIES<\/div>\r\n\r\n      <ul class=\"on-activities__list\" id=\"onActivitiesList\">\r\n        <li>\r\n          <a class=\"on-activities__item is-active\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/running\" data-img=\"https:\/\/images.pexels.com\/photos\/2402777\/pexels-photo-2402777.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Running\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Running<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/road-running\" data-img=\"https:\/\/images.pexels.com\/photos\/1199590\/pexels-photo-1199590.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Road running\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Road running<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/marathon\" data-img=\"https:\/\/images.pexels.com\/photos\/3764011\/pexels-photo-3764011.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Marathon\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Marathon<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/trail-running\" data-img=\"https:\/\/images.pexels.com\/photos\/2402765\/pexels-photo-2402765.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Trail running\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Trail running<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/lifestyle\" data-img=\"https:\/\/images.pexels.com\/photos\/2908175\/pexels-photo-2908175.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Lifestyle\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Lifestyle<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/hiking-and-outdoor\" data-img=\"https:\/\/images.pexels.com\/photos\/2070485\/pexels-photo-2070485.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Hiking and outdoor\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Hiking and outdoor<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/tennis\" data-img=\"https:\/\/images.pexels.com\/photos\/5739350\/pexels-photo-5739350.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Tennis\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Tennis<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a class=\"on-activities__item\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/training-and-gym\" data-img=\"https:\/\/images.pexels.com\/photos\/1552242\/pexels-photo-1552242.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800\" data-alt=\"Training and gym\" target=\"_blank\" rel=\"noopener\">\r\n            <span class=\"on-activities__label\">Training and gym<\/span>\r\n            <span class=\"on-activities__arrow\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path><\/svg>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <!-- Desktop only -->\r\n    <div class=\"on-activities__right\" aria-hidden=\"true\">\r\n      <div class=\"on-activities__media\">\r\n        <img id=\"onActivitiesImg\"\r\n             src=\"https:\/\/images.pexels.com\/photos\/2402777\/pexels-photo-2402777.jpeg?auto=compress&cs=tinysrgb&w=1800\"\r\n             alt=\"Running\" loading=\"eager\" decoding=\"async\">\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .on-activities{\r\n    font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n    padding: 28px 0;\r\n  }\r\n  .on-activities__inner{\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 0 18px;\r\n    display: grid;\r\n    grid-template-columns: 1fr 520px;\r\n    gap: 26px;\r\n    align-items: start;\r\n  }\r\n\r\n  .on-activities__kicker{\r\n    font-size: 12px;\r\n    letter-spacing: .16em;\r\n    text-transform: uppercase;\r\n    color: #111;\r\n    margin: 6px 0 14px;\r\n  }\r\n\r\n  .on-activities__list{ list-style:none; padding:0; margin:0; }\r\n\r\n  .on-activities__item{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap: 14px;\r\n    text-decoration:none;\r\n    color:#0b0b0b;\r\n    font-weight:600;                 \/* \u2705 600 *\/\r\n    font-size: clamp(22px, 2.2vw, 44px); \/* \u2705 nh\u1ecf h\u01a1n *\/\r\n    line-height: 1.06;\r\n    padding: 10px 0;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .on-activities__arrow{\r\n    width: 34px;\r\n    height: 34px;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    transition: transform .18s ease, opacity .18s ease;\r\n  }\r\n  .on-activities__arrow svg{\r\n    width: 22px;\r\n    height: 22px;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  \/* Desktop: arrow ch\u1ec9 slide ra khi hover \/ active *\/\r\n  @media (hover:hover){\r\n    .on-activities__arrow{ transform: translateX(-10px); opacity: 0; }\r\n    .on-activities__item:hover .on-activities__arrow,\r\n    .on-activities__item:focus-visible .on-activities__arrow,\r\n    .on-activities__item.is-active .on-activities__arrow{\r\n      transform: translateX(0);\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  \/* Right image card *\/\r\n  .on-activities__right{ display:flex; justify-content:flex-end; }\r\n  .on-activities__media{\r\n    width: 520px;\r\n    max-width: 100%;\r\n    border-radius: 10px;\r\n    overflow:hidden;\r\n    box-shadow: 0 18px 55px rgba(0,0,0,.16);\r\n    background:#f2f2f2;\r\n    aspect-ratio: 3 \/ 4;\r\n  }\r\n  .on-activities__media img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    display:block;\r\n    opacity:1;\r\n    transition: opacity .16s ease;\r\n  }\r\n  .on-activities__media img.is-fading{ opacity:0; }\r\n\r\n  \/* \u2705 Mobile: kh\u00f4ng c\u1ea7n \u1ea3nh + arrow lu\u00f4n hi\u1ec7n nh\u01b0 ref *\/\r\n  @media (max-width: 1024px){\r\n    .on-activities__inner{ grid-template-columns: 1fr; gap: 12px; }\r\n    .on-activities__right{ display:none !important; }\r\n    .on-activities__item{ padding: 9px 0; font-size: 26px; }\r\n    .on-activities__arrow{ transform:none !important; opacity:1 !important; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const list = document.getElementById('onActivitiesList');\r\n    const img  = document.getElementById('onActivitiesImg');\r\n    if(!list || !img) return;\r\n\r\n    const FALLBACK_IMG =\r\n      \"https:\/\/images.pexels.com\/photos\/2402777\/pexels-photo-2402777.jpeg?auto=compress&cs=tinysrgb&w=1800\";\r\n\r\n    \/\/ preload + fallback n\u1ebfu \u1ea3nh l\u1ed7i\r\n    list.querySelectorAll('.on-activities__item').forEach(a => {\r\n      const src = a.getAttribute('data-img');\r\n      if(!src) return;\r\n\r\n      const pre = new Image();\r\n      pre.referrerPolicy = \"no-referrer\";\r\n      pre.onload = function(){ \/* ok *\/ };\r\n      pre.onerror = function(){\r\n        a.setAttribute('data-img', FALLBACK_IMG);\r\n      };\r\n      pre.src = src;\r\n    });\r\n\r\n    function isDesktop(){\r\n      return window.matchMedia('(min-width: 1025px)').matches;\r\n    }\r\n\r\n    let lock = false;\r\n    function setActive(a){\r\n      if(!a) return;\r\n\r\n      \/\/ active class\r\n      list.querySelectorAll('.on-activities__item.is-active')\r\n        .forEach(x => x.classList.remove('is-active'));\r\n      a.classList.add('is-active');\r\n\r\n      \/\/ mobile: kh\u00f4ng \u0111\u1ed5i \u1ea3nh\r\n      if(!isDesktop()) return;\r\n\r\n      if(lock) return;\r\n      lock = true;\r\n\r\n      const nextSrc = a.getAttribute('data-img') || FALLBACK_IMG;\r\n      const nextAlt = a.getAttribute('data-alt') || '';\r\n\r\n      img.classList.add('is-fading');\r\n\r\n      const swap = () => {\r\n        \/\/ swap src + handle error fallback\r\n        img.onerror = () => {\r\n          img.onerror = null;\r\n          img.src = FALLBACK_IMG;\r\n          img.classList.remove('is-fading');\r\n          lock = false;\r\n        };\r\n\r\n        img.onload = () => {\r\n          img.onload = null;\r\n          img.classList.remove('is-fading');\r\n          lock = false;\r\n        };\r\n\r\n        img.src = nextSrc;\r\n        img.alt = nextAlt;\r\n\r\n        \/\/ safety fallback\r\n        setTimeout(() => {\r\n          img.classList.remove('is-fading');\r\n          lock = false;\r\n        }, 300);\r\n      };\r\n\r\n      setTimeout(swap, 110);\r\n    }\r\n\r\n    \/\/ hover \/ focus => \u0111\u1ed5i \u1ea3nh (desktop)\r\n    list.addEventListener('mouseover', (e) => {\r\n      const a = e.target.closest('.on-activities__item');\r\n      if(a) setActive(a);\r\n    });\r\n    list.addEventListener('focusin', (e) => {\r\n      const a = e.target.closest('.on-activities__item');\r\n      if(a) setActive(a);\r\n    });\r\n\r\n    \/\/ n\u1ebfu resize t\u1eeb mobile -> desktop, \u0111\u1ea3m b\u1ea3o \u1ea3nh sync theo active\r\n    window.addEventListener('resize', () => {\r\n      if(!isDesktop()) return;\r\n      const active = list.querySelector('.on-activities__item.is-active') || list.querySelector('.on-activities__item');\r\n      if(active) setActive(active);\r\n    }, { passive: true });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b36e028 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"b36e028\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-149eeaa elementor-widget elementor-widget-heading\" data-id=\"149eeaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Shop by Categories<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1bf2161 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"1bf2161\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f72d58 elementor-widget elementor-widget-html\" data-id=\"1f72d58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n  ON-STYLE CATEGORY CARDS (3:4)\r\n  \u2705 Desktop: show 3 cards (slide to see more if you add)\r\n  \u2705 Tablet: 2 cards\r\n  \u2705 Mobile: 1 card\r\n  \u2705 Drag anywhere to slide (grab\/grabbing) + release moves ONLY 1 card\r\n  \u2705 ONLY click title opens link\r\n  \u2705 Names + links \u0111\u00fang format b\u1ea1n b\u1ea3o (product-category\/{slug})\r\n  \u2705 Hi\u1ec7n t\u1ea1i: CH\u1ec8 3 CARD (Shoes \/ Apparel \/ Accessories)\r\n========================================================= -->\r\n\r\n<section class=\"dalya-catrail34\" aria-label=\"Category rail\">\r\n  <div class=\"dalya-catrail34__wrap\">\r\n\r\n    <div class=\"dalya-catrail34__viewport\" id=\"dalyaCat34Viewport\">\r\n      <div class=\"dalya-catrail34__track\" id=\"dalyaCat34Track\">\r\n\r\n        <!-- 1) Shoes -->\r\n        <article class=\"dalya-cat34\" aria-label=\"Shoes\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/267320\/pexels-photo-267320.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-cat34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__label\">\r\n            <a class=\"dalya-cat34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/shoes\" aria-label=\"Open Shoes\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-cat34__title\">Shoes<\/span>\r\n              <span class=\"dalya-cat34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 2) Apparel -->\r\n        <article class=\"dalya-cat34\" aria-label=\"Apparel\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/3760610\/pexels-photo-3760610.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-cat34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__label\">\r\n            <a class=\"dalya-cat34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/apparel\" aria-label=\"Open Apparel\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-cat34__title\">Apparel<\/span>\r\n              <span class=\"dalya-cat34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n        <!-- 3) Accessories -->\r\n        <article class=\"dalya-cat34\" aria-label=\"Accessories\"\r\n          style=\"--img:url('https:\/\/images.pexels.com\/photos\/128206\/pexels-photo-128206.jpeg?auto=compress&cs=tinysrgb&w=2200');\">\r\n          <div class=\"dalya-cat34__bg\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__shade\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"dalya-cat34__label\">\r\n            <a class=\"dalya-cat34__link\" href=\"https:\/\/orchid-buffalo-372650.hostingersite.com\/product-category\/accessories\" aria-label=\"Open Accessories\" target=\"_blank\" rel=\"noopener\">\r\n              <span class=\"dalya-cat34__title\">Accessories<\/span>\r\n              <span class=\"dalya-cat34__arrow\" aria-hidden=\"true\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                  <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"><\/path>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/article>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- controls + small rail (y nh\u01b0 style b\u1ea1n d\u00f9ng) -->\r\n    <div class=\"dalya-catrail34__controls\" aria-label=\"Slider controls\">\r\n      <button type=\"button\" class=\"dalya-catrail34__btn dalya-catrail34__btn--prev\" aria-label=\"Previous\" disabled>\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M15 5 L8 12 L15 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <button type=\"button\" class=\"dalya-catrail34__btn dalya-catrail34__btn--next\" aria-label=\"Next\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path d=\"M9 5 L16 12 L9 19\" fill=\"none\" vector-effect=\"non-scaling-stroke\"\r\n                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n        <\/svg>\r\n      <\/button>\r\n\r\n      <div class=\"dalya-catrail34__progress\" aria-hidden=\"true\">\r\n        <span class=\"dalya-catrail34__progresstrack\"><\/span>\r\n        <span class=\"dalya-catrail34__thumb\" data-cat34-thumb style=\"width:24px; transform:translateX(0px);\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .dalya-catrail34{\r\n    padding: 8px 0 22px;\r\n    font-family: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n  }\r\n  .dalya-catrail34__wrap{ max-width: 1920px; margin:0 auto; padding:0 24px; }\r\n  .dalya-catrail34, .dalya-catrail34 *{ box-sizing:border-box; }\r\n\r\n  .dalya-catrail34__viewport{\r\n    overflow:hidden;\r\n    position:relative;\r\n    user-select:none;\r\n    -webkit-user-select:none;\r\n    touch-action: pan-y;\r\n    cursor: grab;\r\n  }\r\n  .dalya-catrail34__viewport.is-dragging{ cursor: grabbing; }\r\n\r\n  .dalya-catrail34__track{\r\n    display:flex;\r\n    gap:14px;\r\n    will-change: transform;\r\n    transform: translate3d(0,0,0);\r\n    padding: 10px 0 0;\r\n  }\r\n\r\n  \/* \u2705 \u0111\u00fang t\u1ef7 l\u1ec7 3:4, \u1ea3nh TO *\/\r\n  .dalya-cat34{\r\n    flex:0 0 auto;\r\n    width: calc((100% - 28px) \/ 3); \/* desktop: 3 cards *\/\r\n    aspect-ratio: 3 \/ 4;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    background: #e9e9e9;\r\n  }\r\n\r\n  \/* tablet: 2 cards *\/\r\n  @media (max-width: 1024px){\r\n    .dalya-cat34{ width: calc((100% - 14px) \/ 2); }\r\n  }\r\n\r\n  \/* mobile: 1 card *\/\r\n  @media (max-width: 640px){\r\n    .dalya-cat34{ width: 100%; }\r\n  }\r\n\r\n  .dalya-cat34__bg{\r\n    position:absolute; inset:0;\r\n    background-image: var(--img);\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: scale(1.02);\r\n  }\r\n\r\n  .dalya-cat34__shade{\r\n    position:absolute; inset:0;\r\n    background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 58%);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .dalya-cat34__label{\r\n    position:absolute; left:0; right:0; bottom:0;\r\n    padding: 18px 18px 16px;\r\n  }\r\n\r\n  \/* ONLY title is clickable *\/\r\n  .dalya-cat34__link{\r\n    display:flex;\r\n    align-items:flex-end;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    width:100%;\r\n    text-decoration:none !important;\r\n    color:#fff !important;\r\n    outline:none !important;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .dalya-cat34__title{\r\n    font-weight:700;\r\n    font-size:20px;\r\n    line-height:1;\r\n    color:#fff !important;\r\n    text-decoration:none !important;\r\n  }\r\n\r\n  .dalya-cat34__arrow{\r\n    width:30px; height:30px;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    opacity:0;\r\n    transform:translateX(-10px);\r\n    transition: transform .18s ease, opacity .18s ease;\r\n  }\r\n  .dalya-cat34__arrow svg{\r\n    width:20px; height:20px;\r\n    stroke:#fff;\r\n    stroke-width:1.6;\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n  }\r\n  @media(hover:hover){\r\n    .dalya-cat34__link:hover .dalya-cat34__arrow{ opacity:1; transform:translateX(0); }\r\n  }\r\n  @media(hover:none){\r\n    .dalya-cat34__arrow{ opacity:1; transform:none; }\r\n  }\r\n\r\n  \/* controls + rail *\/\r\n  .dalya-catrail34__controls{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-top:16px;\r\n  }\r\n  .dalya-catrail34__btn{\r\n    width:34px; height:34px;\r\n    border:0;\r\n    background:transparent !important;\r\n    padding:0;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    cursor:pointer;\r\n    color:#111;\r\n    opacity:.55;\r\n    transition: opacity .15s ease, transform .15s ease;\r\n  }\r\n  .dalya-catrail34__btn svg{ width:22px; height:22px; }\r\n  .dalya-catrail34__btn:hover{ opacity:.9; transform:translateY(-1px); }\r\n  .dalya-catrail34__btn:disabled{ opacity:.22; cursor:default; transform:none; }\r\n\r\n  .dalya-catrail34__progress{\r\n    position:relative;\r\n    height:2px;\r\n    width:360px;\r\n    max-width:52vw;\r\n    cursor:pointer;\r\n  }\r\n  .dalya-catrail34__progresstrack{\r\n    position:absolute; inset:0;\r\n    background:rgba(0,0,0,.18);\r\n    border-radius:999px;\r\n  }\r\n  .dalya-catrail34__thumb{\r\n    position:absolute; top:50%; left:0;\r\n    height:2px; width:24px;\r\n    background:#111;\r\n    border-radius:999px;\r\n    transform:translateX(0px);\r\n    will-change:transform;\r\n  }\r\n\r\n  @media(max-width:768px){\r\n    .dalya-catrail34__wrap{ padding:0 16px; }\r\n    .dalya-cat34__title{ font-size:18px; }\r\n    .dalya-catrail34__progress{ width:280px; max-width:58vw; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const viewport = document.getElementById('dalyaCat34Viewport');\r\n  const track = document.getElementById('dalyaCat34Track');\r\n  const root = viewport?.closest('.dalya-catrail34');\r\n  if(!viewport || !track || !root) return;\r\n\r\n  const btnPrev = root.querySelector('.dalya-catrail34__btn--prev');\r\n  const btnNext = root.querySelector('.dalya-catrail34__btn--next');\r\n  const progress = root.querySelector('.dalya-catrail34__progress');\r\n  const thumb = root.querySelector('[data-cat34-thumb]');\r\n  const THUMB_W = 24;\r\n\r\n  let x = 0;\r\n  let down = false;\r\n  let startClientX = 0;\r\n  let startX = 0;\r\n  let movedAbs = 0;\r\n  let raf = 0;\r\n  let pendingX = 0;\r\n\r\n  function clamp(n,a,b){ return Math.max(a, Math.min(b,n)); }\r\n  function sizes(){\r\n    const vw = viewport.clientWidth;\r\n    const tw = track.scrollWidth;\r\n    const maxNeg = Math.min(0, vw - tw);\r\n    return { vw, tw, maxNeg };\r\n  }\r\n  function stepSize(){\r\n    const first = track.querySelector('.dalya-cat34');\r\n    if(!first) return 320;\r\n    const st = getComputedStyle(track);\r\n    const gap = parseFloat(st.gap || st.columnGap || 0) || 0;\r\n    return first.getBoundingClientRect().width + gap;\r\n  }\r\n\r\n  function requestSetX(nx){\r\n    const { maxNeg } = sizes();\r\n    pendingX = clamp(nx, maxNeg, 0);\r\n    if(raf) return;\r\n    raf = requestAnimationFrame(() => {\r\n      raf = 0;\r\n      x = pendingX;\r\n      track.style.transform = `translate3d(${x}px,0,0)`;\r\n      updateUI();\r\n    });\r\n  }\r\n\r\n  function updateUI(){\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n    const p = maxMove ? (-x \/ maxMove) : 0;\r\n\r\n    const railW = progress.clientWidth;\r\n    const travel = Math.max(0, railW - THUMB_W);\r\n    thumb.style.width = THUMB_W + 'px';\r\n    thumb.style.transform = `translateX(${travel * p}px)`;\r\n\r\n    btnPrev.disabled = x >= -1;\r\n    btnNext.disabled = x <= (maxNeg + 1);\r\n  }\r\n\r\n  function currentIndex(){\r\n    const s = stepSize();\r\n    return s ? Math.round((-x) \/ s) : 0;\r\n  }\r\n\r\n  function snapToIndex(idx){\r\n    const s = stepSize();\r\n    const { maxNeg } = sizes();\r\n    const target = clamp(-(idx * s), maxNeg, 0);\r\n\r\n    const start = x;\r\n    const dist = target - start;\r\n    const dur = 200;\r\n    const t0 = performance.now();\r\n    const easeOut = t => 1 - Math.pow(1 - t, 3);\r\n\r\n    function anim(now){\r\n      const tt = clamp((now - t0) \/ dur, 0, 1);\r\n      const v = start + dist * easeOut(tt);\r\n      track.style.transform = `translate3d(${v}px,0,0)`;\r\n      const saved = x; x = v; updateUI(); x = saved;\r\n\r\n      if(tt < 1) requestAnimationFrame(anim);\r\n      else { x = target; track.style.transform = `translate3d(${x}px,0,0)`; updateUI(); }\r\n    }\r\n    requestAnimationFrame(anim);\r\n  }\r\n\r\n  function snapNearest(){ snapToIndex(currentIndex()); }\r\n  function moveOne(dir){\r\n    const idx = Math.max(0, currentIndex() + dir);\r\n    snapToIndex(idx);\r\n  }\r\n\r\n  \/\/ buttons slide\r\n  btnPrev.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(-1); });\r\n  btnNext.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); moveOne(+1); });\r\n\r\n  \/\/ rail click\r\n  progress.addEventListener('pointerdown', (e) => {\r\n    const rect = progress.getBoundingClientRect();\r\n    const travel = Math.max(0, rect.width - THUMB_W);\r\n    const { vw, tw, maxNeg } = sizes();\r\n    const maxMove = Math.max(0, tw - vw);\r\n\r\n    const px = clamp(e.clientX - rect.left - (THUMB_W\/2), 0, travel);\r\n    const p = travel ? (px \/ travel) : 0;\r\n    requestSetX(clamp(-(p * maxMove), maxNeg, 0));\r\n    setTimeout(snapNearest, 0);\r\n  });\r\n\r\n  \/\/ prevent image drag\r\n  root.addEventListener('dragstart', (e) => e.preventDefault());\r\n\r\n  \/\/ drag anywhere except title link \/ controls\r\n  viewport.addEventListener('pointerdown', (e) => {\r\n    if(e.target.closest('.dalya-cat34__link')) return;\r\n    if(e.target.closest('.dalya-catrail34__controls')) return;\r\n\r\n    down = true;\r\n    movedAbs = 0;\r\n    startClientX = e.clientX;\r\n    startX = x;\r\n\r\n    viewport.classList.add('is-dragging');\r\n    viewport.setPointerCapture?.(e.pointerId);\r\n\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointermove', (e) => {\r\n    if(!down) return;\r\n    const dx = e.clientX - startClientX;\r\n    movedAbs = Math.max(movedAbs, Math.abs(dx));\r\n    requestSetX(startX + dx);\r\n    e.preventDefault();\r\n  }, { passive:false });\r\n\r\n  viewport.addEventListener('pointerup', () => {\r\n    if(!down) return;\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n\r\n    const dx = x - startX;\r\n    const threshold = Math.min(120, stepSize() * 0.28);\r\n\r\n    if(movedAbs >= threshold){\r\n      moveOne(dx < 0 ? +1 : -1);\r\n    }else{\r\n      snapNearest();\r\n    }\r\n  });\r\n\r\n  viewport.addEventListener('pointercancel', () => {\r\n    down = false;\r\n    viewport.classList.remove('is-dragging');\r\n    snapNearest();\r\n  });\r\n\r\n  \/\/ block click anywhere except title + controls\r\n  root.addEventListener('click', (e) => {\r\n    if(e.target.closest('.dalya-cat34__link')) return;\r\n    if(e.target.closest('.dalya-catrail34__btn')) return;\r\n    if(e.target.closest('.dalya-catrail34__progress')) return;\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n  }, true);\r\n\r\n  \/\/ wheel\r\n  let wheelTimer = 0;\r\n  viewport.addEventListener('wheel', (e) => {\r\n    const delta = (Math.abs(e.deltaY) > Math.abs(e.deltaX)) ? e.deltaY : e.deltaX;\r\n    requestSetX(x - delta);\r\n    clearTimeout(wheelTimer);\r\n    wheelTimer = setTimeout(snapNearest, 80);\r\n  }, { passive:true });\r\n\r\n  window.addEventListener('resize', () => {\r\n    const { maxNeg } = sizes();\r\n    x = clamp(x, maxNeg, 0);\r\n    track.style.transform = `translate3d(${x}px,0,0)`;\r\n    updateUI();\r\n  }, { passive:true });\r\n\r\n  updateUI();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shop Now NEW ARRIVALS New Arrivals CLOUD CLOUDTILT CLOUDNOVA CLOUDMONSTER THE ROGER CLOUDSURFER CLOUD X CLOUDZONE Shop by brands ON RUNNING NIKE SKECHERS ASICS ADIDAS ACTIVITIES Running Road running Marathon Trail running Lifestyle Hiking and outdoor Tennis Training and gym Shop by Categories Shoes Apparel Accessories<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":2247,"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":25248,"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/pages\/18\/revisions\/25248"}],"wp:attachment":[{"href":"https:\/\/slabsport.com.vn\/vi\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}