.stick .tools {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.stick .tools {
    position: fixed;
    top: 0px;
    z-index: 9999;
    width: 100%;
    transition: all 0.8 ease-out;
    background: #fff;
}

.stick .tool-item-font .tools {
    position: relative;    
}




   .tools {
    gap: 20px;
    background: #FFF;
    margin: 5px 0 15px 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: all 0.5s ease-out;
    padding: 10px 20px;

}



      .global-controls-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
           flex-wrap: wrap;
        }



        .global-controls {
          display: flex;
          align-items: center;
          gap: 10px;
          background: white;
          border-radius: 8px;
      }

        /* Transform & Align Controls */
        .transform-align-control {
            display: flex;
            gap: 20px;
            order: 1;
        }
        .transform-control button,
        .align-control button {
            background-color: #555;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }
        .transform-control button.active,
        .align-control button.active {
            background-color: #777;
        }
        .transform-control button:hover,
        .align-control button:hover {
            background-color: #666;
        }

        /* Size Font Control */
        .size-font-control {
            order: 3;
            flex-grow: 0.5;
            margin-right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .size-font-control label {   
        color: #666;       
                    
        }
 
        /* Text Input Control */
        .text-input-control {
            display: flex;
            position: relative;
            order: 2;
            flex-grow: 1;
            gap: 0px;
        }
        #text-input {
            padding: 5px;
            font-size: 1em;
            width: 100%;
            border-radius: 4px;
            font-size: 15px;
            outline: none;
            background-color: transparent;
            white-space: nowrap;
            overflow-x: auto;
            border: 1px solid;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right-width: 0;
            border-color: #cacaca;
            box-sizing: border-box;
            padding: 5px 12px 5px;


        }
        .text-input-button {
            background-color: #555;
            color: white;
            border: none;
            padding: 5px 15px;
            cursor: pointer;
            border-radius: 4px;
        }
        .text-input-button:hover {
            background-color: #666;
        }

        /* Reset All Button & Toggle View Control */
        .resetAllBtn-toggleView-control {
            display: flex;
            gap: 15px;
            order: 4;
        }
        .resetAllBtn-toggleView-control a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
        }

        /* Responsive CSS */
        @media (max-width: 1024px) {
            .global-controls-row {
                flex-wrap: wrap;
                gap: 10px;
            }
            .transform-align-control {
                order: 1;
                justify-content: space-around;
                margin-bottom: 10px;
            }
            .resetAllBtn-toggleView-control {
                order: 2;
                justify-content: center;
                margin-bottom: 10px;
            }
            .size-font-control {
                order: 3;
                width: 100%;
                margin-right: 0;
            }
            .text-input-control {
                order: 4;
                width: 100%;
            }
        }


         @media (max-width: 480px) {
            .global-controls-row {
                flex-wrap: wrap;
            }
            .transform-align-control {
                order: 1;
                width: 100%;
            }
            .resetAllBtn-toggleView-control {
                order: 2;
                justify-content: center;
                margin-bottom: 10px;
                display: none;
            }
            .size-font-control {
                order: 3;
                width: 100%;
                margin-right: 0;
            }
            .text-input-control {
                order: 4;
                width: 100%;
            }
        }




  .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 4px;
  list-style: none;
  padding: 0;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: none;
  overflow: hidden;
}

.dropdown-menu li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}


button[data-transform] {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: background 0.2s ease;
}

button[data-transform]:hover,
button[data-transform].active {
  background: #ffefef;
  color: #e74c3c;
}


button[data-align] {
  background: transparent;
  border: none;
  padding: 7px 5px;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: background 0.2s ease;
}

button[data-align]:hover, button[data-align].active {
    background: #ffefef;
    color: #e74c3c;
}


.dropdown-button {
    border-left: 1px solid #ccc;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background-color: #eaeaea;
    border-color: #cacaca;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: background-color 125ms, box-shadow 125ms, border-color 125ms;
}

.dropdown-button .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    transition: transform 0.3s ease;
}

.global-controls label {
    display: flex
;
    align-items: baseline;
    gap: 2px;
    font-size: 14px;
    white-space: nowrap;
    color: #666;
}








input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px; /* Chiều cao thanh trượt */
    border-radius: 4px;
    background: #ccc;
    cursor: pointer;
/*    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);*/
    transition: background 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #888;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
/*    margin-top: -8px; /* Căn giữa với thanh trượt */
    transition: background 0.3s ease, border-color 0.3s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    background: #f0f0f0;
    border-color: #555;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #888;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

input[type="range"]:hover::-moz-range-thumb {
    background: #f0f0f0;
    border-color: #555;
}

input[type="range"]::-moz-range-track {
    background: #ccc;
    height: 6px;
    border-radius: 4px;
}

#resetAllBtn, #toggleView, #clear-all-favorites {    
    background-color: #FAFBFC; 
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #24292E;
    cursor: pointer;
    display: inline-block;
    padding: 6px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  
  }

  /*#resetAllBtn:hover .icon-reset path {
    fill: #00bfff; /* Màu xanh dương khi hover */

}