{"id":15,"date":"2026-04-19T04:51:29","date_gmt":"2026-04-19T04:51:29","guid":{"rendered":"https:\/\/tranngocphu.io.vn\/?page_id=15"},"modified":"2026-04-19T14:09:40","modified_gmt":"2026-04-19T14:09:40","slug":"trang-chu","status":"publish","type":"page","link":"https:\/\/tranngocphu.io.vn\/","title":{"rendered":"Trang ch\u1ee7"},"content":{"rendered":"\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n.div111{\n    position:relative;\n    width:100%;\n    height:80vh;\n    overflow:hidden;\n    background:#111;\n}\n\n.bg{\n    position:absolute;\n    inset:0;\n    background-size:cover;\n    background-position:center;\n}\n\n\/* ===== PROGRESS ===== *\/\n.progressWrap{\n    position:absolute;\n    bottom: 70px;\n    left:50%;\n    transform:translateX(-50%);\n    width:300px;\n    z-index:25;\n}\n\n.progressLine{\n    width:100%;\n    height:5px;\n    background:rgba(255,255,255,0.15);\n    border-radius:10px;\n    overflow:hidden;\n    box-shadow:\n        0 0 10px rgba(168,85,247,0.25),\n        0 0 25px rgba(168,85,247,0.15);\n    position:relative;\n}\n\n.progressActive{\n    height:100%;\n    width:16.66%;\n    background:linear-gradient(90deg,#a855f7,#d946ef,#a855f7);\n    transition:0.4s ease;\n    position:relative;\n    overflow:hidden;\n\n    box-shadow:\n        0 0 10px rgba(168,85,247,0.8),\n        0 0 25px rgba(80,0,120,0.8);\n}\n\n.progressActive::after{\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:-50%;\n    width:50%;\n    height:100%;\n    background:linear-gradient(\n        120deg,\n        transparent,\n        rgba(255,255,255,0.8),\n        rgba(168,85,247,0.9),\n        transparent\n    );\n    transform:skewX(-20deg);\n    animation:lightning 4.2s infinite;\n    filter:blur(1px);\n    opacity:0.7;\n}\n\n@keyframes lightning{\n    0% { left:-60%; opacity:0; }\n    30% { opacity:0.8; }\n    60% { opacity:0.4; }\n    100% { left:120%; opacity:0; }\n}\n\n.progressNum{\n    position:absolute;\n    right:0;\n    top:-18px;\n    font-size:12px;\n    color:#fff;\n    opacity:0.9;\n    text-shadow:0 0 10px rgba(168,85,247,0.8);\n}\n\n\/* ===== TEXT ===== *\/\n.infoLeft{\n    position:absolute;\n    left:5%;\n    top:50%;\n    transform:translateY(-50%);\n    width:300px;\n    color:#fff;\n    z-index:10;\n    padding:20px;\n    border-radius:10px;\n    background:rgba(0,0,0,0.3);\n    backdrop-filter: blur(8px);\n    box-shadow:0 10px 30px rgba(0,0,0,0.5);\n}\n\n.infoLeft h1{\n    font-size:26px;\n    margin-bottom:10px;\n}\n\n#num{\n    font-size:14px;\n    opacity:0.6;\n    margin-right:8px;\n}\n\n.infoLeft p{\n    font-size:14px;\n    line-height:1.5;\n    opacity:0.9;\n}\n\n\/* ===== THUMB ===== *\/\n.div888{\n    position:absolute;\n    left:50%;\n    top:50%;\n    transform:translate(calc(10% + 160px), 0);\n    display:flex;\n    gap:15px;\n    z-index:10;\n}\n\n.div999{\n    width:130px;\n    height:200px;\n    cursor:pointer;\n    overflow:hidden;\n    border-radius:5px;\n    box-shadow:0 10px 25px rgba(0,0,0,0.4);\n    transition:0.3s;\n}\n\n.div999:hover{\n    transform:translateY(-5px);\n    box-shadow:0 15px 35px rgba(0,0,0,0.6);\n}\n\n.div999 img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    border-radius:5px;\n}\n\n.clone{\n    position:absolute;\n    z-index:2;\n    pointer-events:none;\n    background-size:cover;\n    background-position:center;\n    border-radius:5px;\n    box-shadow:0 20px 60px rgba(0,0,0,0.6);\n    transition:all 1.2s cubic-bezier(0.22,1,0.36,1);\n}\n\n.navBtns{\n    position:absolute;\n    bottom: 0px;\n    left:50%;\n    transform:translateX(-50%);\n    display:flex;\n    z-index:20;\n}\n\n.navBtns button{\n    width:35px;\n    height:35px;\n    border-radius:50%;\n    border:1px solid rgba(255,255,255,0.3);\n    background:rgba(255,255,255,0.05);\n    color:#fff;\n    cursor:pointer;\n    backdrop-filter: blur(6px);\n    transition:0.3s;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:16px;\n}\n\n.navBtns button:hover{\n    background:rgba(255,255,255,0.15);\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"div111\">\n    <div class=\"bg\" id=\"bg\"><\/div>\n\n    <div class=\"progressWrap\">\n        <div class=\"progressLine\">\n            <div class=\"progressActive\" id=\"progressBar\"><\/div>\n        <\/div>\n        <div class=\"progressNum\" id=\"progressNum\">1<\/div>\n    <\/div>\n\n    <div class=\"infoLeft\">\n        <h1><span id=\"num\">01<\/span><span id=\"title\">Mountain View<\/span><\/h1>\n        <p id=\"desc\">Khung c\u1ea3nh n\u00fai tuy\u1ec7t \u0111\u1eb9p.<\/p>\n    <\/div>\n\n    <div class=\"navBtns\">\n        <button id=\"prev\"><span>&#10094;<\/span><\/button>\n        <button id=\"next\"><span>&#10095;<\/span><\/button>\n    <\/div>\n\n    <div class=\"div888\" id=\"thumbBox\">\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1015\/1200\/800\" data-num=\"01\" data-title=\"Mountain View\" data-desc=\"Khung c\u1ea3nh n\u00fai tuy\u1ec7t \u0111\u1eb9p.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1015\/300\/400\"><\/div>\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1016\/1200\/800\" data-num=\"02\" data-title=\"Forest\" data-desc=\"R\u1eebng xanh m\u00e1t.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1016\/300\/400\"><\/div>\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1018\/1200\/800\" data-num=\"03\" data-title=\"River\" data-desc=\"D\u00f2ng s\u00f4ng nh\u1eb9 nh\u00e0ng.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1018\/300\/400\"><\/div>\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1020\/1200\/800\" data-num=\"04\" data-title=\"Desert\" data-desc=\"Sa m\u1ea1c r\u1ed9ng l\u1edbn.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1020\/300\/400\"><\/div>\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1024\/1200\/800\" data-num=\"05\" data-title=\"Ocean\" data-desc=\"Bi\u1ec3n xanh bao la.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1024\/300\/400\"><\/div>\n\n        <div class=\"div999\" data-img=\"https:\/\/picsum.photos\/id\/1025\/1200\/800\" data-num=\"06\" data-title=\"Dog\" data-desc=\"Ch\u00fa ch\u00f3 \u0111\u00e1ng y\u00eau.\"><img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/1025\/300\/400\"><\/div>\n\n    <\/div>\n<\/div>\n\n<script>\nconst bg = document.getElementById(\"bg\");\nconst box = document.getElementById(\"thumbBox\");\nconst container = document.querySelector(\".div111\");\n\nconst num = document.getElementById(\"num\");\nconst title = document.getElementById(\"title\");\nconst desc = document.getElementById(\"desc\");\n\nconst progressBar = document.getElementById(\"progressBar\");\nconst progressNum = document.getElementById(\"progressNum\");\n\nconst total = 6;\n\nbg.style.backgroundImage = `url(https:\/\/picsum.photos\/id\/1015\/1200\/800)`;\n\nfunction triggerSlide(item){\n\n    const imgUrl = item.dataset.img;\n\n    num.textContent = item.dataset.num;\n    title.textContent = item.dataset.title;\n    desc.textContent = item.dataset.desc;\n\n    const current = parseInt(item.dataset.num, 10);\n    progressNum.textContent = current;\n    progressBar.style.width = (current \/ total) * 100 + \"%\";\n\n    const items = [...box.querySelectorAll(\".div999\")];\n\n    const first = new Map();\n    items.forEach(el=> first.set(el, el.getBoundingClientRect()));\n\n    const rect = item.getBoundingClientRect();\n    const cRect = container.getBoundingClientRect();\n\n    const clone = document.createElement(\"div\");\n    clone.className = \"clone\";\n    clone.style.backgroundImage = `url(${imgUrl})`;\n    container.appendChild(clone);\n\n    clone.style.left = (rect.left - cRect.left) + \"px\";\n    clone.style.top = (rect.top - cRect.top) + \"px\";\n    clone.style.width = rect.width + \"px\";\n    clone.style.height = rect.height + \"px\";\n\n    clone.offsetHeight;\n\n    requestAnimationFrame(()=>{\n        clone.style.left = \"0\";\n        clone.style.top = \"0\";\n        clone.style.width = \"100%\";\n        clone.style.height = \"100%\";\n    });\n\n    setTimeout(()=>{\n        bg.style.backgroundImage = `url(${imgUrl})`;\n    },600);\n\n    const newOrder = items.filter(el => el !== item);\n    newOrder.push(item);\n    newOrder.forEach(el => box.appendChild(el));\n\n    const last = new Map();\n    newOrder.forEach(el=> last.set(el, el.getBoundingClientRect()));\n\n    const movingItems = newOrder.filter(el => el !== item);\n\n    movingItems.forEach((el,i)=>{\n        const f = first.get(el);\n        const l = last.get(el);\n\n        el.style.transform = `translate(${f.left - l.left}px,${f.top - l.top}px)`;\n        el.style.transition = \"none\";\n\n        requestAnimationFrame(()=>{\n            setTimeout(()=>{\n                el.style.transition = \"transform 0.6s ease\";\n                el.style.transform = \"translate(0,0)\";\n            }, i * 120);\n        });\n    });\n\n    item.style.opacity = \"0\";\n    setTimeout(()=> item.style.opacity = \"1\",600);\n    setTimeout(()=> clone.remove(),1200);\n}\n\nbox.addEventListener(\"click\",(e)=>{\n    const item = e.target.closest(\".div999\");\n    if(item) triggerSlide(item);\n});\n\ndocument.getElementById(\"next\").onclick = ()=>{\n    const items = box.querySelectorAll(\".div999\");\n    triggerSlide(items[0]);\n};\n\n\/* ===== FIX N\u00daT L\u00d9I ===== *\/\ndocument.getElementById(\"prev\").onclick = ()=>{\n    const items = [...box.querySelectorAll(\".div999\")]\n        .sort((a,b)=>a.dataset.num - b.dataset.num);\n\n    const current = parseInt(num.textContent, 10);\n\n    const index = items.findIndex(el => parseInt(el.dataset.num, 10) === current);\n\n    const prevIndex = (index - 1 + items.length) % items.length;\n\n    triggerSlide(items[prevIndex]);\n};\n<\/script>\n\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":116,"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/tranngocphu.io.vn\/index.php\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}