{"id":41725,"date":"2026-06-20T10:06:46","date_gmt":"2026-06-20T03:06:46","guid":{"rendered":"https:\/\/interdata.vn\/blog\/?p=41725"},"modified":"2026-07-01T13:38:30","modified_gmt":"2026-07-01T06:38:30","slug":"bang-ma-mau","status":"publish","type":"post","link":"https:\/\/interdata.vn\/blog\/bang-ma-mau\/","title":{"rendered":"B\u1ea3ng M\u00e3 M\u00e0u \u0110\u1ea7y \u0110\u1ee7 \u2013 B\u1ea3ng Code M\u00e0u HTML, CSS, HEX, RGB, CMYK chu\u1ea9n (Copy Ngay)"},"content":{"rendered":"\n\n<div class=\"idux-color-picker\" data-initial-color=\"#ff0800\">\n  <div class=\"iduxcp-topbar\">\n    <h2>B&#7897; ch&#7885;n m&#224;u<\/h2>\n    <button type=\"button\" class=\"iduxcp-share\" aria-label=\"Chia se mau\" title=\"Chia se mau\">\n      <span aria-hidden=\"true\">&#8599;<\/span>\n    <\/button>\n  <\/div>\n\n  <div class=\"iduxcp-main\">\n    <div class=\"iduxcp-swatch\" aria-label=\"Mau dang chon\"><\/div>\n    <div class=\"iduxcp-sv\" role=\"slider\" tabindex=\"0\" aria-label=\"Chon do bao hoa va do sang\">\n      <span class=\"iduxcp-sv-cursor\"><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"iduxcp-hue-wrap\">\n    <div class=\"iduxcp-hue\" role=\"slider\" tabindex=\"0\" aria-label=\"Chon sac do mau\">\n      <span class=\"iduxcp-hue-cursor\"><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"iduxcp-value-card iduxcp-hex-card\">\n    <label>HEX<\/label>\n    <div class=\"iduxcp-input-row\">\n      <input class=\"iduxcp-hex-input\" type=\"text\" spellcheck=\"false\" autocomplete=\"off\" value=\"#FF0800\">\n      <button type=\"button\" class=\"iduxcp-copy\" data-copy=\"hex\" aria-label=\"Sao chep HEX\" title=\"Sao chep HEX\">\n        <span aria-hidden=\"true\"><\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"iduxcp-grid\">\n    <div class=\"iduxcp-value-card\">\n      <label>RGB<\/label>\n      <div class=\"iduxcp-output-row\">\n        <output class=\"iduxcp-rgb\"><\/output>\n        <button type=\"button\" class=\"iduxcp-copy\" data-copy=\"rgb\" aria-label=\"Sao chep RGB\" title=\"Sao chep RGB\">\n          <span aria-hidden=\"true\"><\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"iduxcp-value-card\">\n      <label>CMYK<\/label>\n      <div class=\"iduxcp-output-row\">\n        <output class=\"iduxcp-cmyk\"><\/output>\n        <button type=\"button\" class=\"iduxcp-copy\" data-copy=\"cmyk\" aria-label=\"Sao chep CMYK\" title=\"Sao chep CMYK\">\n          <span aria-hidden=\"true\"><\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"iduxcp-value-card\">\n      <label>HSV<\/label>\n      <div class=\"iduxcp-output-row\">\n        <output class=\"iduxcp-hsv\"><\/output>\n        <button type=\"button\" class=\"iduxcp-copy\" data-copy=\"hsv\" aria-label=\"Sao chep HSV\" title=\"Sao chep HSV\">\n          <span aria-hidden=\"true\"><\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"iduxcp-value-card\">\n      <label>HSL<\/label>\n      <div class=\"iduxcp-output-row\">\n        <output class=\"iduxcp-hsl\"><\/output>\n        <button type=\"button\" class=\"iduxcp-copy\" data-copy=\"hsl\" aria-label=\"Sao chep HSL\" title=\"Sao chep HSL\">\n          <span aria-hidden=\"true\"><\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <p class=\"iduxcp-status\" aria-live=\"polite\"><\/p>\n<\/div>\n\n<style>\n  .idux-color-picker {\n    --iduxcp-hue: 2;\n    --iduxcp-selected: #ff0800;\n    box-sizing: border-box;\n    width: min(100%, 760px);\n    max-width: 760px;\n    margin: 24px auto;\n    background: #202329;\n    border: 1px solid #3b3f48;\n    border-radius: 10px;\n    color: #fff;\n    overflow: hidden;\n    font-family: Arial, Helvetica, sans-serif;\n    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);\n  }\n\n  .idux-color-picker *,\n  .idux-color-picker *::before,\n  .idux-color-picker *::after {\n    box-sizing: border-box;\n  }\n\n  .iduxcp-topbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 18px 20px;\n  }\n\n  .iduxcp-topbar h2 {\n    margin: 0;\n    color: #fff;\n    font-size: 24px;\n    line-height: 1.25;\n    font-weight: 600;\n    letter-spacing: 0;\n  }\n\n  .iduxcp-share,\n  .iduxcp-copy {\n    display: inline-grid;\n    place-items: center;\n    width: 34px;\n    height: 34px;\n    min-width: 34px;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    color: #e9edf5;\n    background: transparent;\n    cursor: pointer;\n    font-size: 18px;\n    line-height: 1;\n    box-shadow: none;\n    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;\n  }\n\n  .iduxcp-share {\n    background: #3f8fcb;\n    color: #fff;\n  }\n\n  .iduxcp-share:hover,\n  .iduxcp-share:focus-visible {\n    background: #5aa7df;\n    border-color: #8ec5ed;\n    outline: 2px solid #8ab4f8;\n    outline-offset: 2px;\n  }\n\n  .iduxcp-copy {\n    position: relative;\n    background: #2b3038;\n    border-color: #48515d;\n    color: #f7fbff;\n  }\n\n  .iduxcp-copy span,\n  .iduxcp-copy span::before {\n    display: block;\n    width: 12px;\n    height: 14px;\n    border: 2px solid currentColor;\n    border-radius: 2px;\n    box-sizing: border-box;\n  }\n\n  .iduxcp-copy span {\n    position: relative;\n    transform: translate(2px, -2px);\n  }\n\n  .iduxcp-copy span::before {\n    content: \"\";\n    position: absolute;\n    left: -6px;\n    top: 4px;\n    opacity: .62;\n  }\n\n  .iduxcp-copy:hover,\n  .iduxcp-copy:focus-visible {\n    background: #3a4250;\n    border-color: #8ab4f8;\n    color: #fff;\n    outline: 2px solid rgba(138, 180, 248, .45);\n    outline-offset: 2px;\n    transform: translateY(-1px);\n  }\n\n  .iduxcp-copy.is-copied {\n    background: #198754;\n    border-color: #45c486;\n    color: #fff;\n  }\n\n  .iduxcp-copy.is-copied span {\n    width: 15px;\n    height: 8px;\n    border-top: 0;\n    border-right: 0;\n    border-left: 2px solid currentColor;\n    border-bottom: 2px solid currentColor;\n    border-radius: 0;\n    transform: rotate(-45deg) translate(1px, -1px);\n  }\n\n  .iduxcp-copy.is-copied span::before {\n    display: none;\n  }\n\n  .iduxcp-main {\n    display: grid;\n    grid-template-columns: minmax(140px, 31%) 1fr;\n    min-height: clamp(220px, 34vw, 300px);\n  }\n\n  .iduxcp-swatch {\n    background: var(--iduxcp-selected);\n    min-height: clamp(210px, 32vw, 282px);\n  }\n\n  .iduxcp-sv {\n    position: relative;\n    min-height: clamp(210px, 32vw, 282px);\n    cursor: crosshair;\n    touch-action: none;\n    background:\n      linear-gradient(to top, #000, rgba(0, 0, 0, 0)),\n      linear-gradient(to right, #fff, hsla(var(--iduxcp-hue), 100%, 50%, 0)),\n      hsl(var(--iduxcp-hue), 100%, 50%);\n  }\n\n  .iduxcp-sv-cursor,\n  .iduxcp-hue-cursor {\n    position: absolute;\n    width: 22px;\n    height: 22px;\n    border: 3px solid #fff;\n    border-radius: 999px;\n    box-shadow: 0 1px 5px rgba(0, 0, 0, .5);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n  }\n\n  .iduxcp-sv-cursor {\n    background: var(--iduxcp-selected);\n  }\n\n  .iduxcp-hue-wrap {\n    padding: 20px 38px 18px;\n  }\n\n  .iduxcp-hue {\n    position: relative;\n    height: 9px;\n    border-radius: 999px;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\n  }\n\n  .iduxcp-hue-cursor {\n    top: 50%;\n    background: hsl(var(--iduxcp-hue), 100%, 50%);\n  }\n\n  .iduxcp-value-card {\n    position: relative;\n    border: 1px solid #444b55;\n    border-radius: 7px;\n    padding: 14px;\n    min-width: 0;\n    background: #22252c;\n  }\n\n  .iduxcp-value-card label {\n    position: absolute;\n    top: -10px;\n    left: 14px;\n    padding: 0 6px;\n    color: #fff;\n    background: #202329;\n    font-size: 14px;\n    line-height: 1.1;\n    font-weight: 400;\n  }\n\n  .iduxcp-hex-card {\n    margin: 0 22px 14px;\n    text-align: center;\n  }\n\n  .iduxcp-hex-card label {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .iduxcp-input-row,\n  .iduxcp-output-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-height: 48px;\n    padding: 6px 7px 6px 16px;\n    border-radius: 6px;\n    background: #1a1d23;\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);\n  }\n\n  .iduxcp-hex-input {\n    flex: 1;\n    width: 100%;\n    min-width: 0;\n    height: 34px !important;\n    min-height: 34px !important;\n    border: 0 !important;\n    box-shadow: none !important;\n    padding: 0 !important;\n    color: #fff !important;\n    background: transparent !important;\n    text-align: center;\n    font: inherit;\n    font-size: 16px !important;\n    font-weight: 700;\n    line-height: 34px !important;\n    outline: 0;\n  }\n\n  .iduxcp-output-row output {\n    flex: 1;\n    min-width: 0;\n    color: #fff;\n    font-size: 15px;\n    line-height: 1.35;\n    overflow-wrap: anywhere;\n    font-weight: 600;\n  }\n\n  .iduxcp-grid {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 10px;\n    padding: 0 22px 16px;\n  }\n\n  .iduxcp-status {\n    min-height: 20px;\n    margin: 0;\n    padding: 0 22px 16px;\n    color: #aeb6c3;\n    font-size: 13px;\n  }\n\n  @media (max-width: 760px) {\n    .idux-color-picker {\n      margin: 18px auto;\n      border-radius: 9px;\n    }\n\n    .iduxcp-topbar {\n      padding: 16px 18px;\n    }\n\n    .iduxcp-topbar h2 {\n      font-size: 22px;\n    }\n\n    .iduxcp-hue-wrap {\n      padding: 18px 30px 18px;\n    }\n\n    .iduxcp-hex-card {\n      margin-right: 18px;\n      margin-left: 18px;\n    }\n\n    .iduxcp-grid {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-right: 18px;\n      padding-left: 18px;\n    }\n  }\n\n  @media (max-width: 640px) {\n    .iduxcp-main {\n      grid-template-columns: 1fr;\n      min-height: 0;\n    }\n\n    .iduxcp-swatch {\n      min-height: 76px;\n    }\n\n    .iduxcp-sv {\n      min-height: min(64vw, 260px);\n    }\n\n    .iduxcp-hue-wrap {\n      padding-top: 20px;\n      padding-bottom: 20px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .idux-color-picker {\n      margin: 14px auto;\n      border-radius: 8px;\n    }\n\n    .iduxcp-topbar {\n      padding: 14px 14px;\n    }\n\n    .iduxcp-topbar h2 {\n      font-size: 21px;\n    }\n\n    .iduxcp-share,\n    .iduxcp-copy {\n      width: 38px;\n      height: 38px;\n      min-width: 38px;\n    }\n\n    .iduxcp-swatch {\n      min-height: 64px;\n    }\n\n    .iduxcp-sv {\n      min-height: min(72vw, 245px);\n    }\n\n    .iduxcp-sv-cursor,\n    .iduxcp-hue-cursor {\n      width: 24px;\n      height: 24px;\n    }\n\n    .iduxcp-hue-wrap {\n      padding: 20px 26px 18px;\n    }\n\n    .iduxcp-hue {\n      height: 11px;\n    }\n\n    .iduxcp-hex-card {\n      margin-right: 14px;\n      margin-left: 14px;\n    }\n\n    .iduxcp-value-card {\n      padding: 13px;\n    }\n\n    .iduxcp-input-row,\n    .iduxcp-output-row {\n      min-height: 52px;\n      padding: 7px 7px 7px 13px;\n    }\n\n    .iduxcp-grid {\n      grid-template-columns: 1fr;\n      gap: 12px;\n      padding-right: 14px;\n      padding-left: 14px;\n      padding-bottom: 14px;\n    }\n\n    .iduxcp-output-row output {\n      font-size: 15px;\n    }\n\n    .iduxcp-status {\n      padding-right: 14px;\n      padding-left: 14px;\n      padding-bottom: 14px;\n    }\n  }\n\n  @media (max-width: 360px) {\n    .iduxcp-topbar h2 {\n      font-size: 19px;\n    }\n\n    .iduxcp-topbar {\n      gap: 10px;\n    }\n\n    .iduxcp-sv {\n      min-height: 220px;\n    }\n\n    .iduxcp-input-row,\n    .iduxcp-output-row {\n      gap: 9px;\n      padding-left: 11px;\n    }\n\n    .iduxcp-output-row output {\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    function clamp(value, min, max) {\n      return Math.min(max, Math.max(min, value));\n    }\n\n    function round(value) {\n      return Math.round(value);\n    }\n\n    function hsvToRgb(h, s, v) {\n      s \/= 100;\n      v \/= 100;\n      var c = v * s;\n      var x = c * (1 - Math.abs((h \/ 60) % 2 - 1));\n      var m = v - c;\n      var r = 0;\n      var g = 0;\n      var b = 0;\n\n      if (h < 60) {\n        r = c; g = x; b = 0;\n      } else if (h < 120) {\n        r = x; g = c; b = 0;\n      } else if (h < 180) {\n        r = 0; g = c; b = x;\n      } else if (h < 240) {\n        r = 0; g = x; b = c;\n      } else if (h < 300) {\n        r = x; g = 0; b = c;\n      } else {\n        r = c; g = 0; b = x;\n      }\n\n      return {\n        r: round((r + m) * 255),\n        g: round((g + m) * 255),\n        b: round((b + m) * 255)\n      };\n    }\n\n    function rgbToHsv(r, g, b) {\n      r \/= 255;\n      g \/= 255;\n      b \/= 255;\n      var max = Math.max(r, g, b);\n      var min = Math.min(r, g, b);\n      var d = max - min;\n      var h = 0;\n\n      if (d !== 0) {\n        if (max === r) h = 60 * (((g - b) \/ d) % 6);\n        else if (max === g) h = 60 * ((b - r) \/ d + 2);\n        else h = 60 * ((r - g) \/ d + 4);\n      }\n\n      if (h < 0) h += 360;\n\n      return {\n        h: round(h),\n        s: max === 0 ? 0 : round((d \/ max) * 100),\n        v: round(max * 100)\n      };\n    }\n\n    function rgbToHsl(r, g, b) {\n      r \/= 255;\n      g \/= 255;\n      b \/= 255;\n      var max = Math.max(r, g, b);\n      var min = Math.min(r, g, b);\n      var h = 0;\n      var s = 0;\n      var l = (max + min) \/ 2;\n      var d = max - min;\n\n      if (d !== 0) {\n        s = d \/ (1 - Math.abs(2 * l - 1));\n        if (max === r) h = 60 * (((g - b) \/ d) % 6);\n        else if (max === g) h = 60 * ((b - r) \/ d + 2);\n        else h = 60 * ((r - g) \/ d + 4);\n      }\n\n      if (h < 0) h += 360;\n\n      return {\n        h: round(h),\n        s: round(s * 100),\n        l: round(l * 100)\n      };\n    }\n\n    function rgbToCmyk(r, g, b) {\n      if (r === 0 && g === 0 && b === 0) {\n        return { c: 0, m: 0, y: 0, k: 100 };\n      }\n\n      var rr = r \/ 255;\n      var gg = g \/ 255;\n      var bb = b \/ 255;\n      var k = 1 - Math.max(rr, gg, bb);\n\n      return {\n        c: round(((1 - rr - k) \/ (1 - k)) * 100),\n        m: round(((1 - gg - k) \/ (1 - k)) * 100),\n        y: round(((1 - bb - k) \/ (1 - k)) * 100),\n        k: round(k * 100)\n      };\n    }\n\n    function rgbToHex(r, g, b) {\n      return '#' + [r, g, b].map(function (value) {\n        return value.toString(16).padStart(2, '0');\n      }).join('').toUpperCase();\n    }\n\n    function hexToRgb(hex) {\n      var clean = String(hex || '').trim().replace('#', '');\n      if (\/^[0-9a-fA-F]{3}$\/.test(clean)) {\n        clean = clean.split('').map(function (char) {\n          return char + char;\n        }).join('');\n      }\n      if (!\/^[0-9a-fA-F]{6}$\/.test(clean)) return null;\n      return {\n        r: parseInt(clean.slice(0, 2), 16),\n        g: parseInt(clean.slice(2, 4), 16),\n        b: parseInt(clean.slice(4, 6), 16)\n      };\n    }\n\n    function initPicker(root) {\n      if (root.dataset.ready === '1') return;\n      root.dataset.ready = '1';\n\n      var sv = root.querySelector('.iduxcp-sv');\n      var svCursor = root.querySelector('.iduxcp-sv-cursor');\n      var hue = root.querySelector('.iduxcp-hue');\n      var hueCursor = root.querySelector('.iduxcp-hue-cursor');\n      var swatch = root.querySelector('.iduxcp-swatch');\n      var hexInput = root.querySelector('.iduxcp-hex-input');\n      var status = root.querySelector('.iduxcp-status');\n      var outputs = {\n        rgb: root.querySelector('.iduxcp-rgb'),\n        cmyk: root.querySelector('.iduxcp-cmyk'),\n        hsv: root.querySelector('.iduxcp-hsv'),\n        hsl: root.querySelector('.iduxcp-hsl')\n      };\n      var state = { h: 2, s: 100, v: 100 };\n      var copiedTimer = null;\n      var copiedButtonTimer = null;\n\n      var queryColor = new URLSearchParams(window.location.search).get('color');\n      var initialRgb = hexToRgb(queryColor || root.dataset.initialColor);\n      if (initialRgb) {\n        var initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);\n        state.h = initialHsv.h;\n        state.s = initialHsv.s;\n        state.v = initialHsv.v;\n      }\n\n      function setStatus(message) {\n        status.textContent = message;\n        window.clearTimeout(copiedTimer);\n        copiedTimer = window.setTimeout(function () {\n          status.textContent = '';\n        }, 1800);\n      }\n\n      function update() {\n        var rgb = hsvToRgb(state.h, state.s, state.v);\n        var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n        var cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);\n        var hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n\n        root.style.setProperty('--iduxcp-hue', state.h);\n        root.style.setProperty('--iduxcp-selected', hex);\n        swatch.style.background = hex;\n        hexInput.value = hex;\n        outputs.rgb.textContent = rgb.r + ', ' + rgb.g + ', ' + rgb.b;\n        outputs.cmyk.textContent = cmyk.c + '%, ' + cmyk.m + '%, ' + cmyk.y + '%, ' + cmyk.k + '%';\n        outputs.hsv.textContent = state.h + String.fromCharCode(176) + ', ' + state.s + '%, ' + state.v + '%';\n        outputs.hsl.textContent = hsl.h + String.fromCharCode(176) + ', ' + hsl.s + '%, ' + hsl.l + '%';\n        svCursor.style.left = state.s + '%';\n        svCursor.style.top = (100 - state.v) + '%';\n        hueCursor.style.left = (state.h \/ 360 * 100) + '%';\n      }\n\n      function pickSv(event) {\n        var rect = sv.getBoundingClientRect();\n        var x = clamp(event.clientX - rect.left, 0, rect.width);\n        var y = clamp(event.clientY - rect.top, 0, rect.height);\n        state.s = round((x \/ rect.width) * 100);\n        state.v = round(100 - (y \/ rect.height) * 100);\n        update();\n      }\n\n      function pickHue(event) {\n        var rect = hue.getBoundingClientRect();\n        var x = clamp(event.clientX - rect.left, 0, rect.width);\n        state.h = round((x \/ rect.width) * 360);\n        if (state.h >= 360) state.h = 359;\n        update();\n      }\n\n      function drag(target, handler) {\n        target.addEventListener('pointerdown', function (event) {\n          event.preventDefault();\n          target.setPointerCapture(event.pointerId);\n          handler(event);\n        });\n\n        target.addEventListener('pointermove', function (event) {\n          if (event.buttons !== 1) return;\n          handler(event);\n        });\n      }\n\n      drag(sv, pickSv);\n      drag(hue, pickHue);\n\n      sv.addEventListener('keydown', function (event) {\n        var handled = true;\n        if (event.key === 'ArrowLeft') state.s -= 1;\n        else if (event.key === 'ArrowRight') state.s += 1;\n        else if (event.key === 'ArrowUp') state.v += 1;\n        else if (event.key === 'ArrowDown') state.v -= 1;\n        else handled = false;\n\n        if (!handled) return;\n        event.preventDefault();\n        state.s = clamp(state.s, 0, 100);\n        state.v = clamp(state.v, 0, 100);\n        update();\n      });\n\n      hue.addEventListener('keydown', function (event) {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n        event.preventDefault();\n        state.h += event.key === 'ArrowRight' ? 1 : -1;\n        state.h = clamp(state.h, 0, 359);\n        update();\n      });\n\n      hexInput.addEventListener('change', function () {\n        var rgb = hexToRgb(hexInput.value);\n        if (!rgb) {\n          setStatus('Ma HEX chua hop le.');\n          update();\n          return;\n        }\n\n        var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n        state.h = hsv.h;\n        state.s = hsv.s;\n        state.v = hsv.v;\n        update();\n      });\n\n      root.addEventListener('click', function (event) {\n        var copyButton = event.target.closest('.iduxcp-copy');\n        if (!copyButton) return;\n\n        var type = copyButton.dataset.copy;\n        var value = type === 'hex' ? hexInput.value : outputs[type].textContent;\n        navigator.clipboard.writeText(value).then(function () {\n          root.querySelectorAll('.iduxcp-copy.is-copied').forEach(function (button) {\n            button.classList.remove('is-copied');\n          });\n          copyButton.classList.add('is-copied');\n          window.clearTimeout(copiedButtonTimer);\n          copiedButtonTimer = window.setTimeout(function () {\n            copyButton.classList.remove('is-copied');\n          }, 900);\n          setStatus('Da sao chep ' + type.toUpperCase() + '.');\n        }).catch(function () {\n          setStatus('Trinh duyet khong cho phep sao chep tu dong.');\n        });\n      });\n\n      root.querySelector('.iduxcp-share').addEventListener('click', function () {\n        var url = new URL(window.location.href);\n        url.searchParams.set('color', hexInput.value.replace('#', ''));\n        navigator.clipboard.writeText(url.toString()).then(function () {\n          setStatus('Da sao chep lien ket mau.');\n        }).catch(function () {\n          setStatus('Lien ket mau: ' + url.toString());\n        });\n      });\n\n      update();\n    }\n\n    function bootColorPickers() {\n      document.querySelectorAll('.idux-color-picker').forEach(initPicker);\n    }\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', bootColorPickers);\n    } else {\n      bootColorPickers();\n    }\n  })();\n<\/script>\n\n\n\n<style>\n.interdata-plan-carousel,.interdata-plan-carousel *{box-sizing:border-box}\n.interdata-plan-carousel{--blue:#005bea;--blue-dark:#004dcc;--text:#071832;--muted:#516173;--border:#d8e6fb;--bg:#f3f8ff;--shadow:0 5px 14px rgba(0,62,145,.08);container-type:inline-size;background:var(--bg);padding:14px 40px 18px;position:relative;overflow:hidden}\n.interdata-carousel-heading{color:#f00;font-family:Roboto,sans-serif;font-size:18px;line-height:1.35;font-weight:800;text-align:center;margin:0 0 14px}\n.interdata-plan-viewport{overflow:hidden;width:100%}\n.interdata-plan-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 0 4px}\n.interdata-plan-track::-webkit-scrollbar{display:none}\n.interdata-plan-card{flex:0 0 calc((100% - 36px)\/4);min-width:0;background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px 10px 13px;min-height:370px;display:flex;flex-direction:column;scroll-snap-align:start;box-shadow:var(--shadow)}\n.interdata-plan-title{color:var(--blue-dark);font-size:16px;line-height:1.22;font-weight:800;text-align:center;margin:0 0 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.interdata-plan-price{color:var(--blue-dark);font-size:24px;line-height:1;font-weight:900;text-align:center;margin-bottom:12px;white-space:nowrap;letter-spacing:0}\n.interdata-plan-price span{font-size:10px;font-weight:800;margin-left:2px}\n.interdata-plan-badge{align-self:center;display:inline-flex;align-items:center;justify-content:center;background:#ff3934;color:#fff;border-radius:5px;padding:7px 8px;font-size:9px;line-height:1;font-weight:800;margin-bottom:15px;white-space:nowrap;max-width:100%}\n.interdata-plan-features{list-style:none!important;padding:0!important;margin:0!important}\n.interdata-plan-features li{display:flex;gap:7px;align-items:flex-start;color:var(--text);font-size:12px;line-height:1.35;font-weight:700;text-align:left;margin:0 0 10px!important;padding:0!important}\n.interdata-plan-icon{width:14px;min-width:14px;height:14px;color:#0069ff;margin-top:2px}\n.interdata-plan-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n.interdata-plan-spacer{flex:1;min-height:16px}\n.interdata-plan-button{display:flex;align-items:center;justify-content:center;min-height:42px;width:100%;background:var(--blue);color:#fff!important;border-radius:5px;font-size:13px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 14px rgba(0,91,234,.24);transition:transform .2s ease,background .2s ease}\n.interdata-plan-button:hover{background:var(--blue-dark);color:#fff!important;transform:translateY(-1px)}\n.interdata-carousel-arrow{position:absolute;top:50%;z-index:5;width:44px;height:54px;border:2px solid #fff!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(0,62,145,.32);display:flex!important;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-35%);transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease}\n.interdata-carousel-arrow:hover{background:var(--blue-dark)!important;color:#fff!important;transform:translateY(-35%) scale(1.04)}\n.interdata-carousel-arrow:disabled{opacity:.78;cursor:not-allowed;background:#8aa6cf!important;color:#fff!important}\n.interdata-carousel-arrow:disabled:hover{background:#8aa6cf!important;color:#fff!important;transform:translateY(-35%)}\n.interdata-carousel-arrow svg{display:none!important}\n.interdata-carousel-arrow:before{content:none!important;display:none!important}\n.interdata-carousel-mark{display:block!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:38px!important;font-weight:900!important;line-height:1!important;text-align:center!important;pointer-events:none!important;transform:translateY(-2px)}\n.interdata-carousel-prev{left:14px}\n.interdata-carousel-prev .interdata-carousel-mark{margin-left:-2px}\n.interdata-carousel-next{right:14px}\n.interdata-carousel-next .interdata-carousel-mark{margin-right:-2px}\n@container (max-width:640px){.interdata-plan-carousel{padding:12px 38px 16px}.interdata-plan-card{flex-basis:calc((100% - 12px)\/2);min-height:370px}.interdata-carousel-heading{font-size:16px}}\n@container (max-width:480px){.interdata-plan-carousel{padding:12px 34px 16px}.interdata-plan-card{flex-basis:100%;min-height:360px}.interdata-plan-price{font-size:25px}.interdata-carousel-arrow{width:34px;height:44px}.interdata-carousel-mark{font-size:32px!important}.interdata-carousel-prev{left:5px}.interdata-carousel-next{right:5px}}\n<\/style>\n\n<div class=\"interdata-plan-carousel\" data-interdata-carousel>\n  <div class=\"interdata-carousel-heading\">Si\u00eau \u01afu \u0110\u00e3i VPS \/ CLOUD SERVER - Ti\u1ebft Ki\u1ec7m \u0110\u1ebfn 70%<\/div>\n\n  <svg width=\"0\" height=\"0\" style=\"position:absolute;visibility:hidden\" aria-hidden=\"true\">\n    <symbol id=\"id-icon-cpu\" viewBox=\"0 0 24 24\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2\"><\/rect><path d=\"M4 9h3M4 15h3M17 9h3M17 15h3M9 4v3M15 4v3M9 17v3M15 17v3\"><\/path><path d=\"M10 10h4v4h-4z\"><\/path><\/symbol>\n    <symbol id=\"id-icon-ram\" viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"><\/rect><path d=\"M7 16v2M11 16v2M15 16v2M19 16v2M7 11h1M11 11h1M15 11h1\"><\/path><\/symbol>\n    <symbol id=\"id-icon-storage\" viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"><\/rect><path d=\"M9 7h6\"><\/path><circle cx=\"12\" cy=\"16\" r=\"1.5\"><\/circle><\/symbol>\n    <symbol id=\"id-icon-network\" viewBox=\"0 0 24 24\"><path d=\"M5 12.5a10 10 0 0 1 14 0\"><\/path><path d=\"M8.5 16a5 5 0 0 1 7 0\"><\/path><path d=\"M12 19h.01\"><\/path><\/symbol>\n    <symbol id=\"id-icon-gift\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"13\" rx=\"2\"><\/rect><path d=\"M12 8v13M3 12h18\"><\/path><path d=\"M7.5 8C6.1 8 5 6.9 5 5.5S6.1 3 7.5 3C10 3 12 8 12 8\"><\/path><path d=\"M16.5 8C17.9 8 19 6.9 19 5.5S17.9 3 16.5 3C14 3 12 8 12 8\"><\/path><\/symbol>\n  <\/svg>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-prev\" type=\"button\" aria-label=\"Xem 4 g\u00f3i tr\u01b0\u1edbc\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 18l-6-6 6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8249;<\/span>\n  <\/button>\n\n  <div class=\"interdata-plan-viewport\">\n    <div class=\"interdata-plan-track\">\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">299K<span>\/3 th\u00e1ng<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/best-value-plans-2026\/best-value-plans-premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Base<\/h3>\n        <div class=\"interdata-plan-price\">999K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>3 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>3GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Pro<\/h3>\n        <div class=\"interdata-plan-price\">2.599K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>6 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 350Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Premium Ultra<\/h3>\n        <div class=\"interdata-plan-price\">5.679K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>12 vCore Intel<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>16GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>180GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 450Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cyber-week-2026\/premium-ultra\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 1<\/h3>\n        <div class=\"interdata-plan-price\">988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>2 vCPU<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>2 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>30 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-1\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">BD-CLOUD 2<\/h3>\n        <div class=\"interdata-plan-price\">2.988K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>8 GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>80 GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 300 Mbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/bd-cloud-performance-2026\/bd-cloud-2\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Base<\/h3>\n        <div class=\"interdata-plan-price\">2.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 80GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>4 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>6GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>60GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-base\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n\n      <article class=\"interdata-plan-card\">\n        <h3 class=\"interdata-plan-title\">Cloud-Day - Pro<\/h3>\n        <div class=\"interdata-plan-price\">5.666K<span>\/n\u0103m<\/span><\/div>\n        <div class=\"interdata-plan-badge\">GIA H\u1ea0N KH\u00d4NG \u0110\u1ed4I GI\u00c1<\/div>\n        <ul class=\"interdata-plan-features\">\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-gift\"><\/use><\/svg><\/span>T\u1eb7ng 200GB S3 v\u00e0 1 n\u0103m s\u1eed d\u1ee5ng khi mua 2 n\u0103m tr\u1edf l\u00ean<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-cpu\"><\/use><\/svg><\/span>8 vCPU AMD G3<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-ram\"><\/use><\/svg><\/span>12GB RAM<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-storage\"><\/use><\/svg><\/span>160GB SSD NVMe<\/li>\n          <li><span class=\"interdata-plan-icon\"><svg><use href=\"#id-icon-network\"><\/use><\/svg><\/span>Network: 10Gbps<\/li>\n        <\/ul>\n        <div class=\"interdata-plan-spacer\"><\/div>\n        <a class=\"interdata-plan-button\" href=\"https:\/\/support.interdata.vn\/index.php?rp=\/store\/cloud-day-by-interdata-2026\/cloud-day-pro\" target=\"_blank\" rel=\"nofollow sponsored noopener\">\u0110\u0103ng k\u00fd ngay<\/a>\n      <\/article>\n    <\/div>\n  <\/div>\n\n  <button class=\"interdata-carousel-arrow interdata-carousel-next\" type=\"button\" aria-label=\"Xem 4 g\u00f3i ti\u1ebfp theo\">\n    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg>\n    <span class=\"interdata-carousel-mark\" aria-hidden=\"true\">&#8250;<\/span>\n  <\/button>\n<\/div>\n\n<script>\n(function(){\n  function setupInterDataCarousel(root){\n    var track=root.querySelector('.interdata-plan-track');\n    var prev=root.querySelector('.interdata-carousel-prev');\n    var next=root.querySelector('.interdata-carousel-next');\n    if(!track||!prev||!next||track.dataset.ready==='1')return;\n    track.dataset.ready='1';\n\n    function pageWidth(){\n      return track.clientWidth;\n    }\n\n    function updateButtons(){\n      var maxScroll=track.scrollWidth-track.clientWidth-2;\n      prev.disabled=track.scrollLeft<=2;\n      next.disabled=track.scrollLeft>=maxScroll;\n    }\n\n    prev.addEventListener('click',function(){\n      track.scrollBy({left:-pageWidth(),behavior:'smooth'});\n    });\n\n    next.addEventListener('click',function(){\n      track.scrollBy({left:pageWidth(),behavior:'smooth'});\n    });\n\n    track.addEventListener('scroll',function(){\n      window.requestAnimationFrame(updateButtons);\n    });\n\n    window.addEventListener('resize',updateButtons);\n    updateButtons();\n  }\n\n  function initInterDataCarousels(){\n    document.querySelectorAll('[data-interdata-carousel]').forEach(setupInterDataCarousel);\n  }\n\n  if(document.readyState==='loading'){\n    document.addEventListener('DOMContentLoaded',initInterDataCarousels);\n  }else{\n    initInterDataCarousels();\n  }\n})();\n<\/script>\n\n\t<div id=\"gap-928647441\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-928647441 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<p style=\"text-align: justify;\"><span style=\"font-size: 100%;\"><strong>B\u1ea3ng m\u00e3 m\u00e0u<\/strong> l\u00e0 th\u1ee9 b\u1ea1n c\u1ea7n m\u1edf ra m\u1ed7i khi thi\u1ebft k\u1ebf website, ch\u1ec9nh CSS hay chu\u1ea9n b\u1ecb file in nh\u01b0ng l\u1ea1i qu\u00ean m\u1ea5t m\u00e3 HEX c\u1ee7a m\u1ed9t m\u00e0u quen thu\u1ed9c. Thay v\u00ec d\u00f2 t\u1eebng ch\u00fat b\u1eb1ng m\u1eaft, b\u1ea1n copy \u0111\u00fang m\u00e3 HEX, RGB, CMYK v\u00e0 d\u00e1n th\u1eb3ng v\u00e0o code ho\u1eb7c ph\u1ea7n m\u1ec1m. Trang n\u00e0y gom s\u1eb5n c\u00e1c d\u1ea3i m\u00e0u chu\u1ea9n \u0111\u1ec3 b\u1ea1n d\u00f9ng ngay, do \u0111\u1ed9i ng\u0169 <a style=\"background: linear-gradient(90deg, #1E3A8A 0%, #2563EB 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; font-weight: bold;\" href=\"\/\">InterData<\/a> t\u1ed5ng h\u1ee3p.<br \/>\n<\/span><\/p>\n<div style=\"background-color: #eff6ff; padding: 20px; border: 1.5px solid #BFDBFE; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.05);\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; font-size: 18px; margin-top: 0; margin-bottom: 15px; color: #1e3a8a;\">N\u1ed8I DUNG B\u00c0I VI\u1ebeT<\/p>\n<ul style=\"list-style-type: none; padding-left: 0; margin: 0;\">\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section1\">B\u1ea3ng m\u00e3 m\u00e0u l\u00e0 g\u00ec? C\u00e1c h\u1ec7 m\u00e0u b\u1ea1n n\u00ean bi\u1ebft<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section2\">B\u1ea3ng m\u00e3 m\u00e0u HEX ph\u1ed5 bi\u1ebfn (copy ngay)<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section3\">B\u1ea3ng m\u00e3 m\u00e0u RGB v\u00e0 c\u00e1ch d\u00f9ng trong CSS<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section4\">B\u1ea3ng m\u00e3 m\u00e0u CMYK cho in \u1ea5n<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section5\">B\u1ea3ng m\u00e0u Pastel v\u00e0 b\u1ea3ng m\u00e0u chu\u1ea9n thi\u1ebft k\u1ebf web<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section6\">C\u00e1ch khai b\u00e1o v\u00e0 pha m\u00e0u trong CSS<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section7\">C\u00e1ch l\u1ea5y v\u00e0 copy m\u00e3 m\u00e0u nhanh<\/a><\/li>\n<li style=\"margin-bottom: 10px;\"><a style=\"text-decoration: none; color: #2563eb; font-weight: bold;\" href=\"#section8\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 b\u1ea3ng m\u00e3 m\u00e0u<\/a><\/li>\n<\/ul>\n<\/div>\n<h2 id=\"section1\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">B\u1ea3ng m\u00e3 m\u00e0u l\u00e0 g\u00ec? C\u00e1c h\u1ec7 m\u00e0u b\u1ea1n n\u00ean bi\u1ebft<\/h2>\n<p style=\"text-align: justify;\">B\u1ea3ng m\u00e3 m\u00e0u l\u00e0 t\u1eadp h\u1ee3p c\u00e1c m\u00e0u k\u00e8m m\u00e3 \u0111\u1ecbnh danh \u0111\u1ec3 m\u00e1y t\u00ednh v\u00e0 ph\u1ea7n m\u1ec1m hi\u1ec3n th\u1ecb \u0111\u00fang m\u1ed9t m\u00e0u c\u1ee5 th\u1ec3. Trong thi\u1ebft k\u1ebf web v\u00e0 in \u1ea5n, m\u1ed7i m\u00e0u \u0111\u01b0\u1ee3c m\u00f4 t\u1ea3 b\u1eb1ng m\u1ed9t chu\u1ed7i k\u00fd t\u1ef1 thay v\u00ec g\u1ecdi t\u00ean c\u1ea3m t\u00ednh. Nh\u1edd \u0111\u00f3 m\u00e0u tr\u00ean tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u1edbp v\u1edbi m\u00e0u tr\u00ean m\u00e1y ng\u01b0\u1eddi kh\u00e1c.<\/p>\n<p style=\"text-align: justify;\">C\u00f3 b\u1ed1n c\u00e1ch vi\u1ebft m\u00e3 m\u00e0u b\u1ea1n s\u1ebd g\u1eb7p nhi\u1ec1u nh\u1ea5t. Hi\u1ec3u b\u1ea3n ch\u1ea5t t\u1eebng h\u1ec7 gi\u00fap b\u1ea1n ch\u1ecdn \u0111\u00fang n\u01a1i d\u00f9ng, tr\u00e1nh c\u1ea3nh m\u00e0u tr\u00ean web \u0111\u1eb9p nh\u01b0ng in ra l\u1ec7ch t\u00f4ng.<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>HEX:<\/strong> Chu\u1ed7i 6 k\u00fd t\u1ef1 sau d\u1ea5u #, v\u00ed d\u1ee5 <code>#2563EB<\/code>. \u0110\u00e2y l\u00e0 m\u00e3 m\u00e0u HTML v\u00e0 m\u00e3 m\u00e0u CSS th\u00f4ng d\u1ee5ng nh\u1ea5t cho web.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>RGB:<\/strong> Ba gi\u00e1 tr\u1ecb \u0110\u1ecf, L\u1ee5c, Lam t\u1eeb 0 \u0111\u1ebfn 255, v\u00ed d\u1ee5 <code>rgb(37, 99, 235)<\/code>. \u0110\u00e2y l\u00e0 h\u1ec7 m\u00e0u c\u1ed9ng, d\u00f9ng cho m\u00e0n h\u00ecnh ph\u00e1t s\u00e1ng.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>HSL:<\/strong> Ba gi\u00e1 tr\u1ecb M\u00e0u s\u1eafc, \u0110\u1ed9 b\u00e3o h\u00f2a, \u0110\u1ed9 s\u00e1ng. D\u1ec5 ch\u1ec9nh s\u00e1ng t\u1ed1i v\u00e0 t\u1ea1o d\u1ea3i m\u00e0u \u0111\u1ed3ng b\u1ed9 trong CSS.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>CMYK:<\/strong> B\u1ed1n gi\u00e1 tr\u1ecb Xanh l\u01a1, H\u1ed3ng c\u00e1nh sen, V\u00e0ng, \u0110en t\u00ednh theo ph\u1ea7n tr\u0103m. \u0110\u00e2y l\u00e0 h\u1ec7 m\u00e0u tr\u1eeb, d\u00e0nh cho m\u00e1y in.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">\u0110i\u1ec3m m\u1ea5u ch\u1ed1t: RGB v\u00e0 HEX d\u00e0nh cho m\u00e0n h\u00ecnh, CMYK d\u00e0nh cho in gi\u1ea5y. M\u00e0n h\u00ecnh t\u1ea1o m\u00e0u b\u1eb1ng \u00e1nh s\u00e1ng n\u00ean g\u1ecdi l\u00e0 h\u1ec7 m\u00e0u c\u1ed9ng. Gi\u1ea5y h\u1ea5p th\u1ee5 \u00e1nh s\u00e1ng n\u00ean g\u1ecdi l\u00e0 h\u1ec7 m\u00e0u tr\u1eeb. M\u1ed9t m\u00e0u HEX r\u1ef1c r\u1ee1 nh\u01b0 <code>#00FF00<\/code> g\u1ea7n nh\u01b0 kh\u00f4ng th\u1ec3 in ra y h\u1ec7t b\u1eb1ng m\u1ef1c CMYK. N\u1eafm \u0111i\u1ec1u n\u00e0y tr\u01b0\u1edbc khi b\u1ea1n g\u1eedi file cho nh\u00e0 in.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-41728\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/Bang-Ma-Mau-HTML-CSS-RGB-CMYK-Chuan-Copy-Ngay.jpg\" alt=\"B\u1ea3ng M\u00e3 M\u00e0u HTML, CSS, RGB, CMYK Chu\u1ea9n (Copy Ngay)\" width=\"700\" height=\"467\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/Bang-Ma-Mau-HTML-CSS-RGB-CMYK-Chuan-Copy-Ngay.jpg 1000w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/Bang-Ma-Mau-HTML-CSS-RGB-CMYK-Chuan-Copy-Ngay-300x200.jpg 300w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2026\/06\/Bang-Ma-Mau-HTML-CSS-RGB-CMYK-Chuan-Copy-Ngay-768x512.jpg 768w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">H\u1ec7 m\u00e0u c\u1ed9ng v\u00e0 h\u1ec7 m\u00e0u tr\u1eeb kh\u00e1c nhau ra sao?<\/h3>\n<p style=\"text-align: justify;\">H\u1ec7 m\u00e0u c\u1ed9ng (RGB) b\u1eaft \u0111\u1ea7u t\u1eeb m\u00e0u \u0111en tuy\u1ec1n, c\u00e0ng th\u00eam \u00e1nh s\u00e1ng c\u00e0ng s\u00e1ng, \u0111\u1ee7 ba m\u00e0u \u1edf m\u1ee9c t\u1ed1i \u0111a cho ra m\u00e0u tr\u1eafng. H\u1ec7 m\u00e0u tr\u1eeb (CMYK) b\u1eaft \u0111\u1ea7u t\u1eeb gi\u1ea5y tr\u1eafng, c\u00e0ng th\u00eam m\u1ef1c c\u00e0ng t\u1ed1i, \u0111\u1ee7 b\u1ed1n m\u00e0u cho ra m\u00e0u g\u1ea7n \u0111en. V\u00ec c\u01a1 ch\u1ebf ng\u01b0\u1ee3c nhau, vi\u1ec7c chuy\u1ec3n \u0111\u1ed5i qua l\u1ea1i lu\u00f4n c\u00f3 sai s\u1ed1, nh\u1ea5t l\u00e0 v\u1edbi c\u00e1c m\u00e0u neon v\u00e0 m\u00e0u b\u00e3o h\u00f2a cao.<\/p>\n<h2 id=\"section2\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">B\u1ea3ng m\u00e3 m\u00e0u HEX ph\u1ed5 bi\u1ebfn (copy ngay)<\/h2>\n<p style=\"text-align: justify;\">M\u00e3 m\u00e0u HEX l\u00e0 \u0111\u1ecbnh d\u1ea1ng b\u1ea1n d\u00e1n nhi\u1ec1u nh\u1ea5t khi code web. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c m\u00e0u c\u01a1 b\u1ea3n k\u00e8m m\u00e3 HEX v\u00e0 gi\u00e1 tr\u1ecb RGB t\u01b0\u01a1ng \u1ee9ng. Click ch\u1ecdn \u00f4 m\u00e3 v\u00e0 copy tr\u1ef1c ti\u1ebfp v\u00e0o file CSS ho\u1eb7c HTML c\u1ee7a b\u1ea1n.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">T\u00ean m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Xem m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">M\u00e3 HEX<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">RGB<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">\u0110en (Black)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #000000;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#000000<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(0, 0, 0)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Tr\u1eafng (White)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FFFFFF;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FFFFFF<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(255, 255, 255)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">\u0110\u1ecf (Red)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FF0000;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FF0000<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(255, 0, 0)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">L\u1ee5c (Green)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #008000;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#008000<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(0, 128, 0)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Lam (Blue)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #0000FF;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#0000FF<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(0, 0, 255)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">V\u00e0ng (Yellow)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FFFF00;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FFFF00<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(255, 255, 0)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Cam (Orange)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FFA500;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FFA500<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(255, 165, 0)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">T\u00edm (Purple)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #800080;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#800080<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(128, 0, 128)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">H\u1ed3ng (Pink)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FFC0CB;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FFC0CB<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(255, 192, 203)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">X\u00e1m (Gray)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #808080;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#808080<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(128, 128, 128)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">N\u00e2u (Brown)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #A52A2A;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#A52A2A<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(165, 42, 42)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh ng\u1ecdc (Teal)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #008080;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#008080<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(0, 128, 128)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">C\u00e1ch \u0111\u1ecdc m\u1ed9t m\u00e3 m\u00e0u HEX trong 10 gi\u00e2y<\/h3>\n<p style=\"text-align: justify;\">M\u00e3 HEX g\u1ed3m d\u1ea5u # v\u00e0 6 k\u00fd t\u1ef1 chia th\u00e0nh ba c\u1eb7p: hai k\u00fd t\u1ef1 \u0111\u1ea7u cho \u0110\u1ecf, hai gi\u1eefa cho L\u1ee5c, hai cu\u1ed1i cho Lam. M\u1ed7i c\u1eb7p ch\u1ea1y t\u1eeb <code>00<\/code> \u0111\u1ebfn <code>FF<\/code>, t\u1ee9c 0 \u0111\u1ebfn 255 \u1edf h\u1ec7 th\u1eadp ph\u00e2n. V\u00ed d\u1ee5 <code>#2563EB<\/code> ngh\u0129a l\u00e0 \u0110\u1ecf 37, L\u1ee5c 99, Lam 235 \u2014 m\u1ed9t s\u1eafc xanh d\u01b0\u01a1ng \u0111\u1eadm.<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>M\u00e3 r\u00fat g\u1ecdn 3 k\u00fd t\u1ef1:<\/strong> <code>#FFF<\/code> t\u01b0\u01a1ng \u0111\u01b0\u01a1ng <code>#FFFFFF<\/code>, <code>#000<\/code> t\u01b0\u01a1ng \u0111\u01b0\u01a1ng <code>#000000<\/code>. Tr\u00ecnh duy\u1ec7t t\u1ef1 nh\u00e2n \u0111\u00f4i t\u1eebng k\u00fd t\u1ef1.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>M\u00e3 8 k\u00fd t\u1ef1 (HEX + Alpha):<\/strong> Hai k\u00fd t\u1ef1 cu\u1ed1i l\u00e0 \u0111\u1ed9 trong su\u1ed1t, v\u00ed d\u1ee5 <code>#2563EB80<\/code> l\u00e0 m\u00e0u xanh v\u1edbi \u0111\u1ed9 m\u1edd 50%.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Kh\u00f4ng ph\u00e2n bi\u1ec7t hoa th\u01b0\u1eddng:<\/strong> <code>#ff0000<\/code> v\u00e0 <code>#FF0000<\/code> cho c\u00f9ng m\u1ed9t m\u00e0u.<\/li>\n<\/ul>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: white; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Thu\u00ea VPS InterData<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">CPU th\u1ebf h\u1ec7 m\u1edbi, SSD NVMe U.2, c\u00f3 to\u00e0n quy\u1ec1n root \u0111\u1ec3 t\u1ef1 c\u00e0i stack web<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">C\u00f3 m\u00e0u r\u1ed3i, c\u1ea7n ch\u1ed7 ch\u1ea1y website \u1ed5n \u0111\u1ecbnh<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Ch\u1ecdn xong b\u1ea3ng m\u00e0u ch\u1ec9 l\u00e0 b\u01b0\u1edbc \u0111\u1ea7u. Khi b\u1ea1n d\u1ef1ng landing page, blog hay WordPress b\u1eb1ng ch\u00ednh palette \u0111\u00f3, m\u1ed9t VPS c\u00f3 SSD NVMe gi\u00fap trang t\u1ea3i nhanh v\u00e0 b\u1ea1n \u0111\u01b0\u1ee3c to\u00e0n quy\u1ec1n c\u00e0i PHP, Nginx, cache theo \u00fd m\u00ecnh. Ph\u00f9 h\u1ee3p cho website nh\u1ecf \u0111\u1ebfn v\u1eeba v\u00e0 m\u00f4i tr\u01b0\u1eddng dev\/test.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">Xem g\u00f3i VPS ph\u00f9 h\u1ee3p \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section3\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">B\u1ea3ng m\u00e3 m\u00e0u RGB v\u00e0 c\u00e1ch d\u00f9ng trong CSS<\/h2>\n<p style=\"text-align: justify;\">M\u00e3 m\u00e0u RGB m\u00f4 t\u1ea3 m\u00e0u b\u1eb1ng ba k\u00eanh \u0110\u1ecf, L\u1ee5c, Lam, m\u1ed7i k\u00eanh t\u1eeb 0 \u0111\u1ebfn 255. So v\u1edbi HEX, RGB d\u1ec5 \u0111\u1ecdc b\u1eb1ng m\u1eaft h\u01a1n v\u00e0 ti\u1ec7n khi b\u1ea1n c\u1ea7n th\u00eam \u0111\u1ed9 trong su\u1ed1t qua c\u00fa ph\u00e1p <code>rgba()<\/code>. \u0110\u00e2y l\u00e0 h\u1ec7 m\u00e0u g\u1ed1c m\u00e0 m\u1ecdi m\u00e0n h\u00ecnh d\u00f9ng \u0111\u1ec3 ph\u00e1t s\u00e1ng \u0111i\u1ec3m \u1ea3nh.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">M\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Xem m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">RGB<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">HEX<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">\u0110\u1ecf t\u01b0\u01a1i<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #EF4444;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(239, 68, 68)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#EF4444<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh d\u01b0\u01a1ng<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #3B82F6;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(59, 130, 246)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#3B82F6<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh l\u00e1<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #22C55E;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(34, 197, 94)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#22C55E<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">V\u00e0ng ngh\u1ec7<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #EAB308;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(234, 179, 8)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#EAB308<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">T\u00edm violet<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #8B5CF6;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(139, 92, 246)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#8B5CF6<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">H\u1ed3ng \u0111\u1eadm<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #EC4899;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(236, 72, 153)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#EC4899<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">X\u00e1m \u0111\u00e1<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #64748B;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(100, 116, 139)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#64748B<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">Trong CSS, b\u1ea1n khai b\u00e1o m\u00e0u RGB theo c\u00fa ph\u00e1p quen thu\u1ed9c. \u0110o\u1ea1n d\u01b0\u1edbi minh h\u1ecda c\u00e1ch d\u00f9ng c\u1ea3 RGB v\u00e0 RGBA c\u00f3 \u0111\u1ed9 trong su\u1ed1t.<\/p>\n<pre>.button {\r\n  color: rgb(255, 255, 255);           \/* ch\u1eef tr\u1eafng *\/\r\n  background-color: rgb(37, 99, 235);   \/* n\u1ec1n xanh *\/\r\n  border: 1px solid rgba(0, 0, 0, 0.1); \/* vi\u1ec1n \u0111en m\u1edd 10% *\/\r\n}\r\n\r\n\/* C\u00fa ph\u00e1p CSS hi\u1ec7n \u0111\u1ea1i, d\u1ea5u ph\u1ea9y t\u00f9y ch\u1ecdn *\/\r\n.overlay {\r\n  background-color: rgb(0 0 0 \/ 50%);   \/* \u0111en trong su\u1ed1t 50% *\/\r\n}<\/pre>\n<p style=\"text-align: justify;\">L\u01b0u \u00fd: c\u00fa ph\u00e1p <code>rgb(0 0 0 \/ 50%)<\/code> d\u00f9ng d\u1ea5u c\u00e1ch v\u00e0 d\u1ea5u g\u1ea1ch ch\u00e9o l\u00e0 chu\u1ea9n m\u1edbi, \u0111\u01b0\u1ee3c c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i h\u1ed7 tr\u1ee3. N\u1ebfu b\u1ea1n c\u1ea7n t\u01b0\u01a1ng th\u00edch tr\u00ecnh duy\u1ec7t c\u0169, gi\u1eef c\u00fa ph\u00e1p <code>rgba(0, 0, 0, 0.5)<\/code> cho an to\u00e0n.<\/p>\n<h2 id=\"section4\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">B\u1ea3ng m\u00e3 m\u00e0u CMYK cho in \u1ea5n<\/h2>\n<p style=\"text-align: justify;\">M\u00e3 m\u00e0u CMYK d\u00f9ng cho m\u1ecdi th\u1ee9 in ra gi\u1ea5y: name card, brochure, poster, bao b\u00ec. CMYK g\u1ed3m b\u1ed1n k\u00eanh Cyan, Magenta, Yellow, Key (\u0111en), m\u1ed7i k\u00eanh t\u00ednh theo ph\u1ea7n tr\u0103m t\u1eeb 0 \u0111\u1ebfn 100. N\u1ebfu b\u1ea1n thi\u1ebft k\u1ebf banner web r\u1ed3i mang \u0111i in m\u00e0 kh\u00f4ng ki\u1ec3m tra CMYK, m\u00e0u in th\u01b0\u1eddng x\u1ec9n h\u01a1n m\u00e0u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">M\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Xem m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">CMYK (x\u1ea5p x\u1ec9)<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">HEX t\u01b0\u01a1ng \u0111\u01b0\u01a1ng<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Cyan<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #00AEEF;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">100, 0, 0, 0<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#00AEEF<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Magenta<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #EC008C;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">0, 100, 0, 0<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#EC008C<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Yellow<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FFF200;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">0, 0, 100, 0<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FFF200<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Key (\u0110en)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #000000;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">0, 0, 0, 100<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#000000<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">\u0110\u1ecf in<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #ED1C24;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">0, 100, 100, 0<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#ED1C24<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh l\u00e1 in<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #00A651;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">100, 0, 100, 0<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#00A651<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">Gi\u00e1 tr\u1ecb HEX \u1edf c\u1ed9t cu\u1ed1i ch\u1ec9 l\u00e0 x\u1ea5p x\u1ec9 \u0111\u1ec3 b\u1ea1n h\u00ecnh dung tr\u00ean m\u00e0n h\u00ecnh. Con s\u1ed1 CMYK th\u1ef1c t\u1ebf c\u00f2n ph\u1ee5 thu\u1ed9c lo\u1ea1i gi\u1ea5y, lo\u1ea1i m\u1ef1c v\u00e0 h\u1ed3 s\u01a1 m\u00e0u (ICC profile) c\u1ee7a m\u00e1y in. V\u00ec v\u1eady khi in s\u1ed1 l\u01b0\u1ee3ng l\u1edbn, b\u1ea1n n\u00ean y\u00eau c\u1ea7u nh\u00e0 in l\u00e0m b\u1ea3n in th\u1eed (proof) tr\u01b0\u1edbc khi ch\u1ea1y ch\u00ednh th\u1ee9c.<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>Thi\u1ebft k\u1ebf cho web:<\/strong> L\u00e0m vi\u1ec7c \u1edf ch\u1ebf \u0111\u1ed9 m\u00e0u RGB, xu\u1ea5t HEX.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Thi\u1ebft k\u1ebf \u0111\u1ec3 in:<\/strong> Chuy\u1ec3n file sang ch\u1ebf \u0111\u1ed9 CMYK ngay t\u1eeb \u0111\u1ea7u trong ph\u1ea7n m\u1ec1m nh\u01b0 Illustrator ho\u1eb7c Photoshop.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>\u0110\u1eebng chuy\u1ec3n \u0111\u1ed5i ph\u00fat cu\u1ed1i:<\/strong> Chuy\u1ec3n RGB sang CMYK s\u00e1t gi\u1edd in d\u1ec5 khi\u1ebfn m\u00e0u b\u1ecb x\u1ec9n ngo\u00e0i d\u1ef1 t\u00ednh.<\/li>\n<\/ul>\n<h2 id=\"section5\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">B\u1ea3ng m\u00e0u Pastel v\u00e0 b\u1ea3ng m\u00e0u chu\u1ea9n thi\u1ebft k\u1ebf web<\/h2>\n<p style=\"text-align: justify;\">B\u1ea3ng m\u00e0u pastel l\u00e0 nh\u00f3m m\u00e0u nh\u1ea1t, \u0111\u1ed9 b\u00e3o h\u00f2a th\u1ea5p, cho c\u1ea3m gi\u00e1c nh\u1eb9 nh\u00e0ng. Ch\u00fang h\u1ee3p v\u1edbi landing page th\u01b0\u01a1ng hi\u1ec7u m\u1ec1m m\u1ea1i, blog c\u00e1 nh\u00e2n, giao di\u1ec7n wedding ho\u1eb7c m\u1ef9 ph\u1ea9m. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 d\u1ea3i pastel b\u1ea1n c\u00f3 th\u1ec3 copy ngay v\u00e0 m\u1ed9t b\u1ea3ng m\u00e0u chu\u1ea9n thi\u1ebft k\u1ebf web \u0111\u1ec3 ph\u1ed1i giao di\u1ec7n.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">T\u00ean g\u1ee3i \u00fd<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Xem m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">HEX<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">RGB<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">H\u1ed3ng ph\u1ea5n<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FADCD9;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FADCD9<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(250, 220, 217)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh mint<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #C9F0DA;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#C9F0DA<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(201, 240, 218)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">V\u00e0ng kem<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FBF3C4;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FBF3C4<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(251, 243, 196)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Xanh baby<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #CFE8F3;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#CFE8F3<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(207, 232, 243)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">T\u00edm lavender<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #E4D6F5;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#E4D6F5<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(228, 214, 245)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Cam \u0111\u00e0o<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #FCE0C8;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#FCE0C8<\/code><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">rgb(252, 224, 200)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">B\u1ea3ng m\u00e0u chu\u1ea9n \u0111\u1ec3 ph\u1ed1i giao di\u1ec7n web<\/h3>\n<p style=\"text-align: justify;\">M\u1ed9t giao di\u1ec7n d\u1ec5 nh\u00ecn th\u01b0\u1eddng d\u1ef1a tr\u00ean m\u1ed9t m\u00e0u ch\u1ee7 \u0111\u1ea1o, m\u1ed9t m\u00e0u nh\u1ea5n v\u00e0 v\u00e0i m\u1ee9c x\u00e1m. B\u1ea3ng d\u01b0\u1edbi l\u00e0 b\u1ed9 m\u00e0u thang xanh d\u01b0\u01a1ng th\u01b0\u1eddng g\u1eb7p tr\u00ean c\u00e1c h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf hi\u1ec7n \u0111\u1ea1i, b\u1ea1n c\u00f3 th\u1ec3 l\u1ea5y l\u00e0m \u0111i\u1ec3m xu\u1ea5t ph\u00e1t.<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 14px;\">\n<thead>\n<tr style=\"background: #1E3A8A; color: #fff;\">\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Vai tr\u00f2<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">Xem m\u00e0u<\/th>\n<th style=\"padding: 10px; border: 1px solid #BFDBFE; text-align: left;\">HEX<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">M\u00e0u ch\u1ee7 \u0111\u1ea1o (Primary)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #2563EB;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#2563EB<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">M\u00e0u \u0111\u1eadm (Dark)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #1E3A8A;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#1E3A8A<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">M\u00e0u n\u1ec1n nh\u1ea1t (Tint)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #EFF6FF;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#EFF6FF<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Ch\u1eef ch\u00ednh (Text)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #1F2937;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#1F2937<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Ch\u1eef ph\u1ee5 (Muted)<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #6B7280;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#6B7280<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Nh\u1ea5n th\u00e0nh c\u00f4ng<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #16A34A;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#16A34A<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\">Nh\u1ea5n c\u1ea3nh b\u00e1o<\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB; background: #DC2626;\"><\/td>\n<td style=\"padding: 8px; border: 1px solid #E5E7EB;\"><code>#DC2626<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p style=\"text-align: justify;\">M\u1eb9o ch\u1ecdn m\u00e0u chu\u1ea9n thi\u1ebft k\u1ebf: gi\u1eef s\u1ed1 m\u00e0u ch\u1ee7 \u0111\u1ea1o \u1edf m\u1ee9c 1 \u0111\u1ebfn 2, c\u00f2n l\u1ea1i l\u00e0 c\u00e1c m\u1ee9c x\u00e1m v\u00e0 m\u1ed9t m\u00e0u nh\u1ea5n cho n\u00fat b\u1ea5m quan tr\u1ecdng. Ki\u1ec3m tra \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n gi\u1eefa ch\u1eef v\u00e0 n\u1ec1n \u0111\u1ec3 n\u1ed9i dung d\u1ec5 \u0111\u1ecdc, \u0111\u1eb7c bi\u1ec7t v\u1edbi ng\u01b0\u1eddi th\u1ecb l\u1ef1c k\u00e9m. Ti\u00eau chu\u1ea9n t\u01b0\u01a1ng ph\u1ea3n t\u1ed1i thi\u1ec3u cho ch\u1eef th\u01b0\u1eddng l\u00e0 4.5:1 theo h\u01b0\u1edbng d\u1eabn <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-minimum\" target=\"_blank\" rel=\"noopener\">WCAG c\u1ee7a W3C<\/a>.<\/p>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: white; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Thu\u00ea Cloud Server<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">N\u00e2ng, h\u1ea1 t\u00e0i nguy\u00ean linh ho\u1ea1t khi l\u01b0\u1ee3ng truy c\u1eadp bi\u1ebfn \u0111\u1ed9ng theo campaign<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">Website ra m\u1eaft palette m\u1edbi, traffic t\u0103ng \u0111\u1ed9t bi\u1ebfn<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Khi b\u1ea1n tung b\u1ed9 nh\u1eadn di\u1ec7n m\u1edbi k\u00e8m chi\u1ebfn d\u1ecbch qu\u1ea3ng c\u00e1o, l\u01b0\u1ee3ng truy c\u1eadp c\u00f3 th\u1ec3 t\u0103ng v\u1ecdt trong v\u00e0i ng\u00e0y cao \u0111i\u1ec3m. Cloud Server cho ph\u00e9p t\u0103ng CPU, RAM khi c\u1ea7n r\u1ed3i h\u1ea1 l\u1ea1i sau campaign, h\u1ee3p v\u1edbi h\u1ec7 th\u1ed1ng nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng ho\u1eb7c database l\u1edbn.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/cloud-server\/\" target=\"_blank\" rel=\"noopener\">T\u00ecm hi\u1ec3u Cloud Server \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section6\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">C\u00e1ch khai b\u00e1o v\u00e0 pha m\u00e0u trong CSS<\/h2>\n<p style=\"text-align: justify;\">Trong m\u00e3 m\u00e0u CSS, b\u1ea1n c\u00f3 nhi\u1ec1u c\u00e1ch vi\u1ebft c\u00f9ng m\u1ed9t m\u00e0u. Ch\u1ecdn c\u00e1ch n\u00e0o t\u00f9y t\u00ecnh hu\u1ed1ng: HEX g\u1ecdn cho m\u00e0u c\u1ed1 \u0111\u1ecbnh, HSL ti\u1ec7n khi c\u1ea7n d\u1ea3i s\u00e1ng t\u1ed1i, bi\u1ebfn CSS \u0111\u1ec3 qu\u1ea3n l\u00fd c\u1ea3 b\u1ed9 m\u00e0u m\u1ed9t ch\u1ed7. Ph\u1ea7n n\u00e0y ch\u1ec9 c\u00e1ch l\u00e0m th\u1ef1c t\u1ebf.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">B\u1ed1n c\u00e1ch vi\u1ebft m\u00e0u trong CSS<\/h3>\n<pre>.box-1 { color: #2563EB; }                    \/* HEX *\/\r\n.box-2 { color: rgb(37, 99, 235); }           \/* RGB *\/\r\n.box-3 { color: hsl(221, 83%, 53%); }         \/* HSL *\/\r\n.box-4 { color: hsl(221 83% 53% \/ 0.5); }     \/* HSL + trong su\u1ed1t *\/<\/pre>\n<p style=\"text-align: justify;\">HSL \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n t\u1ea1o m\u00e0u \u0111\u1eadm v\u00e0 nh\u1ea1t t\u1eeb m\u1ed9t t\u00f4ng. Gi\u1eef nguy\u00ean s\u1ed1 M\u00e0u s\u1eafc v\u00e0 \u0110\u1ed9 b\u00e3o h\u00f2a, ch\u1ec9 \u0111\u1ed5i \u0110\u1ed9 s\u00e1ng, b\u1ea1n c\u00f3 ngay m\u1ed9t d\u1ea3i m\u00e0u \u0111\u1ed3ng b\u1ed9 m\u00e0 kh\u00f4ng c\u1ea7n d\u00f2 t\u1eebng m\u00e3.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">D\u00f9ng bi\u1ebfn CSS \u0111\u1ec3 qu\u1ea3n l\u00fd c\u1ea3 b\u1ea3ng m\u00e0u<\/h3>\n<p style=\"text-align: justify;\">Khai b\u00e1o b\u1ea3ng m\u00e0u m\u1ed9t l\u1ea7n b\u1eb1ng bi\u1ebfn, r\u1ed3i t\u00e1i s\u1eed d\u1ee5ng kh\u1eafp n\u01a1i. Khi c\u1ea7n \u0111\u1ed5i th\u01b0\u01a1ng hi\u1ec7u, b\u1ea1n ch\u1ec9 s\u1eeda m\u1ed9t ch\u1ed7.<\/p>\n<pre>:root {\r\n  --color-primary: #2563EB;\r\n  --color-dark: #1E3A8A;\r\n  --color-text: #1F2937;\r\n  --color-bg: #EFF6FF;\r\n}\r\n\r\n.header { background: var(--color-primary); }\r\n.title  { color: var(--color-text); }\r\n.panel  { background: var(--color-bg); }<\/pre>\n<ol style=\"padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\">Ch\u1ecdn 4 \u0111\u1ebfn 6 m\u00e0u c\u1ed1t l\u00f5i cho th\u01b0\u01a1ng hi\u1ec7u.<\/li>\n<li style=\"margin-bottom: 10px;\">Khai b\u00e1o ch\u00fang trong <code>:root<\/code> b\u1eb1ng c\u00fa ph\u00e1p <code>--ten-bien<\/code>.<\/li>\n<li style=\"margin-bottom: 10px;\">G\u1ecdi l\u1ea1i b\u1eb1ng <code>var(--ten-bien)<\/code> \u1edf m\u1ecdi th\u00e0nh ph\u1ea7n.<\/li>\n<li style=\"margin-bottom: 10px;\">Khi c\u1ea7n \u0111\u1ed5i t\u00f4ng, s\u1eeda gi\u00e1 tr\u1ecb \u1edf <code>:root<\/code>, to\u00e0n site c\u1eadp nh\u1eadt theo.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">C\u00e1ch n\u00e0y gi\u1ea3m l\u1ed7i l\u1ec7ch m\u00e0u gi\u1eefa c\u00e1c trang v\u00e0 gi\u00fap b\u1ea1n l\u00e0m dark mode nhanh h\u01a1n b\u1eb1ng c\u00e1ch g\u00e1n b\u1ed9 bi\u1ebfn kh\u00e1c. T\u00e0i li\u1ec7u tham kh\u1ea3o \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 gi\u00e1 tr\u1ecb m\u00e0u trong CSS c\u00f3 t\u1ea1i <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\" target=\"_blank\" rel=\"nofollow noopener\">MDN Web Docs<\/a>.<\/p>\n<h2 id=\"section7\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">C\u00e1ch l\u1ea5y v\u00e0 copy m\u00e3 m\u00e0u nhanh<\/h2>\n<p style=\"text-align: justify;\">Nhi\u1ec1u l\u00fac b\u1ea1n th\u1ea5y m\u1ed9t m\u00e0u \u0111\u1eb9p tr\u00ean \u1ea3nh ho\u1eb7c website kh\u00e1c v\u00e0 mu\u1ed1n l\u1ea5y \u0111\u00fang m\u00e3 m\u00e0u \u0111\u00f3. C\u00f3 v\u00e0i c\u00e1ch nhanh g\u1ecdn, kh\u00f4ng c\u1ea7n c\u00e0i ph\u1ea7n m\u1ec1m n\u1eb7ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c ph\u01b0\u01a1ng \u00e1n theo th\u1ee9 t\u1ef1 ti\u1ec7n d\u1ee5ng.<\/p>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\"><strong>C\u00f4ng c\u1ee5 Eyedropper c\u1ee7a tr\u00ecnh duy\u1ec7t:<\/strong> Trong DevTools c\u1ee7a Chrome, m\u1edf b\u1ea3ng ch\u1ecdn m\u00e0u c\u1ee7a m\u1ed9t thu\u1ed9c t\u00ednh CSS r\u1ed3i b\u1ea5m bi\u1ec3u t\u01b0\u1ee3ng \u1ed1ng h\u00fat \u0111\u1ec3 h\u00fat m\u00e0u b\u1ea5t k\u1ef3 tr\u00ean m\u00e0n h\u00ecnh.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Tr\u00ecnh ch\u1ecdn m\u00e0u trong ph\u1ea7n m\u1ec1m thi\u1ebft k\u1ebf:<\/strong> Photoshop, Illustrator, Figma \u0111\u1ec1u c\u00f3 c\u00f4ng c\u1ee5 \u1ed1ng h\u00fat \u0111\u1ec3 l\u1ea5y m\u00e3 HEX v\u00e0 RGB t\u1ee9c th\u00ec.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>Extension l\u1ea5y m\u00e3 m\u00e0u:<\/strong> C\u00e1c ti\u1ec7n \u00edch color picker tr\u00ean tr\u00ecnh duy\u1ec7t cho ph\u00e9p click v\u00e0o b\u1ea5t k\u1ef3 \u0111i\u1ec3m n\u00e0o c\u1ee7a trang \u0111\u1ec3 copy m\u00e3 m\u00e0u.<\/li>\n<li style=\"margin-bottom: 10px;\"><strong>T\u1eeb file thi\u1ebft k\u1ebf \u0111\u01b0\u1ee3c b\u00e0n giao:<\/strong> N\u1ebfu nh\u1eadn file Figma, b\u1ea1n xem tr\u1ef1c ti\u1ebfp m\u00e3 HEX \u1edf panel b\u00ean ph\u1ea3i khi ch\u1ecdn \u0111\u1ed1i t\u01b0\u1ee3ng.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Sau khi c\u00f3 m\u00e3, h\u00e3y l\u01b0u c\u1ea3 b\u1ed9 m\u00e0u v\u00e0o m\u1ed9t file style ri\u00eang ho\u1eb7c bi\u1ebfn CSS nh\u01b0 ph\u1ea7n tr\u00ean. \u0110\u1eebng \u0111\u1ec3 m\u00e3 m\u00e0u n\u1eb1m r\u1ea3i r\u00e1c trong code, v\u00ec m\u1ed7i l\u1ea7n s\u1eeda th\u01b0\u01a1ng hi\u1ec7u b\u1ea1n s\u1ebd ph\u1ea3i d\u00f2 l\u1ea1i t\u1eebng ch\u1ed7.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">Checklist tr\u01b0\u1edbc khi ch\u1ed1t b\u1ea3ng m\u00e0u cho d\u1ef1 \u00e1n<\/h3>\n<ul style=\"list-style-type: disc; padding-left: 20px; margin-bottom: 25px; color: #1f2937;\">\n<li style=\"margin-bottom: 10px;\">\u0110\u00e3 t\u00e1ch r\u00f5 m\u00e0u cho web (HEX\/RGB) v\u00e0 m\u00e0u cho in (CMYK) ch\u01b0a.<\/li>\n<li style=\"margin-bottom: 10px;\">\u0110\u1ed9 t\u01b0\u01a1ng ph\u1ea3n gi\u1eefa ch\u1eef v\u00e0 n\u1ec1n c\u00f3 \u0111\u1ea1t m\u1ee9c d\u1ec5 \u0111\u1ecdc kh\u00f4ng.<\/li>\n<li style=\"margin-bottom: 10px;\">B\u1ed9 m\u00e0u c\u00f3 t\u1ed1i \u0111a 1 \u0111\u1ebfn 2 m\u00e0u ch\u1ee7 \u0111\u1ea1o, tr\u00e1nh r\u1ed1i m\u1eaft.<\/li>\n<li style=\"margin-bottom: 10px;\">\u0110\u00e3 l\u01b0u m\u00e3 m\u00e0u v\u00e0o bi\u1ebfn CSS ho\u1eb7c file style t\u1eadp trung.<\/li>\n<li style=\"margin-bottom: 10px;\">\u0110\u00e3 th\u1eed m\u00e0u tr\u00ean c\u1ea3 n\u1ec1n s\u00e1ng v\u00e0 n\u1ec1n t\u1ed1i n\u1ebfu site c\u00f3 dark mode.<\/li>\n<\/ul>\n<div style=\"display: flex; flex-wrap: wrap; background-color: #fff; border: 1.5px solid #BFDBFE; box-shadow: 0 8px 20px rgba(37,99,235,0.08); border-radius: 12px; overflow: hidden; margin: 35px 0;\">\n<div style=\"flex: 1; min-width: 250px; background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center;\">\n<div>\n<p style=\"color: white; font-size: 34px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: bold; margin: 0; line-height: 1.1;\">Thu\u00ea VPS InterData<\/p>\n<p style=\"color: #dbeafe; font-size: 15px; font-weight: 600; margin-top: 12px;\">To\u00e0n quy\u1ec1n root, h\u1ed7 tr\u1ee3 k\u1ef9 thu\u1eadt 24\/7, h\u1ee3p cho dev\/test v\u00e0 t\u1ef1 host c\u00f4ng c\u1ee5<\/p>\n<\/div>\n<\/div>\n<div style=\"flex: 2; padding: 25px; min-width: 300px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; margin-top: 0; font-size: 20px;\">C\u1ea7n m\u00f4i tr\u01b0\u1eddng ri\u00eang \u0111\u1ec3 d\u1ef1ng v\u00e0 th\u1eed giao di\u1ec7n<\/h3>\n<p style=\"text-align: justify; font-size: 15px; margin-bottom: 15px;\">Khi mu\u1ed1n d\u1ef1ng b\u1ea3n demo, c\u00e0i WordPress test hay ch\u1ea1y c\u00f4ng c\u1ee5 thi\u1ebft k\u1ebf n\u1ed9i b\u1ed9, m\u1ed9t VPS ri\u00eang cho b\u1ea1n to\u00e0n quy\u1ec1n c\u1ea5u h\u00ecnh m\u00e0 kh\u00f4ng \u0111\u1ee5ng ch\u1ea1m hosting chung. B\u1ea1n t\u1ef1 c\u00e0i stack, t\u1ef1 b\u1eadt cache, t\u1ef1 d\u1ef1ng m\u00f4i tr\u01b0\u1eddng staging \u0111\u1ec3 duy\u1ec7t m\u00e0u tr\u01b0\u1edbc khi l\u00ean production.<\/p>\n<p><a style=\"background: linear-gradient(90deg, #2563EB 0%, #1E3A8A 100%); color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 8px; font-size: 15px; display: inline-block; box-shadow: 0 5px 15px rgba(37,99,235,0.3);\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">B\u1eaft \u0111\u1ea7u v\u1edbi VPS \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<h2 id=\"section8\" style=\"color: #1e3a8a; font-size: 24px; font-weight: bold; text-align: left; border-left: 5px solid #2563EB; padding-left: 15px; margin-top: 40px; margin-bottom: 20px; line-height: 1.4;\">C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 b\u1ea3ng m\u00e3 m\u00e0u<\/h2>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">M\u00e3 m\u00e0u HEX v\u00e0 RGB c\u00f3 g\u00ec kh\u00e1c nhau?<\/h3>\n<p style=\"text-align: justify;\">Ch\u00fang m\u00f4 t\u1ea3 c\u00f9ng m\u1ed9t h\u1ec7 m\u00e0u m\u00e0n h\u00ecnh, ch\u1ec9 kh\u00e1c c\u00e1ch vi\u1ebft. HEX d\u00f9ng chu\u1ed7i 6 k\u00fd t\u1ef1 sau d\u1ea5u #, g\u1ecdn cho code. RGB d\u00f9ng ba s\u1ed1 t\u1eeb 0 \u0111\u1ebfn 255, d\u1ec5 \u0111\u1ecdc b\u1eb1ng m\u1eaft v\u00e0 ti\u1ec7n th\u00eam \u0111\u1ed9 trong su\u1ed1t qua <code>rgba()<\/code>. C\u00f9ng m\u1ed9t m\u00e0u, b\u1ea1n c\u00f3 th\u1ec3 vi\u1ebft theo c\u1ea3 hai ki\u1ec3u.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">V\u00ec sao m\u00e0u tr\u00ean web in ra b\u1ecb kh\u00e1c?<\/h3>\n<p style=\"text-align: justify;\">V\u00ec m\u00e0n h\u00ecnh d\u00f9ng h\u1ec7 m\u00e0u c\u1ed9ng RGB ph\u00e1t s\u00e1ng, c\u00f2n m\u00e1y in d\u00f9ng h\u1ec7 m\u00e0u tr\u1eeb CMYK b\u1eb1ng m\u1ef1c. Nhi\u1ec1u m\u00e0u RGB r\u1ef1c r\u1ee1 n\u1eb1m ngo\u00e0i d\u1ea3i m\u00e0u m\u1ef1c in t\u00e1i t\u1ea1o \u0111\u01b0\u1ee3c, n\u00ean in ra s\u1ebd x\u1ec9n h\u01a1n. H\u00e3y thi\u1ebft k\u1ebf \u1edf ch\u1ebf \u0111\u1ed9 CMYK v\u00e0 in th\u1eed tr\u01b0\u1edbc khi in s\u1ed1 l\u01b0\u1ee3ng l\u1edbn.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">L\u00e0m sao copy m\u00e3 m\u00e0u t\u1eeb m\u1ed9t h\u00ecnh \u1ea3nh?<\/h3>\n<p style=\"text-align: justify;\">D\u00f9ng c\u00f4ng c\u1ee5 \u1ed1ng h\u00fat (eyedropper) trong ph\u1ea7n m\u1ec1m thi\u1ebft k\u1ebf nh\u01b0 Photoshop, Figma, ho\u1eb7c trong DevTools c\u1ee7a tr\u00ecnh duy\u1ec7t. B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 c\u00e0i extension color picker \u0111\u1ec3 click v\u00e0o \u0111i\u1ec3m b\u1ea5t k\u1ef3 tr\u00ean m\u00e0n h\u00ecnh v\u00e0 copy ngay m\u00e3 HEX. Sau \u0111\u00f3 d\u00e1n v\u00e0o code ho\u1eb7c file style c\u1ee7a b\u1ea1n.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">B\u1ea3ng m\u00e0u pastel d\u00f9ng cho lo\u1ea1i website n\u00e0o?<\/h3>\n<p style=\"text-align: justify;\">B\u1ea3ng m\u00e0u pastel h\u1ee3p v\u1edbi th\u01b0\u01a1ng hi\u1ec7u m\u1ec1m m\u1ea1i: m\u1ef9 ph\u1ea9m, th\u1eddi trang nh\u1eb9 nh\u00e0ng, blog c\u00e1 nh\u00e2n, d\u1ecbch v\u1ee5 c\u01b0\u1edbi, spa. V\u00ec \u0111\u1ed9 b\u00e3o h\u00f2a th\u1ea5p, pastel d\u1ecbu m\u1eaft nh\u01b0ng d\u1ec5 thi\u1ebfu t\u01b0\u01a1ng ph\u1ea3n. H\u00e3y gh\u00e9p pastel v\u1edbi m\u1ed9t m\u00e0u \u0111\u1eadm cho ch\u1eef v\u00e0 n\u00fat b\u1ea5m \u0111\u1ec3 n\u1ed9i dung v\u1eabn r\u00f5 r\u00e0ng.<\/p>\n<h3 style=\"color: #1e3a8a; font-size: 20px; font-weight: bold; margin-top: 30px; margin-bottom: 12px;\">N\u00ean d\u00f9ng HEX hay bi\u1ebfn CSS cho d\u1ef1 \u00e1n l\u1edbn?<\/h3>\n<p style=\"text-align: justify;\">V\u1edbi d\u1ef1 \u00e1n nhi\u1ec1u trang, h\u00e3y khai b\u00e1o b\u1ea3ng m\u00e3 m\u00e0u b\u1eb1ng bi\u1ebfn CSS trong <code>:root<\/code> r\u1ed3i g\u1ecdi l\u1ea1i b\u1eb1ng <code>var()<\/code>. C\u00e1ch n\u00e0y gi\u00fap \u0111\u1ed5i t\u00f4ng to\u00e0n site ch\u1ec9 b\u1eb1ng v\u00e0i d\u00f2ng, tr\u00e1nh l\u1ec7ch m\u00e0u gi\u1eefa c\u00e1c trang v\u00e0 d\u1ef1ng dark mode d\u1ec5 h\u01a1n nhi\u1ec1u so v\u1edbi r\u1ea3i m\u00e3 HEX kh\u1eafp n\u01a1i.<\/p>\n<div style=\"border-top: 2px dashed #BFDBFE; margin-top: 50px; padding-top: 30px;\">\n<h3 style=\"font-family: 'Be Vietnam Pro', sans-serif; color: #1e3a8a; font-size: 22px; font-weight: bold; margin-bottom: 15px;\">Ch\u1ed1t l\u1ea1i: d\u00f9ng \u0111\u00fang m\u00e3, \u0111\u00fang n\u01a1i<\/h3>\n<p style=\"text-align: justify;\">M\u1ed9t b\u1ea3ng m\u00e3 m\u00e0u chu\u1ea9n gi\u00fap b\u1ea1n l\u00e0m vi\u1ec7c nhanh v\u00e0 tr\u00e1nh l\u1ec7ch t\u00f4ng gi\u1eefa m\u00e0n h\u00ecnh v\u1edbi b\u1ea3n in. Nh\u1edb ba \u0111i\u1ec1u: HEX v\u00e0 RGB cho web, CMYK cho in, v\u00e0 lu\u00f4n gom m\u00e0u v\u00e0o bi\u1ebfn CSS \u0111\u1ec3 qu\u1ea3n l\u00fd m\u1ed9t ch\u1ed7. Khi c\u1ea7n d\u1ea3i nh\u1eb9 nh\u00e0ng th\u00ec ch\u1ecdn pastel, khi c\u1ea7n giao di\u1ec7n chuy\u00ean nghi\u1ec7p th\u00ec gi\u1eef 1 \u0111\u1ebfn 2 m\u00e0u ch\u1ee7 \u0111\u1ea1o c\u00f9ng v\u00e0i m\u1ee9c x\u00e1m. L\u01b0u trang n\u00e0y l\u1ea1i \u0111\u1ec3 copy m\u00e3 b\u1ea5t c\u1ee9 l\u00fac n\u00e0o b\u1ea1n d\u1ef1ng website hay chu\u1ea9n b\u1ecb file thi\u1ebft k\u1ebf.<\/p>\n<div style=\"background: #EFF6FF; border: 1px solid #2563EB; padding: 30px; margin-top: 25px; border-radius: 12px; text-align: center;\">\n<p style=\"font-family: 'Be Vietnam Pro', sans-serif; font-size: 20px; font-weight: bold; color: #1e3a8a; margin-top: 0;\">S\u1eb5n m\u00e0u, s\u1eb5n \u00fd t\u01b0\u1edfng, ch\u1ec9 c\u00f2n thi\u1ebfu ch\u1ed7 ch\u1ea1y website<\/p>\n<p style=\"font-size: 15px; margin-bottom: 20px; color: #4b5563;\">B\u1eaft \u0111\u1ea7u v\u1edbi m\u1ed9t VPS c\u00f3 SSD NVMe v\u00e0 to\u00e0n quy\u1ec1n c\u1ea5u h\u00ecnh \u0111\u1ec3 d\u1ef1ng trang theo \u0111\u00fang b\u1ed9 m\u00e0u c\u1ee7a b\u1ea1n.<\/p>\n<p><a style=\"background: #2563EB; color: #ffffff; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 6px; display: inline-block;\" href=\"https:\/\/interdata.vn\/thue-vps\/\" target=\"_blank\" rel=\"noopener\">Xem b\u1ea3ng gi\u00e1 VPS \u27f6<\/a><\/p>\n<\/div>\n<\/div>\n<p style=\"text-align: justify; font-size: 13px; font-style: italic; color: #6b7280; margin-top: 30px; border-top: 1px solid #E5E7EB; padding-top: 15px;\"><span style=\"font-size: 100%;\"><em>N\u1ed9i dung trong b\u00e0i ch\u1ec9 mang t\u00ednh tham kh\u1ea3o. Gi\u00e1 tr\u1ecb m\u00e3 m\u00e0u, \u0111\u1eb7c bi\u1ec7t l\u00e0 CMYK, c\u00f3 th\u1ec3 thay \u0111\u1ed5i theo ph\u1ea7n m\u1ec1m thi\u1ebft k\u1ebf, h\u1ed3 s\u01a1 m\u00e0u ICC, lo\u1ea1i gi\u1ea5y v\u00e0 lo\u1ea1i m\u1ef1c c\u1ee7a t\u1eebng m\u00e1y in. C\u00fa ph\u00e1p CSS c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb kh\u00e1c nhau gi\u1eefa c\u00e1c phi\u00ean b\u1ea3n tr\u00ecnh duy\u1ec7t. B\u1ea1n n\u00ean in th\u1eed, ki\u1ec3m tra tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb v\u00e0 sao l\u01b0u file tr\u01b0\u1edbc khi \u00e1p d\u1ee5ng cho s\u1ea3n ph\u1ea9m ch\u00ednh th\u1ee9c.<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea3ng m\u00e3 m\u00e0u l\u00e0 th\u1ee9 b\u1ea1n c\u1ea7n m\u1edf ra m\u1ed7i khi thi\u1ebft k\u1ebf website, ch\u1ec9nh CSS hay chu\u1ea9n b\u1ecb file in nh\u01b0ng l\u1ea1i qu\u00ean m\u1ea5t m\u00e3 HEX c\u1ee7a m\u1ed9t m\u00e0u quen thu\u1ed9c. Thay v\u00ec d\u00f2 t\u1eebng ch\u00fat b\u1eb1ng m\u1eaft, b\u1ea1n copy \u0111\u00fang m\u00e3 HEX, RGB, CMYK v\u00e0 d\u00e1n th\u1eb3ng v\u00e0o code ho\u1eb7c ph\u1ea7n m\u1ec1m. Trang<\/p>\n","protected":false},"author":2,"featured_media":41728,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100],"tags":[],"class_list":["post-41725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/41725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/comments?post=41725"}],"version-history":[{"count":19,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/41725\/revisions"}],"predecessor-version":[{"id":42565,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/41725\/revisions\/42565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media\/41728"}],"wp:attachment":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media?parent=41725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/categories?post=41725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/tags?post=41725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}